보이는 것에 치중하면 안 됩니다. 콘텐츠를 순서에 맞게 배치하고 의미에 맞는 태그로 내용을 지정해 준 다음에 CSS를 이용하여 꾸며줘야 합니다.
기술설명
이 기술의 목적은 콘텐츠를 콘텐츠의 의미에 맞게 순서대로 배치하여 보조 기술을 사용하는 사용자가 콘텐츠의 순서에 따라 내용을 쉽게 이해할 수 있도록 하는 것입니다.
콘텐츠는 코딩된 순서로 보이는 것이 보통이지만 일부 기술은 코딩순서와는 다르게 보일 수 있습니다.
예를 들어 보겠습니다.
HTML에서 방향이 다른 언어들을 섞어 사용했습니다. '왼쪽에서 오른쪽으로 쓰는 한글'과 '오른쪽에서 왼쪽으로 쓰는 히브리어'를 같이 사용한 것입니다. 이를 브라우저로 보면 구두점(쉼표나 마침표)이 잘못된 위치에 있을 수 있습니다.
그래서 브라우저로 봤을 때 이상 없도록 HTML에서 구두점을 옮겨서 해결할 수 있습니다.
하지만 보조 기술을 사용하는 분들에게는 잘못된 내용을 전달하게 됩니다.
HTML은 콘텐츠가 올바르게 보일 수 있도록 내용의 순서대로 만들어야 하며, 브라우저로 봤을 때 문제가 된다면 해당 문제를 바로 잡아주는 태그를 사용하여 올바른 순서로 콘텐츠가 제공될 수 있도록 만들어야 합니다.
그래야 보조기술을 사용하시는 분들도 올바르게 콘텐츠를 이해할 수 있습니다.
HTML에서 지정한 공백이 브라우저에서는 안보이거나 다르게 보이는 경우도 있습니다.
하지만 브라우저에서 예쁘게 보이기 위해서, 공백문자를 넣는 다면 콘텐츠의 의미가 달라질 수 있습니다.
어떤 문장을 테이블(<table>)을 이용하여 페이지를 만들었다고 해봅시다.
브라우저로 봤을 때는 하나의 문장처럼 보이겠지만 보조 기술은 테이블 칸마다 분리된 것이라고 인식합니다.
테이블(<table>)을 이용해서 첫 번째 줄에는 '사진'을 넣고 두 번째 줄에는 '사진에 대한 설명'을 넣었다면 보조 기술은 '사진'과 '사진에 대한 설명'을 연관 지을 수 없게 됩니다.
예시
박물관 전시회 웹페이지입니다. 목록 형식의 메뉴가 제공되고 있습니다.
그리고 박물관에서 전시 중인 작품 사진도 제공하고 있습니다. 사진에는 작품에 대한 제목과 설명도 포함되어 있습니다.
메뉴는 의미에 맞게 순서대로 배치되어 있습니다.
사진 부분도 제목, 사진, 설명을 순서에 맞게 배치하였습니다.
CSS를 이용하여 메뉴와 사진부분을 좌우로 배치하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박물관</title>
<style>
ul#nav {
float: left;
width: 9em;
list-style-type: none;
margin: 0;
padding: 0.5em;
color: #fff;
background-color: #063;
}
ul#nav a {
display: block;
width: 100%;
text-decoration: none;
color: #fff;
background-color: #063;
}
div#description {
margin-left: 11em;
}
div#description img { height:100px }
</style>
</head>
<body>
<h1>박물관 홈페이지</h1>
<ul id="nav">
<li><a href="#">박물관 소개</a></li>
<li><a href="#">박물관 작품들</a></li>
<li><a href="#">박물관 1층 소개</a></li>
<li><a href="#">박물관 2층 소개</a></li>
<li><a href="#">박물관 3층 소개</a></li>
<li><a href="#">오시는 길</a></li>
<li><a href="#">연락처</a></li>
</ul>
<div id="description">
<h2>모나리자</h2>
<p><img src="https://i.namu.wiki/i/iUhhsDV-DA3kuR1zawAlAyAH06ubze7da4_qp6V07U5ykHR2WcBAJI3Ny6i4pMQibqIX9hElpar-qj1VGi_diJugjUQQSgSuBc8zaYAsYlVewi0wG6UJ67THp9TRwmj-2KHS8veYuvDbFCr2_ZvT7A.jpg" alt="모나리자"></p>
<p>레오나르도 다 빈치의 대표 작품</p>
</div>
</html>
자료
G59: 콘텐츠 내의 순서와 관계를 따르는 순서로 대화형 요소 배치
F1: CSS를 사용하여 정보 위치를 지정하여 콘텐츠의 의미를 변경하여 성공 기준 1.3.2 실패
F49: 선형화 시 의미가 없는 HTML 레이아웃 테이블을 사용하여 적합 기준 1.3.2에 부적합
점검절차
1. 기술을 이용하여 CSS 같은 스타일을 제거하여 콘텐츠만 보이게 합니다.
2. 콘텐츠의 순서가 원본과 동일한 의미를 가지고 있는지 확인합니다.
2번 절차를 따라야 합니다.
나의 정리
콘텐츠의 내용을 의미에 맞게, 웹표준 형식으로 HTML을 만들자는 것입니다.
CSS가 없던 아주 오래전 홈페이지 레이아웃을 만들기 위해 <table><table> 태그를 사용하였습니다.
브라우저에서 제작자가 원하는 모습으로 보이게 만드는 것이 목적이었습니다.
그렇게 만들다 보니 스크린 리더와 같이 보조 기술을 사용해서 콘텐츠를 이해하는 분들은 어려움을 겪게 되었습니다.
애국가 페이지를 예로 들어보겠습니다.
'애국가'라는 제목을 중앙 정렬로 하고 가사를 우측정렬로 하려고 합니다.
옛날 테이블 방식으로 표현하면 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애국가</title>
</head>
<body>
<table border="0" align="center" width="400">
<tr>
<td><center><b>애국가</b></center></td>
</tr>
<tr>
<td align="right">동해물과 백두산이 마르고 닳도록</td>
</tr>
<tr>
<td align="right">하느님이 보우하사 우리나라 만세</td>
</tr>
</table>
</html>
이렇게 만들면 스크린 리더는 '애국가', '동해물과 백두산이 마르고 닳도록', '하느님이 보우하사 우리나라 만세' 이 문장을 각각 다른 문장이라고 인식하여 사용자에게 알려줍니다.
스크린 리더가 올바르게 이해할 수 있도록 다음과 같이 웹표준 형식으로 만들어 주어야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애국가</title>
</head>
<body>
<h1>애국가</h1>
<p>
동해물과 백두산이 마르고 닳도록<br/>
하느님이 보우하사 우리나라 만세
</p>
</html>
<h1> 태그로 '애국가'가 문서서의 헤드라인임을 선언하고, '동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세'를 <p><p> 태그를 이용하여 한 문장임을 선언하면 스크린 리더는 사용자에게 올바른 콘텐츠 내용을 전달할 수 있게 됩니다.
하지만 이렇게 웹표준 형식으로 HTML을 만들면 글자를 가운데 정렬하거나 우측으로 정렬하는 레이아웃을 만들 수 없습니다. 이런 레이아웃은 CSS를 이용하여 아래와 같이 추가시켜 주어야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애국가</title>
<style>
h1, p { width:400px ; margin:auto }
h1 { text-align:center }
p { text-align:right }
</style>
</head>
<body>
<h1>애국가</h1>
<p>
동해물과 백두산이 마르고 닳도록<br/>
하느님이 보우하사 우리나라 만세
</p>
</html>
HTML은 콘텐츠 흐름에 맞게 순서대로 배치할 수 있게 하고, CSS는 레이아웃으로 요소를 배치하거나 꾸밀 때 사용해야 합니다.
보이는 것에 치중하면 안 됩니다. 콘텐츠를 순서에 맞게 배치하고 의미에 맞는 태그로 내용을 지정해 준 다음에 CSS를 이용하여 꾸며줘야 합니다.
G57: Ordering the content in a meaningful sequence
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G57.html
G57: Ordering the content in a meaningful sequence | Techniques for WCAG 2.0
A Web page from a museum exhibition contains a navigation bar containing a long list of links. The page also contains an image of one of the pictures from the exhibition, a heading for the picture, and a detailed description of the picture. The links in th
www.w3.org
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G59] 상호작용하는 요소들 또한 콘텐츠 순서에 맞게 순서대로 배치하자. (1) | 2024.02.24 |
|---|---|
| [웹접근성 지침-일반기술 G58] '텍스트'가 아닌 '콘텐츠' 옆에 '시간 기반 미디어의 대안'에 대한 링크 제공하기 (0) | 2024.02.17 |
| [웹접근성 지침-일반기술 G56] 영상이나 오디오에서 '배경소리'는 '음성'보다 최소 20데시벨 낮아야 한다. (0) | 2024.02.09 |
| [웹접근성 지침-일반기술 G55] 정의에 대한 링크 (0) | 2024.02.05 |
| [웹접근성 지침-일반기술 G54] '동영상 스트리밍 서비스'의 경우 '수어(수화)'가 제공 되어야 한다. (0) | 2024.01.31 |
