웹접근성(이해의 용이성)

목차

• 이해의 용이성
  • 테이블
  • 테이블 제목 셀
  • 페이지 제목
  • 논리적 순서
  • label
• 끝

 

1편 (인식의 용이성) : sirong.tistory.com/41

2편 (운용의 용이성) : sirong.tistory.com/42

 

이해의 용이성

사용자들이 쉽게 이해할 수 있도록 콘텐츠를 구성해야 함.

이해를 쉽게 할 수 있도록이라는 게 무슨 뜻이지 싶었는데,

그냥 요약이나 콘텐츠 구분을 잘 하라는 뜻이다.

 

테이블

데이터 테이블을 사용할 경우

요약정보(summary 속성) , 제목(<caption> 태그)을 사용하자.

라는데, summary는 HTML5의 규격에 포함되지 않으니

<caption> 태그에만 집중하면 된다.

답변출처

www.wah.or.kr:444/Participation/consultingView.asp?seq=9692&page=1&cType=&FindTxt=summary&flag=2&FindCol=1

 

<table border="" width="80%">
  <caption>
    <h3>
      it's number
    </h3>
  </caption>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>

  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

이런 식으로 caption에 있는 텍스트가 테이블 이해를 쉽게 한다.

h3태그라던가 폰트 사이즈를 조절하여 보기 쉽게 해주자.

 

테이블 제목 셀

제목 셀과(<th>) 내용 셀(<td>)를 써서 구분할 수 있도록 하자.

배경색에도 구분을 두면 가독성이 더 좋아진다.

 

페이지 제목

페이지를 이해할 수 있도록 적절한 제목(<title>)을 제공해야 함.

HTML <title> 태그 속에 텍스트가 웹사이트 제목이 되는데,

이를 페이지를 이해하기 쉽도록 간단하면서 명확한 제목을 제공해야 한다.

또한, 페이지들이 동일한 제목을 가져서는 안 된다.

회원가입, 로그인, 메인 페이지 등이 그냥 메인 페이지로 퉁쳐서는 안 된다는 것이다.

 

논리적 순서

콘텐츠는 논리적 순서로 구성되어야 한다.

이게 무슨 뜻이냐면,

이렇게 만들면 안 된다는 거다.

이를 키보드로 이용하면

1. 이메일
2. 로그인하기
3. 비밀번호

순으로 콘텐츠가 포커싱 된다.

이건 UX(사용자 경험)에도 영향을 끼치는 센스이다.

 

label

<label> 태그는 for속성에 명시된 태그와 결합하는 기능이다.

<input type="checkbox" name="agree" id="agree">

<label for="agree">
  * 이용약관 동의(필수)
</label>

 

label 태그 콘텐츠를 클릭하면,

label의 for속성 값과 같은 id를 가진 태그를 누른 것과 같은 결과를 나타낸다.

 

즉, 예의 코드에선, 이용약관 동의(필수) 텍스트를 누를 시, checkbox가 활성화된다는 뜻이다.

이 또한 UX를 향상시키는 좋은 기능이다.

 

끝

보너스 (웹접근성 체크 사이트) : sirong.tistory.com/44