웹접근성 향상시키 (feat : WAI-ARIA)

어떻게하면 더욱 더 많은 사람들이 우리의 웹서비스를 이용 하게 만들 수 있을까?

인터넷을 이용하는 사람들 중에서 서로 각각 다른 환경에서 사용하는 경우가 많다.

예를들어, 키보드로만 웹서비스를 사용하는 사람이 있을것이고, 스크린리더기로 웹서비스를 사용하는 사람이 있을것이다. 이 모든 사람들에게 우리의 웹서비스를 이용 할 수 있게 만드는것이 핵심이다.

스크린리더기와 같은 보조적인 기술을 사용하여 웹서비스를 이용할때, 브라우저의 컨텐츠를 이용해야하는데 이때 DOM tree에 직접적으로 접근하여 interact를 하지않으며, 대신에 Accessibility tree를 사용하여 interact를 하게된다.

Accessibility Tree란?

접근성에 초점이 맞춰진 컨텐츠를 포함한 트리
스크린리더기가 이해할 수 있게 만들어진 트리
대표적으로 name, description, role, state 4가지의 프로퍼티가 존재한다
- name - 주로, 어떠한 노드의 textContent와 관련이 있다. 예를들어 <a href=”/home”>GoToHome 인 노드가 있다면 이것의 name은 GoToHome인 셈이다.
- description - name말고 추가적인 부연설명을 제공해주고 싶을때 사용한다.
- role - 해당 노드가 어떠한 역할을 하는지를 나타낸다. 예를들어 input type checkbox는 checkbox라는 role를 가지고 있다.
- state - 어떠한 노드의 상태값을 나타낸다. 예를들어 input type checkbox에는 checked와 unchecked의 state가 있다. role마다 역할이 다르기때문에 모두 다른 state들이 있다.

접근성이 좋은 HTML 만들기

descriptive 한 content를 사용하며 alt 프로퍼티를 사용한다
- img 태그에 alt를 사용안하게 되면 스크린 리더기가 src를 읽어버리기 때문에, 아무 의미 없는 이미지라면 빈 스트링으로 넣어줘야한다
semantic tag를 사용한다
마우스없이 키보드로만도 적절하게 웹서비스 이용이 가능하게 하도록 한다.\

일반적으로는 semantic tag를 적절하게 사용하는 것만으로 충분하다. 하지만 가끔씩 웹서비스가 복잡해질수록 좀 더 구체적일 필요성이 있을 수가 있는데, 그때 WAI-ARIA 를 사용할 수 있다.

WAI-ARIA

Web Accessibility Initiative 의 약자이다
개발자가 의도한 유저 행동이나 추가 정보를 스크린 리더기와 같은 보조 기술에 전달하여 더욱 더 향상된 웹접근성을 제공한다

ARIA를 적용시킨 예제

<ol role="tablist">
  <li id="tab1" role="tab" aria-controls="panel1" aria-selected="true">Tab1</li>
  <li id="tab2" role="tab" aria-controls="panel2" aria-selected="false">Tab2</li>
  <li id="tab3" role="tab" aria-controls="panel3" aria-selected="false">Tab3</li>
</ol>

<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  <p>
    Panel 1
  </p>
</div>

<div class="hidden" role="tabpanel" id="panel2" aria-labelledby="tab2">
  <p>
    Panel 2
  </p>
</div>

<div class="hidden" role="tabpanel" id="panel3" aria-labelledby="tab3">
  <p>
    Panel 3
  </p>
</div>

- tablist role은 탭들을 감싸고 있는 역할을 하는 요소이다
- tabpanel은 특정 탭들의 컨텐츠에 관련이 있는 요소이다.
- aria-controls은 그것의 컨텐츠가 이것의 요소에 의해 컨트롤 되고 있다고 나타내준다. 즉 다시말해, 현재 요소가 제어하는 대상을 명시해주는것이다.
- aria-labelledby는 사용된 요소에 label를 지정해 어떠한 요소의 식별자인데 명시해주는것이다.
- aria-selected현재 선택된 상태를 나타낸다.

## 느낀점

- 지금까지 개발할때는 주로 semantic tag에만 초점을 맞춰서 개발했던것같았다. 솔직히 말하면 WAI-ARIA에 대한 개념도 거의 없었다. 하지만 웹접근성에 대해 조금 더 깊게 공부하면서 ARIA라는 개념에 대해 알아보았고, 아직 웹접근성에 대해 많이 부족함을 느꼈다. 생각보다 엄청나게 많은 ARIA 속성들이 있음을 알게되었고, 이러한 속성들을 잘 이용하여 접근성을 높이는 기술을 터득하는것에 어느정도 시간이 필요하지 않을까 생각이 들었다.
- 이번 기회에 더 확실하게 공부하여 모든 사람들이 내가 만든 서비스를 잘 이용할 수 있게 만들고 싶다는 생각을 하였다.

Accessibility Tree란?

접근성에 초점이 맞춰진 컨텐츠를 포함한 트리

스크린리더기가 이해할 수 있게 만들어진 트리

대표적으로 name, description, role, state 4가지의 프로퍼티가 존재한다

name - 주로, 어떠한 노드의 textContent와 관련이 있다. 예를들어 <a href=”/home”>GoToHome 인 노드가 있다면 이것의 name은 GoToHome인 셈이다.
description - name말고 추가적인 부연설명을 제공해주고 싶을때 사용한다.
role - 해당 노드가 어떠한 역할을 하는지를 나타낸다. 예를들어 input type checkbox는 checkbox라는 role를 가지고 있다.
state - 어떠한 노드의 상태값을 나타낸다. 예를들어 input type checkbox에는 checked와 unchecked의 state가 있다. role마다 역할이 다르기때문에 모두 다른 state들이 있다.

접근성이 좋은 HTML 만들기

descriptive 한 content를 사용하며 alt 프로퍼티를 사용한다

img 태그에 alt를 사용안하게 되면 스크린 리더기가 src를 읽어버리기 때문에, 아무 의미 없는 이미지라면 빈 스트링으로 넣어줘야한다

semantic tag를 사용한다

마우스없이 키보드로만도 적절하게 웹서비스 이용이 가능하게 하도록 한다.\

ARIA를 적용시킨 예제

<ol role="tablist">
  <li id="tab1" role="tab" aria-controls="panel1" aria-selected="true">Tab1</li>
  <li id="tab2" role="tab" aria-controls="panel2" aria-selected="false">Tab2</li>
  <li id="tab3" role="tab" aria-controls="panel3" aria-selected="false">Tab3</li>
</ol>

<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  <p>
    Panel 1
  </p>
</div>

<div class="hidden" role="tabpanel" id="panel2" aria-labelledby="tab2">
  <p>
    Panel 2
  </p>
</div>

<div class="hidden" role="tabpanel" id="panel3" aria-labelledby="tab3">
  <p>
    Panel 3
  </p>
</div>

- tablist role은 탭들을 감싸고 있는 역할을 하는 요소이다 - tabpanel은 특정 탭들의 컨텐츠에 관련이 있는 요소이다. - aria-controls은 그것의 컨텐츠가 이것의 요소에 의해 컨트롤 되고 있다고 나타내준다. 즉 다시말해, 현재 요소가 제어하는 대상을 명시해주는것이다. - aria-labelledby는 사용된 요소에 label를 지정해 어떠한 요소의 식별자인데 명시해주는것이다. - aria-selected현재 선택된 상태를 나타낸다. ## 느낀점 - 지금까지 개발할때는 주로 semantic tag에만 초점을 맞춰서 개발했던것같았다. 솔직히 말하면 WAI-ARIA에 대한 개념도 거의 없었다. 하지만 웹접근성에 대해 조금 더 깊게 공부하면서 ARIA라는 개념에 대해 알아보았고, 아직 웹접근성에 대해 많이 부족함을 느꼈다. 생각보다 엄청나게 많은 ARIA 속성들이 있음을 알게되었고, 이러한 속성들을 잘 이용하여 접근성을 높이는 기술을 터득하는것에 어느정도 시간이 필요하지 않을까 생각이 들었다. - 이번 기회에 더 확실하게 공부하여 모든 사람들이 내가 만든 서비스를 잘 이용할 수 있게 만들고 싶다는 생각을 하였다.