시각적으로 장애를 가지고 있던지, 가지고 없던지 관계없이 모두 동등하게 사용자들을 웹서비스를 사용할수 있어야 한다.
이때 내가 구현한 화면이 시각적인 웹접근성을 높이고 있는지 진단할수 있는 방법들을 소개하겠다.
스크린리더기
컴퓨터나 모바일을 사용할 때 화면에 표시되는 입출력 정보를 음성으로 알려주는 프로그램이다.
WAI-ARIA
텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
WAI-ARIA는 스크린리더 및 보조기기 등에서 접근성 및 상호 운용성을 향상시키기 위한 목적으로 탄생했으며 마크업에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선 할 수 있도록 제공하고 있다.
WAI-ARIA는 화면을 구현하는 사람의 의도가 보조 기술에 잘 전달될 수 있도록 요소(Element) 등에 누락된 의미 구조를 제공해주기 때문에, WAI-ARIA 를 사용하여 웹접근성을 높여보자.
Role, Property, State
접근성과 상호 운용성을 향상시키기 위한 WAI-ARIA는 역할(Role), 속성(Property), 상태(State) 등의 3가지 기능을 제공한다.
ARIA-role
특정 요소(element)에 직접 attribute 로 넣을수 있는 속성으로, 해당 요소의 기능을 정의하는 것을 말한다.
<a href="" title="명세서" role="button" class="depth1-title" aria-expanded="false">명세서</a>위 코드를 해석하자면, <a> 태그는 링크를 의미하는 element 인데, 해당 element 에 role="button" 이라는 role 을 부여했다.
이는, 링크의 기능을 하는 element 가 아니라, button 의 기능을 한다고 정의한것이다.
ARIA-role 에는 button 뿐 아니라, 여러 role 을 부여, 정의할수 있다.
여기에서 모든 role을 설명하기에는 내용이 너무 길어지므로, 세부적인 내용은
ARIA 의 종류 문서를 참고 바란다.
ARIA-Property, ARIA-State
특정 요소(element)에 직접 attribute 로 넣을수 있는 속성으로, 해당 요소의 특징이나 상태를 정의할 수 있다.
속성명으로 “aria-*”라는 접두사를 사용하여 정의한다.
<form class="form">
<fieldset>
<legend class="blind">로그인폼</legend>
<div class="id-area">
<label for="id-input" class="blind">아이디입력</label>
<input type="text" placeholder="아이디 6~12자리 입력"
maxlength="12" title="아이디" id="id-input"
aria-required="true">
<span class="save no">
<button class="saved" aria-label="아이디저장">
</button>
저장
</span>
</div>
<div class="password-area">
<label for="pw-input" class="blind">비밀번호입력</label>
<input type="password" placeholder="비밀번호 6~20자리 입력"
maxlength="20" title="비밀번호" id="pw-input"
aria-required="true">
<a href="" aria-label="보안프로그램다운로드링크"></a>
</div>
</fieldset>
</form>위 코드는 아이디와 비밀번호를 입력하는 로그인 창의 코드이다.
아이디를 입력하는 <input>과 비밀번호를 입력하는 <input> 의 Property를 살펴보면, aria-required=true 라는 걸 볼 수 있을 것이다.
위에서 ARIA-role 을 설명한 코드도 다시한번 살펴보자.
<a href="" title="명세서" role="button" class="depth1-title" aria-expanded="false">명세서</a>위 코드에서 aria-expanded="false" 라는 걸 볼 수 있을 것이다.
➔ aria-required=true 는 필수입력 항목이라는 특징을 정의한 것이고,
aria-expanded="false" 는 펼쳐지기 전에 무엇인가가 접힌 상태라면 false값을, 펼져진 상태라면 true 값으로 변경할 수 있도록 정의할 수 있다.
ARIA-Property, ARIA-State 에도 이뿐 아니라, 여러 특징과 상태를 부여, 정의할수 있다.
여기에서도 모든 ARIA-Property과 ARIA-State 를 설명하기에는 내용이 너무 길어지므로, 세부적인 내용은 ARIA 의 종류 문서를 참고 바란다.
명도 대비 진단
전경색과 배경색의 명도 차이를 비교하는 프로그램이다.
- tpgi
- 사용하고 있는 OS 에 따라 화면에 나와있는 window 혹은 mac 버튼을 클릭하여 프로그램 다운로드 ->
-> 프로그램을 실행해보면 캡쳐본에 나와있는 것처럼 스포이트 버튼을 활용하여 텍스트 컬러와 배경 컬러를 찝어보고 명암 대비 파악 가능
고대비 진단
화면을 고대비로 전환하여 명암 진단할 수 있는 프로그램.
고대비
