HTML을 배우던 어느날, 'aria-label'을 보고 감격했다. 이거 너무 멋져!! '웹 서비스를 원활하게 하는 건 코드 한 끝 차이구나'라는 생각을 했다. 오늘 내가 쓴 코드가 내일의 천 만 사용자를 끌어올수도, 버그만 유발하는 악성 페이지가 될 수도 있다. 모두의, 모두를 위한 웹의 접근성을 높이는 코드 작성법을 알아보았다.
웹 개발에서 접근성(Accessibility)이란 최대한 많은 사람들,
웹 사이트에 접근이 다소 어려운 사람들도 이 웹 사이트를 사용할 수 있도록 만드는 것이다.
"웹은 근본적으로 모든 사람들을 위해 설계되었다. 그들의 하드웨어, 소프트웨어가 무엇인지, 언어, 문화, 지역, 물리적/정신적 능력이 어떻든지 간에" - W3C-Accessibility
HTML and accessibility
의도한 목적에 맞는 HTML elements를 써준다.
= semantic markup을 한다!
- 개발을 쉽게 할 수 있게, 이해할 수 있게 만들어주고,
- 모바일 기기에서 작동을 원활하게 하고,
- 검색 최적화(SEO)에 도움을 준다. (div를 남발하지 말자!)
Text content
- headings, paragraphs, list 등 구조에 맞게 작성한다.
- clear language를 사용한다. ('-', 축약형, 반복 피하기)
- 다른 테이블 셀을 쓰지 말자.
UI controls
- 유저가 사용하는 버튼, 링크, 폼에 관한 컨트롤(native-keyboard-accessibility)을 사용한다.
Meaningful text labels
- 의미있는 text label을 붙여준다.
ex) button을 단순히 "Click here"로 쓰지 않고, 'Click me! button', 'Fill me in: edit text'와 같이 설명해줄 것
Accessible data tables
- screen reader가 표의 행과 열을 구분할 수 있도록 하기 위해서는 table에 scope을 붙여준다. (
<th>, <tb>)
Text alternatives
<img src="" alt="">alt 설명 넣어주기
CSS
- 스타일적 요소를 user-friendly하게 배치하는 부분
- 알맞은 폰트, 자간을 쓰고 텍스트 색이나 대조되는 배경색 쓰기
- 강조, 축약 등 강조할 부분은 제대로 강조해주기 등
JavaScript
- unobstrusive(나서지 않는, 삼가는) Javascript!
- 에러를 막고, client-side form을 제공하기 위해서는 많은 코드를 짜지 않는다.
WAI-ARIA
- Web Accessibility Initiative - Accessible Rich Internet Applications
- 시각 장애, 마우스를 쓸 수 없는 사용자 등을 위한 웹 접근 향상을 위한 도구
- aria-label="" 로 코드를 설명해 준다.
sr-only와의 차이점은 sr-only는 웹 접근성과는 관련이 없고, CSS의 스타일적 요소로 화면에서 보이지 않아야 할 때 쓴다.
출처 : MDN Web Docs
