accessible name
작성자가 보조 기술 사용자에게 요소에 대한 레이블을 제공하기 위해 요소와 연관시키는 짧은 문자열(일반적으로 1~3단어)이다.
•
e.g.) 입력 필드의 accessible name은 “사용자 ID”이거나 버튼의 이름은 “제출”이 될 수 있다.
<button>버튼명</button>
<a>~로 가는 링크</a>
HTML
복사
주 목적
•
요소의 목적이나 의도를 전달하기 위해
•
해당 페이지에 다른 요소와 구분하기 위해
•
몇 HTML 요소들은 accesseble name 기본적으로 accessible name을 가진다.
필수사항
•
WAI-ARIA 명세와 WCAG는 포커스 가능한, interactive elements는 필수적으로 accessible name을 가져야 한다고 명시되어 있다.
•
하지만 <textarea> <fieldset><table>과 같은 요소들은 accessible name을 기본적으로는 가질 수 없다. → aria-labelledby로 다른 요소를 참조하여 accessible name으로 만들 수 있다.
기본 규칙
1.
경고 주의 및 철저한 테스트
a.
ARIA 사양에서 금지하거나 아직 확정되지 않은 명세에대한 주의가 필요하다.
b.
브라우저간 구현방식이 다르므로 다양한 브라우저 간 철저한 테스트가 필요하다.
2.
시각적인 Text 선호
a.
UI에 시각적인 텍스트가 존재 → accessible name가 시각적으로 존재할 경우 코드 유지보수에 도움이 된다. 버그가 존재할 확률이 줄어들며 번역 요구사항 또한 사라진다.
b.
마크업에만 존재하는 accessible name의 경우 UI가 업데이트 됐을때 같이 업데이트 되지 않고 남아있을 확률이 아주 높다.
3.
Native HTML 선호
a.
ARIA attributes 보다 HTML naming 기술인 label, caption을 선호하여 마크업을 작성해야한다.
4.
Browser Fallback을 피하자
a.
요소, attribute를 이용해 accessible name을 정하지 않을 경우 브라우저는 보조도구 지원을 위해 title, placeholder와 같은 요소들을 accessible name으로 접근한다. → placeholder와 title은 기본 목적이 naming이 아니기 때문에 이와같은 fallback 현상은 좋지않다
5.
간결하고 유용한 이름 작성하기
a.
시각적으로 복잡한 화면, 모호한 아이콘이 사용성을 떨어뜨리는것 과 같이 지나치게 길거나 불분명한 accessible name도 비시각적 UI에 의존하는 이용자들에게 불편을 끼치며 심각한 경우 이용까지 못하게 만들 수 있다.
b.
accessible names는 짧고 유용하며 효과적인 이름을 가져야 한다.
accessible description
컨텐츠 작성가자 작성한여 보조기술에의해 렌더링되는 문자열 이다.
•
너무나도 당연한 설명이겠지만
◦
e.g.) 해당 input의 입력 기준 → “7-8자의 영어, 숫자만 가능하며 같은 문자 3개이상 입력 불가능한 input”
•
Assitive technologies는 이름과 설명을 다르게 제공한다. → 이름 먼저 말하고 해당 버튼에대한 설명
•
너무 상세한 설명은 오히려 사용성, 접근성을 해치므로 몇몇 화면 낭독기들은 기본 설정으로 description을 읽지 않는다. → 하지만 이용자들에게 “이 버튼을 누르면 설명을 제공합니다.”와 같은 기능을 제공하기도 한다.
•
accessible name과 accessible description을 지정(+ 조합)하는데는 무한한 방법이 있다. → 우선순위 또한 attribute 마다 다르므로 잘 파악하는게 중요하다.