실전에 쓰이는 WAI-ARIA

WAI-ARIA에 대해 정리하기에 앞서 중요한 것은,

ARIA를 통해 웹접근성을 높일 수 있으나 컨텐츠에 맞는 의미의 엘리먼트를 더욱 중점으로 쓰는 것이 중요하다는 것이다.

웹에서 ARIA가 접근성을 더욱 높여줄 수는 있으나,

가장 기본은 시멘틱한 마크업이 더욱 중요하다는 것이다. 적재적소의 엘리먼트 사용에 대해 더욱 고민해보자.

* 이 포스팅은 알아가는 것들을 추후에 꾸준히 업데이트 할 예정입니다.

보시다가 모자른 설명이나, 해석이 있다면 댓글 부탁드립니다.

1. font Awesome(폰트 아이콘)의 경우

<i class\="" title\="아이콘 설명" aria\-hidden\="true"\></i\> //안에 내용은 읽지 않고, 스크린리더에서만 읽을 수 있는 아이콘 설명이 들어간다. (title / aria-hidden 속성 중요)

 

2. 컴포넌트를 숨긴 상태라면 (탭의 컨텐츠)

aria\-hidden\="true" (true 숨겨진/false 보여진)

 

3. 컴포넌트가 펼쳐진 상태라면 (아코디언 메뉴)

aria\-expanede\="true" (true 펼쳐진/false 닫혀진)

 

4. 컴포넌트가 눌린상태라면 (탭에서 버튼)

aria\-pressed\="true"

 

5. Input

5-1.radio나 여러가지 컴포넌트 그룹의 경우

<div role\="radiogroup" role\="group"\> // radiogroup or group 쓸 수 있음 <strong aria\-labelledby\="title"\>제목</strong\> // aria-labelledby의 내용은 자유 <input type\="radio"\> <input type\="radio"\> </div\>

5-2. 인풋 옆에 부연 설명에는.

<input type\="password" aria\-describedby\="desc"\> <p id\="desc"\>비밀번호는 영어+숫자+특수문자를 합쳐 12자리 이상이여야합니다. </p\> //aria-describedby값과 해당 부연설명 태그의 id가 일치해야한다.

5-3 테이블안의 인풋인경우

<table\> <thead\> <tr\> <th scope\="col"\>제목</th\> <th scope\="col"\>내용</th\> </tr\> </thead\> <tbody\> <tr\> <td\><input type\="text" name\="" id\="" aria\-labelledby\="title"\></td\> <td\><input type\="text" name\="" id\="" aria\-labelledby\="content"\></td\> </tr\> <tr\> <td\><input type\="text" name\="" id\="" aria\-labelledby\="title"\></td\> <td\><input type\="text" name\="" id\="" aria\-labelledby\="content"\></td\> </tr\> </tbody\> </table\>

5-4. 레이블 태그를 만들기 힘들경우

<input type\="text" aria\-label\="title"\> // aria-label or title 속성을 쓸 수 있습니다.