웹접근성

WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)

  웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, 자바스크립트 및 관련 기술로 개발된 사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양이다.
WAI-ARIA는 역할, 속성, 상태 정보를 동적 웹 애플리케이션에 추가함으로써 웹페이지(페이지의 일부)가 스스로를 정적 문서보다는 애플리케이션으로 선언할 수 있게 한다.  -위키피디아-

HTML을 의미 있게 작성한다.

  올바른 HTML을 사용한다면 WAI-ARIA 사용을 최소화할 수 있다. WAI-ARIA를 사용하기에 앞서 HTML을 의미 있게 사용했는지 검토한다. 의미 없는 div로 html을 짜는 것보다 의미에 맞는 semantic태그를 사용한다면 대부분의 접근성 문제는 해결된다. 

role, aria-*

  WAI-ARIA 속성을 모든 요소에 사용할 수 있는 것은 아니다. role 또는 aria-* 속성을 특정 HTML 요소에 사용할 수 있는 지 ARIA in HTML 명세를 검토하면서 적용해야 한다. 몇 가지 예를 들자면....

• nav, role="navigation" - nav 요소가 두 개 이상이라면 레이블을 제공해야 한다. 
• aria-labelledby="navigation", aria-label="검색"
  • 두 속성은 모두 현재 요소에 설명을 제공한다. aria-label은 값에 간결한 설명을 직접 제공한다. aria-label은 현재 요소를 설명할 다른 참조(연결) 요소가 없는 경우에만 사용한다. 가능한 aria-labelledby 속성을 사용하는 것이 좋고, aria-label 속성과 함께 선언하는 경우 aria-label 속성이 우선순위가 낮기 때문에 보조기기는 aria-labelledby 속성을 설명한다.
• aria-errormessage="ID reference"
  • 주로 input 요소에 선언하여 오류 메세지를 제공하는 요소를 값으로 참조한다. aria-invalid="true" 속성을 활성화하면 보조기기는 aria-errormessage 속성이 참조하는 요소를 오류 메시지로 전달한다. aria-errormessage가 참조하는 요소를 동적으로 화면에 표시한다면 aria-live 속성을 이용해서 실시간으로 보조기기에 오류 메시지를 전달할 수 있다. 오류 메시지는 '오류 원인과 해결 방법'을 포함해야 한다.
• aria-hidden="true"
  • 보조기기가 전달하지 않아도 될 요소에 입력한다. 가령 상품의 인기도(?)를 나타내는 별점 같은 부분은 점수를 전달하는 것만으로도 전달하고자 하는 바는 충분하기에 또 한 번 별 모양 아이콘이 5개가 있고 그중 하나는 반쪽이고 같은 것은 숨겨도 괜찮다(고 생각한다) 그런 경우엔 aria-hidden을 사용하여 사용자에게 혼란이 되는 요소는 가려준다.

추가적인 속성이나 더 자세한 예시는 레진 WAI-ARIA 가이드라인을 참고해도 좋을 것 같다.

srceen reader only

  웹 접근성을 위한 클래스

 aria-hidden 과는 반대의 의미인 css 클래스가 아닐까 싶다.

화면상으로 출력되지는 않지만 스크린 리더기가 읽어줌으로써 사용자들이 더 확실한 정보를 얻게 된다.

단순하게 display:none;을 해버리면 화면상에 출력이 되지 않는 것과 동시에 보조기구는 해당 태그 요소를 인식하지 못한다. 이 경우는 접근성과 관계가 없는 그저 문서상에서 보이지 않게 하고 싶을 때 사용을 한다.

보통 부트스트랩 관련 CDN을 연결해 놓으면 클래스 추가만으로 동작을 하지만 별도로 마크업 해두는 것도 좋다. 인터넷이 되지 않거나 링크 주소가 깨지는 경우엔 동작하지 않기 때문이다.

.sr-only {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: -1;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
}

/* 출처: https://github.com/rohjs/bugless-101/blob/master/html-practice/12-gmail-inbox/styles.css 김버그 선생님 */

.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0,0,0,0);
}

/* 출처: https://rgy0409.tistory.com/3079 [친절한효자손 취미생활] */