이 글에서는 웹 접근성과 HTML을 활용한 웹 접근성을 알아볼 예정입니다.
What is Web Accessibility?
웹 접근성을 얘기할 때는 말 그대로 모든 유저가 "웹 사이트를 이용할 수 있는가"를 얘기합니다. 비장애인 분들은 사이트를 이용하실 때 큰 불편함이 없으시겠죠. 하지만 장애가 있으신 분들 혹은 고령자 분들이 웹 사이트를 이용할 때 부분적으로 한계가 있습니다. 그런 부분을 고려해서 모두가 웹사이트를 이용할 수 있게 하는 방법을 얘기합니다.
What should we consider for web accessibiltiy?
웹 접근성을 고려해서 코딩을 할 때는 크게 6가지 사항을 고려하셔야 합니다.
- auditory (청각)
- cognitive (인지)
- neurological (신경)
- physical (운동성)
- speech (말)
- visual (시각)
How do we code for the accessibility with HTML?
그럼 웹 접근성을 향상 시키기 위해서 어떻게 코딩을 해아할까요? 그 정답은 의미론적(Semantic) 태그에 있습니다. 예전 글에서도 설명을 했듯이 의미론적 요소들을 사용해야 코드가 읽기 쉬워진다고 했습니다. 그거는 screen readers한테도 적용이 되는 이야기입니다.
그럼 어떤 종류의 의미론적 요소들을 사용해야할까요?
첫번째로 heading이 있습니다. headings는 <h1>에서 <h6>로 정의가 되는데요. 검색 엔진은 여러분의 웹 페이지에 구조나 내용에 색인을 달 때 heading을 사용합니다. 그래서 사용자들이 웹 페이지를 heading를 통해서 훑어보기 때문에 굉장히 중요하게 작용합니다.
두번째로는 alt 속성이 있습니다. alt 속성은 이미지를 불러오지 못했을 때 그 이미지를 text로 설명해주는 역할을 가지고 있습니다.
세번째로는 기본 언어(Language)가 있습니다. 기본 언어를 설정하는건 스크린 리더나 검색 엔진에게는 굉장히 중요한 일입니다. 정확한 언어를 설정해야 다른 기술들(ex. 크롬번역기)과 연동이 될때 큰 충돌이 없습니다. 예를들어 한국어로 된 사이트에 <html lang="en">이라고 하게 되면 크롬은 계속 사이트를 번역하려고 시도할겁니다.
지금까지 접근성과 관련된 기본 HTML 문법을 알아봤는데요. Button, title 등 접근성과 관련해서 중요한 것들이 많지만 그것들은 나중에 다루기로 하겠습니다.
'Front-end > HTML' 카테고리의 다른 글
| 폼(Form)과 유효성 검사 (0) | 2020.04.21 |
|---|---|
| 의미론적(Semantic) 태그 (0) | 2020.04.20 |
| HTML 첫 걸음 (0) | 2020.04.19 |