퍼블리싱/웹접근성
웹접근성 웹표준 정확하게 짚고 넘어가자
xhakxh135
2024. 1. 28. 20:13
반응형
SMALL
웹접근성에 대해서 취준할 때 중요하다고 얘기는 많이 들었지만
실무에서 막 쓰지는 않았어서 개념정도만 알고 있다가,
이번에 적용해야 될 일이 생겨서 정리를 다시 해보려고 한다.
스크린리더로 사용자가 불편하지 않고 잘 읽을 수 있게 도움을 주는 역할로 알고 있는데,
이 때 WAI-ARIA를 사용하는걸로 알고 있다.
일단..웹접근성과 웹표준에 대해 다시 한번 짚고 넘어가겠다.
✨웹접근성
웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
출처 : 위키백과
img태그의 alt를 예로 들어볼 수 있다.
✨ 웹표준
웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다.
출처: 위키백과
시맨틱 태그를 예로 들어볼 수 있다.
✨ WAI-ARIA
WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)는 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, 자바스크립트 및 관련 기술로 개발된 사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양이다.
출처: 위키백과
예시는 아래와 같다.
탭 목록, 탭, 탭 패널(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를 참고할 수 있다.
반응형
LIST