접근성

https://ko.reactjs.org/docs/accessibility.html를 읽고 정리한 글입니다
https://poiemaweb.com/html5-semantic-web, https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/forms/Basic_form_hints, https://www.w3.org/International/questions/qa-lang-why, https://www.tpgi.com/using-the-html-lang-attribute/도 참고했습니다

 

• 시멘틱 HTML
  • 시맨틱 태그 : 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할
  • 시맨틱 웹 : 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상
  • non-semantic 요소 태그는 content에 대하여 어떤 설명도 하지 않는다(div, span 등). semantic 요소 태그는 content의 의미를 명확히 설명한다(form, table, img 등)
• 접근성 있는 폼
  • 라벨링 : <input>, <textarea> 등 HTML 폼 컨트롤은 스크린 리더 사용자를 위해서라도 구분할 수 있는 라벨 필요
  • 사용자들에게 오류 안내하기

<!-- JSX -->
<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>

<!-- HTML -->
<input id="wine-1" type="checkbox" value="riesling"/>
<label for="wine-1">Berg Rottland Riesling</label>

• 포커스 컨트롤
  • 키보드 접근성 : 모든 웹 애플리케이션은 키보드만 사용하여 모든 동작이 가능해야 한다
  • 키보드 포커스는 키보드 입력을 받아들일 수 있는 DOM 내의 현재 엘리먼트를 나타내며, 포커스 윤곽선은 다른 윤곽선으로 교체할 때 윤곽선 제거 CSS 사용
  • 탐색 속도 향상을 위해 원하는 콘텐츠로 건너뛸 수 있는 방법 제공 필요
    • Skiplinks 또는 Skip Navigation Link
    • <main>, <aside> 등 랜드마크 엘리먼트 이용해 페이지 영역 나누기
  • 프로그래밍적으로 포커스 관리하기 (예 : 모달 닫힌 후 모달 열었던 버튼으로 포커스 하기)
    • ref 이용
    • http://davidtheclark.github.io/react-aria-modal/demo/ 참고
• 마우스와 포인터 이벤트
  • 고려할 점 : 다른 버튼으로 포커스가 이동하면 열린 팝업 자동으로 닫기
• 더 복잡한 위젯
  • 각 위젯 타입은 명확한 디자인 패턴이 있다
• 언어 설정
• 문서 제목 설정 : <title> 이용
• 색 대비
• 개발 및 테스트 도구
  • 키보드, 개발 보조 도구(https://github.com/jsx-eslint/eslint-plugin-jsx-a11y), 브라우저에서 접근성 테스트, 스크린 리더 등 활용하기

 

---

스터디를 통해 받은 질문입니다.

Q) aria 속성에 대해 설명해주세요.
A) ARIA란 접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications)으로 장애를 가진 사용자가 웹 컨텐츠와 웹 어플리케이션에 더 쉽게 접근할 수 있는 방법을 정의하는 특성입니다.

Q) html 태그의 lang 속성에 언어를 명시해주어야 하는 이유는 무엇일까요?
A) 스크린 리더에게 올바른 악센트와 발음을 제공해주며, 폰트, 언어별 검색, 번역 등에 사용됩니다.

Q) 여러분은 웹 접근성을 준수하면서 개발하고 있습니까?
A) 시멘틱 태그를 사용하며 개발하려고 노력하고 있습니다.