웹의 힘은 보편성에 있다.
장애에 관계없이 모든 사람이 접근할 수 있도록 하는 것은
필수적인 요소이다.
-Tim Berners-Lee
1. 웹접근성의 필수요소
1. 인식의 용이성
2. 운용의 용이성
3. 이해의 용이성
4. 견고성
2. 웹접근성을 고려한 마크업
1) 한국어 언어표시
(주로 사용하는 언어를 기본으로 명시해야 한다는 이해의 용이성 원칙 준수)
<html lang="ko-KR">2) title은 고유하면서 명료하게(특수문자 지양)
<title>티스토리 홈입니다.</title>3) HTML 시맨틱 태그 요소와 WAI-ARIA role 속성을 통해 콘텐츠의 내용을 표시할 수 있다. 둘 중의 하나의 방법만을 사용하고 혼용하지 않는 것을 권한다.
<main>메인 콘텐츠</main> (O)
<div role="main">메인 콘텐츠</div> (O)
<main role='main'>메인 콘텐츠<main> (x)4) 논리적인 순서: 콘텐츠를 탐색하는 선형화된 순서를 지켜야 한다. (이해의 용이성)
ex. 메인메뉴 닫기버튼은 메인메뉴를 모두 마크업한 뒤 마크업 해야 한다.
5) <h1></h1>는 브랜드 로고와 같은 가장 강조되어야 할 최상위 제목을 마크업 할 때 사용한다.
메인콘텐츠들은 <h2></h2> 태그로 제목을 표시한다.
6) ally-hidden class를 부여해 콘텐츠에 숨김제목을 표시할 수 있다. => CSS를 통해 숨겨준다.
7) 비어있는 콘텐츠라 그 콘텐츠의 용도를 확실히 알 수 없을 때
aria-label = "메뉴 열기" / title = "메뉴열기" 등으로 버튼 등의 정보를 제공한다. aria-hidden=true 속성을 사용하면 스크린 리더기가 해당 요소를 무시하고 읽지 않는다.
<button type="button" class="button" title="메뉴 닫기" aria-label="메뉴 닫기">
<span class="close" aria-hidden="true">X</span>
</button>'IT' 카테고리의 다른 글
| [웹접근성]웹접근성을 고려한 CSS 디자인_숨김 콘텐츠 (0) | 2023.03.05 |
|---|---|
| [웹접근성]웹접근성을 고려한 마크업(WAI-ARIA)-2 (2) | 2023.03.05 |
| Figma(피그마) 디자인을 Zeplin(제플린)으로 Export 하는 방법 (0) | 2023.03.03 |
| 검색엔진최적화(SEO, Search Engine Optimization) 설정 방법 (0) | 2023.02.13 |
| 웹 표준이 뭘까? (Feat. W3C) (0) | 2023.01.24 |