A11Y 101: 와이아리아

이 접근성 여정을 파헤치는 동안 semantics always win 이라는 말을 몇 번 들었을 것입니다.
그러나 항상 그런 것은 아닙니다.

HTML5 이전에는 header , footer 또는 main 와 같은 멋진 의미 요소가 없었습니다. 이러한 종류의 요소는 항상 약간의 마크업이 있는 일반 div로 설명되었습니다.

따라서 이러한 요소를 확실한 기술로 정의하는 것이 거의 불가능했습니다.

따라서 WAI-ARIA가 살아납니다.

WAI-ARIA란?

그것이 무엇인지 궁금할 수도 있으며 Web Accessibility Initiative - Accessible Rich Internet Applications 를 나타냅니다. 추가 시맨틱을 제공하는 데 사용할 수 있는 속성 집합을 정의하는 W3C에서 작성한 사양입니다.

여러 섹션으로 나뉩니다.

역할: role="value"를 사용하여 정의할 수 있습니다.

속성: 예를 들어 요소에 추가 의미 부여: aria-labelledby="label"

상태: 요소의 현재 상태를 설명합니다(예: aria-disabled="true" ).

이 모든 WAI-ARIA는 단호한 기술이 귀하의 웹페이지를 더 잘 이해할 수 있도록 도와줍니다. 웹사이트 작동 방식에 물리적으로 다른 영향을 미치지 않습니다.

WAI-ARIA를 사용하는 경우

이 A11Y 시리즈에서 몇 가지 WAI-ARIA를 사용한 몇 가지 예를 보셨을 것입니다. 일반적인 경험 법칙은 다음과 같습니다.

"다른 기본 방법이 없을 때만 사용하십시오."

네이티브 요소가 충분하지 않을 때 액세스할 수 있도록 만드는 최후의 수단이어야 합니다.

예를 들어:

<div role="navigation"></div>

유효한 예이지만 의미론적 대안을 선택해야 합니다.

<nav></nav>

그러면 어떤 역할을 사용할 수 있고 대안은 무엇입니까?

그리고 그것은 이 기사에서 설명하기에는 너무 많을 것입니다.
모든 역할에 대해 자세히 살펴보면서 다음 단계에서 더 자세히 설명합니다.

설명을 넘어

WAI-ARIA가 활성화되는 또 다른 부분은 스크린 리더를 위한 동적 콘텐츠 업데이트를 제공하는 것입니다.

예를 들어 콘텐츠가 업데이트될 때 화면 판독기에 알리는 데 사용할 수 있는 aria-live가 있습니다.
화면의 알림이나 새로 고쳐지는 새 콘텐츠에 대해 생각해 보세요.

WAI-ARIA에 크게 의존하는 요소의 좋은 예는 우리가 최근에 만든 tab element입니다.

해당 기사를 보고 WAI-ARIA가 이제 더 의미가 있는지 확인하십시오.

결론

WAI-ARIA는 시맨틱과 접근성을 향상시킬 수 있지만 최후의 수단으로만 사용해야 합니다.

인상적으로 긴 요소 목록이 있으며 이에 대해 더 자세히 알아보기 위해 단일 기사를 작성합니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나