week1.md

웹 접근성은 무엇일까?

• 웹사이트에서 제공하는 정보를 차별, 제한없이 동등하게 이용할 수 있도록 보장함

• 신체적, 환경적 조건에 관계없이 제공되어야함

  • 장애인 및 고령자를 포함한 모든 사람
  • 다양한 플랫폼 및 디바이스와 웹 브라우저 등 모든 환경

• 스크린 리더 : 시각장애인을 위해 화면을 텍스트로 읽어주는 기능

  • 대화형 요소 (a, button, input 태그 등 사용자와 상호작용할 수 있도록 설계된 태그)에 접근하고 읽어줌

• 스크린 리더가 앱을 읽는 방법

  • html 엘리먼트(요소)를 기준으로 앱을 읽음
  • 순차탐색색을 하는데, 손가락으로 스와이프하면 앞뒤로 이동
  • 스크린 터치 → 터치한 영역에 있는 요소 선택
  • 로터라는 유틸리티를 통해 머리말, 단어, 글자 단위로 탐색 가능

• Accessible Name

  • 스크린 리더가 요소를 포커스했을 때 읽는 값
  • 다음 중 하나
    • author : 특별한 속성을 사용해서 정하는 값 (aria-label, alt 등)
    • contents: 요소 텍스트 값
    • author가 우선순위가 높음

• Role

  • html attribute role.
  • 스크린리더가 요소를 어떤 방식으로 다룰지 결정하는 속성
  • role마다 기대되는 스크린리더 동작이 있음.
  • ex- role=”button”
    • 요소의 accessible name을 읽은 뒤, ‘버튼’을 붙여 읽음
    • 자식 요소의 accessible name을 모아 contents로 사용

접근성을 위한 개발은 어떤 것들이 있을까?

• 기본적인 방법 : 웹 표준 지키기
• Semantic tag 잘 활용하기
  • 시맨틱 태그는 암시적으로 role을 갖고 있음
  • : role=”button”
  • : role=”link”
  • : role=”checkbox”
  • 적절한 시맨틱 태그를 사용하는 것만으로도 스크린 리더를 매우 잘 활용할 수 있음
• img 태그의 alt 속성 명시하기
  • 시각에 어려움이 있으면 이미지를 이해할 수 없어서, 이미지가 전달하는 정보를 alt에 명시해서 스크린 리더가 읽을 수 있게 함
  • 반드시 alt를 명시해야 하는 이유
    • alt를 명시하지 않으면 스크린 리더가 src 값을 읽어버림
    • 따라서 의미를 전달할 필요 없는 불필요한 이미지는 명시를 안하는 것이 아니라, 빈값 ‘’으로 채워주면 스크린 리더가 읽지 않고 지나감
• 기타
  • 녹내장인 분들을 위해 명암 민감도를 신경쓰고, 글꼴 크기를 확대할 수 있는 방법도 제공하는 등
  • 선택/선택 해제 가능한 영역은 반드시 checkbox 사용하기. 그렇게 되면, 스크린 리더는 해당 영역의 텍스트 콘텐츠를 읽은 후 ‘체크박스’라고 알려주고, 사용자가 터치함에 따라 ‘선택됨’, ‘선택해제’도 말해주기 때문이다.

접근성을 위한 개발을 꼭 해야할까?

프론트엔드 개발자라면 반드시 웹 접근성을 고려해야한다고 생각한다.

장애인과 비장애인은 모두 동등한 서비스, 동등한 사용자 경험을 누릴 권리가 있다.

프론트엔드 개발자는 우리가 구현하는 서비스를 사용할 사용자의 경험이 가장 중요한 부분이기 때문에, 시각 사용자를 위한 웹 퍼블리싱 및 기능을 구현하는 것과 동일한 중요도로 장애인을 위한 접근성 개선 구현을 해야 한다고 생각합니다.

---

검색엔진 최적화(SEO)를 알아보자

• Search Engine Optimization
• 웹 페이지가 검색 결과에서 좀더 높은 순위가 나올 수 있도록 하는 작업
• 검색엔진의 역할
  • 고객이 검색한 쿼리에 고객이 알고자하는 정보가 담겨있기 때문에, 고객의 요청한 의도와 가장 가까운 내용을 찾아 제공해줌
  • 이 과정에서 고객이 요청한 의도와 얼마나 내용이 가까운지 랭킹을 매겨서 순서대로 노출시키게 되는데, 이 랭킹에서 우선순위를 차지하여 상단에 나타나고자 검색엔진 최적화 과정이 필요함

검색엔진 최적화를 하는 방법에는 무엇이 있을까?

• 웹 표준 지키기 (시맨틱 태그 등)
  • 어떤 OS나 브라우저를 사용해도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙
  • 웹 크롤러 봇은 웹페이지를 탐색해서 분류하는데, 시멘틱 태그를 의미에 맞게 사용하는 등 표준을 지켜 웹페이지를 만들면 크롤러 봇이 이해하기 쉬워짐
• http가 아닌 https 보안 프로토콜 사용
  • 구글이 https 프로토콜을 더 선호하기 때문
• URL 최적화
  • 서브도메인보다 서브 폴더 형식 사용
• 사이트맵
  • 웹사이트 내 모든 페이지를 나열한 파일. 루트 디렉터리에 위치하여 파일 생성
• title 태그와 meta description 태그 잘 명시
• canonical 태그 (안에 들어가는 코드) 잘 명시
• 이미지 alt 속성 명시
  • 구글봇은 이미지를 alt 속성으로 인식
• 페이지 로딩 속도
  • 로딩 속도가 짧을 수록 SEO 우선순위가 높아짐