반응형

WAI-ARIA

W3C에 의해 제정된 RIA(Rich Internet Applications)의 웹 접근성에 대한 표준 기술 규격을 의미함.


RIA(Rich Internet Applications)란?
정적인 HTMl과 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션

RIA(Rich Internet Applications)는 화려하고 편리한 웹 애플리케이션이지만 스크린리더와 같은 보조기술을 사용하는 장애인들이 접근하기에 취약하다.

  • 자바스크립트, AJAX등을 활용하여 의미를 가지지 않는 요소(<div>,<span>)로 특정 컴포넌트를 구현할 때 스크린리더 등 보조기기에서 해당 컴포넌트의 기능을 명확하게 파학하기 어려움.
  • 주식 시세나 RSS Feed 등 시간에 따라 정보가 자동으로 업데이트 되는 경우 스크린리더 등 보조기기에서 업데이트 된 정보를 파악하기 어려움

때문에 WAI-ARIA는 RIA에서 스크린리더 및 보조기기 등에서 접근성 및 상호 운용성을 향상시키기 위한 목적으로 탄생 했으며 웹 애플리케이션에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선 할 수 있도록 제공하고 있다.

Role (역할)

유저 인터페이스(User Interface, 이하 UI)에 포함된 특정 컴포넌트의 역할을 정의
Abstract Roles / Widget Roles / Document Structure Roles / Landmark Roles로 분류됨

  1. Abstract RolesRoles의 분류체계를 만들고 역활들을 정의하기 위한 Roles
    WAI-ARIA를 구축하는 기반
    Abstract Roles 종류
    Abstract Roles command / composite / input / landmark / range / roletype / section / sectionhead / select / structure / widget / window
  2. Widget Roles독립형 사용자 인터페이스를 동작시키기 위한 목적의 Roles,
    더 큰 Roles에 포함되거나 복합 위젯의 일부로 사용되기도 한다.
    Widget Roles 종류
    독립형 Widget Roles button / checkbox / gridcell / link / menuitem / menuitemcheckbox / menuitemradio / option / progressbar / radio / scrollbar / searchbox / separator / slider / spinbutton / switch / tab / tabpanel / textbox / treeitem
    복합형 Widget Roles
    (단독으로 쓰이지 않음)
    combobox / grid / listbox / menu / menubar / radiogroup / tablist / tree / treegrid
    "tablist"를 사용한 탭메뉴 예시

    탭목록(tablist)과 본문(tabpanel)이 따로 나뉘어져 있는 마크업구조는 스크린리더 등 보조기기를 사용하는 사용자에게는 정보 접근이 어려울 수 있다. 이 때 Tab 관련 Widget Role을 사용하면 보조기기를 사용하는 사용자에게 보다 정확한 정보를 제공할 수 있다.

    ㄴ [이미지설명] 탭메뉴 UI구조 (Role속성 위치)
    • 탭메뉴1
    • 탭메뉴2
    탭메뉴1의 본문
    탭메뉴2의 본문
    탭메뉴3의 본문
    사용된 WAI-ARIA
    • role="tablist" : role="tab"과 함께 사용되는 복합형 Role속성이며 요소에 탭목록 역할을 부여한다.
    • role="tab" : role="tablist"의 자식속성으로 사용되며 탭 역할을 부여한다.
    • role="tabpanel" : 탭의 본문 역할을 부여한다.
    • aria-controls="" : 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다. 상태 값은 tabpanel의 id명 입력
    • aria-selected="" : 탭메뉴 선택 유무를 알려준다. 상태 값은 선택되었을 때 true / 선택되지 않았을 때 false 입력
    • tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1
    • aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
  3. Document Structure Roles문서구조를 설명하는 목적의 Roles
    Document Structure Roles 종류
    Document Structure Roles application / article / cell / columnheader / definition / directory / document / feed / figure / group / heading / img / list / listitem / math / none / note / presentation / row / rowgroup / rowheader / separator / table / term / toolbar / tooltip
    "tooltip"을 사용한 툴팁 예시
    
    
    
    
    
    사용된 WAI-ARIA
    • role="tooltip" : 초점을 받으면 노출되는 컨텐츠 혹은 참고용 컨텐츠의 역할을 부여한다.
    • aria-describedby="" : 현재 요소에 설명을 제공하는 속성. 속성 값은 참조(연결)시킬 요소의 ID값을 작성
  4. Landmark Roles웹 페이지의 각 영역을 명확하게 구분하는 목적의 Roles.
    영역 역할을 지정할 수 있는 8개의 속성이 있다.
    Landmark Roles 종류
    Landmark Role HTML5 섹션 관련 요소
    role="application" 동일한 역할의 요소 없음.
    주로 <div> 요소와 같이 그룹 역할을 하는 요소로 대체할 수 있다.
    role="banner" 동일한 역할의 요소 없음.
    비슷한 의미로 <header> 요소를 사용할 수 있으나 <header role="banner">로 사용하였다 면 한 페이지에서 한 개의 <header> 요소만 사용하길 권장한다.
    role="navigation" <nav> 요소.
    다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역으로 주로 메인 메 뉴 및 서브 메뉴 등에 사용할 수 있다
    role="main" <main> 요소.
    본문의 주요 콘텐츠 영역으로 한 페이지 내에 1개만 사용이 가능하며, <article>, <aside>, <footer> 요소의 하위 요소로 사용할 수 없다
    role="complementary" <aside> 요소.
    주요 콘텐츠와 연관이 적은 의미있는 콘텐츠 영역으로 종종 사이드바로 표현할 수 있다. <aside> 영역에는 현재 날씨, 관련된 기사 또는 주식 정보등의 부가 콘텐츠를 포함 할 수 있다.
    role="form" <form> 요소.
    폼과 관련된 요소의 모임을 표현하는 영역으로 서버에 전송될 수 있는 콘텐츠를 포함 할 수 있다.
    role="search" 동일한 역할의 요소 없음.
    검색의 역할을 담당하는 서식 영역임을 의미하며 <div> 또는 <form> 요소를 사용하는 것을 권장한다
    role="contentinfo" 동일한 역할의 요소 없음.
    비슷한 의미로 <footer> 요소를 사용할 수 있으나 <footer role="contentinfo">로 사용하였다면 한 페이지에서 한 개의 <footer> 요소만 사용하길 권장한다.
    "banner"를 사용한 예시

    콘텐츠를 포함하고 있는 컨테이너인 HTML 요소에 role 속성을 사용하여 콘텐츠의 역할을 지정

    
    

    로고

    • 메뉴1
    • 메뉴2
    • 메뉴3
    • 메뉴4
    • 메뉴5

    h1 요소의 의미를 role속성을 사용하여 다른 의미로 변경하면 안된다

  5. ㄴ [이미지설명] Landmark Role 속성 관련 영역

Property (속성) & State (상태)

Property (속성) : 해당 컴포넌트의 특징이나 상황을 정의하며 속성명으로 "aria-*"라는 접두사를 사용

State (상태) :해당 컴포넌트의 상태 정보를 정의

Property (속성) & State (상태)는 Widget states / Live Regions / Drag and Drop / Relationships 로 분류됨

  1. Widget states and properties사용자가 데이터를 입력하여 송/수신하는 환경(자동완성, 체크여부 등)에서 사용하며 widget roles과 함께 사용된다.
    Widget states and properties 종류
    Widget states and properties autocomplete / checked / datatype / disabled / expanded / haspopup / invalid / level / multiline / multiselectable / pressed / readonly / required / secret / selected / valuemax / valuemin / valuenow
    "combobox"를 사용한 자동완성 폼 예시
      사용된 WAI-ARIA
      • role="combobox" : 아래에 매뉴가 펼쳐지는 UI의 역할을 부여한다.
      • aria-expanded="" : 펼쳐지거나 닫힐 수 있는 컨텐츠의 상태를 표시하는 aria-속성. 상태 값은 펼침 true / 닫힘 false
      • aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
      • aria-autocomplete="" : 사용자 입력에 대한 자동완성 지원 여부를 설정하는 aria-속성. 상태 값은 inline / list / both / none(default)
      • aria-owns="" : 부모/자식 관계 형성하는 aria-속성. 상태 값은 자식으로 설정할 요소의 id값 (aria-controls와 관련)
      • aria-haspopup="" : 팝업요소가 하위에 존재하고 있다는걸 인식 시켜주는 aria-속성. 상태 값은 false(default) / true / menu / listbox / tree / gird / dialog
    • Live Regions 새로고침하지 않고도 컨텐츠 정보가 업데이트되는 환경에서 사용된다.
      Live Regions 종류
      Live Regions aria-live / aria-relevant / aria-atomic / and aria-busy
      "aria-live"를 사용한 알럿창 예시

      접속 할 수 없습니다!

      사용된 WAI-ARIA
      • role="alert" : 경고,알림 등의 컨텐츠 역할 부여
      • aria-live : 페이지의 어떤 위치에 있든 업데이트된 정보를 사용자에게 알려주는 aria-속성. 상태 값은 assertive / off(default) / polite
    • Drag and Drop드래그 앤 드롭 기능 환경에서 사용된다. ex) 트렐로 카드 옮기는 액션
      Drag and Drop 종류
      Drag and Drop aria-dropeffect / aria-grabbed
      "aria-dropeffect"를 사용한 Sorting List 예시
      1. 아이스크림
      2. 파이
      3. 케이크
      4. 컵케이크
      사용된 WAI-ARIA
      • role="listbox" :role="option"과 함께쓰이는 복합형 Role 속성이며 선택가능한 옵션이 존재하는 리스트 역할을 부여한다.
      • role="option" : role="listbox"와 함께 쓰이며 부모인 리스트의 옵션이라는 역할을 부여한다.
      • aria-dropeffect="" : 요소가 드롭되었을 때 사용자에게 알려준다. 상태값은 true / false
      • tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1
    • Relationship요소 간의 관계 또는 연결을 나타내는 속성
      Relationship 종류
      Relationship aria-activedescendant / aria-colcount / aria-colindex / aria-colspan / aria-controls / aria-describedby / aria-details / aria-errormessage / aria-flowto / aria-labelledby / aria-owns / aria-posinset / aria-rowcount / aria-rowindex / aria-rowspan / aria-setsize
      "aria-aria-controls", "aria-labelledby" 을 사용한 탭메뉴 예시
      • 탭메뉴1
      • 탭메뉴2
      탭메뉴1의 본문
      탭메뉴2의 본문
      탭메뉴3의 본문
      사용된 WAI-ARIA
      • aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
      • aria-controls="" : 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다. 상태 값은 tabpanel의 id명 입력
      • aria-selected="" : 탭메뉴 선택 유무를 알려준다. 상태 값은 선택되었을 때 true / 선택되지 않았을 때 false 입력
      • tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1

    유의사항

    • W3C에서는 HTML5 섹션 관련 요소와 WAI-ARIA 규칙을 함께 사용할 경우 해당 기능이 무효화 되거나 충돌이 발생할 수 있으므로 중복해서 사용하지 않도록 주의를 당부하고 있다.
      ex) <header role="banner"></header></span></li>(X)
    • 원래의 HTML 요소의 의미를 변경하면 안된다.
      ex) <h1 role="button"></h1>(X)
    • 모든 RIA 컨텐츠는 키보드를 사용하여 접근할 수 있어야 한다.
    • 모든 브라우저와 보조기기가 WAI-ARIA를 지원하지 않기 때문에 지원하는 브라우저와 기기 정보를 확인하고 적용해야한다.

    참고사이트


    잘못된 정보가 있으면 알려주세여ㅎ.ㅎ
    - 맑은커뮤니케이션 마크업 개발팀 -

    반응형
    반응형

    alt과 title의 차이점

    alt 속성이란?

    이미지를 볼 수 없는 환경에서도 내용을 확인할 수 있게 합니다. 즉, 대체 텍스트라고 합니다.

    title 속성이란?

    해당 객제에 대한 제목이나 특성을 설명하기 위한 것(참고의 의미)

    title 속성과 alt 속성의 의미는 전혀 다르므로 의미에 맞게 사용하셔야 합니다. 또한, title 속성을 alt 속성 대신 사용해선 안됩니다.

    alt 속성

    alt 속성을 사용할 수 있는 태그

    <img />, <area />, <input />

    alt 속성 사용시 유의사항
    • 명쾌하고 짧은 대체 텍스트를 제공
    • 파일명을 대체 텍스트로 제공 지양
    • 이미지 맵에 대한 대체 텍스트 제공
    • 의미없는 이미지에는 공백으로 대체
    • 의미를 제대로 파악할 수 없는 대체 텍스트 지양
    • 의미있는 이미지에 무의미한 대체 텍스트 제공 지양
    • '~ 하십시오.', '~ 됩니다.' 등 친절한 설명을 자제하고 간단 명료하게
    • '링크', '여기', '클릭', '바로가기' 등의 목적지를 구체적으로 알려주지 않는 단어 사용하지 말자

    잘못된 예

    		<img src="bullet.gif" alt="블릿" />
    		<img src="naver.gif" alt="바로가기" />
    		<img src="next.gif" alt="버튼을 누르시면 다음페이지로 이동됩니다." />
    		<img src="photo.jpg" alt="사진 1" />
    		<img src="model.jpg" alt="model" />
    		<img src="logo.png" alt="로고" />
    		<ol>
    			<li><img src="text1.gif" alt="" /></li>
    			<li><img src="text2.gif" alt="" /></li>
    			<li><img src="text3.gif" alt="" /></li>
    		</ol>

    올바른 예

    		<!-- 의미없는 이미지일 경우 -->
    		<img src="bullet.gif" alt="" />
    		
    		<!-- 대체 텍스트 사용 예제 -->
    		<img src="naver.gif" alt="네이버" />
    		<img src="next.gif" alt="다음페이지" />
    		<img src="photo.jpg" alt="튤립" />
    		<img src="model.jpg" alt="꽃무늬 원피스를 입고 있는 모델" />
    		<img src="logo.png" alt="블루웨이브" />
    		<input type="image" src="btn_writ.gif" alt="글쓰기" />
    		
    		<!-- 이미지 맵에 대한 대체 텍스트 -->
    		<img src="languge.gif" alt="언어" usemap="#language" />
    		<map name="language">
    			<area sshape="rect" coords="10,5,66,19" href="/en/" alt="English">
    			<area sshape="rect" coords="10,17,66,32" href="/ko/" alt="Korean">
    		</map>
    		
    		<!-- 다이어그램 또는 그래프 경우 -->
    		<img src="graph.gif" alt="2004년 반도체 수출액 2,538억원, 수입액 265억원, 2005년 반도체 수출액 3,538억원, 수입액 302억원" />

    title 속성

    title 속성을 사용할 수 있는 태그

    <html>, <head>, <title>, <base>, <basefont>, <meta>, <script>, <param>을 제외한 모든 태그에 사용할 수 있습니다.

    a 태그

    이동할 목적지에 대해서 좀 더 명확하게 이해할 수 있게 title를 제공해야 합니다.

    		<a href="http://www.naver.com" title="네이버(새창)" target="_blank"><img src="naver.gif" alt="네이버" /></a>
    abbr 태그

    약자로 'WWW', 'URL', 'HTML', 'IT' 등 한 문자씩 발음하는 단어를 정의하는 태그

    		<abbr title="World Health Organization">WHO</abbr>
    acronym 태그

    두문자어로 'NATO', 'NASA', 'SOHO' 등 한 단어로 발음하는 단어를 정의하는 태그
    HTML5 에서는 삭제되는 태그, abbr의 의미와 혼동 되어 abbr로 통합해서 사용됩니다.

    		<acronym title="North Atlantic Treaty Organization">NATO</acronym>
    input 태그

    input 종류 : button, checkbox, file, image, password, radio, text, submit 등

    		<input type="file" name="" value="" title="파일을 선택하세요" />
    		<input type="text" name="" value="" title="텍스트를 입력하세요." />
    		<input type="radio" name="" value="" />
    		<input type="image" name="" src="이미지 주소" alt="" />
    		<input type="button" name="" value="button" />
    		<input type="submit" name="" value="submit" />
    		<input type="checkbox" name="" value="" />
    		<input type="password" name="" value="" title="비밀번호 입력하세요." />
    iframe 태그(사용을 가능한 지양합니다.)

    프레임 제목은 프레임의 내용을 인식할 수 있도록 짧고 간결하게 제목을 제공해야 합니다.
    또한, 내용이 없는 빈 프레임의 경우에도 title="빈 프레임" or "내용 없는 프레임" 과 같이 title를 제공해야 합니다.

    		<iframe src="briefing.html" title="국정브리핑 정책속보" name="briefing"></iframe>

    위의 내용을 제외한 웹접근성 향상을 위한 방법

    • 테이블의 내용을 이해할 수 있도록 summary 속성, caption 태그를 제공해야 한다.
      					<table class="tbl_view" summary="1월부터 12월까지의 평균 강수량을 나타낸 표, 장마 기간이 있는 6~7월에 강수량이 가장 많고, 11월~2월 사이의 강수량이 가장 낮다.">
      						<caption>한국의 월별 강수량</caption><!-- 생략 -->
    • 테이블을 제공할 경우, 머리글<thead>, 바닥글<tfoot>, 본문<tbody>을 구분하여야 한다.
    • * 주의사항 : <thead>, <tfoot>, <tbody> 순으로 작업되어야 합니다.
      					<table class="bbs_list" summary="공지사항 리스트">
      						<thead>
      							<tr>
      								<th>번호</th>
      								<th>제목</th>
      								<th>작성일</th>
      								<th>조회수</th>
      							</tr>
      						</thead>
      						<tbody>
      							<tr>
      								<td>1</td>
      								<td>제목</td>
      								<td>2012-05-15</td>
      								<td>111</td>
      							</tr>
      						</tbody>
      					</table>
      					
      					<table>
      						<caption>3일 일기예보</caption>
      						<tbody>
      							<tr>
      								<th>오늘<br />5.15(화)</th>
      								<td><img src="p_02.gif" alt="구름 조금" /></td>
      								<td>구름 조금</td>
      							</tr>
      							<tr>
      								<th>예상기온/th>
      								<td colspan="2">최고 33도 / 최저 24도</td>
      							</tr>
      						</tobdy>
      					</table>
    • 서식을 제공할 경우 <label>을 제공해야 한다.
      * <label> 태그의 for와 <input />의 id가 동일하여야 합니다.
      * <label>이 <input>, <select> 등의 입력창과 제목을 연결시켜 문서 파악을 용이하게 합니다.
      * checkbox와 radio 경우 <label>을 이용하여 텍스트를 클릭해도 선택되게 작업할 수 있으며, 사용자들은 클릭영역이 넓어져 사용이 편리해집니다.
      					<dl>
      						<dt><label for="uid">아이디</label></dt>
      						<dd><input type="text" id="uid" title="아이디 입력" /></dd>
      					</dl>
      					<dl>
      						<dt><label for="upw">비밀번호</label></dt>
      						<dd><input type="password" id="upw" title="비밀번호 입력" /></dd>
      					</dl>
    • <form>안에 여러 컨트롤(입력 받는 서식)이 있을 떄, <fieldset>으로 그룹화 하고 <legend>로 제목을 표기합니다.
      					<fieldset>
      						<legend>로그인 </legend>
      						<dl>
      							<dt><label for="uid">아이디</label></dt>
      							<dd><input type="text" id="uid" title="아이디 입력" /></dd>
      						</dl>
      						<dl>
      							<dt><label for="upw">비밀번호</label></dt>
      							<dd><input type="password" id="upw" title="비밀번호 입력" /></dd>
      						</dl>
      					</fieldset>
    • 웹접근성을 향상하기 위해선 위 방법 말고도 많은 부분이 더 있는데요~
      그 부분들은 http://biew.co.kr/17 여기에서 참고하세요~

    마치며

    많은 분들이 웹퍼블리싱 작업을 하시면서 헷갈려 하시는 부분을 위주로 정리를 해보았습니다.
    저 또한 매번 작업을 할 때 마다 헷갈리는 부분이 많았는데요.~ 다른분들께서도 이 글을 보시고 조금이나마 도움이 되셨으면 좋겠습니다.

    반응형
    반응형

    웹 접근성의 목적은 장애인과 비장애인이 동등하게 접근할 수 있도록 웹 컨테츠를 제작하는데 있습니다. 한국에는 한국형 웹 컨텐츠 접근성 지침이라는 웹사이트에서 웹 컨텐츠를 제공할 경우 지켜야하는 웹 접근성 지침 표준문서가 있습니다.

    한국형 웹 컨텐츠 접근성 지침 2.0을 기준으로 웹 접근성을 고려한 콘텐츠 제작 기법 v2.0이 2011년 11월에 발표되었습니다. 맑은커뮤니케이션에서 문서에 대한 자료와 내용을 정리해 보고자 합니다.

    한국형 웹 컨텐츠 접근성 지침(KWCAG)은 W3C의 웹 컨텐츠 접근성 지침(WCAG)를 한국 실정에 맞게 알아보기 쉽게 구성한 표준문서입니다. 현재 국가표준은 한국형 웹 컨텐츠 접근성 지침 2.0 으로 구성은 크게 4가지의 원칙과 13가지의 세부 지침으로 구성되어 있고 각 세부 지침별로 사례별 기술지침이 부가적으로 포함되어 있습니다. html5를 기준으로 작성되었으며 자료 내용과 함께 내용을 확인하시면 좀 더 쉽게 이해할 수 있을거라 생각합니다.

    첫째. 인식의 용이성

    웹 사이트에서 제공하는 컨텐츠를 이용하기 위해서는 해당 컨텐츠를 정확히 인식할 수 있어야 한다.

    지침 검사항목
    텍스트 아닌 컨텐츠에는 대체 텍스트를 제공해야 한다. 텍스트 아닌 컨텐츠는 그 의미나 용도를 이해할 수 있도록 적절한 대체 텍스트 제공해야 한다.
    • 제대로 제공된 대체텍스트는 일반적인 접근이 불가능한 사용자 뿐아니라 예외적인 상황에서는 일반인들에게도 유용할 수 있다.
    1. 이미지에 대한 대체 텍스트 제공
                                        biew
                                    
    2. 버튼에 대한 대체 텍스트 제공
                                        
    3. 이미지 맵에 대한 대체 텍스트
                                                    language
                                                    
                                                        English
                                                        Korean
                                                    
                                                
    4. CAPTCHA에 대한 대체 텍스트 제공
    CAPTCHA(의도적으로 글자 모양을 비틀어 만든 이미지)는 사용 목적상 그 내용을 대체 텍스트로 제공한다면 CAPTCHA가 의도하는 본래 목적을 달성할 수 없기 때문에 CAPTCHA에 대한 대체 텍스트는 그 용도를 알려주는 것으로 한다.
    5. 온라인 시험 등에 대한 대체 텍스트 제공
    검사, 시험을 위한 컨텐츠는 검사결과 또는 시험의 정답을 유추할 수 있는 내용을 대체 텍스트로 제공할 수 없으므로 이는 간략한 용도를 알려주는 정도로 대체 텍스트를 제공해야 한다.
                                        색맹 검사용 이미지1
                                    
                                        토플 1번 문항용 오디오
                                    
    6. QR 코드에서 URL을 대체 텍스트로 제공
                                                    애듀랭키 아이폰용 QR 코드
                                                
    동영상, 음성등 멀티미디어 컨텐츠를 이해할 수 있도록 멀티미디어 대체 수단을 제공해야 한다. 멀티미디어 컨텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
    • 멀티미디어 컨텐츠를 동등하게 인식할 수 있도록 제작하기 위해서는 자막, 원고 또는 수화를 제공해야 한다.
    • 가장 중요한 요소는 멀티미디어 컨텐츠와 동등한 내용을 제공하는 것이고 가장 바람직한 방법은 닫힌 자막(Closed caption)을 오디오와 동기화시켜 제공하는 것이다.
    • 대사 없이 영상만 제공하는 경우에는 화면 해설(텍스트, 오디오, 원고)을 제공하고, 음성만 제공하는 경우에는 자막, 원고 또는 수화를 제공해야 한다.
    1. 열린 자막 제공
    청각장애인은 시청각 컨텐츠에 포함된 대화를 청취할 수 없으므로 이를 열린자막(동영상의 오디오 트랙에 포함된 대화 및 중요한 음향 정보를 텍스트 표시된 자막)으로 시각적인 정보를 제공해야 한다.
    2. 닫힌 자막 제공
    닫힌 자막(사용자가 필요에 따라 자막을 화면에 표시하도록 제작하는 방법)은 동영상의 대화와 중요한 음향 정보를 포함해야 하며 대화나 음향 효과가 제공되지 않는 동영상은 '이 동영상은 음성을 제공하지 않음'이라는 메시지를 닫힌 자막 방식을 이용하여 수시로 제공할 필요가 있다.
    3. 수화 제공
    빠르게 변화하는 자막을 인식하기 어려운 청각장애인을 위하여 동영상의 자막을 수화로 함께 제공하고 자막으로 인하여 수화가 가리지 않도록 닫힌 자막으로 구현하여 사용자가 자막을 화면에서 삭제할 수 있어야 한다.
    컨텐츠는 명확하게 전달되어야 한다. 컨텐츠는 색에 관계없이 인식될 수 있어야 한다.
    • 컨텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자나 흑백 디스플레이 사용자, 흑백 인쇄물을 보는 사용자가 색을 배제하여도 해당 컨텐츠를 인식할 수 있도록 제공해야 한다.
    1. 색을 보완하는 텍스트 제공
    명확한 지시 사항 제공 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
    • 특정 요소를 가리키거나 지시 사항을 전달하는 컨텐츠에 한하는 것으로, 시각이나 청각 등과 같은 특정 감각에만 의존하여 제공해서는 안 되며, 다른 감각을 통해서도 지시 사항을 인식하는 데 문제가 없도록 제공해야 한다.
    • 텍스트 컨텐츠와 대체 텍스트가 제공된 텍스트 아닌 컨텐츠는 보조 기기를 통해 다른 감각으로의 전환이 가능하기 때문에 이들 컨텐츠를 음성 컨텐츠로 변환하여 제공할 필요는 없다.
    1. 시각 정보를 이용한 지시문의 보완
    색, 크기, 모양 또는 위치를 이용하여 어떤 컨트롤이나 컨텐츠를 지시하는 경우 시각장애인이 인식할 수 있도록 대체 수단을 제공해야 한다.
    2. 청각 정보를 이용한 지시문의 보완
    청각 정보를 이용하여 지시문을 제공하는 웹 컨텐츠는 청각 정보를 인식할 수 없는 사용자를 위한 대체 수단을 제공해야 한다.
    텍스트 컨텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
    • 웹 페이지에서 보이는 핵심 텍스트 컨텐츠와 배경 간의 충분한 대비를 제공하여, 저시력자, 색각 이상자, 노인 등도 컨텐츠를 인식할 수 있도록 제공해야 한다.
    • 본문 컨텐츠에 단순한 목적으로 사용한 글자, 마우스나 키보드를 활용하여 초점(Focus)을 받았을 때 명도 대비가 커지는 컨텐츠는 예외로 한다.
    자동으로 재생되는 배경음을 사용하지 않아야 한다.
    • 웹 페이지에서 자동으로 재생되는 배경음(동영상, 음성, 음악 등)으로 인해 컨텐츠를 인식하는 데 방해받지 않아야 한다. 단, 3초 미만의 배경음은 예외로 한다.
    • 3초 이상 재생되는 배경음을 사용할 경우, 반드시 배경음을 제어할 수 있는 수단(멈춤, 일시정지, 음량조절 등)이나 배경음 제어로 이동하는 바로가기 링크를 웹 페이지의 첫 부분에 제공해야 한다.
    • 컨텐츠가 제공하는 배경음의 음량을 조절하더라도 화면 낭독프로그램의 음량에는 영향을 주지 않아야 한다.
    1. 재생 시간이 3초 미만인 배경음의 사용
    웹 페이지에 포함되어 자동적으로 재생되는 사운드 컨텐츠의 길이를 3초 미만이 되도록 구현하고, 반복적으로 재생되지 않도록 한다.
    2. 배경음을 정지 상태로 제공하는 방법
    컨텐츠에 포함된 배경음을 음소거 상태로 제공하고, 사용자 제어에 의하여 배경음을 들을 수 있도록 구현하는 방법으로 이 방법은 사용자가 화면 낭독 프로그램을 사용하는데 아무런 영향을 주지 않는다.

    둘째. 운용의 용이성

    사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

    지침 검사항목
    컨텐츠는 키보드로 접근할 수 있어야 한다. 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
    • 웹 페이지에서 제공하는 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
    • 사용자의 반응 속도나 지속성이 중요한 요소인 붓질(Painting), 시뮬레이션 컨텐츠등과 시각적인 방법으로만 접근이 가능한 지리정보 컨텐츠, 가상현실 컨텐츠등은 예외로 할 수 있다.
    1. 키보드와 마우스 이벤트 핸들러 제공
    • - 마우스와 키보드 이벤트 핸들러를 동시에 제공하는 링크
    • - 마우스와 키보드 이벤트 핸들러를 동시에 제공하는 버튼
    2. 키보드와 마우스로 접근이 가능한 이미지 버튼
                                        
                                    
    3. 키보드와 마우스로 접근이 가능한 링크 제공
    • - 키보드 초점을 받을 때 메뉴의 색이 변화할 경우
                                                  
                                                  	공지사항
                                                  
                                              
    • - 마우스 클릭과 키보드 선택에 의하여 공통적으로 이벤트 핸들러 발생할 경우
                                                  
                                                      공지사항
                                                  
                                              
    4. 키보드만으로 입력 서식 이동이 가능하도록 제공
    자동적으로 초점이 다음 입력 상자로 이동하지 않도록 구현하거나 이동하더라도 다시 뒤로 돌아갈 수 있도록 구현되어야 한다.
    키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
    • 웹 페이지에서 제공하는 모든 기능을 키보드만으로 사용하여 운용할 경우에도 초점이 논리적인 순서에 따라 이동하도록 제공해야 하며, 조작이 불가능한 상태가 되거나 갑작스러운 페이지의 전환 등이 일어나지 않아야 한다.
    • 저시력자, 지체 장애인들이 초점을 받은 컨텐츠를 시각적으로 인지할 수 있도록 시각적으로 표현하여야 한다.
    1. 컨텐츠 화면 순서와 동일한 키보드 내비게이션 순서 제공
    시각적으로 표시된 컨텐츠와 일치하지 않으면 사용자에게 혼란을 줄 수 있으므로 Tab 키를 눌러서 컨텐츠를 이동하는 순서는 시각적 레이아웃 순서와 일치해야 한다. 컨텐츠의 논리적인 이동 순서를 돕기 위해 tabindex로 제어하는 방법도 있다.
    2. 시각적으로 표시 가능한 초점 표시 방법
    키보드로 웹 페이지를 이동할 때 현재 초점이 어디에 있는지 알 수 있어야 한다. 마우스와 같은 장치를 이용하지 못하는 사람에게 키보드와 같은 순차적인 탐색 장치가 매우 중요한 도구가 되기 때문이다.
    • - CSS의 가상 클래스
                                                  a:hover,
      											a:focus { border:1px solid #ee6600; }
                                              
    • - 스크립트를 사용하여 배경색이나 경계선 변경
                                                  
      											focus me
                                              
    컨텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다. 시간 제한이 있는 컨텐츠는 응답시간을 조절할 수 있어야 한다.
    • 웹 컨텐츠 제작 시 시간 제한이 있는 컨텐츠는 가급적 제공하지 않는 것이 바람직하며, 보안 등의 사유로 시간 제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다.
    1. 제한 시간 연장 방법 제공
    제한 시간을 가진 기능을 제공할 때 사용자가 제한 시간을 연장할 수 있도록 해야 한다.
    2. 메타 태그를 이용한 페이지 재 이동 방법 제공
                                    	<meta http-equiv="refresh" content="0;URL='redirect.html'" />
                                        

    redirect.html 페이지로 이동합니다.

    자동으로 변경되는 컨텐츠는 움직임을 제어할 수 있어야 한다.
    • 웹 컨텐츠에서 스크롤 및 자동 갱신되는 컨텐츠를 장애인 사용자가 이용할 수 있도록 일시정지할 수 있는 방법을 제공해야 한다.
    1. 변화하는 컨텐츠를 일시정지 시키고, 일시정지 된 곳으로 부터 다시 시작할 수 있도록 제공

    2. 전체 배너를 보여줄 수 있는 방법 제공

    3. 전체 배너의 리스트 제공

    4. 사용자 요구에 의한 업데이트 방법 제공

    광과민성 발작 예방 광과민성 발작을 일으킬 수 있는 컨텐츠를 제공하지 않아야 한다. 초당 3~50회 주기로 깜빡이거나 번쩍이는 컨텐츠를 제공하지 않아야 한다.
    • 깜빡이거나 번쩍이는 컨텐츠로 인해 발작을 일으키지 않도록 초당 3~50회 주기로 깜박이거나 번쩍이는 컨텐츠를 제공하지 않아야 한다.
    1. 깜빡이는 시간이 3초 이내인 컨텐츠만 제공
    사용자의 시각적인 유인 효과를 위해서 컨텐츠의 움직임, 번쩍임, 깜빡임을 사용하는 경우 이들 움직임이 3초 이내에 자동적으로 멈출 수 있도록 제공한다.
    2. 경고 페이지 제공
    alert창을 이용하여 사용자에게 움직임, 번쩍임, 깜빡임이 있는 페이지로 이동함을 알리고 이동여부를 사용자가 결정할 수 있도록 한다.
    컨텐츠는 쉽게 내비게이션 할 수 있어야 한다. 컨텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
    • 화면 낭독 프로그램을 이용하는 사람들은 반복되는 메뉴 등을 페이지마다 다시 듣게 되는데 이런 불편을 막기 위해, 메뉴 등과 같이 페이지마다 공통되며 반복되는 영역을 사용자가 바로 건너뛰어 핵심 컨텐츠로 이동할 수 있도록 건너뛰는 방법을 제공해야 한다.
    1. 반복적인 컨텐츠 영역의 시작 부분에 건너뛰기 링크 제공
    컨텐츠 영역 건너뛰기 링크(skip navigation)를 제공하면 해당 영역을 건너뛰고 다음 영역으로 사용자 제어를 이동시킬 수 있으므로 키보드 사용자의 사용성을 높일 수 있다.
    ** 모든 페이지가 반복 영역 건너뛰기가 반드시 필요하지는 않는다.
    컨텐츠 블록마다 링크의 수가 많거나 메뉴나 링크 등의 반복되는 컨텐츠가 많은 복잡한 페이지일 경우에만 반복 영역 건너뛰기가 필요하다.
    또한 반복 영역 건너뛰기 자체도 너무 많이 제공되지 않아야 한다.
    2. 건너뛰기 링크의 화면 표시
                                    	
    									본문 바로가기
                                    
    페이지, 프레임, 컨텐츠 블록에는 적절한 제목을 제공해야 한다.
    • 페이지, 프레임, 컨텐츠 블록에 적절한 제목을 제공하여 사용자가 웹 컨텐츠를 운용하기 쉽게 도와주어야 한다.
    • 제목은 간단명료해야 하며, 해당 페이지, 프레임, 컨텐츠 블록을 유추할 수 있도록 제공해야 한다.
    1. 웹 페이지의 제목 제공
    2. 컨텐츠 블록의 제목 제공
                                    	

    김치의 종류

    • 배추김치
    • 열무김치
    3. 프레임 제목 제공
    frame 태그를 사용할 경우 해당 frame의 title 속성을 제공하여 프레임 간의 내비게이션이 용이하도록 해야 한다.
    웹 페이지를 frameset으로 구성하고 title 태그를 제공하더라도 각 frame별로 title 속성을 제공해야 한다.
    적절한 링크 텍스트 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
    • 링크의 용도나 목적지를 명확하게 이해할 수 있도록 링크 텍스트를 제공해야 한다.

    셋째. 이해의 용이성

    웹 사이트에서 제공하는 컨텐츠를 이해할 수 있어야 한다.

    지침 검사항목
    가독성 컨텐츠는 읽고 이해하기 쉬워야 한다. 주로 사용하는 언어를 명시해야 한다.
    1. <html> 태그에 주 사용 언어 지정
                                    	<html lang="ko">
                                    
                                    	<html lang="en">
                                    
    컨텐츠의 기능과 실행결과는 예측 가능해야 한다. 사용자 요구에 따른 실행 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.
    • 컨트롤이나 사용자 입력은 초점을 받았을 때에 의도하지 않는 기능이 자동적으로 실행되지 않도록 컨텐츠를 개발해야 한다.
    • 사용자가 마우스로 클릭하거나 키보드를 이용하여 입력한 후 기능이 실행되어야 한다.
    • 사용자가 예측할 수 없는 상황에서 정보를 제공하지 않아야 하며, 특히 사용자가 인지하지 못한 상황에서 새 창, 팝업 창 등을 제공하지 않아야 한다.
    1. 명확한 서식 제출(submit) 버튼 제공
                                    	

    메일링 리스트에 가입하려면 이메일 주소를 넣어주십시오.

    2. 새 창 열림을 사전에 알림
                                    	뜨개질 포털 사이트 (새 창으로 열림)
                                        한국어 페이지 (새창으로 열림)
                                        도움말
                                    
    컨텐츠는 논리적으로 구성해야 한다. 컨텐츠는 논리적인 순서로 제공해야 한다.
    • 컨텐츠는 보조 기기 등을 통해서도 논리적인 순서로 이해할 수 있어야 한다.
    1. 컨텐츠를 의미 있는 순서로 배열
                                    	
    자장면
    짬뽕
    탕수육
    김치찌개
    된장찌개
    2. 스타일을 이용한 글자 간격 조절
    디자인요소에 의해 단어사이에 강제로 공백을 넣게 되면 단어의 의미가 달라지고, 화면 낭독 프로그램에서는 다르게 발음을 하게 될 수도 있으며, 페이지 내에서 해당 단어를 검색할 수 없게 되고, 검색 엔진이나 번역 엔진에서도 다른 단어로 인식하게 된다. 이 경우 CSS의 letter-spacing 속성이나 text-align 속성을 이용해 조절하면 된다.
    3. 동적으로 생성된 요소는 그것을 유발시킨 요소 바로 뒤에 위치
                                    	

    What is IMEI?

    Explanation of IMEI

    Help content here....

    Back to IMEI input field.

    위의 예제는 IMEI code에 대한 도움말이 보이는 소스 코드이다. 위와 같은 도움말 제공 방식에 대해 도움말이 IMEI Code를 입력한 다음에 나오기때문에 시각장애인들이 도움말이 있다는 사실을 알기 어렵다는 지적도 있다. 그런 경우, 도움말 링크를 <label>안에 넣어 다음과 같이 표현해도 된다.
                                    	

    표는 이해하기 쉽게 구성해야 한다.
    • 시각장애인 등도 이해할 수 있도록 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다.
    1. 표 제목을 <caption>으로 제공
                                    	중간 생략
                                        
    개인별 시험 성적표
    2. 표의 구조 또는 내용에 대한 요약을 summary로 제공
                                    	중간 생략
                                        
    개인별 시험 성적표
    3. 표의 헤더 셀과 데이터 셀의 관계 정의
                                    	
    개인별 시험 성적표
    구분중간 고사기말 고사
    김철수5060
    박영희7080
    입력 도움 입력 오류를 방지하거나 정정할 수 있어야 한다. 입력 서식에는 대응하는 레이블을 제공해야 한다.
    • 시각 장애인 등이 해당 서식을 이해할 수 있도록 레이블을 제공해야 한다.
    1. 입력 서식과 <label>의 명시적 관계 제공
                                    	
                                        
                                    
                                    	
    									
                                    
    2. <label>을 제공할 수 없는 입력 서식에 title 제공
                                    	
                                        
                                        
                                    
    3. 여러 개의 유사한 입력 서식 묶기
                                    	
    집 주소
    회사 주소
    입력 오류를 정정할 수 있는 방법을 제공해야 한다.
    • 사용자의 실수로 잘못된 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야 한다.
    1. 입력 값 또는 형식에 대한 예시 제공
    HTML5로 코딩할 경우 html5에서 제공하는 placeholder 속성을 이용해 예제를 보여주거나 다양한 웹폼을 사용하면, 복잡한 자바스크립트를 쓰지 않고 사용자의 입력 오류를 줄이는데 도움을 줄 수 있다.
                                    	






    2. 오류 메시지를 스크립트 경고창으로 제공
    제출한 값을 검사한 후 이상이 있을 때 오류가 발생한 사실을 alert창으로 보여줄 수 있다. 그리고 경고창을 확인한 후의 초점이 오류가 난 입력필드로 이동해야 사용자가 오류를 쉽게 수정할 수 있다.
    3. 중요한 서식 제출 시 재확인 절차 제공
    사용자가 최종적으로 되돌릴 수 없는 거래(온라인 시험, 금융 거래, 법적인 절차에 대한 동의, 법적인 거래 등)를 하기 전에 자신의 입력 사항이 맞는지 검토할 기회를 주어야 한다.

    넷째. 견고성

    웹 컨텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

    지침 검사항목
    웹 컨텐츠는 마크업 언어의 문법을 준수해야 한다. 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
    • 마크업의 문법을 최대한 준수하여 제공하고 특히 태그의 열고 닫음, 중첩 관계의 오류가 없도록 해야 한다.
    1. 여는 태그와 닫는 태그의 정확한 사용
    마크업 언어를 이용하여 마크업 문서를 구현할 때 반드시 태그의 열림과 닫힘이 일치해야 한다.
                                    	

    요소를 여는 태그의 닫음 표시가 불명확한 문단입니다.

    2. 속성 이름과 속성 값의 정확한 사용
    따옴표로 속성 값을 구분하여 제공할 경우 따옴표를 누락하게 되면 일부 정보가 무시될 수 있다.
                                    	
                                    
    속성 값에 따옴표를 사용해야 할 경우, 따옴표를 그냥 사용하면 속성 값의 종결문자로 인식하기 때문에 값으로 사용할 때 "로 사용해야 한다.
                                    	
                                    
    3. 태그의 정확한 중첩관계
    태그를 사용할 경우 중첩관계가 엇갈리지 않도록 해야 한다.
                                    	

    중첩관계가 명확해야 한다.

    4. 표준에 부합하는 태그와 속성 이름, 값 사용
    브라우저에 따라서는 표준에 명시되지 않는 태그나 속성을 허용하는 경우가 있다. 그러나 마크업 문서를 작성할 경우 반드시 표준에 명시된 태그와 속성을 사용해야 이 문서를 어떠한 브라우저와 보조기술을 이용하여 접근하더라도 정상적인 접근이 가능하게 된다.
    웹 애플리케이션은 접근성이 있어야 한다. 웹 애플리케이션 접근성 준수 컨텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
    • 웹 컨텐츠에 포함된 부가 애플리케이션 또는 웹 페이지의 기능을 실행하는 데 필요한 웹 애플리케이션은 웹 페이지를 사용하거나 접근하는 것을 방해하지 않아야 한다. 웹 애플리케이션은 본 지침에서 설명한 모든 지침들을 적용하여 제작하여야 한다.
    반응형
    반응형

    국내 스마트폰 가입자 2500만 시대. 비장애인에게 스마트폰용 웹 앱은 그림의 떡입니다. 스마트폰에서 제공하는 음성 안내 기능을 켜도 메뉴를 제대로 읽어주지 않거나 아예 건너뛰기 때문입니다. 적잖은 스마트폰용 앱이 이와 처지가 다르지 않습니다. 이에 국가인권위에 장애인의 웹사용에 대한 불편 때문에 신고가 아주 많다고 합니다. 그렇기 때문에 웹 접근성은 권고 사항이 아니라 웹접근성은 의무 입니다.

    그래서 '모바일 애프리케이션 웹접근성 지침'에 대하여 행안부에서 재정을 만들었습니다. 접근성이란 말은 시·청각·지적장애인이나 저시력자, 고령자 같은 정보 접근 취약계층에게도 동등한 이용 환경을 보장하자는 것이 그 개념입니다. 이는 웹 뿐 아니라 모바일 세상에도 똑같이 적용됩니다. 예를 들어 스마트러닝 한다고 달랑 동영상만 서비스하면 웹접근성과 모바일접근성에 위배 됩니다. 또 스마트러닝의 장점인 슬라이딩효과 사용 해야 된다고 강조를 하는데요 버튼으로 되어야 됩니다. 장애인이 손가락으로 드래그 하여 사용 하는것 문제가 있다는 것 입니다.

    그러면 '모바일 애프리케이션 웹접근성 지침'에 대하여 보겠습니다. 이번 지침은 이런 접근성 원칙을 모바일 웹, 앱까지 확장했다는 점에서 의미가 있습니다. 행안부는 공공기관이나 지자체, 학교 등이 앞으로 웹, 앱 제작시 이 지침을 따르도록 했습니다. 2015년까지는 개인용 웹페이지를 뺀 민간 영역의 모든 웹사이트도 법에 따라야 하는 만큼, 이번 지침을 웹, 앱 개발시 적용하면 도움이 될것입니다. 모바일 애플리케이션 접근성 지침’은 앱 개발시 꼭 지켜야 할 ‘준수사항’ 7개와, 되도록 지켜야 할 ‘권고사항’ 8개로 구성돼 있습니다.

    모바일 앱 접근성 준수사항

    지침 내용 비고
    대체 텍스트 이미지 등 텍스트 아닌 콘텐츠의 정보나 의미를 동등하게 인식할 수 있도록 대체 텍스트 제공 시각장애인 등
    초점 모든 객체에 초점(focus)을 적용하고, 초점이 순차적으로 이동될 수 있도록 제공 시각·지체장애인 등
    운영체제 접근성 기능 지원 각 모바일 운영체제에서 장애인을 위해 제공하는 기능과 호환될 수 있도록 서비스 제공 모든 장애인
    누르기 동작 지원 슬라이드, 드래그앤드롭 등의 복잡한 동작을 단순한 방법으로 이용할 수 있도록 제공 시각·지체장애인 등
    색에 무관한 인식 색각이상자도 정보를 동등하게 접근할 수 있도록 무늬, 패턴 등을 함께 제공 색각 이상자 등
    명도 대비 저시력자, 고령자 등을 위해 전경과 배경을 구분할 수 있도록 고대비를 제공 저시력인 등
    자막 및 수화 등의 제공 동영상에 대한 내용을 동등하게 인식할 수 있도록 자막, 원고 또는 수화를 제공 청각장애인 등

    모바일 앱 접근성 권고사항

    지침 내용 비고
    기본 사용자 인터페이스 컴포넌트 모바일 운영체제에서 제공하는 기본적인 사용자 인터페이스 컴포넌트를 최대한 활용 모든 장애인
    컨트롤간 충분한 간격 사용자 의도와 다른 컨트롤을 누르지 않도록 컨트롤간 충분한 간격을 배치 지체·지적장애인 등
    알림 기능 한 가지 방법이 아닌 진동, 시각, 소리 등 다양한 방법으로 사용자에게 알림 기능을 제공 시각·청각장애인 등
    누르기 동작 지원 슬라이드, 드래그앤드롭 등의 복잡한 동작을 단순한 방법으로 이용할 수 있도록 제공 시각·지체장애인 등
    범용 폰트 이용 사용자의 선호에 따라 폰트의 크기의 조절, 확대 등이 가능하도록 기능 제공 저시력인 등
    사용자 인터페이스의 일관성 인터페이스 요소를 사용자가 다시 학습하지 않아도 되도록 일관성 있는 배치 지적·시각 장애인 등
    깜빡거림의 사용 제한 광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않음 광과민성 발작 증세
    배경음 사용 금지 음성에 의존하는 시각장애인 등을 위해 자동으로 재생되는 배경음을 사용하지 않음 시각장애인 등
    장애인 사용자 평가 장애인의 이용 보장을 위해 장애인 사용자를 대상으로 사용자 평가 수행 모든 장애인

    퍼블리싱 페이지 "모바일 앱 접근성 지침" 테스트

    모바일 퍼블리싱한 페이지를 얼마나 문법과, 지침에 맞게 테스트 할 수 있는 사이트 입니다.

    http://v.mobileok.kr/ - 한국형 MobileOk TEST
    http://validator.w3.org/mobile/ - W3C MobileOk TEST
    반응형

    + Recent posts