Justit을 사용해 Lighthouse를 돌려보았는데 접근성 점수가 엉망진창이다... 알려주는 대로 하나씩 고쳐보았다.
Buttons do not have an accessible name
프로젝트 에러 상황
버튼 내 아이콘만 존재하는 경우에 스크린 리더가 접근 했을 때 해당 버튼이 어떤 동작을 하는지 알 수 없었다.
중요한 이유
스크린 리더는 접근 가능한 이름이 없는 role="link", role="button", role="menuitem"이 있는 요소의 용도를 식별할 수 없다.
규칙
버튼에는 스크린리더 사용자를 위해 distination, purpose, function, action을 명확하게 설명하는 식별 가능한 텍스트가 있어야 한다.
<button id="text">Name</button>
<button id="al" aria-label="Name"></button>
<button id="alb" aria-labelledby="labeldiv"></button>
<div id="labeldiv">Button label</div>
<button id="combo" aria-label="Aria Name">Name</button>
<button id="buttonTitle" title="Title"></button>1. 각 버튼 요소와 role="button"이 있는 요소에 다음 특성 중 하나가 있어야 한다.
- 화면 리더기가 식별할 수 있는 내부 텍스트를 가져야한다.
- 비어 있지 않는 아리아 레이블 속성
- 화면 리더기가 식별할 수 있는 텍스트가 있는 요소를 가리킴으로써 aria-label이 지정된다.
- role="presentation" 또는 role="none"이며 탭 순서가 아니다. (tabindex="-1")
2. 잘못된 마크업
<button id="empty"></button>
<button id="val" value="Button Name"></button>
<button id="alempty" aria-label=""></button>
<button id="albmissing" aria-labelledby="nonexistent"></button>
<button id="albempty" aria-labelledby="emptydiv"></button>
<div id="emptydiv"></div>
<button id="buttonvalue" value="foo" tabindex="-1"></button>위의 예시 코드를 보다 aria-label, aria-labelledby의 차이점이 궁금해서 찾아보았다.
aria-label은 화면에 현재 요소를 설명할 텍스트가 없는 경우 설명용 텍스트를 작성한다.
aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있는 경우 해당 텍스트 영역과 요소를 연결할 때 사용한다.
Links do not have a discernible name
프로젝트 에러 상황
버튼과 마찬가지로 링크내부에 아이콘만 존재하여 해당 link가 어떤 동작을 하는지 알 수 없었다.
문제 해결 방법
- 모든 link 텍스트가 스크린 리더에 표시되도록 하려면 link 텍스트를 숨길 수 없다. (display: none 또는 aria-hidden:"true").
- link가 프로그래밍 방식의 초점 대상인 경우 link 스타일을 수정하여 스타일 변경을 억제해서는 안된다. 시작 장애인 키보드 사용자가 페이지의 현재 위치를 알 수 있는 기능이 제거되기 때문이다. 또한 href 속성이 있는 a 요소를 사용하여 실제 링크를 생성하고 있는지 확인해라.
중요한 이유
- 마우스 없이 키보드만 사용하여 웹페이지를 탐색하는 사용자는 programmatic focus를 받을 수 있는 link만 클릭할 수 있다. programmatic focus를 받을 수 없는 link는 이러한 사용자가 액세스 할 수 없다.
- 스크린 리더 사용자도 링크가 가리키는 위치를 알아야 한다. inner link 텍스트는 이 정보를 제공하지만 스크린 리더가 액세스 할 수 없는 경우에는 사용할 수 없다.
규칙
link 텍스트 또는 이미지의 대체 텍스트는 link로 사용되는 경우 스크린 리더에서 식별할 수 있어야 하며, 중복 label이 없어야 하고 focus가 가능해야 한다.
<html> element does not have a [lang] attribute
프로젝트 에러 상황
lang 코드 자체가 빠져있었다...
중요한 이유
스크린 리더를 구성할 때 사용자는 기본 언어를 선택한다. 웹 페이지의 언어가 지정되지 않으면 스크린 리더는 사용자가 설정한 기본 언어를 사용한다. 언어 설정은 여러 언어를 사용하고 두 개 이상의 언어로 웹사이트에 액세스 하는 사용자에게 문제가 되고 텍스트가 올바르게 발음되도록 언어를 지정하고 그 언어가 유효한지 확인해야 한다.
스크린 리더는 각 언어마다 다른 사운드 라이브러리를 사용하기 때문에 언어가 설정되지 않으면 이상한 발음으로 소리가 날 수 있다. 스크린 리더가 잘못된 언어 라이브러리를 사용하면 아무것도 이해할 수 없다.
규칙
HTML 문서 요소에는 기본 언어가 아닌 다른 언어를 선호하는 다국어 스크린 리더 사용자를 위해 유효한 lang 속성이 포함되어 있거나 유효한 lang 코드에 해당해야 한다.
Lists do not contain only <li> elements and script supporting elements (<script> and <templete>)
프로젝트 에러 상황
마크업을 하다 보니 <ul> 내부에 <div>가 존재하는 경우가 발생했다.
중요한 이유
스크린 리더에는 목록을 알리는 방법이 있다. 이 기능을 사용하면 목록을 더 명확하게 이해할 수 있지만 목록이 올바르게 구성된 경우에만 작동한다.
목록이 유효하려면 부모 요소 (ul, ol)와 자식 요소 (li)가 모두 있어야 하며, 그 외의 콘텐츠 요소는 유효하지 않다.
규칙
목록은 올바르게 마크업 되어야 하며, 목록에 li 요소 이외의 콘텐츠 요소가 포함되면 안 된다.
'에러 해결' 카테고리의 다른 글
| [Next.js] The above error occurred in the **** component 에러 해결 (0) | 2023.12.20 |
|---|---|
| [TanStack Query] 재호출된 useQuery의 반환 값으로 리렌더링이 안 될 때 (0) | 2023.08.28 |
| [React] Form submission canceled because the form is not connected 해결방법 (0) | 2022.06.08 |
| [React] Warning: findDOMNode is deprecated in StrictMode. (0) | 2022.06.05 |
| [React] Uncaught TypeError: inputArgs[0].match is not a function 에러 해결 (0) | 2022.05.14 |