2022-03-29 게시 됨2022-03-29 업데이트 됨FE5분안에 읽기 (약 786 단어)

웹 접근성!

웹 접근성은 장애인 사용자가 비장애인 사용자와 동등하게 웹사이트의 정보에 접근하고 이용할 수 있도록 보장하는 것이다.

웹 접근성에 대해서 공부했다고 생각했는데, 부족한 점이 많아서 다시 정리하게 됐다!

적절한 대체 텍스트 제공

KWCAG 2.x:
텍스트가 아닌 컨텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.

장식 목적인 이미지는 대체 텍스트를 제공하지 않아야 한다.

1
2
3

<img src="valid.jpg" alt="장식" />X

<img src="valid.jpg" alt /> O

주변 문맥을 통해 충분히 설명하고 있는 내용 또한 대체 텍스트가 불필요하다.

내용을 중복으로 제공하면 오히려 불편하게 된다.

1 2	<a href="..."> <img src="..." alt /> description </a> O <a href="..."> <img src="..." alt="description" /> description </a> X

css 배경 이미지에 의미가 폼함된 경우 IR 기법을 사용해야 한다.

.ally {
  position: absolute;
  opacity: 0;
}

반복 영역 건너뛰기

KWCAG 2.x:
콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

메뉴와 같은 영역은 건너뛸 수 있어야 한다.

@media (max-width: 960px) {
  .skipToMain {
    display: none;
  }
}
@media (min-width: 961px) {
  .skipToMain {
    display: block;
    height: 1px;
    margin-bottom: -1px;
    overflow: hidden;
    text-align: center;
    line-height: 48px;
  }
  .skipToMain:focus {
    height: auto;
    margin-bottom: 0;
  }
}

표의 구성

KWCAG 2.x:
표는 이해하기 쉽게 구성해야 한다.

표에 제목과 소제목(th,caption)을 제공하여서 스크린리더가 읽도록 할 수 있다.

또한 scope 속성을 통해 어떤걸 설명하는지 명시해야한다.

<table>
  <caption>
    대한민국 지역별 인구 통계
  </caption>
  <thead>
    <tr>
      <th scope="col">년도</th>
      <th scope="col">서울</th>
      <th scope="col">대전</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">2021</th>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

레이블 제공

KWCAG 2.x:
사용자 입력에는 대응하는 레이블을 제공해야 한다.

<input id="xxx" />
<label for="xxx">아이디</label>

<input aria-label="아이디" />

자막 제공

KWCAG 2.x:
멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야한다.

<video poster="myvideo.png" controls>
  <source src="*.mp4" srclang="en" type="video/mp4" />
  <track src="*.vtt" kind="captions" srclang="en" label="English" />
</video>

제목 제공

KWCAG 2.x:
페이지,프레임,콘텐츠 블록에는 적절한 제목을 제공해야 한다.

<title>XX 홈페이지에 오신 것을 환영합니다!</title> X
<title>특수 문자 제발 쓰지 마요.</title> X
<title>다른 페이지와 중복 없는 고유한 제목</title>

<iframe src="*.html"></iframe> X
<iframe src="*.html" aria-label="공시 자료"></iframe> O
<iframe src="*.html" aria-label="빈 프레임"></iframe> O

정지 기능 제공

KWCAG 2.x:
자동으로 변경되는 컨텐츠는 움직임을 제어할 수 있어야 한다.

정지, 이전, 다음 등의 기능을 제공해야 한다.

키보드 사용 보장

KWCAG 2.x:
모든 기능은 키보드만으로 사용할 수 있어야 한다.

장치독립적 이벤트 핸들러를 사용해야 한다.

onblur
onchange
onclick
onfocus
oninput
onselect

초점 이동

KWCAG 2.x:
키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

텍스트 컨텐츠의 명도 대비

KWCAG 2.x:
텍스트 컨텐츠와 배경 간의 명도 대비는 4.5대 1 이상이여야 한다.

기본 언어 표시

KWCAG 2.x:
주로 사용하는 언어를 명시해야 한다.

1	<html lang="ko"></html>

오류 정정

KWCAG 2.x:
입력 오류를 정정할 수 있는 방법을 제공해야 한다.