• Feed
  • Explore
  • Ranking
/

    NEXT 공식문서 읽기 D2

    a
    artemismars2
    2024.06.20
    ·
    4 min read

    ARIA

    • Accessbile Rich Internet Applications 의 약자

    • 몸이 불편한 분들이 웹 서비스 이용이 수월하도록 여러 방식을 정의해놓은 role과 attribute의 집합

    • 자바스크립트로 만든 웹 서비스에 최적

    • MDN 문서에 따르면 1백만개 웹사이트를 조사한 결과 34.2%가 ARIA를 잘못 사용하여 에러가 발생. ARIA는 웹 접근성을 향상시키기 위해 존재하지만 이렇게 에러를 내뿜는 경우에는 오히려 안쓰는 것보다 더 구림

      • https://webaim.org/projects/million/#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 를 통해 테스트하라고 함

    웹 접근성 관련 자료

    • WCAG: https://www.w3.org/TR/WCAG22/

    • WebAIM: https://webaim.org/standards/wcag/checklist

    • a11y: https://www.a11yproject.com/