# 웹 접근성(Web Accessibility, A11y)이란? 혹시 스크린 리더라고 아시나요? 화면을 볼 수 없는 시각 장애인들에게 현재 화면을 소리내서 읽어주는 프로그램인데요. 인터넷 사용자 중에 2%에서 3%는 스크린 리더를 사용한다고 합니다. 스크린 리더는 HTML 코드를 보고 정보들을 소리내서 읽어 주는데, 만약 사이트를 이용하는데 필요한 정보가 너무 없다면 스크린 리더 사용자는 사이트를 이용하기 어렵거나 아예 이용하지 못하는 경우도 발생합니다. 이런 경우 웹사이트의 접근성이 떨어진다고 표현해요. 웹 접근성이 높은 웹 사이트라고 하면, 넓은 의미에서는 스크린 리더 사용자를 포함한 다양한 장애를 가진 사람들이 웹 사이트를 쉽게 이용할 수 있도록 고려되어 있다는 의미입니다. 최근 웹사이트의 디자인과 애니메이션이 점점 화려해지면서 부작용으로 웹 접근성이 문제로 떠오르고 있어요. 특히 디자인을 예쁘게 하면 할 수록 HTML 기본 태그를 사용하기 보다는 커스텀으로 만든 컴포넌트를 활용하기 때문에 문제는 더 심각해집니다. # 시맨틱 태그(Semantic Tag) 접근성을 개선하기 위해서 필수적으로 사용해야 하는 HTML 문법이 있는데요. 바로 시맨틱 태그입니다. `

`, `

` 같은 태그를 들어보셨을 거에요. `

` 태그로만 웹 페이지를 만들면 스크린 리더에서는 어느 영역에 메뉴가 있고, 어느 영역에 콘텐츠가 있는지 알기 어려운데요. 이런 점을 해결하기 위해서 나온 태그들입니다. 대표적으로 다음과 같은 태그들이 있어요. - `

`: 페이지나 섹션의 머리말. 로고, 제목, 내비게이션 등이 위치할 수 있음 - `

`: 사이트 이동에 필요한 링크 모음. 메뉴, 사이드바 등 내비게이션 역할 - `

`: 페이지의 메인 콘텐츠. 한 페이지에 딱 하나만 사용 - `

`: 주제별 콘텐츠 묶음. 제목(`

~

`) 포함이 일반적 - `
`: 독립적으로 구분 가능한 콘텐츠. 블로그 글, 뉴스 등 - `
`: 보조 콘텐츠. 광고, 관련 링크, 사이드 정보 등 # WAI-ARIA 문법 시맨틱 태그를 사용하면 특정 영역이 어떤 용도인지 `
` 태그 대신 표시해 줄 수 있지만, 구체적으로 어떤 상태인지 알려주기에는 정보가 부족합니다. ![h95mvxv8t-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/220/h95mvxv8t-image.png) 특히 최근에는 예쁜 디자인을 위해서 커스텀 컴포넌트를 만들기도 하는데요. 예를 들어서 위와 같은 드롭다운 컴포넌트의 경우 스크린 리더에서는 이 컴포넌트가 열린 상태인지, 컴포넌트의 옵션에는 어떠한 것들이 있는지 알기 어려운 경우가 많습니다. 이럴 때 사용하는 것이 WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 문법입니다. HTML 태그의 `role` 속성과 `aria-` 로 시작하는 속성등을 사용해서 접근성을 높이기 위한 구체적인 정보를 적어 줄 수 있는데요. ```html

...
도시 선택
``` 위 HTML 코드 예시를 보면 어떤 것이 드롭다운 옵션인지 `role="option"` 을 통해서 알려주고 있고, 선택된 상태인지 `aria-selected`로 알려주고 있습니다. WAI-ARIA의 스펙에는 다양한 속성과 값이 있기 때문에, 다음 참고 문서에서 찾아보면서 사용하는 걸 추천합니다. - WAI-ARIA Role: [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles) - WAI-ARIA 속성들: [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes) # 리액트에서 접근성 높이기 웹사이트를 개발하는 입장에서 모든 코드에 접근성을 고려하는 건 쉽지 않은데요. 완벽한 웹사이트 디자인이 없듯이 완벽한 접근성 고려도 없을 겁니다. 보다 실용적인 관점에서 아래와 같은 순서로 기존 리액트 프로젝트의 접근성을 높여 보세요. 1. 사이트 레이아웃에 `
` 태그 대신 시맨틱 태그를 적용합니다. 2. 커스텀 컴포넌트에 WAI-ARIA `role`과 `aria-` 속성을 지정합니다. - Props와 State를 활용해서 컴포넌트의 현재 상태를 속성 값으로 반영해 주세요. 3. 커스텀 컴포넌트에서 키보드를 지원합니다. - 스크린 리더를 사용하는 사용자는 마우스 커서를 사용할 수 없기 때문에, 터치 이벤트나 클릭 이벤트 말고도 키보드 이벤트를 통해 컴포넌트를 조작할 수 있어야 해요. - `tabIndex` 속성을 적용해 Tab키로 컴포넌트에 포커싱 할 수 있도록 도와주세요. - 엔터, 스페이스, 화살표 키, ESC 키 등을 사용해서 컴포넌트를 조작할 수 있도록 키보드 이벤트를 구현해 주세요. # 접근성 평가하기 모든 최적화는 측정과 평가를 통해서 이루어 집니다. 크롬 개발자 도구의 "Lighthouse" 탭에서 사이트의 성능을 측정하면서 동시에 Accessibility 점수를 측정할 수 있는데요. ![w7gqk35px-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/220/w7gqk35px-image.png) 웹 접근성을 개선하기 전에 우선 내 사이트가 Accessibility를 얼마나 지키고 있는지 점수를 체크해 보세요. 그리고 코드를 개선해 보고 다시 점수를 체크하면서 개선 상황을 확인해 보세요.