반응형

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를 지원하지 않기 때문에 지원하는 브라우저와 기기 정보를 확인하고 적용해야한다.

    참고사이트


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

    반응형
    반응형
    '맑은커뮤니케이션 마크업' 개발팀에서는 iOS 10의 첫 번째 베타 버전이 출시되었을 때 일부 웹 퍼블리셔들은 viewport 메타태그의 user-scalable=no 가 사이트에서 작동 않는다는 사실을 발견하기까지는 오래 걸리지 않았습니다.
    곧 Stack Overflow에서 이슈화 되기 시작했고, 이미 일부 퍼블리셔들은 JS 플러그인을 사용하여 이 문제를 해결하였습니다.
    그러나 iOS 10의 첫 번째 베타 릴리스 노트에서 알 수 있듯이 버그가 아니며, Apple은 실제로 user-scalable=no 를 의도적으로 사용 중지했습니다.
    user-scalable=no의 기능을 중지한 이유는 휴대 전화의 가장 분명하고 유용한 제스처 중 하나 인 핀치 투 줌(pinch-to-zoom)을 자유롭게 사용할 수 있게 함으로서
    시각 장애가 있는 사용자에게 웹의 접근성을 확보 할 수 있는 희망적인 이유이기 때문이다.

    iOS 10 릴리즈 노트

    Safari의 웹 사이트에 대한 접근성을 향상시키기 위해 웹 사이트에서 뷰어에 user-scalable=no 를 설정 한 경우에도 사용자가 손가락으로 확대/축소 할 수 있습니다.

    iOS 10 릴리즈 노트 Apple의 올바른 생각

    user-scalable=no은 다양한 호환성과 UX 문제가 많이 있습니다.
    iOS 10 릴리즈 노트의 변화는 사용자가 페이지와 크기를 제어 할 수 있기 때문에 Apple 좋은 움직임이라고 생각합니다.
    "사용자 컨트롤 제공"은 항상 모든 UX 사용자를 위한 최상위의 조건이라고 생각합니다.
    예를 들어, 눈이 너무 나쁘거나 시각장애인 의 경우 텍스트를 읽을 수 없는 경우 확대/축소를 할 수 있어야 합니다.
    다양한 사용자에 대해 고려를 해야 하며, 우리는 개인적인 관점을 생각하지 말아야 합니다.

    그래도 user-scalable=no 사용해야 한다면?

    고객사를 설득하여 사용을 자제하도록 해야 하지만, 현실적으로 설득이 힘들다고 한다면 아래와 같이 사용하시면 됩니다.

    document.documentElement.addEventListener('touchstart', function (event) { 
    	if (event.touches.length > 1) { 
    		event.preventDefault(); 
    	}
    }, false);
    
    반응형
    반응형

    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 여기에서 참고하세요~

    마치며

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

    반응형

    + Recent posts