[웹 접근성 가이드] 3. 이해의 용이성 : 콘텐츠의 논리성

 

안녕하세요, 알씨타운입니다.🤗

저번 포스팅에 이어 오늘도 웹 접근성 지침에 대해 알아보아요!

[ 이해의 용이성 ]

3.1 가독성

3.2 예측 가능성

3.3 콘텐츠의 논리성

3.4 입력 도움

출처 입력

---

 

3.3 콘텐츠의 논리성

​

​

1. 콘텐츠의 선형 구조

​

스크린 리더 등의 보조기기는 웹을 전체적으로 읽어 줄 때

소스 코드 순서대로 풀어서 접근합니다.

그렇기 때문에 웹 개발자들은 논리적인 순서로 콘텐츠를 제작하여야 합니다!

 

 

예를 들면

 

1) 계층 구조가 명백히 필요한 콘텐츠(ex. 조직도)를 마크업할 때

 

 

위의 사진 처럼 조직도를 단순히 이미지로만 만들어서 넣으면 웹 접근성에 부합하는 행위입니다!

비 장애인은 사이트에 나와있는 조직도가 단순히 이미지로 제작되어 있어도

눈으로 쉽게 볼 수 있지만, 시각 장애인의 경우 조직도를 눈으로 인식하기 어렵기 때문에

이러한 조직도를 넣어야 하는 경우,

<ul>,<ol>,<li>태그를 활용해 계층 구조를 표현하는 것이 좋습니다!

 

 

 

2) tab메뉴 형태로 컨텐츠의 제목과 내용을 배치할 때

 

tab메뉴를 만들때 유의할 점이 키보드의 tab키로 조작했을 때

각 tab의 제목에 초점을 두고 enter을 누르면 바로 해당 내용으로 초점이 이동되어야 합니다.

 

또한 "더보기" 버튼이 있다면

tab1의 제목 - tab1의 내용 - 더보기 순으로 마크업 구조를 짜야합니다.

<div class="wrap"> <div class="tab1"> <h3> <a href="#">KTO정보교류</a> </h3> <ul> <li> <a href="#">목록1</a> </li> <li> <a href="#">목록2</a> </li> <li> <a href="#">목록3</a> </li> </ul> <a href="#">더보기+</a> </div> <div class="tab2"> <h3> <a href="#">RTO,지자체 정보교류</a> </h3> <ul> <li> <a href="#">목록1</a> </li> <li> <a href="#">목록2</a> </li> <li> <a href="#">목록3</a> </li> </ul> <a href="#">더보기+</a> </div> </div>

 

 

---

​​

2. 표의 구성

​

복잡한 데이터를 표로 제공할 때, 시각 장애인 등도

표 콘텐츠를 이해할 수 있도록 표의 이해를 돕기 위해 내용 및 구조에 대한 정보를 제공해야 합니다.

 

웹 접근성에 알맞게 표 콘텐츠를 만드려면

 

 

1) caption에 제목과 요약 정보를 모두 제공해야 합니다.

이때, 표 제목과 요약 정보를 동일하게 입력해선 안됩니다.

<table> <caption> <strong>표 제목</strong> <span>표에 대한 내용 요약(ex.부서별 직원 수)</span> </caption> ... </table>

 

 

2) 가로, 세로 둘 다 제목 셀이 존재하는 경우,

반드시 scope속성을 이용해 '행 제목' 인지 아니면 '열 제목'인지 구분해 주어야 합니다.

 

 

 

3) 복잡한 표의 경우

<th>(제목 셀)의 id 속성 값과 연결된 <td>(내용 셀)의 headers 속성 값을 짝지어 지정해야 합니다.

 

→ 여기서 headers속성을 사용하는 이유는

스크린 리더기 사용자는 테이블을 시각적으로 보기 힘들기 때문에

id값과 header값을 연결하여 스크린 리더기가 읽기 쉽도록 만드는 것이다!

 

 

→ 테이블표의 제목이 되는 셀<th>부분과 제목셀에 연결되는 내용 셀<td>를 연결하면 스크린 리더에서 읽을 때

"기준일 2018년 10월 20일 경기도 매매가 면적단가 902" 라고 읽게 됩니다.

```html //<table>태그 안에 쓰여 있다고 가정 <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> ```

 

 

 

오늘 포스팅 내용은 어떠셨나요?

다음 포스팅도 역시 이어서

웹 접근성 지침, 이해의 용이성 중 '입력 도움' 에 대해 알아보도록 해요!

 

그럼 다음에 만나요~ 안뇽~