웹 접근성 : 사용자의 신체적 특징을 고려하여 가능한 많은 사용자가 불편없이 이용할 수 있도록 제공하는것
웹 표준 : HTML 문서 양식을 준수하는 시멘틱마크업
컨텐츠는 색상에 관계없이 인식 될 수 있어야 한다.
-색상의 차이로 구분을 해놓은 컨텐츠는 패턴이나 모형을 이용한다.
지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
-오른쪽, 왼쪽등으로 애매하게 설명하지 말아야 한다.
-대체 수단을 제공한다.
텍스트 컨텐츠와 배경 간의 명도 대비는 4.5:1 이상으로 제공해아한다.
(24px 이상 또는 굵은 18px 이상시 명도 대비 3:1이상을 허용한다.)
관련있는 정보들끼리 그룹화하여 음성 안내로도 어떤 요소들끼리 관련이 있는지 알수 있어야 한다.
텍스트가 아닌 콘텐츠는 적절한 대체 텍스트를 제공해야 한다.
- 배경이미지에선 IR기법을 사용하고, 이미지 링크나 이미지버튼, 아이콘에도 대체텍스트를 제공해야한다.
멀티미디어 컨텐츠에는 자막, 원고 또는 수화를 제공해야한다.(자막 및 원고는 동영상 검색에도 도움을 줄 수 있다.)
자동으로 재생되는 배경음을 사용하지 않아야 한다.
-배경음 사용시 사전 경고나 제어할 수있는 수단을 제공한다.
모든 기능은 키보드만으로 사용할 수 있어야 한다.
-마우스 드래그 앤 드롭기능만을 구현하지 않고 체크상자, 선택 버튼기능들을 제공한다.
-사용자 상호작용이 필요한 컨텐츠를 대화형 컨텐츠로 구현한다.
대화형 컨텐츠
<a>, <컨트롤속성을 가진 audio>, <button>, <details>, <embed>, <iframe>,
<usemap속성의 img>, <type:hidden을 제외한 input>
<keygen>, <label>, <menu> (type 속성이 toolbar 상태면),
<usemap속성의 object>, <select>, <textarea>, <컨트롤속성을 가진 video>
키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
-tabindex 사용하지 않는 것을 권장한다.
-onfocus="this.blur()" 속성 유무를 체크해서 자동검사를 할수 있다.
시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
-시간을 제어할 수있는 수단을 제공한다.
-제한시간을 연장할 수 있는 수단을 제공한다.
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
-자동으로 변겨오디는 콘텐츠는 움직임을 정지,앞으로 이동,뒤로 이동 등을 제어하는 수단을 제공한다.
(업데이트 일시정지 버튼)
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠는 제공하지 않아야 한다.
-깜빡이거나 번쩍이는 콘텐츠를 제공할 경우 3~50회의 주기는 피해야 한다.
-사전에 경고를 하고 이를 회피할 수 있는 수단을 제공해야 한다.
콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
-본문 바로가기 링크를 제공한다.(실제화면에서는 보이지 않지만, 숨김텍스트로 건너뛰기 링크를 제공한다.
페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
-페이지 제목은 간단하고 명료하게 제공한다.
-모든 프레임에는 설명하는 제목을 제공한다.(내용이 없다면 "내용 없음"등으로 제목을 제공)
-콘텐츠 블록 제목에는 <h1>,<h2> 요소등을 부여하여 제목과 본문을 구분할 수 있도록 제공한다.
링크텍스트는 용도나 목적을 이해 할 수 있도록 제공해야 한다.
-더 보기, 이곳을 클릭하세요 같은 애매한 표현을 사용하지 않는다.
-더보기의 경우 어떤 더 보기있지 명시적으로 제공해야 한다.
주로 사용하는 언어를 명시해야 한다.
-웹 페이지에 주로 사용하는 언어를 <html>요소에 lang 속성을 지정하여 명시한다.
-웹 페이지에 지정한 언어와 다른언어를 사용할 요소에도 lang속성을 지정한다.
사용자가 의도하지 않은 기능(새 창,초점 변화 등)은 실행되지 않아야 한다.
-새창 및 팝업창의 경우 a 요소에 target="_blank" 로 지정한다.
-웹 사이트 로딩시 자동으로 실행되는 콘텐츠(팝업창, 레이어 팝업)을 사용하지 않는다.
(기능의 변화가 아닌 스타일의 변화는 해당되지 않는다.)
-마우스를 오버했을때 실행되는 것이 아닌, 클릭했을때 실행되게 한다.
-키보드로도 종료버튼을 클릭할 수 있게 제공한다.
콘텐츠는 논리적인 순서로 제공해야 한다.
-제목 > 내용 > 더 보기 순서를 권장한다.
(스타일을 없애서 나열된 순서가 논리적인 순서인지 확인할 수 있다.)
표는 이해하기 쉽게 구성해야 한다.
-표의 제목은 <caption>요소로 제공한다.
-표의 구조 또는 내용에 대한 요약을 summary속성으로 제공한다.
-표의 헤더 셀(<th>요소)과, 데이터 셀(<th>)의 관계를 제공
-복잡한 표의 경우 id, header, 일반적인 표의 경우 scope 제공
입력서식에는 대응하는 레이블을 제공해야 한다.
-<input>, <textarea>, <select> 요소 등에 대응하는 <label>요소, title 속성을 제공해야 한다.
입력 오류를 정정할 방법을 제공해야 한다.
-입력 서식을 잘못 작성한 경우에 해당 서식 필드로 초점 이동을 제공한다.
-입력 값 또는 형식에 대한 예시를 제공한다.
-필수 입력사항이나 일정한 양식에 따른 입력란에 대해 사용자가 입력하지 않았거나 잘못 입력한 경우 사용자의 실수가 어떤 것인지 안내를 제공한다.
(오류사항 안내창을 띄운후 오류입력양식으로 초점을 이동시킨다)
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
-HTML Convention 가이드를 준수한다.
-W3C 마크업 유효성 검사 도구 [http://validator.w3.org/]
콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
-웹 애플리케이션(JavaScript, 애플릿, ActiveX, Flash)이 자체적인 접근성을 준수해야 한다.
-<a> 요소 href 속성값에 JavaScript 사용 여부 체크
-<form> 요소 action 속성값 체크
-<form> 요소에 <button type="submit">, <input type="submit">, <input type="image"> 유무 체크
-Flash 사용시 background 에 대체 이미지를 제공한다.
일반 문서를 HTML로 규칙에 맞게 색인화 한다.
• H1 : Daum 서비스명
• H2 : 메인메뉴, 본문, 이용약관 등
• H3 : 세부 컨텐츠, 핵심 컨텐츠 등
• H4 : 서브 컨텐츠
• H5, H6 : 헤딩요소의 파편화를 불러일으킬 여지가 있으므로 가급적 사용하지 않는다.
마크업 수정 시, 수정부분을 표기하는 주석은 날짜를 기입하여 사용한다.
<!-- 2022/11/21 수정내용 -->
Attribute 우선순위
1 rel
2 type
3 href, src
4 width, height
5 target
6 id
7 name
8 class
9 style
10 title, alt
11 기타 attribute
'프론트엔드' 카테고리의 다른 글
| 웹 성능을 최적화하는 기본적인 방법 (0) | 2023.04.07 |
|---|