[HTML/CSS] A11Y

1. 접근성

• 가능한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 방법
• 통상적으로 장애인만을 대상으로 한다고 생각하지만 실제로는 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함하여 모든 사용자를 대상으로 함

• 시맨틱한 HTML은 *SEO 향상시킴
• 접근성에 대해 고려하는 것은 서비스의 대중적인 이미지를 개선시킴
• 웹 사이트를 휴대폰 사용자, 느린 네트워크 속도 사용자도 사용하기 쉽게 해줌

👉 HTML 요소를 올바른 용도로 사용하기만 해도, 수많은 웹 콘텐츠에 대해 접근성을 극대화할 수 있음 !

* SEO: 검색 엔진 최적화(search engine optimization). 웹 사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정.

2. HTML과 접근성

• *의미론적 HTML(시맨틱 HTML)을 사용하는 것이 중요함

• 제목, 링크 등의 키워드에 중요성을 부여하므로 문서를 찾거나 이해하기 쉬움
• 키보드 접근성이 내장되어 있는 태그의 사용으로 탭이나 엔터를 사용하여 웹 페이지에 접근할 수 있음
• 비의미적인 스파게티 코드보다 파일크기가 가볍고 응답하기 쉬움

👉 의미론적인 HTML을 사용하지 않으면 ?

• 유용한 목차를 검색할 수 없으며, 전체 페이지가 하나의 거대한 블록으로 표시되므로 한 번에 모두 읽어낼 수 있음
• 선택자로 사용할 요소가 없기 때문에 css나 javascript 사용할 때도 어려움

사용 방법

• 목적에 맞는 태그를 사용
• 지나치게 복잡하지 않은 명확한 언어를 사용해야 함
• 주 탐색(<nav>), 바닥글(<footer>), 반복 내용 단위(문서) 등을 줄이려면 적절한 분할 요소를 사용하는 것이 좋음

추가

• 테이블 레이아웃은 과거의 유물
  테이블의 남용은 더 많은 마크업을 요구하며 디자인을 더 융통성 없게 만듦

* 의미론적 HTML: 정보를 의미에 맞는 HTML 태그를 사용하는 작성법

3. ARIA

• 접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications)
• 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성
• HTML을 보충하여 일반적으로 보조 기술이 알 수 없는 상호작용과 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공

구현하려는 기능을 가진 요소가 존재한다면, 의미를 가진 HTML을 우선시 해야함.
의미를 가진 HTML

4. WAI-ARIA

• Web Accessibility Initiative - Accessible Rich Internet Applications
• 브라우저와 보조 기술이 인식하고 사용자에게 진행 상황을 알리는 데 사용할 수 있는 의미 체계를 추가하여 이러한 문제를 해결할 수 있는 기술
• W3C에서 작성한 사양
• 요소에 적용할 수 있는 추가 HTML 속성 집합을 정의하여 추가 의미 체계를 제공, 부족한 부분에 대한 접근성 개선

WAI-ARIA role

• 콘텐츠에 의미론적 의미를 제공하여 화면 판독기 및 기타 도구가 해당 유형의 개체에 대한 사용자 기대와 일치하는 방식으로 개체와의 상호 작용을 표시하고 지원할 수 있도록 함

• HTML에 기본적으로 존재하지 않거나 존재하지만 아직 완전한 브라우저 지원이 없는 요소를 설명하는데 사용할 수 있음

  👉 role="role type"