웹 접근성 | WAI-ARIA

dev_hee·2022년 1월 30일

WAI-ARIA 웹 접근성 웹 표준

웹 접근성

목록 보기

1/1

1. ARIA란

1-1. 용어 설명

접근가능한 리치 인터넷 어플리케이션 (Accessible Rich Internet Application, ARIA)
장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성
특히 JavaScript를 사용하여 개발한 웹 어플리케이션에 해당함

1-2. ARIA 기능

HTML을 보충함
일반적으로 보조 기술이 알 수 없는 상호작용을 제공
흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공
예시
- HTML4에서 탐색 랜드마크, JavaScript 위젯, 폼 힌트 및 오류 메시지, 실시간 콘텐츠 업데이트 등을 접근 가능한 형태로 제공
주의 사항
- HTML5에 위(HTML4에서 제공하는 위젯들)와 같은 위젯들이 통합되었음...
- 따라서 구현하려는 기능을 가진 요소가 존재한다면 개발자는 되도록 의미를 가진 HTML을 ARIA보다 선호해야함.
- 예) 네이티브 요소는 키보드 접근성, 역할, 상태를 내장하지만, ARIA는 그렇지 않음...

1-3. 지원

ARIA 지원 수준은 다음마다 제각기 다르다.
- 사용자의 운영체제
- 사용자의 브라우저
- 연결된 보조기술
- 각각의 버전 (오래된 소프트웨어 버전은 특정 ARIA 역할을 지원하지 않을 수 있음)
ARIA 기술에 의존하는 사용자 일부가, 컴퓨터 브라우저 상호작용 기능을 잃을까 두려워 소프트웨어 업그레이드를 주저할 수 있음...
- 보조기술이 훨씬 넓게 지원하는 의미를 가진 HTML요소를 사용하자.

2. ARIA와 접근성

2-1. JavaScript와 접근성

HTML4는, JavaScript와 CSS, HTML을 이용하여 만든 여러가지 동적 콘텐츠가 어떤 기능을 하는지 설명을 제공하지 않았다...
- 따라서 <div>, <span>같은 것으로 개발하게 되었고...
그로 인해 동적 콘텐츠를 보조공학기술(AT)로 인식하지 못하는 경우가 많았다.
따라서 스크린을 보지 못하는, 스크린 리더기를 사용하는 사람들에게 해당 콘텐츠를 파악하기 어려웠다.

2-2. 탭 위젯을 ARIA 레이블링 없이 만든 마크업

마크업에서 위젯의 폼과 동작에 대해서 설명하고 있지 않다.
따라서 마크업만 보고 어떤 동작을 할 지 가늠하기 어렵다.

<ol>
  <li id="ch1Tab">
    <a href="#ch1Panel">Chapter 1</a>
  </li>
  <li id="ch2Tab">
    <a href="#ch2Panel">Chapter 2</a>
  </li>
  <li id="quizTab">
    <a href="#quizPanel">Quiz</a>
  </li>
</ol>

<div>
  <div id="ch1Panel">Chapter 1 content goes here</div>
  <div id="ch2Panel">Chapter 2 content goes here</div>
  <div id="quizPanel">Quiz content goes here</div>
</div>

따라서...

비주얼로 렌더링 한 경우엔, 유저는 비주얼로 확인 가능하지만, 보조기술(AT)와 같은 기계들은 읽지 못했다.

2-3. 탭 위젯을 ARIA 레이블링로 만든 예시

(2-2)의 예제와는 다르게 ARIA를 사용한 경우엔, 스크린리더 같은 보조기기에 필요한 정보들을 제공할 수 있다!
동작상태 state, 역할 role에 대한 설명을 제공함
- 동적 웹 어플리케이션의 특징인 동작상태와 역할에 대한 설명을 추가할 수 있다.

<!-- Now *these* are Tabs! -->
<!-- We've added role attributes to describe the tab list and each tab. -->
<ol role="tablist">
  <li id="ch1Tab" role="tab">
    <a href="#ch1Panel">Chapter 1</a>
  </li>
  <li id="ch2Tab" role="tab">
    <a href="#ch2Panel">Chapter 2</a>
  </li>
  <li id="quizTab" role="tab">
    <a href="#quizPanel">Quiz</a>
  </li>
</ol>

<div>
  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
  <div id="ch1Panel" role="”tabpanel”" aria-labelledby="ch1Tab">
    Chapter 1 content goes here
  </div>
  <div id="ch2Panel" role="”tabpanel”" aria-labelledby="ch2Tab">
    Chapter 2 content goes here
  </div>
  <div id="quizPanel" role="”tabpanel”" aria-labelledby="quizTab">
    Quiz content goes here
  </div>
</div>

3. ARIA의 사용

3-1. `role="button"`

<button>을 사용해야 하는 요소에...
- 개발 요청에 의해 <a>, <i>, <span>를 사용해야 하는 경우?!

<!-- 아래 같이 해야하지만... -->
<button></button>
<input type="button" />

<!-- 안된다면 이거 처럼이라도!! -->
<a role="button"></a>

위와 같이 role="button"를 사용하자!
하지만 <button>태그는 enter, space 키에 대해 click이벤트가 적용되지만...
- role="button" 은 따로 설정해 주어야만함...

3-2. `aria-pressed`

눌리거나 눌리지 않은 상태의 <button>에는 ara-pressed를 적용해라!
- aria-pressed="true" : 버튼 눌림
- aria-pressed="false" : 버튼 안눌림

<!-- 선택됨 -->
<a role="button" aria-pressed="true"></a>

<!-- 선택안됨 -->
<a role="button" aria-pressed="false"></a>

3-3. `role="switch"` 와 `aria-checked="true"`

on/off 스위치 형태의 상호 작용을 식별함
브라우저 및 스크린리더 지원에 차이가 있을 수 있어서, 테스트가 필요함!

<button
  type="button"
  role="switch"
  aria-checked="true"
  id="speakerPower"
  class="switch"
>
  <span>off</span>
  <span>on</span>
</button>
<label for="speakerPower" class="switch">Speaker power</label>

3-4. `role="alert"`

form요소의 입력값에 대한 에러 메시지처럼, 경고 역할을 하는 요소에게 role="alert" 사용
사용자가 즉각적으로 알아야 하는 정보가 있으면 aria-live="assertive"를 같이 사용
텍스트가 동적으로 들어가면 aria-atomic 속성을 함께 사용해야함

<!-- 아이디 또는 비밀번호가 틀린 경우...-->
<p role="alert" style="display:none">
  아이디 또는 비밀번호가 일치하지 않습니다...
</p>

3-5. `aria-expanded`

버튼을 클릭하여 특정 영역을 확장하고 축소하는 UI에 aria-expanded 사용
스크린 리더 사용자에게 버튼을 클릭하여 내용이 아래로 확장되거나 축소될 수 있음을 알릴 수 있다!
- aria-expanded = "false" : 내용이 축소된 상태
- aria-expanded = "ture" : 내용이 확장된 상태

3-6. `aria-haspopup`

다른 요소 위에 겹쳐나오는 하위 메뉴를 제어하는 버튼에 aria-haspopup 사용
사용자에게 해당 요소가 하위메뉴를 포함하고 있다(팝업될 수 있다)는 정보를 제공함.
- aria-haspopup = "false" : 요소에 팝업이 없음
- aria-haspopup = "true" : 팝업이 있는 메뉴버튼임

<button
  type="button"
  aria-haspopup="true"
  aria-controls="menu"
  aria-expanded="true"
>
  메뉴
</button>
<nav id="menu">
  <ul aria-label="점심메뉴">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    ...
    <li><a href="#">item3</a></li>
  </ul>
</nav>

dev_hee

🎨그림을 좋아하는 FE 개발자👩🏻‍💻

웹 접근성 | WAI-ARIA

웹 접근성

1. ARIA란

1-1. 용어 설명

1-2. ARIA 기능

1-3. 지원

2. ARIA와 접근성

2-1. JavaScript와 접근성

2-2. 탭 위젯을 ARIA 레이블링 없이 만든 마크업

2-3. 탭 위젯을 ARIA 레이블링로 만든 예시

3. ARIA의 사용

3-1. role="button"

3-2. aria-pressed

3-3. role="switch" 와 aria-checked="true"

3-4. role="alert"

3-5. aria-expanded

3-6. aria-haspopup

0개의 댓글

3-1. `role="button"`

3-2. `aria-pressed`

3-3. `role="switch"` 와 `aria-checked="true"`

3-4. `role="alert"`

3-5. `aria-expanded`

3-6. `aria-haspopup`