[웹접근성 정리] AOA11Y - 웹접근성과 웹표준

1. 웹접근성

웹사이트에서 제공하는 정보를 차별 및 제한없이

다양한 사람이 동등하게 이용할 수 있도록 보장하는 것

 

다양한 사람 : 장애인 및 고령자를 포함한 모든 사람 + 다양한 platform 및 Device와 웹브라우저 등 모든 환경

 

 

2. 웹접근성을 향상시키기 위한 방법

  1) 웹접근성 지침 = WCAG를 준수

WCAG = W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안

: 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여

장애가 있는 사용자가 보다 쉽게 이용할 수 있또록 준수해야 하는 지침.

 

(1). WCAG 2.1 - https://www.w3.org/TR/WCAG21/​

(2). 한글 웹콘텐츠 접근성 가이드라인 - https://yamoo9.gitbook.io/wcag/intern...​

(3). WAI-ARIA 1.1 - https://www.w3.org/TR/wai-aria-1.1/​

(4). WAI-ARIA 사례집 - https://www.wah.or.kr:444/board/board...​

(5). WAI-ARIA Github - https://github.com/niawa/ARIA

 

  2) 웹표준 기술을 활용

웹에서 표준적으로 사용되는 기술이나 규칙

HTML- 견고한 구조 설계

CSS- 레이아웃 및 스타일

Javascript & DOM- 동작 및 제어

 

WAI-ARIA

-RIA를 위한 웹접근성 관련 기술,

-HTML에서 부족했던 웹접근성을 보완하는 것

 역할모델, 상태, 속성을 추가

-W3C에서 다루고 있다.

: 웹접근성 연구소 홈페이지에서

WAI-ARIA사례집을 참고하면 더 와닿는다.

 

 

3. 웹접근성을 고려한 HTML마크업

- <title>태그에 들어가는 말은 페이지마다 핵심을 담아 각각 다르게 작성한다.

  불필요한 특수문자는 제공하지 않는다.

- 시멘틱 태그는 보통 내용이 없으면 작성하지 않으나

  눈에 보이지 않더라도 꼭 제공해야 할 정보가 있을 경우 작성해준다.

- 시멘틱 태그를 쓸 수 있는데 (네이티브)

  거기에 aria의 role속성을 혼용해서 쓰는 경우는 별로 좋지 않다.

  aria의 role속성을 쓴다면 시멘틱 태그보다도

  아무런 의미가 없는 div태그에 쓰는 것이 낫다.

 

 

3.콘텐츠 제목 및 논리적인 순서

-SEO와 보조 기기를 위한 제목 제공

 

-이미지로 처리해 내용이 비어있는 버튼요소에는

aria-label="메뉴 열기" 속성을 추가한다.

그러나 아직 aria-label을 제공하지 않는 스크린리더를 사용하는 사용자를 위해서

title속성을 이용하여 "메뉴 열기"에 대한 내용을 제공해준다.

<button type="button" title="메뉴 열기" aria-label="메뉴 열기">

 

x와 같은 문자로 닫기 버튼을 만들었을 경우에는

aria-hidden="true"속성을 추가해서 스크린 리더가 읽어주지 않도록 한다.

 

 

4. 키보드 접근 및 문법오류 수정

<figure>

  <img>

  <figcaption>

- 이미지 + 이미지에 대한 제목은

  figure로 묶어 작성해주는 것이 좋다.

- figcaption과 동일한 정보를 이미지가 제공하는 경우

  공란으로 둬서 스크린 리더가 읽어주지 않도록 할 수 있다.

 

<a>

role="button"

aria-haspopup="dialog" : dialog창이 열리는 것을 표기

aria-pressed="false" : 버튼이 눌렸는지 안눌렸는지 표기

 

button요소에는 figure을 담을 수 없다.

그런 경우 a의 속성을 role="button"으로 표기해주고

위와 같은 속성을 추가하여 웹접근성을 보완할 수 있다.

 

 

5. WAI-ARIA를 활용한 다이얼로그 만들기

<dl>

  <dt>

  <dd>

이름과 값으로 형식 구성 가능

 

 

6. 웹접근성을 고려한 CSS디자인

- 하단에 있는 요소에서 읽어주지 않아야 하는 요소가 있을 때

absolute태그의 위치를 음수로 하여 화면 밖으로 밀어낼 경우

스크린리더가 읽는 순간 화면이 상단으로 이동하는 오류가 있다.

 

: 이를 해결하기 위해

요소에 absolute 속성을 준 뒤 offset값을 주지 않는 방법이 있다.

.ally-hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    white-spath: nowrap;
}

 

 

 

출처 : AOA11Y, www.youtube.com/playlist?list=PLtaz5vK7MbK1vJ7HJjCV5xSy7bW7D_mbB