Web Accessibility Alert Role & Attribute role="alert" aria-live aria-atomic Screen Reader 지원 방식 Sense Reader NVDA VoiceOver TalkBack ...
alert dialog
Web Accessibility Alert and Message Dialogs Role & Attribute role="alertdialog" aria-modal aria-labelledby aria-describedby Sense Reader Role & Attribute ...
modal
Web Accessibility Dialog (Modal) Role & Attribute role="dialog" aria-modal aria-labelledby aria-describedby aria-haspopup aria-controls Screen Reader 지원 Role &...
pagination
Web Accessibility Role & Attribute aria-label aria-current Sense Reader Role & Attribute Sense Reader aria-label O ...
a tag 가상 초점 문제
문제 모바일 iOS VoiceOver에서 발생하는 문제이다. a태그 사이즈 만큼 가상 초점이 생기는게 아니라, 실제 사이즈와는 다르게 생기는 문제이다. button 태그에서는 발생하지 않는다. Screen Reader 지원 방식 VoiceOver TalkBack ...
a tag 초점 분리 현상 문제
문제 모바일 iOS VoiceOver 와 안드로이드 TalkBack 에서 발생하는 문제이다. a태그 안에 내용이 여러개의 태그로 이루어진 경우, 초점 분리 현상이 일어나는 경우가 생기게 된다. VoiceOver에서는 a태그 안에 요소들을 하나의 내용으로 매끄럽게 읽어주는 것이 아니라 나뉘어서 읽어주며, TalkBack에서는 a태그의 내용을 읽어...
텍스트 분할 문제
문제 iOS VoiceOver에서 발생하는 문제이다. 문장안에 태그가 포함되어 있는 경우 하나의 문장으로 매끄럽게 읽어 주는 것이 아니라 끊기는 형태로 나눠서 읽어준다. 검색해보니 애플에서는 이와 같은 현상을 알고 있으며, 기능이라고 생각한다는 글이 있다. <p>하나의 문장으로 읽어줍니다</p> <p>하나의 &...
table
html <div class="c-table"> <table> <caption><span class="sr-only">title</span></caption> <colgroup> <col style="width:2...
scrollbar custom
webkit 계열 Chrome, Microsoft Edge, Opera, Safari 브라우저에 적용 가능 // scrollbar ::-webkit-scrollbar { width: 8px; &-track { background-color: #424242; } &-thumb { border-radius...
breadcrumb
Web Accessibility breadcrumb Role & Attribute aria-label aria-current Screen Reader 지원 Role & Attribute Sense Reader NVDA aria-la...
Recently Updated