2023. 10. 15. 13:17ㆍ개인노트-인강
The RED 견고한 UI 설계를 위한 마크업
Part 4. Accessibility
01. 웹 접근성 오류 유형 12개 리뷰
# 웹 접근성 오류 유형 12개 리뷰
## 대체 텍스트 제공 (Non-text Content)
텍스트 아닌 콘텐츠는 그 목적에 상응하는 대체 텍스트를 포함한 상태로 표시해야 한다.
1. 사례 1
<img src="valid.jpg" alt="장식"> ❌
<img src="valid.jpg" alt> 👏- 장식 목적의 이미지는 alt 속성만 제공하고 값을 비워둔다.
2. 사례 2
- 주변 문맥을 통해 이미 충분히 설명하고 있는 내용은 대체 텍스트 불필요. 내용 중복 금지.
- 내용이 중복되면 화면 낭독기를 사용하는 시각 장애인들이 오히려 더 불편해 한다.
3. 사례 3
<a href="...">
<img src="..." alt> 👏
우리사이느은
</a>- 하나의 anchor 태그가 이미지와 텍스트를 감싸고 있다. 이 이미지에 대한 설명은 이미 텍스트로 설명되고 있으므로 alt 속석의 값을 생략한다.
- 화면 낭독기는 anchor 태그를 만나면, 그 안에 있는 내용들을 전부 하나의 텍스트처럼 읽어주기 때문이다.
4. 사례 4
- CSS 배경 이미지에 의미가 포함된 경우 IR (Image Replacement) 기법 사용.
- img 태그로 이미지를 제공하는 것이 아니기 때문에 대체 텍스트를 제공하지 않게 된다. 이 때 IR기법을 활용한다.
- 화면에는 css 배경 이미지를 표시하고, html 코드에 대체 텍스트를 화면에 보이지 않게 추가한다.
- 대체 텍스트에 적용하는 css 코드는 아래와 같다.
.a11y {
position: absolute; 👌
opacity: 0; 👌
display: none; ❌
visibility: hidden; ❌
width|height: 0; ❌
font-size: 0; ❌
}
## 반복 영역 건너뛰기 (Bypass Blocks)
여러 웹 페이지에서 반복되는 콘텐츠 블록을 우회할 수 있어야 한다.
- Tab 키를 눌렀을 때, 화면에 나오는 숨은링크이다.
@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;
}
}- 위 코드에서 960이하의 해상도에서는 사용하지 않게 처리한 이유는 모바일이나 테블릿과 같은 장치에서는 키보드라는 장치가 없기 때문에(보통 터치로 제어한다.) 모바일에서는 display: none으로 숨겼다.
- 해상도 961 이상에서는 height: 1px, overflow: hidden 을 주어서 넘치는 영역을 보이지 않도록 만들고, focus를 설정하여 키보드 초점이 들어가면 height: auto 로 설정하여 화면에 등장하게 만든다.
## 표의 구성 (Info and Relationships)
화면에 전달하는 정보, 구조, 관계는 텍스트로 변환하거나 기계가 인식할 수 있어야 한다.
(표의 구성) 표는 이해하기 쉽게 구성해야 한다.
<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>
<tr>
<th scope="row">2020</th>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>### caption 요소
- 표의 요소 안쪽에 첫번째 요소로 caption 요소를 사용한다.
- 스크린 리더 사용자는 표에 접근했을 때, caption의 내용을 전달받게 된다.
### th 요소
- caption 다음으로 중요한 것은 th 라는 요소이다.
- table header의 약자이다. 즉, 제목 cell을 의미한다.
- th와 함께 사용해야될 속성이 scope 속성이다. scope속성은 어떤 셀을 관측(설명)하고 있는가.를 의미한다. col 값은 열, row 값은 행을 의미한다.
## 레이블 제공 (Labels or Instructions)
콘텐츠가 사용자 입력을 요구할 때 레이블 또는 설명을 제공해야 한다.
(레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.
<input value="아이디"> ❌
<input placeholder="아이디"> ❌<input id="xxx">
<label for="xxx">아이디</label> 👏<input aria-label="아이디"> 👌- 만약 화면에 label 텍스트를 노출하지 않고 input 컨트롤만 노출하고 싶다면, 흔치않은 경우이지만 aria-label 이라는 속성안에 직접 대체 텍스를 입력하는 방법도 있다. 입력된 값은 화면에 노출되지 않는다.
## 자막 제공 (Captions(Prerecorded))
녹음된 음성 콘텐츠에 동기화된 자막을 제공해야 한다. 미디어가 문자를 대체하기 위한 설명이면 예외. (실시간 음성 X)
(자막 제공) 멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.
<video poster="myvideo.png" controls>
<source src="*.mp4" srclang="en" type="video/mp4">
<track src="*.vtt" kind="captions" srclang="en" label="English">
👏
</video>- 위 코드처럼 자막을 제공하기 어려운 경우 한국에서 허용하는 방식으로 대본 또는 수어 제공방법이 있다.
## 제목 제공 (Page Titled / Headings and Labels)
### Title
웹 페이지는 주제나 목적을 설명하는 제목(title)이 있어야 한다.(A)
제목(heading)과 레이블은 주제 또는 목적을 설명해야 한다.(AA)
(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
<title>XX 홈페이지에 오신 것을 환영합니다!</title> ❌
<title>▒▒▒ 특수 문자 제발 쓰지 마요.</title> ❌
<title>다른 페이지와 중복 없는 고유한 제목</title> 👏- title은 검색엔진, 화면 낭독기에서 가장 중요한 text이다.
### Heading
- 검색엔진은 Heading이 잘 정돈된 웹페이지를 좋아한다.
- 화면 낭독기는 Heading 텍스트만 따로 모아서 음성으로 전달받고, 원하는 위치로 직접 이동할 수 있다. 페이지의 목차를 제공하는 것과 같은 효과가 있다.
### iframe에 대한 설명 제공
- aria라는 명세를 사용해서 aria-label에 설명을 제공한다.
<iframe src="*.html"></iframe> ❌
<iframe src="*.html" aria-label="공시 자료"></iframe> 👏
<iframe src="*.html" aria-label="빈 프레임"></iframe> 👏## 정지 기능 제공 (Timing Adjustable)
- 콘텐츠에 시간 제한이 설정되어 있다면 최소한 다음 중 하나를 만족해야 한다. 끄기, 조절, 연장.
- (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
- 움직이는 콘텐츠에는 이전, 다음, 정지기능을 제공하면 된다.
## 키보드 사용 보장 (Keyboard)
마우스에서의 동작이 키보드로도 똑같이 동작해야 한다.
- 콘텐츠의 모든 기능은 개인적인 타이핑 속도에 구애 받지 않고 키보드 인터페이스를 이용하여 조작이 가능해야 한다.
- (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
- 위처럼 구현해야 하는 이유는 상지 장애인분들도 있기 때문이다.
- 예를 들어 키보드 초점이 들어가면 sub 메뉴가 펼쳐질 때, 키보드 초점이 들어가도 같은 동작이 나와야 한다.
### 해결방법
- '장치 독립적 이벤트 핸들러'를 알아야 한다.
- '장치 독립적 이벤트 핸들러' 키보드와 마우스의 동등한 사용을 보장하는 이벤트 핸들러이다.
- 예를 들어 onclick 이벤트 핸들러는 사용자의 마우스 클릭에도 반응하지만, 사용자가 키보드 초점이 들어간 컨트롤에 엔터를 쳐도 onclick 이벤트가 발생한다. 이처럼 마우스와 키보드 모두 사용할 수 있다.
onblur
onchange
onclick
onfocus
oninput
onselect// 아래 이벤트 핸들러는 키보드 접근이 보장되는지 주의를 기울여야 한다.
ondblclick ⚠️
onkeydown ⚠️
onkeypress ⚠️
onkeyup ⚠️
onmousedown ⚠️
onmouseenter ⚠️
onmouseleave ⚠️
onmousemove ⚠️
onmouseout ⚠️
onmouseover ⚠️
onmouseup ⚠️
touchstart ⚠️
touchend ⚠️
touchmove ⚠️
touchcancel ⚠️## 초점 이동 (No Keyboard Trap / Focus Visible)
- 키보드 인터페이스를 이용하여 페이지 구성 요소로 포커스 이동이 가능하다면 포커스는 키보드 인터페이스 만으로 구성 요소로부터 떠날 수 있어야 한다. 키보드 조작 가능한 모든 사용자 인터페이스는 키보드 포커스 표시가 보이는 방식으로 제공해야 한다.
- (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
### 시각적 구별
- 키보드 초점이 인풋 컨트롤 버튼 컨트롤에 들어갔을 때, 그 초점이 시각적으로 눈에 보여야 한다.
- 이유 : 시각 장애인들만 키보드만을 사용하는 것은 아니다. 상지 장애인들도 키보드만을 사용한다.
- 즉, outline을 지우면 안된다. 기본적으로 os나 브라우저에서 아웃라인을 제공하고 있다. 그래서 우리들이 일부로 지우지만 않으면 된다.
## 텍스트 콘텐츠의 명도 대비 (Contrast (Minimum))
- 문자와 문자 이미지의 시각적인 표현은 최소한 4.5:1의 명암 대비를 부여해야 한다.(큰 문자, 장식, 로고 제외)
- (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
- 1은 배경색이고, 4.5는 전경색이다. (전경색은 글꼴색을 의미)
- WCAG에서는 명암대비를 1부터 21단계까지 w3c에서 정한 기준에 따라서 나누어 놓고 있다.
- 16px 정도는 되는 글꼴을 제공하는 것이 좋다.
## 기본 언어 표시 (Language of Page)
- 모든 웹 페이지의 기본 휴먼 랭귀지는 기계적으로 판단할 수 있어야 한다.
- (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
<html lang="ko"> 🇰🇷
<html lang="en"> 🇺🇲
<html lang="ja"> 🇯🇵
<html lang="zh"> 🇨🇳- html 요소에 lang 속성으로 휴먼랭귀지로 선언을 해주어야 한다.
- 참고로 lang 속성은 구글에서 문서의 검색결과를 만들 때 참고하지는 않는다.
## 오류 정정 (Error Identification/Suggestion)
- 만약 입력 오류가 자동으로 감지되면 오류 항목을 식별하고 사용자에게 문자로 알려야 한다.(A) 의견을 제공해야 한다.(AA)
- (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
'개인노트-인강' 카테고리의 다른 글
| 풀스택 서버리스 프로젝트 with React - 1. 사이드프로젝트 첫 걸음 (0) | 2023.11.02 |
|---|---|
| 개인 노트 정리) 마크업20 - HTML만으로 20% 부족할 때 (1) | 2023.10.22 |
| 개인 노트 정리) 마크업18 - 덜컥덜컥 누적 배치 변경 문제 (0) | 2023.10.10 |
| 개인 노트 정리) 마크업17 - 덩어리 콘텐츠 빨리 그리기 (0) | 2023.10.04 |
| 개인 노트 정리) 마크업16 - CSS 코드 최적화 (0) | 2023.09.22 |