본격적으로 접근성을 부여할 수 있는 것들을 알아보자.

이전에 웹 표준과 웹 접근성은 무엇인지, 그리고 이를 위한 WAI-ARIA는 또 무엇이며 스크린 리더를 통해 화면을 읽는 방법 등을 학습했다.

학습하는 내용에는 사이사이 ‘aria’를 언급하거나 ‘role’이나 <caption>, <label>, <figure> 등의 요소들을 언급하기도 했는데 여기서는 앞서 언급했던 이런 것들이 무엇인지, 그리고 본격적으로 웹 접근성을 구현하기 위한 속성들이나 요소들에는 무엇이 있는지 살펴보도록 하겠다.

목차

🧻 HTML의 속성, Role

🗿 페이지의 중심을 구성하는 Landmark Role

📛 role과 같이 요소 자체에 의미를 담은 HTML 태그, Sementic Tag

🧻 HTML의 속성, Role

role은 웹 접근성을 고려해 탄생한 HTML의 속성이다. 주로 HTML 태그 요소들의 동작이나 요소들이 무엇인지, 명확하게 의미를 부여하기 위해 해당 속성을 사용하여 알려준다.

아래의 이미지는 WAI-ARIA의 1.0 버전과 관련해 role 속성의 관계들을 나열한 것이다. (현재는 1.2버전이다.)

이미지처럼 상당히 다양한 role이 존재하는데, 큰 분류로 나누자면 아래와 같다.

• Abstract Roles
  • 일반적인 역할 개념을 정의할 목적으로 사용되는 Roles
  • input, section, window 등이 있다.
• Widget Roles
  • 독립형 사용자 인터페이스 위젯이나 더 큰 복합적인 위젯의 일부로 사용되는 Roles
  • checkbox, searchbox, scrollbar 등이 있다.
• Document Structure Roles
  • 페이지에서 컨텐츠를 구성하는 구조를 설명하는 Roles
  • article, figure, heading 등이 있다.
• Landmark Roles
  • 페이지의 핵심 사항 등을 구성하는 Roles
  • banner, main, contentinfo 등이 있다.