NEXT 공식문서 읽기 D2
ARIA
Accessbile Rich Internet Applications 의 약자
몸이 불편한 분들이 웹 서비스 이용이 수월하도록 여러 방식을 정의해놓은 role과 attribute의 집합
자바스크립트로 만든 웹 서비스에 최적
MDN 문서에 따르면 1백만개 웹사이트를 조사한 결과 34.2%가 ARIA를 잘못 사용하여 에러가 발생. ARIA는 웹 접근성을 향상시키기 위해 존재하지만 이렇게 에러를 내뿜는 경우에는 오히려 안쓰는 것보다 더 구림
role
<div
id="percent-loaded"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"></div>위 코드에서
div태그는 아무런 의미를 가지지 않음role을 이용하여 해당 태그가 웹페이지에서 어떤 기능을 하는지 알려줌role을 배웠으니 주석쓰는 대신 이role로 웹페이지 코드 가독성을 향상시킬 수 있지 않겠나 싶음
aria-*
<div
id="percent-loaded"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"></div>aria어트리뷰트는 동적으로 설정 가능
const progressBar = document.getElementById("percent-loaded");
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);function updateProgress(percentComplete) {
progressBar.setAttribute("aria-valuenow", percentComplete);
}위 코드는 동적으로 설정하는 것을 순수 자바스크립트 코드로 구현해놓은 것인데 리액트나 넥스트로 구현하면
useRef훅을 사용하면 되지 않을까 싶음MDN에서는 웹접근성 구현에 대해 assistive technology의 지원을 받아야하는 사람이든 아닌 사람이든 모두 동등하게 웹 페이지를 이용할 수 있어야 한다고 적혀있음
<progress id="percent-loaded" value="75" max="100">
75%
</progress>progress라는 요소가 이미 존재하고 있으므로div를 사용하여role을 설정하기 보다 그냥progress를 사용하는게 훨씬 간단min이 없는 이유는 항상 0이기 때문
시맨틱 요소
몸이 불편한 분들은 자신이 이용하는 assistive technology나 관련된 것들을 업데이트 하기를 두려워하는 경향이 있다고 함
이유는 업데이트 했을 경우에 지원되던 게 안될 수도 있기 때문
그래서 강조되는 게 가능하면 시맨틱 요소를 이용하여 웹페이지를 구성하라고 함
웹접근성은 실제 assistive technology를 통해 테스트할 것을 강조
브라우저를 통한 테스트는 불완전하기 때문
ESLint
eslint-plugin-jsx-a11y: https://www.npmjs.com/package/eslint-plugin-jsx-a11y
리액트 앱의 JSX의 웹 접근성을 정적 평가하는 플러그인
aria-*,role혹은img태그의alt값을 검사실제 assistive technology를 통한 테스트를 한게 아니기 때문에 이 플러그인을 사용해도 실제 assistive technology 를 통해 테스트하라고 함