웹접근성을 향상시키기 위해 우리는 역할을 나눌 필요가 있다.
다만 솔루션 제품을 만드는 작은 규모의 회사에서는 모든 역할을 다 할줄 아는 사람이 필요하다.
해석하기 나름이지만 이건 좋을수도 좋지 않을수도 있다.
회사에서 각 분야별로 인력을 나눠야 하는걸 알지만 그럴 수 없을 때, 여러 분야의 일을 함께 하는 인원의 가치를 인정해 준다면 좋고....
분야별 인력 배분에 대한 필요성을 느끼지 못하거나, 느끼기는 하는데 만족스럽진 않지만 어느정도 알아서 다 하니까 당연하게 생각한다면 좋지 않다...
어쨌든 제대로 진행하려면 아래와 같이 역할을 분리하는 것이 좋다.
- UX 디자이너 : 사용자의 요구와 행동 양식을 예측해 이용할 가치가 있고, 쉽고 편리한 서비스를 설계
- UI 디자이너 : 직관적이고 명확하게 전달할 수 있게 화면 구성, 콘텐츠의 성격, 관계, 중요도를 구분하기 위해 색과 모양, 크기를 다르게 표현
- 마크업 개발자 : 브라우저 또는 보조기기가 해석할 수 있는 언어로 변환
- Ajax/웹 개발자 : 실제 동작을 처리하도록 개발
위 역할을 모두 하고 있는 나는 지금 좋을가 안좋을까?????
이제부터 언급하는 대부분의 항목들은 N-WAX 이용하여 빠르고 쉽게 평가할 수 있다., (NHN에서 만든 도구)
그래픽 콘텐츠에 대체 텍스트 제공
<img>, <input type=”image”>, <area> 태그에 alt 속성 또는 description 속성을 지정
대체 텍스트는 그래픽 콘텐츠가 전달하려는 정보를 최대한 포함해야 한다.
이미지 자체가 정보를 전달하지 않고, 장식을 위해 사용된 경우 대체 텍스트를 제공하지 않는다.
alt 속성을 빈값으로 지정한다.
title 속성은 대체 텍스트가 아닌 ‘툴팁’ 으로 제공하는 것이기 때문에 alt 속성과 구분해서 사용해야 한다.
특정 환경에서도 정보 손실이 없게 하기
색상, 크기, 방향, 위치, 음향 효과만으로 정보 전달하지 않기 (다양한 장애 환경에 대한 정보 손실 방지)
적록색맹을 위해 그래프에는 레이블을 연결한다.
PageNavigation 선택된 페이지는 폰트크기, 굵기, 스타일을 다르게 한다.
필수 항목은 기호로 가리키거나 ‘필수 입력’ 임을 직접 표기한다.
문법 오류 체크 (W3C Validation 이용)
태그의 열고 닫음 문법 오류 체크
올바른 속성 선언 (등호나 따옴표가 제대로 되어 있는지, 중복된 속성 선언은 없는지 체크)
중복 id 체크
표 바르게 지정하기
표의 제목에는 <caption> 요소를 사용한다.
<table> 태그에는 내용과 구조를 이해하기 쉽도록 summary 속성을 지정한다.
<caption> 과 summary 의 내용은 중복해서 사용하지 않는다.
<table summary=”이 표는 총 3열로 구성되었으며 1열은 선택한 부동산 매물의 면적을, 2열은 면적별 매매가를 3열은 면적별 전세가를 나타낸다. ”>
<caption>면적별 시세</caption>
...
제목은 <th>, 내용은 <td> 를 이용한다.
제목 셀이 같은 열의 내용 셀과 연결되도록 <th> 요소의 scope 속성 값을 col 로 지정한다.
레이아웃을 위해 <table> 요소를 사용하지 않는다.
논리적인 순서 보장하기
스타일이 없어도 상위 메뉴와 하위 메뉴 구분이 가능해야 한다. <ul>, <li> 태그 이용
목록 하나에 여러개의 정보를 제공하는 콘텐츠는 <table>요소로 마크업하는게 가장 좋다.
주 사용 언어 명시하기
<html lang=”ko”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ko” lang=”ko”>
콘텐츠와 배경의 명도 대비가 4.5:1 이상 되게 하기 (N-WAX로 명도 대비 체크 가능)
국제 표준화 기구(ISO) 및 미국규격협회(ANSI)는 저시력자를 고려해 명도 대비를 최소 3:1로 권장한다.
시력 손실을 고려해 최소 기준에서 1.5배 강화된 4.5:1의 비율을 적용해야 한다.
굵은 18픽셀 또는 24픽셀 이상인 텍스트는 배경 간의 명도 대비가 3:1이상이 되게 한다.
시간 제한이 있는 콘텐츠 사전에 공지하기
링크 클릭 시 목적지로 바로 이동하지 않고 다른 페이지를 거쳤다 원래 이동하려고 했던 페이지로 전환되는 경우가 있다. 이때 <title>해당 쇼핑몰로 이동 중입니다. : 네이버 지식쇼핑</title> 과 같이 전환 중임을 명시해야 한다.
자동 갱신 콘텐츠 제어하기
시간이 지나면 목록이 위로 이동하는 공지사항과 같은 콘텐츠에 대해서 다시 볼수 있게 위아래 버튼 제공
이전, 다음 버튼을 제공하는 대신 마우스 오버 시 전체 콘텐츠 팝업 제공 등
또는 일시 정지 버튼을 통해 자동갱신을 정지 시킬 수 있도록 기능 제공
1초에 3회 이상 번쩍이거나 깜빡이는 콘텐츠 제공하지 않기
광과민석 발작 질환에 대한 대비
마우스를 사용하는 기능을 키보드로도 실행할 수 있게 하기
링크, 버튼 메뉴를 Tab 키로 선택하고, Enter 키 또는 Space 키로 UI 요소의 기능을 실행할 수 있도록 한다.
키보드 포커스를화면에 표시하기
Tab 키로 웹 콘텐츠의 모든 링크, 버튼, 입력 서식에 접근할 때 포커스가 표시되어야 한다.
onfocus=”this.blur()” 를 선언하지 않는다.
CSS의 outline:none 또는 outline:0 을 지정하지 않는다.
웹 페이지의 제목 지정하기
<title> 요소에 콘텐츠 내용이 잘 나타날 수 있는 웹페이지 제목을 지정한다.
Frame에 제목 지정하기
<iframe> 요소의 title 속성을 이용한다.
콘텐츠 블록에 제목 지정하기
HTML은 <h1> 부터 <h6> 까지 6단계로 블록마다 제목을 지정할 수 있다.
건터뛰기 링크 지정하기
로고, 검색창, 서비스 메뉴 등 페이지마다 반복되는 영역을 건너뛰고 주요 콘텐츠로 바로 이동하는 링크 제공으로 불필요한 탐색을 최대한 줄이도록 페이지 시작 부분에 제공한다.
명확한 링크 텍스트 지정하기
‘더보기’, ‘전체보기’와 같은 링크만으로는 목적지를 파악할 수 없을 때도 있다.
텍스트로 표현하기 어려운 상황에서는 title 속성 등을 이용하는 것도 방법이다.
사용자가 의도하지 않은 기능은 실행되지 않게 하기
새창(새탭)은 <a> 요소의 target=”_blank” 속성을 이용하거나 window.open()을 이용한다.
텍스트 입력란에 지정된 자릿수의 값을 모두 입력해도 포커스가 이동되지 않도록 해야 한다.
시각장애환경에서는 포커스가 변경됐다는 사실을 알 수 없다.
포커스 자동변경을 유지하려면 사용자가 인식할 수 있는 방법으로 제공해야 한다.
ex) *인증번호 네 자리를 입력하면 다음 입력 창으로 이동합니다.
사용 편의를 위해 텍스트 입력란의 포커스 자동 변경을 유지하려면 이전 텍스트 입력란으로 포커스를
이동했을 때 다시 다음 텍스트 입력란으로 포커스가 이동하지 않게 한다.
입력 서식에 레이블 지정하기
텍스트, 라디오, 체크박스, 선택목록, 파일찾기 등 각 입력 서식에 어떤 값을 어떤 목적으로 입력해야 하는지는 <lable> 요소를 통해 제공한다.
모든 입력 항목은 <lable> 과 1:1 매칭을 한다.
휴대폰과 같이 입력 항목이 3개인 경우에는 blind 방법을 이용하여 시각장애환경에서도 쉽게 입력할 수 있도록 한다.
ex) .blind{overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}
<label for=”hp_num1” class=”blind”>휴대폰 앞자리</lable>
<select id=”hp_num1”>
<option>010</option>
…
</select>
<label for=”hp_num2” class=”blind”>휴대폰 가운데 자리</label>
<input type=”text” id=”hp_num2” value=””>
<label for=”hp_num2” class=”blind”>휴대폰 뒷자리</label>
<input type=”text” id=”hp_num2” value=””>
입력 요소와 일대일로 대응하는 레이블이 화면에 표시되지 않으면 <label>을 감추는 대신 입력 요소에 title 속성을 선언한다.
입력 오류를 인지하고 수정할 수 있게 하기
입력 서식이 전송되기 전에 어떤 오류가 발생했는지 사용자에게 알리고 수정이 필요한 곳에 포커스를 맞춰 바로 수정할 수 있게 한다.
그래픽 콘텐츠에 대체 텍스트 제공
<img>, <input type=”image”>, <area> 태그에 alt 속성 또는 description 속성을 지정
대체 텍스트는 그래픽 콘텐츠가 전달하려는 정보를 최대한 포함해야 한다.
위 내용은 "웹접근성 프로젝트 시작하기" 책을 통해 정리된 내용 입니다.
 |
|
'IT > Web' 카테고리의 다른 글
| Swagger - java.lang.NumberFormatException: For input string: "" (0) | 2019.09.20 |
|---|---|
| Swagger 를 이용한 API 문서화 및 테스트 자동화(?) (0) | 2019.08.28 |
| 2019 웹디자인 트랜드 (web design trend 2019) (0) | 2018.12.26 |
| Vue.js - datatable component (1) (0) | 2018.10.01 |
| 해결 방법 - No 'Access-Control-Allow-Origin' header is present on the requested resource. (2) | 2018.09.27 |
