티스토리 뷰
[웹 접근성] 웹 접근성 지침(17-20) 기본 언어 표시 / 사용자 요구에 따른 실행 / 콘텐츠의 선형 구조 / 표의 구성
JINSUKUKU 2021. 10. 4. 21:05
✅ 17. 기본 언어 표시
- 웹 브라우저는 텍스트 콘텐츠의 언어 정보를 바탕으로 화면에 표시하고 전달한다
- 언어를 명시하면 자동언어 전환을 지원하는 스크린 리더는 선언된 언어로 전환하여 읽어준다
- 그렇기 때문에 웹페이지에 기본 언어, 주로 사용하는 언어를 명시해야만 한다
(1) 기본 언어 표시
<!-- HTML 4.01/HTML5 표준 -->
<html lang="ko">
<!-- XHTML 1.0 표준 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<!-- XHTML 1.1 표준 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">- 기본 언어 표시는 HTML 태그에 lang 속성을 사용해 "ISO639-1"에서 지정한 두 글자로 된 언어 코드로 제공한다
- 기본 언어 설정을 해둔 상태에서 중간에 다른 언어를 사용한다면, 해당 영역은 langt속성을 사용해 적절하게 대응한다
✅ 18. 사용자 요구에 따른 실행
- 사용자가 의도하지 않은 기능 (새 창, 초점에 의한 맥락 변화 등)은 실행되면 안 된다
- 사용자가 원하고 의도한 상황에서만 새 창이 뜨거나 페이지 새로고침이 되는 등의 기능이 실행되어야 한다
(1) 페이지 진입 시 뜨는 새 창(팝업)
- 사용자가 예측할 수 없는 상황에서 새 창이 열리는 경우는 오류 사례이다
- 페이지 진입 시 새창이 열리는 경우 역시 오류 사례에 해당한다
(2) 화면을 가리는 레이어 팝업
- 새 창 팝업보다 레이어 팝업을 사용하는 추세인데, 화면을 가리는 레이어 팝업을 제공하는 것도 오류 사례에 해당한다
- 이를 준수하기 위해서는 반복 영역 건너뛰기 보다 먼저 팝업을 제어할 수 있도록 구현해야 한다
- 또는 화면을 가리지 않고 가장 상단에 레이어 팝업을 제공해야 한다
(3) 사전에 인식할 수 없는 새 창
- 특정 링크를 클릭해 새 창이 뜨는 경우 스크린 리더 사용자는 새창이 뜬 것을 인지하기 어렵다
- 키보드 사용자 역시 다시 해당 창으로 돌아와 키보드 접근을 해야 하는 불편함이 생긴다
- 사용자가 예측하지 못한 팝업은 웹을 탐색하는 데에 방해 요인이 된다
- 요소 내부에 blind로 새 창이라는 텍스트를 넣어주거나 tilte로 새 창으로 제공하도록 한다
- 새 창으로 제공할 때에는 target=“blank”를 적용하여 새 창이 열릴 것을 사전에 알려준다
<!-- 올다른 새 창 제공 방법 3가지 -->
<a href="…">이용약관<span class="blind">새 창</span></a>
<a href="…" title="새 창">이용약관</a>
<a href="…" target="_blank">이용약관</a>- Window.open을 사용해 새 창을 띄우는 것은 새 창을 인지할 수 없기 때문에, 위와 같은 방법을 권장한다
- 다만 title과 target으로 제공하는 방법은 센스리더 외 다른 스크린 리더에서는 새 창임을 알려주지 않는다
- 그렇기 때문에 blind로 새 창이라는 텍스트를 넣어주는 것이 가장 확실한 방법이다
(4) 컨트롤 선택 시 기능 실행
- 사용자가 콤보 박스, 라디오 버튼, 체크 상자 등의 컨트롤을 선택했을 때 기능이 실행되거나 서식 제출이 일어나서는 안된다
- ‘오늘 하루 페이지를 열지 않습니다’ 체크박스를 선택하자마자 팝업이 닫히는 경우 오류 사례에 해당한다
- 이를 준수하기 위해서는 닫기 버튼을 따로 제공하여 체크 후, 닫기 버튼을 따로 눌러야 팝업이 닫히도록 구현해야 한다
(5) select에 onchange 이벤트 적용
- select에 onchange 이벤트가 적용되어 option 선택과 동시에 페이지가 이동되는 경우 오류 사례에 해당한다
- 키보드로 접근하자마자 페이지가 변경되므로, 이후 콘텐츠에 접근이 불가능하기 때문에 키보드 사용 보장에도 영향을 미친다
- onFocus나 onKeypress 등의 이벤트에 의해 포커스를 옮기는 동작, 초점을 받는 것, 새창으로 이동, 레이어 팝업이 뜨는 등
- 이러한 이벤트가 일어나는 경우 모두 사용자가 원하지 않았을 대 기능이 실행되는 것이므로 오류 사례이다
- 즉, 사용자가 의도하지 않은 기능이 실행되지 않도록 구현해야 한다
✅ 19. 콘텐츠의 선형 구조
- 콘텐츠는 논리적인 순서로 제공해야 한다
- 웹 페이지를 구성하는 모든 콘텐츠가 사용자가 이해할 수 있도록 선형 구조로작성되어야 한다
(1) 탭 제목 - 내용 콘텐츠
- 메뉴와 내용을 따로마크업 하는 경우 스크린리더가 메뉴를 모두 읽은 뒤 내용을 읽어준다
- 그렇기 때문에 어떤 메뉴에 대한 내용인지 인지하기 힘들다.
<!— 탭(1):제목 > 탭(1):내용 > 탭(2):제목 > 탭(2):내용 —>
<a href="…">상품</a>
<div>상품 내용</div>
<a href="…">쇼핑몰</a>
<div>쇼핑몰 내용</div>
…- 따라서메뉴→내용→메뉴→내용의 순서로 마크업 하는 것을 권장한다.
<!— 해당 탭 콘텐츠 내용에 제목을 제공 —>
<ul>
<li><a href="…">상품</a></li>
…
</ul>
<div>
<h2 class="blind">상품</h2>
상품 내용
</div>- 만약 메뉴끼리 내용끼리 마크업 해야 한다면, 내용에 해당 메뉴의 제목을 blind로 반드시 제공해야 한다
(2) 제목 - 내용 - 더보기 콘텐츠
- 제목, 내용, 더보기 순의 콘텐츠의 경우는 마크업 순서를 보이는 순서대로 제목→더보기→내용 순으로 마크업 하면오류 사례에 해당한다
- 논리적으로 제목→내용→더보기 순으로마크업 하는 것이 준수 사례이다
✅ 20. 표의 구성
(1) 데이터 표
- 볼 수 없는 사용자는 스크린 리더가 마크업에 따라서 읽어주는 표의 내용을 들으며 인식한다
- 때문에 데이터를 표로 구성할 경우 표의 내용, 구조 등을 이해할 수 있게 제목 셀과 데이터 셀이 구분되도록 구성해야 한다
(2) 표의 구성
- 제목 셀과 내용 셀 구분 : 제목 셀은 <th> 태그로, 셀은 <td>로 마크업 한다
- 또한 제목 셀이 가로, 세로로 있는 경우 scope 속성으로 행 제목과 열제목을 구분 가능하도록 제공한다
- 제목과 요약 정보 역시 제공해야 하는데, XHTML/HTML4와 HTML5의 방법이 다르다
- 제목과 요약 정보의 내용이 동일해서는 안되며, 요약 정보가 어려운 경우는 제목 셀을 나열하여 제공한다
<!-- summary = "표의 요약 정보" -->
<table summary="부서별 직원 수, 합계 정보">
<!-- <caption>표의 제목</caption> -->
<caption>직원 관리 현황 표</caption>
<thead>
<tr>
<!-- scope = "열 제목" -->
<th scope="col">번호</th>
<th scope="col">부서</th>
<th scope="col">직원 수</th>
</tr>
</thead>
<tfoot>
<tr>
<!-- scope = "행 제목" -->
<th scope="row">합계</th>
<td></td>
<td>15명</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>총무부</td>
<td>5명</td>
</tr>
<tr>
<td>2</td>
<td>인사부</td>
<td>4명</td>
</tr>
<tr>
<td>3</td>
<td>기획부</td>
<td>6명</td>
</tr>
</tbody>
</table>- XHTML/HTML4 : <caption>으로 제목을 제공하고, table의 summary 속성으로 요약정보를 제공한다
- 또한 제목 셀이 가로, 세로로 있는 경우 scope로 행 제목과 열제목을 구분 가능하도록 제공한다
<table>
<caption>
<!-- 제목 -->
<strong>직원 관리 현황 표</strong>
<!-- 요약 정보 -->
<span>부서별 직원 수, 합계 정보</span>
</caption>
...
</table>- HTML5 : HTML5부터는 sumamry 속성을 사용할 수 없기 때문에 caption에 제목과 요약 정보를 모두 제공한다
(*caption 내부의 태그는 시각적으로 제목과 요약정보 구분을 위한 태그로, 필수는 아니다)
(3) 복잡한 표
<thead>
<tr>
<th rowspan="2" scope="col" id="date">기준일</th>
<th colspan="2" scope="col" id="gsale">경기도 매매가</th>
</tr>
<tr>
<th scope="col" id="price">면적단가</th>
<th scope="col" id="change">변동액</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="d20181020">2018.10.20</th>
<td headers="date d20181020 gsale price">902</td>
<td headers="date d20181020 gsale change">유지 0</td>
</tr>
<tr>
<th scope="row" id="d20181021">2018.10.21</th>
<td headers="date d20181021 gsale price">904</td>
<td headers="date d20181021 gsale change">상승 2</td>
</tr>
</tbody>- id와 headers 속성을 사용해 제목 셀과 내용 셀을 보다 정확하게 연결해주어야 한다
- 제목 셀마다 서로 다른 id를 부여하고, 내용 셀에는 관련 있는 제목 셀의 id 값을 headers에 나열하도록 한다
- 스크린 리더에서는 headers에 나열된 id값 순서대로 제목 셀을 읽어준다
- 위의 코드로 예를 들자면, “902”라는 내용은 “기준일 2018년 10월 20일 경기도 매매가 면적단가 902”라고 읽어주게 된다
(4) 레이아웃 테이블
- 데이터 테이블은 테이블 태그로 마크업 하는 것이 옳다
- 만약 레이아웃을 위해 테이블을 사용하게 된다면 테이블로 마크업 하지 않고 구조적으로 마크업 하는 것이 좋다
- 테이블로 마크업 하는 경우, 데이터 테이블로 혼동할 수 있기 때문에 caption, summary, th를 제공하지 않아야 한다