어감이 좋다. 웨이 아리아

wai-aria

과거에는 웹페이지의 특성은 문서(document) 에 가까웠다. 때문에, html의 구조를 잘 구성하고, 웹 접근성에 대한 개념을 잘 정립해 웹페이지를 만든다면, 접근성 문제가 발생하지 않았다.

하지만 현재의 웹페이지는 문서보다는 응용프로그램에 점점 가까워지고 있다. 이미 브라우저 기반으로 게임을 구동하거나, 문서와는 거리가 먼 프로그램들이 자바스크립트를 이용해 만들어지고 있다.

이런 상황에서 html 구조만으로 시각 장애인 혹은, 여러 몸이 불편한 사람들, SEO 엔진이 해당 웹페이지를 해석하기는 무리이다. 이를 보충하기 위해 나온 것이 WAI-ARIA 이다.

WAI-ARIA는 Web Accessibility initiative - Accessible Rich Internet Application의 약자로 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, JS 및 관련 기술로 개발된 사용자 인터페이스 구성요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술사양입니다. 출처: 위키피디아
출처: https://geonlee.tistory.com/142 [빠리의 택시 운전사]

또한 웹 접근성이 제대로 구현되지 않은 웹페이지인데, 너무 오래 정립되어, 바꿀 수 없는 프로젝트의 경우에도 WAI-ARIA 를 사용해 웹 접근성을 향상시키는 방법을 사용한다.

원칙

https://www.w3.org/TR/wai-aria-practices-1.1/
해당 문서는 wai-aria 의 사용 설명서이다.

문서에서는 wai-aria의 원칙에 대해 아래와 같이 설명하고 있다.

1. 나쁜 aria는 안하느니만 못하다.

• aria는 CSS가 의미가 없어지는 상황, 즉, 시각장애인이 사용할 경우, SEO 엔진이 문서를 읽을 경우에 의미가 있다. 이런 상황에 aria는 절대적인 정보를 제공하게 된다. 이런 정보가 잘 못된 정보일 경우 치명적인 결과를 유발할 수도 있다.

2. 반드시 배포 전에 해당 aria가 제대로 작동하는 지 확인할 것.

• 1번 원칙과 연계되는 내용이다. aria는 다양한 브라우저에서 다르게 작동할 수 있다. 반드시 배포 전에 해당 aria 가 정상적으로 작동하는지 확인해야 한다. 잘 못 작동하는 aria는 안 하느니만 못할 수 있다. 특히나 aria는 눈에 명확히 보이는 속성이 아니기 때문에, 테스트를 꼼꼼하게 할 필요가 있다.

3. 모바일에서 작동하지 않을 수 있다.

• aria는 특정 모바일에서 작동하지 않을 수 있으니, 반드시 확인을 미리 할 것.

사용

이 글에서 모든 aria를 설명할 수는 없다. 약간의 aria를 예시로 적고, 더 필요한 내용이 있으면 https://www.w3.org/TR/wai-aria-practices 에서 확인할 것.

wai-aria 는 세 가지 속성을 제공한다.

• role
  • role 은 해당 태그의 역할을 부여한다.
• property
  • <button type="button" aria-label="Close">X</button>
    위와 같은 코드가 있을 때, 버튼이란 것은 html로 알 수 있지만 aria-* 을 통해 더 많은 정보(속성, 상황)를 제공한다.
• state