⚽️ 목표
왜 자꾸 A11Y, ARIA관련 ESLint 에러가 뜨는거지? 에서 시작된 질문들
1. A11Y란?
a11y의 약자
•
접근성을 뜻하는 Accessibility 영어 단어에서 맨 첫 글자인 A와 맨마지막 글자인 Y사이에 11개의 글자가 있어서 a11y가 됨
•
접근성을 나중 생각해야할 것 이라고 치부하지말자 → 제일 기본적으로 고려해야할 사항임
우리가 A11Y에 신경써야하는 이유
2. ARIA
Accessible Rich Internet Applications
- 접근가능한 고기능 인터넷 어플리케이션
•
장애가 있는 사람들에게 (자바스크립트로 만들어진)웹 애플리케이션을 좀 더 접근성있게 만들기 위해 만들어진 roles와 attributes의 집합.
•
HTML의 접근성 문제를 보완하는 W3C 명세 → 보조기기의 웹 문서 접근을 지원
No ARIA is better than bad ARIA
aria-label과 같은 것 을 사용 하기 전에 “HTML을 제대로된걸 쓰면 되는거 아니야?” 라는 생각을 먼저
•
ARIA를 사용한다 → ARIA를 이용하여 특정 HTML 태그를 모킹한다 라는 접근법으로 사용해야함.
◦
정확한 HTML 시맨틱 태그를 이용하는 걸 우선시 해야함 → Symentic 하지 않은 태그를 사용하여 ARIA를 이용해 해당 태그를 마개조할경우 해당 태그의 모든 브라우저 행동을 카피해야함
•
예시) jsx-a11y eslint rule 중 하나
jsx-a11y eslint 에러
◦
해당 이미지는 의미없는 이미지임 → 디자인을 위해 존재하는 이미지
◦
alt=””로 표현될 수 있는 부분을 aria의 role=”presentation”으로 표현 할 시 에러가 출력됨 → aria의 role 대신 기본 html 속성 중 하나인 alt=“”로 해결할 수 있기 때문
◦
이래도 ESLint를 안쓰겠다고?!?!?!?!?!?!?!??!?!