Next.js 팀은 모든 개발자(및 최종 사용자)가 Next.js에 액세스할 수 있도록 하기 위해 최선을 다하고 있습니다. 기본적으로 Next.js에 접근성 기능을 추가하여 모든 사람을 위한 웹을 만드는 것을 목표로 합니다.
서버에서 렌더링된 페이지 간에 전환할 때(예: <a href> 태그 사용) 화면 리더 및 기타 보조 기술은 페이지가 로드될 때 페이지 제목을 알려주어 사용자가 페이지가 변경되었음을 알 수 있도록 합니다.
기존 페이지 탐색 외에도 Next.js는 성능 향상을 위해 client-side transitions(next/link)도 지원합니다. client-side transitions을 보조 기술에도 알릴 수 있도록 Next.js에는 기본적으로 route announcer가 포함되어 있습니다.
Next.js route announcer는 먼저 document.title을 검사한 다음 <h1> 요소를 검사하고 마지막으로 URL 라우트명을 검사하여 알릴 페이지 이름을 찾습니다. 가장 접근하기 쉬운 사용자 경험을 위해 애플리케이션의 각 페이지에 고유하고 설명이 포함된 제목이 있는지 확인하세요.
Next.js는 Next.js에 대한 사용자 지정 규칙을 포함하여 통합 ESLint 환경을 즉시 제공합니다. 기본적으로 Next.js에는 eslint-plugin-jsx-a11y가 포함되어 있어 접근성 문제를 조기에 발견하는 데 도움이 됩니다(경고 켜짐 포함):
- aria-props
- aria-proptypes
- aria-unsupported-elements
- role-has-required-aria-props
- role-supports-aria-props
예를 들어, 이 플러그인을 사용하면 img 태그에 대체 텍스트를 추가하고, 올바른 aria-* 속성을 사용하고, 올바른 role 속성을 사용하는 등의 작업을 수행할 수 있습니다.
- WebAIM WCAG checklist
- WCAG 2.1 Guidelines
- The A11y Project
- Check color contrast ratios between foreground and background elements
- Use
prefers-reduced-motionwhen working with animations