/

NEXT 공식문서 읽기 D2

avatar
artemismars2
2024.06.20
·
4 min read

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 를 통해 테스트하라고 함

웹 접근성 관련 자료