html 태그 외에도 접근성적으로 의미를 부여해야 할 경우 role을 사용한다.
예) span 태그이지만 link 역할을 하는 경우
<span tabindex="0"
role="link"
onclick="goToLink(event, 'http://www.w3.org/')"
onkeydown="goToLink(event, 'http://www.w3.org/')">
W3C website
</span>
스크린리더 시 role이 읽힌다.
a 태그 같은 경우 링크, 텍스트 순으로 읽히고
button은 텍스트, 버튼(윈도우는 단추-,)로 읽힌다.
태그 내의 텍스트가 아니라 다른 멘트가 읽혀야 하는 경우 aria-label을 사용한다.
<a href="#" aria-label="a 링크">다운로드</a>
www.w3.org/TR/wai-aria-practices-1.1/examples/link/link.html
Link Examples | WAI-ARIA Authoring Practices 1.1
Link Examples The examples below demonstrate three variations of the design pattern for link. The link pattern is used when it is necessary for elements other than the HTML a element to have link behaviors. Note: Use the HTML a element to create links when
www.w3.org
tech.lezhin.com/2018/04/20/wai-aria
레진 WAI-ARIA 가이드라인 소개.
프리미엄 웹툰 서비스 - “레진코믹스” 를 만들고 있는 레진엔터테인먼트가 운영하는 기술 블로그입니다. 글로벌 콘텐츠 플랫폼을 만들면서 익힌 실전 경험과 정보, 최신 기술, 팁들을 공유하
tech.lezhin.com
www.w3.org/TR/wai-aria-practices-1.1/
WAI-ARIA Authoring Practices 1.1
5.3.1.2 Rule 2: Prefer Visible Text When a user interface includes visible text that could be used to provide an appropriate accessible name, using the visible text for the accessible name simplifies maintenance, prevents bugs, and reduces language transla
www.w3.org
'html' 카테고리의 다른 글
| 검색엔진최적화 : meta tag title, description (0) | 2020.09.15 |
|---|---|
| html data="" 줄바꿈 태그 (0) | 2020.05.18 |
| meta tag로 width 값 고정하기 (0) | 2020.04.16 |
| input type="file" 파일 첨부 폼 (0) | 2020.04.03 |
| 전화번호, 주소, 이메일 자동 링크 방지 meta tag (0) | 2020.04.03 |
댓글