웹개발을 배우면서 중요하다고 강조되었던 웹접근성이었지만, 실무에서 당장 급하게 사용되는것이 아니다보니 뒤로 미뤄 놓기만 했고 실제로 적용하는 일이 드물었다.
그러던 중 이디야 메뉴 페이지 프로젝트를 진행하게 되었고 웹접근성에 중점을 둔 사이트를 제작해보자는 목표가 생겼다. 처음으로 스크린리더 사용자까지 고려한 웹사이트를 제작하게 되었는데 특히나 WAI-ARIA라는 개념을 처음 접했고 웹을 제작할때 모두가 평등하고 편리한 웹을 위해 접근성을 더 고려해야 겠다는 생각으로 이번 프로젝트에서 사용한 WAI-ARIA와 웹접근성에 대해 정리해보려고 한다.
📍웹접근성과 웹표준 헷갈리고 있니 Hoxy..?
실무에만 너무 급급하던 시절.. 웹이 돌아가기만 하면 된다는 아주아주 잘못된 생각으로 코딩을 했었다. 그리고 웹접근성과 웹표준의 개념을 접했을땐 뭔가 웹에 관련되고 웹을 사용할 때 편하게 해주는 것? 이라는 개념만 자리잡고 있을뿐 정확히 둘의 차이를 잘 몰랐다.
이런 개발자.. 나뿐이겠지만 혹시라도 이 둘의 차이를 모른다면 다시 한번 더 정리하자!
웹접근성
웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
📝 출처: 위키백과
대표적으로 많이 알고 있는건 image 태그의 alt 속성이다. 이미지를 위한 대체텍스트를 넣을 수 있고 만약 시각적으로 제한된 상황이라면 보이스오버 등 보조기기로 어떤 이미지인지 알 수 있다.
하지만 웹기술이 발전됨에 따라 웹의 복잡성도 높아졌고 그만큼 일반 사용자, 장애를 가진 사람, 고령자 또한 웹의 사용성을 높이기 위해 WAI-ARIA등 다양한 방식으로 제공되어진다.
웹표준
웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다.
📝 출처: 위키백과
위키백과에서 말하는 웹표준을 다시한번 정리해보자면 웹에서 표준적으로 사용되는 기술이나 규칙을 의미한다.
또한 웹표준은 웹접근성과 긴밀한 관계를 가지고 있다. 왜일까?
웹표준이 나온 이유부터 얘기하자면 각각 다른 브라우저들이 자신의 브라우저가 더 우수하다는 것을 보여주기위해 해당 브라우저만의 기능을 추가로 넣었는데 현재시점에서 다른 브라우저와 호환이 안되는 문제가 발생되었다. 그래서 오히려 웹접근성 측면에서는 마이너스가 되고 있기 때문에 웹접근성을 위해 기술들이 웹표준이 되어야하고 이러한 것으로 보았을때 이 둘은 긴밀한 관계가 이뤄진다.
웹표준을 준수하는 것은 W3C등의 표준화 기구에서 정의 해준 명세에 맞게 마크업을 하는 것이다.
📍자, 그래서 WAI-ARIA가 뭔데?
WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)는 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, 자바스크립트 및 관련 기술로 개발된 사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양이다.
📝 출처: 위키백과
쉽게 말하자면 웹접근성을 높이기 위한 방법 중 하나이다.
ARIA는 HTML을 보충해 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공한다.
왜 WAI-ARIA가 필요하지?
HTML, CSS, JavaScript를 사용하여 동적으로 웹 페이지가 구현됨에 따라 그 위젯들을 설명할 수 있는 것은 HTML4에서는 명세가 되어 있지 않았다. 그래서 대부분의 개발자들이 <div> <span> 을 덕지덕지 붙여놓는 상황을 많이 보았을 것이다.
또한 슬라이드, 프로그레스 바 등등 동적 콘텐츠들은 보조기술이 제대로 인식하지 못하였다. 그래서 HTML5에서 위젯들의 충분한 정보를 제공할 수 있는 태그들이 나왔지만 동적 콘텐츠는 그렇지 못했고 그렇기 때문에 콘텐츠의 디테일한 설명을 제공하기 위해 ARIA가 필요하다.
WAI-ARIA 언제 사용해?
WAI-ARIA는 상황에 따라 다른 속성을 제공해야한다.
대표적인 예)
- 탭 목록, 탭, 탭 패널(role="tablist|tab|tabpanel").
- 툴팁(role="tooltip").
- 알럿(role="alert").
- 알럿 대화상자(role="alertdialog").
- 대화상자(role="dialog").
- 탐색(nav, role="navigation").
- 보충(aside, role="complementary").
- 의미 없음(role="none presentation").
- 현재 상태(aria-current="token").
- 선택 상태(aria-selected="true|false|undefined").
- 팝업 상태(aria-haspopup="token")
- 확장 상태(aria-expanded="true|false|undefined")
- 눌림 상태(aria-pressed="tristate")
- 숨김 상태(aria-hidden="true|false|undefined")
- 제어 대상(aria-controls="ID reference list")
- 실시간(aria-live="token")
- 간결한 설명 참조(aria-labelledby="ID reference list")
- 간결한 설명(aria-label="string")
- 자세한 설명 참조(aria-describedby="ID reference list")
- 모달(aria-modal="true|false")
WAI-ARIA 어떻게 사용해?
나는 이번 프로젝트에서 aria-label, aria-labelledby, aria-haspopup, aria-pressed 을 사용했으므로 간단히 이 4가지예시를 들어 볼 수 있겠다.
aria-label="string"
간단한 설명을 제공할 태그에 속성을 부여한다.
<button type="button" aria-label="상세정보 닫기" title="상세정보 닫기"></button>aria-labelledby="id"
디테일한 설명을 제공하고 있는 태그의 아이디를 삽입한다.
<section aria-labelledby="hot-brownie-chocolate">
<h3 id="hot-brownie-chocolate">
HOT 브라우니 쇼콜라
<span lang="en">Brownie Chocolate</span>
</h3>
<p>
깊고 진한 초콜릿의 맛에 부드러운 휘핑크림과 브라우니를
함께 어울러져 고급스러운 디저트 같은 초콜릿 음료
</p>
</section>aria-haspopup="true|menu|dialog|listbox|tree|grid|false(default)"
어떤 종류의 popup이 있다는 정보(상태)를 제공한다.
<button type="button" aria-haspopup="dialog">
클릭하시면 상세정보를 확인할 수 있습니다.
</button>aria-pressed="true|false|mixed|undefined(default)"
요소의 눌림 상태를 제공한다.
<button type="button" aria-pressed="false">
클릭하시면 상세정보를 확인할 수 있습니다.
</button>내가 사용한 것은 ARIA에서 제공하는 것에 극히 일부분에 불과하다. 더 많은 ARIA 사용법을 알고 싶다면 해당 링크를 참조하기 바란다. 또한 ARIA를 사용하는 것이 무조건적으로 맞는 것은 아니다. 일단 ARIA를 사용하기 전, 의미있는 HTML을 작성한 후에 웹접근성 관점에서 추가적으로 제공되어야 할 정보가 있을 때 사용해야 한다.
🧚♀️
프로젝트에서 처음 이 개념을 접했을때 자신들의 주관에 따라 ARIA 속성이 다 달랐다. 하지만 조원들과의 협의를 통해 우리가 생각한 개념과 명세되어 있는 개념이 최대한 같은 의미인것을 제공하려고 노력했다.
실질적으로 장애에 대한 차별은 외부적으로 많은 이슈가 되고 있는데 웹에 관련하여 크게 못느꼈다는 것은 그만큼 내가 관심이 없었다는 것에 대해 부끄러웠다.
이번 기회를 통해 더 많은 사람들이 웹접근성에 관심이 생겼으면 좋겠다.
그렇게 해서 완성된 이디야프로젝트
📝 Reference
