[CSS] 웹 접근성을 고려한 .blind .hidden 처리

스크린리더와 브라우저별, 그리고 매해 업데이트 되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법 으로 해결될 수 있습니다~' 라는 방법은 아직 없다고 봐야 한다. 이 글에서 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개한다. 대체 텍스트(숨긴 텍스트)는 언제 사용할까?화면상에는 나타나지 않지만 구조성 숨겨진 제목을 넣어줘야 하는 경우디자인상 아이콘을 사용하면서 적절한 대체 텍스트(숨긴 텍스트)를 제공해줘야 하는 경우 잘못된 방법1. 화면상 영역을 지니지 않게 하는 방법.hidden{display:none;}// 또는.hidden{visibility:hidden;}우선, 기본적으로 displ..

2023.02.24

WAI-AREA 실무 예제 코드로 적용하기

WAI-ARIA는 HTML의 접근성 문제를 보완하는 W3C 명세입니다. WAI-ARIA는 HTML 요소에 role 또는 aria-* 속성을 추가하여 컨텐츠의 '역할(roles), 상태(states), 속성(properties)' 정보를 보조기기에 제공합니다. WAI-ARIA 속성을 모든 HTML 요소에 무분별하게 사용할 수 있는 것은 아닙니다. role 또는 aria-* 속성을 특정 HTML 요소에 사용할 수 있는지 ARIA in HTML 명세를 검토하면서 적용해야 합니다. ARIA in HTML : https://www.w3.org/TR/html-aria/ 0. 선택된 요소를 표현하는 방법으로 ::after WAI-ARIA를 사용할 수 없는 경우, 선택된 요소를 표현하는 방법으로 ::after 를 이용..

2023.01.28

WAI-ARIA 요소 - aria-roleDescription

aria-roledescription 소개 aria-roledescription은 이름에서 바로 기능을 알 수 있듯이, 요소 역할(role)의 역할을 커스터마이징하여 전달하는 것입니다. 가을 난방 30% 할인 aria-roledescription은 WAI-ARIA 1.1 부터 추가된 WAI-ARIA의 속성으로, 이미 정해진 요소의 역할을 더 명확하게 만드는데 사용합니다. 이미지를 예로 들면 단순한 그래픽이 아니라, "thumbnail graphic"처럼, 무엇에 사용하는 이미지인지 정확히 사용자에게 알려주고자 할 때 사용하는 것 입니다. 이 외에는 HTML5 에서 따로 정의하진 않았지만, 익히 알려진 영역이나 위젯의 역할을 안내하고자 할 때 사용합니다. aria-roledescription의 문제점 ar..

2023.01.24

WAI-ARIA 요소 - 자동완성 편집창의 올바른 구현방법

편집 가능한 텍스트 편집창에 사용자가 내용을 입력할 때, 추천 목록을 제공하여 키보드 또는 마우스로 원하는 추천항목을 선택하여 완성하는 자동완성 편집창 기능을 WAI-ARIA를 중심으로 다룹니다. 이번 아티클은 크게 두 개의 부문으로 나뉩니다. 자동완성 편집 창의 유형 접근 가능한 자동완성 편집 창 구현하기 자동완성 편집 창의 유형 자동완성 편집창은 사용자의 상호작용 방법에 따라 크게 다음과 같은 세 가지 유형으로 나눌 수 있습니다. 직렬완성(inline) 형 목록선택(list) 형 복합(both) 형 직렬(inline)형 자동완성 직렬 완성형 자동완성 기능은 편집 중인 사용자에게 목록을 별도로 제공하지 않고, 캐럿 뒤에 사용자가 입력한 글자로 시작하는 단어가 입력되며, 블록으로 선택됩니다. 사용자가 추..

2023.01.24

WAI-ARIA 요소 - role="slider"

숫자를 조절하는 컨트롤 요소인 WAI-ARIA의 커스텀 슬라이더 위젯의 소개, 접근성이 지켜진 커스텀 슬라이더 위젯을 위한 올바른 마크업 방법 및 주의점에 대해 살펴보도록 하겠습니다. 또한, 스크린 리더 사용자를 포함한 키보드 사용자의 키보드 상호작용에 대해서도 살펴봅니다. 슬라이더 컨트롤 요소란? 슬라이더 요소는 숫자를 마우스 또는 키보드로 줄이거나, 늘릴 수 있는 막대 형태의 요소로, 안드로이드 운영체제에서는 시크 바(seek bar) 라고 불리며, 수치를 조절하는 컨텐츠에 주로 사용됩니다. 커스텀 슬라이더의 등장 배경 : range 입력 서식의 소개 웹에서의 슬라이더는 크게 두 가지 방법으로 제공할 수 있습니다. 첫 번재는 태그를 이용한 네이티브 마크업 방법이 있으며, 두 번째는 자바스크립트의 라..

2023.01.24

WAI-ARIA 요소 - menu role

웹페이지의 탐색을 돕기 위해 사용되거나 또는 복잡한 웹 앱에서 빠질 수 없는 요소인 메뉴 위젯을 ARIA를 사용하여 바르게 마크업하는 방법 및 주의점에 대해 살펴보겠습니다. 또한, 스크린 리더 사용자, 키보드 사용자의 메뉴 탐색을 위한 키보드 적용에 대해서도 살펴봅니다. 웹페이지 및 SPA(single page application)에서의 메뉴는 크게 두 가지로 정의할 수 잇습니다. 첫 번째로, 일반적인 웹페이지 탐색 시 사용되는 주메뉴, 서브메뉴와 같은 사이트 탐색에 필요한 네비게이션 형태이며, 두 번째로, 구글 문서와 같은 웹 앱에서의 파일 열기, 도구 메뉴와 같은 데스크톱 형태의 메뉴로 구분할 수 있습니다. 일반적으로 메뉴를 마크업할 때 ul 요소를 메뉴 컨테이너로 사용하며, ul 요소에 포함된 l..

2023.01.24