WAI-ARIA
-
자동완성 편집창WAI-ARIA 2023. 6. 19. 14:09
자동완성 편집창이란? 편집창에 사용자가 내용을 입력할 때 추천 목록을 제공하고 추천 항목을 선택하여 완성하는 자동완성 편집창을 말함 자동완성 편집창의 유형 직렬완성형(inline) : 사용자에게 목록을 별도로 제공하지 않고 캐럿 뒤에 사용자가 입력한 글자로 시작하는 단어가 입력되며 블록으로 선택됨 : 입력서식에 글자 입력 시 단어가 자동완성 : 사용자가 추가로 글자를 입력할 때 추천 단어의 다음 글자와 일치할 경우 해당 추천 단어가 캐럿 뒤에 계속 표시되며 추천 단어와 글자가 일치하지 않으면 사라지는 구조 목록선택형(list) : 사용자가 편집창에 초점을 보냈을 때 자동완성 리스트가 제공 : 펼쳐진 목록을 방향키로 탐색할 시 편집창에 해당 내용이 들어오며 엔터를 눌러 선택하는 방식 복합형(both) : ..
-
WAI-ARIA : tabWAI-ARIA 2023. 6. 19. 11:30
tab이란? : 한 주제에 대해 여러개의 섹션을 가지고 있는 메뉴 tab list : tab, tab panel을 하나의 그룹으로 묶어 tab list라고 부름 : role = "tablist" 해당되는 영역이 tab메뉴라는 것을 알려줌 tab : tab list의 하위 영역으로 각각의 tab을 말함 : role = "tab" : aria-selected = "true"/"false" 현재 선택된 tab을 스크린리더 사용자에게 알려줌 : aria-controls = "해당되는 panel의 id값" 현재 tab과 해당된는 panel의 id값을 적용하여 서로 연결해줌 tab panel : 각각의 tab의 하위 콘텐츠 영역을 말함 : role = "tabpanel" : aria-labelledby = "해당되..
-
WAI-ARIAWAI-ARIA 2023. 6. 16. 13:48
WAI-ARIA란? Web Accessibility Initiative – Accessible Rich Internet Applications WAI : W3C에서 웹 접근성을 담당하는 기관 ARIA : RIA 환경의 웹 접근성에 대한 표준 기술 규격 의미 RIA : 정적인 html, 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서의 수준 높은 ux를 제공하는 웹 어플리케이션 : 스크린리더와 같은 보조 기술을 사용하는 사용자가 브라우저를 읽을 떄 각 요소가 어떤 역할을 하고 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술 : 자바스크립트나 그 외 다른 언어들을 사용한 동적인 페이지를 새로고침 하지 않아도 페이지의 내용과 데이터가 어떻게 바꼈..
-
ariaWAI-ARIA 2023. 6. 16. 13:15
- aria-controls : aria-controls는 선택한 요소에 영향을 받는 하위 요소가 현재 포커스 한 라인과 떨어져 있을 경우 스크린리더 사용자가 하위 요소가 열린 위치를 파악하기 어려우므로 관련된 하위 요소로 바로 이동할 수 있도록 해 주는 역할. : tab 역시 특정 tab을 선택한 경우 tab 패널이 시작되는 부분으로 바로 이동할 수 있도록 aria-controls를 포함. : tab의 aria-controls와 해당 패널의 id값을 같게 해주기 - aria-selected : 선택된 tab은 스크린리더 사용자에게 선택된 tab임을 알려주어야하므로 aria-selected = "true"/"false"를 사용하여 선택된 tab 요소를 알려줌 - aria-labelledby : 화면에 현..