🌐WAI-ARIA : 웹 접근성을 높이는 필수 도구

안녕하세요! WEB OB 김채현입니다.

이번에 html 태그를 작성하면서 웹 접근성에 관심이 생겨서 WAI-ARIA를 공부해봤습니다.🤗🤗

 

🤔 WAI-ARIA란?

Web Accessibility Initiative - Accessible Rich Internet Applications

 

WAI-ARIA는 W3C에서 웹 접근성을 담당하는 기관(WAI)가 제정한 RIA 환경의

웹 접근성에 대한 표준 기술 규격으로 요소에 적용하여 추가 의미를 제공하고

접근성이 부족한 곳의 접근성을 개선할 수 있는 추가 HTML 속성 세트를 정의합니다.

복잡한 웹 애플리케이션과 동적인 사용자 인터페이스(UI)에서 보조기술이 콘텐츠를 더 잘 이해할 수 있도록

추가적인 의미(semantics)를 제공하는 것이 WAI-ARIA의 목표입니다.

 

RIA : 정적인 HTML, 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션

 

♿ 웹 접근성이란? 
웹 접근성(Web Accessibility)은 장애가 있는 사용자도 비장애인과 동일하게 웹 콘텐츠에 접근하고 상호작용할 수 있도록 하는 것을 목표로 합니다. 접근성은 단순한 배려를 넘어서 모든 사용자가 동등한 경험을 할 수 있도록 보장하는 중요한 원칙입니다. 시각, 청각, 신체적, 인지적 장애를 가진 사용자들이 웹사이트를 사용할 수 있도록 다양한 기술적 접근이 필요하며, 그중 하나가 WAI-ARIA입니다.

 

👁‍🗨 스크린 리더란? 
스크린 리더(Screen Reader)는 시각 장애인을 위해 화면에 표시된 콘텐츠를 음성으로 읽어주거나, 점자 디스플레이를 통해 텍스트를 출력하는 소프트웨어입니다. 스크린 리더는 웹 페이지의 구조, 콘텐츠, 그리고 상호작용 요소를 해석해야 하므로, 웹 페이지의 의미가 명확하게 정의되어 있어야 합니다. 이때 WAI-ARIA는 스크린 리더가 웹 콘텐츠를 더 정확하게 해석할 수 있도록 도움을 줍니다.

 

사용하는 이유!

1. RIA의 동적 웹 애플리케이션 접근성 보장 지침이 부족
2. Ajax, 통한 실시간 변경 콘텐츠, SPA 방식의 콘텐츠 변경
3. 화면 확대사용자의 경우, 가시 범위 밖 콘텐츠의 변경 내용 인지 불가능

 

❓ARIA란?

ARIA는 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에

더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말합니다.

ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에

필요한 정보를 제공합니다. 

 

🔩 WAI-ARIA의 주요 기능

1) Roles (역할)

ARIA의 역할은 HTML 요소가 무엇을 하는지, 즉 어떤 기능을 하는지 정의합니다.

이를 통해 스크린 리더는 페이지의 각 요소가 어떤 목적을 가지고 있는지 이해할 수 있습니다.

• role="navigation": 내비게이션 역할을 명시해 스크린 리더가 이를 탐색 기능으로 인식합니다. 
• role="button": 시각적으로 버튼처럼 보이는 div 요소가 스크린 리더에게도 버튼으로 인식되게 합니다. 
• role="banner": 페이지의 상단 영역을 나타내는 요소로, 사이트 전체를 대표하는 배너 영역을 지정합니다.
• role="search": 검색 영역을 정의합니다. 스크린 리더는 이 역할을 통해 페이지의 검색 기능을 인식하고 사용자에게 전달할 수 있습니다.
• role="tablist", role="tab", role="tabpanel": 탭 UI를 정의할 때 사용하는 역할들입니다. role="tablist"는 탭들의 목록을, role="tab"은 개별 탭을, role="tabpanel"은 해당 탭이 선택되었을 때 표시되는 콘텐츠 영역을 정의합니다.
• role="presentation": 요소가 시각적으로만 중요한 경우, 스크린 리더가 해당 요소를 무시하도록 지정할 수 있습니다.

 

⚖️ role을 사용할 때 지켜야 하는 규칙
1. 만약 HTML에 개발자들이 쓰기 좋게 만들어져 있는 태그가 존재한다면 그 태그를 사용하는 것이 좋습니다.
2. 시멘틱 태그에 role을 될 수 있으면 쓰지 않습니다.
3. 시멘틱 태그가 의미하는 것을 aria-label로 다시 나타낼 필요는 없습니다.

 

 

2) Properties (속성)

ARIA 속성은 요소에 추가 의미를 부여하여, 스크린 리더가 사용자에게 더 많은 정보를 전달할 수 있도록 합니다.

• aria-label: 시각적으로 보이지 않는 텍스트를 제공해 스크린 리더가 그 요소의 설명을 읽도록 합니다. 
• aria-labelledby: 특정 요소가 다른 요소의 설명을 제공하도록 설정합니다. <label>과 유사하지만 더 복잡한 요소 구조에서 유연하게 적용 가능합니다.
  • aria-label이 이름표를 붙여주는 것이라면, aria-labelledby는 쉽게 말해 그룹으로 묶어주는 속성입니다.
• aria-describedby: 다른 요소에 의해 설명된 내용을 스크린 리더가 읽도록 설정합니다. 주로 폼 입력 필드에서 추가적인 설명을 제공할 때 사용됩니다.
• aria-required: 해당 입력 필드가 필수 항목임을 명시하여, 스크린 리더가 이를 사용자에게 알릴 수 있습니다.

 

3) States (상태)

상태는 요소의 현재 상태를 나타내며, 일반적으로 자바스크립트를 통해 동적으로 변경됩니다.

• aria-disabled="true": 현재 요소가 비활성화 상태임을 알립니다. 
• aria-expanded="false": 아코디언 메뉴 등에서 해당 콘텐츠가 열려 있는지 닫혀 있는지 상태를 명시합니다. 
• aria-pressed="true": 토글 버튼의 현재 눌림 상태를 나타냅니다. 예를 들어, '좋아요' 버튼과 같은 요소가 눌렸거나 선택되었을 때 이 속성을 사용하여 스크린 리더가 그 상태를 인식하도록 합니다.
• aria-busy="true": 요소가 현재 작업 중임을 나타냅니다. 보통 로딩 중이거나 콘텐츠가 업데이트되는 상황에서 사용됩니다. 작업이 완료되면 이 속성을 제거해야 합니다. 

 

💡 WAI-ARIA와 동적 콘텐츠

현대 웹 애플리케이션은 동적 콘텐츠 업데이트가 자주 발생하는 경우가 많습니다.

Ajax를 통해 서버에서 데이터를 실시간으로 받아오거나

SPA(Single Page Application) 방식의 웹 애플리케이션에서는 페이지가 리로드되지 않고 콘텐츠가 변경됩니다.

이러한 환경에서는 스크린 리더 사용자나 화면 확대 사용자들이 이러한 변화된 내용을 쉽게 인식하지 못할 수 있습니다.

WAI-ARIA는 동적 콘텐츠의 접근성을 개선하기 위한 여러 속성을 제공합니다.

예를 들어, aria-live 속성은 동적으로 변경되는 콘텐츠가 업데이트될 때

스크린 리더가 이를 사용자에게 실시간으로 전달할 수 있게 합니다.

• Ajax를 통한 실시간 변경: 콘텐츠가 업데이트되더라도 스크린 리더가 이를 감지하지 못하면 사용자에게 중요한 정보를 놓칠 수 있습니다.
• SPA 방식의 콘텐츠 변경: 전체 페이지가 리로드되지 않고 특정 영역만 업데이트되기 때문에, 화면 확대 사용자나 보조기술을 사용하는 사용자는 변경된 내용을 인식하지 못할 가능성이 큽니다.

 

aria-live 속성

aria-live 속성을 사용하면 실시간으로 변경되는 콘텐츠가 있을 때 스크린 리더가 이를 사용자에게 알립니다.

 

• aria-live="polite": 콘텐츠가 업데이트되면, 사용자가 다른 작업을 마친 후 스크린 리더가 변경 사항을 알립니다.
• aria-live="assertive": 중요한 변경 사항은 즉시 사용자에게 전달됩니다.

 

 

📌 WAI-ARIA의 한계

 

WAI-ARIA는 웹 접근성을 개선하는 매우 유용한 도구이지만, 모든 상황에서 사용하는 것이 바람직하지는 않습니다.

HTML5의 네이티브 요소들은 이미 기본적으로 접근성을 지원하므로,

기본 HTML 요소로 해결할 수 있는 경우에는 ARIA 속성을 굳이 사용하지 않는 것이 좋습니다.

잘못된 ARIA 사용은 오히려 혼란을 초래할 수 있습니다.

• 네이티브 HTML 요소로 해결할 수 있는 경우, ARIA 속성을 사용하지 않는 것이 좋습니다. 예를 들어, <button> 요소가 필요한 경우 role="button"을 가진 div 대신 <button> 태그를 사용하는 것이 더 적절합니다.
• 동적으로 변화하는 콘텐츠에는 aria-live와 같은 속성을 사용하여 스크린 리더가 업데이트를 인식하도록 할 수 있습니다.

---

WAI-ARIA는 웹 애플리케이션에서 복잡한 UI와 동적 콘텐츠의 접근성을 향상시키는 필수 도구입니다.

하지만 ARIA는 네이티브 HTML 요소와 함께 적절히 사용해야 하며, 필요할 때만 추가적인 속성을 적용하는 것이 중요합니다.

궁극적으로는 WAI-ARIA를 통해 모든 사용자가 동일하게 웹에 접근할 수 있는 환경을 구축하는 것이 목표입니다.

 

 

참고

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

WAI-ARIA basics - Learn web development | MDN

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA

ARIA - 접근성 | MDN