우리나라의 장애인 차별 금지법에도 웹 접근성과 관련된 내용이 작성되어 있다. 이는 의무적으로 지켜야 하며 웹 접근성을 따르는 개발은 장애, 노령화, 여러 기기 환경 등으로 인한 웹 사이트와 도구 사용에 차별받지 않도록 지침을 준수하여 개발하는 것을 의미한다.

🤷‍ 특정 계층으로 인한 요소가 미디어 접근성에 있어서 차별 대우받아서는 안된다는 것으로 해석한다. 이는 미디어 리터러시와 관련이 있어 보인다.

---

웹 접근성 지침

• W3C에서 설립한 WAI(Web Accessibility Initiative)에서 전문적으로 연구하며 가이드라인을 제공
• 웹 콘텐츠에 관한 내용에서 사용자들이 사용하는 도구 개발에서 지켜야 할 점, 브라우저나 확장 프로그램을 만드는 사람들이 주의해야 할 점 등을 구분하여 가이드라인을 제시
• WCAG(Web Content Accessibility) 기반으로 몇 가지 가이드라인과 적용 방법을 설명할 것
• 웹 페이지, 프로그램의 정보, 텍스트, 이미지, 사운드 같은 정보들을 어떻게 작성해야 더 많은 사람이 쉽게 이해할 수 있을까에 대한 단일 공유 표준

몇가지 지침 정리

✔ 속어, 약어 사용을 지양할 것

• 불필요한 정문 용어나 속어, 약어를 사용하는 것을 지양
• 장애를 가진 사람, 가지지 않은 사람 모두가 정보 이해력이 떨어짐
• 외국인 또한 사이트를 이해하기 매우 힘들어짐
• 약어는 풀어서 모두가 이해할 수 있도록 작성
• 속어나 비속어는 사용하지 않는 것을 권장

✔ 콘텐츠의 제목과 단락을 명확히 구분할 것

• 시각적으로 정보를 얻기 어려운 사람들을 위한 스크린 리더가 글의 내용을 파악할 때 도움을 줌
• HTML 작성 시 제목 요소와 단락을 내용의 의미에 맞게 나누는 것이 중요
• 문단으로 내용을 적절하게 나눌 것
• 레이아웃 작성 시, <article>이나 <nav>, <footer> 등의 요소를 적절히 사용할 것을 권장

✔ 키보드 동작을 제공할 것

• <button>이나 <input>, <select> 요소를 사용하지 않고 <div>와 CSS만을 이용하여 구현하는 것을 지양

• 이는 기본 요소들이 제공하는 키보드 동작들을 사용하지 못할 가능성이 있음

• Enter키나 Tab 키를 누를 때 해당 요소로 이동시키는 동작과 같은 상호작용들이 가능하도록 설계할 것

• <div> 요소를 반드시 사용해야 한다면, 몇 가지 추가적인 코드 작성을 할 것

  • role : 해당 요소의 원래 목적을 작성, role=button으로 작성할 경우 스크린 리더 등에서 해당 요소를 버튼으로 인식
  • tab-index : 해당 요소를 탭 키로 도달하게 하는 속성
  • 키보드 이벤트 리스너 추가 : 버튼 동작이 엔터나 스페이스로 동작하게끔 자바스크립트 이벤트 추가

  <div
  	tabIndex="0"
   	role="button"
   	id="button-id"
   	className="div-as-button">
       div로 만든 버튼
   </div>

✔ Focus하는 지점을 명확히 할 것

• 웹 사이트는 키보드만으로 모든 기능이 동작 가능하도록 설계
• 장애가 있는 사람의 경우 키보드를 사용한 웹 조작 비중이 높아짐
• 일반적으로 탭 키를 이용해 링크나 버튼, 텍스트를 입력하는 부분을 찾을 수 있도록 항목에 Focus할 수 있게 설계
• outline CSS 프로퍼티를 0이나 none으로 지정하는 것을 지양
• 만약 focus 윤곽선을 지운다면 현재 어떤 요소를 focus하는지 추가로 나타내야 함

✔ 멀티미디어 요소에 접근성을 부여할 것

• 스크린 리더는 이미지나 동영상, 오디오는 접근할 수 없음
• alt나 title과 같은 attribute를 작성할 것
• 속성에는 이미지가 시각적으로 어떤 모습인지 올바르게 전달해야 하며, 개인적 견해를 작성하는 것을 지양
• 이미지가 특별한 의미가 없을 경우 background로 작성하거나 alt 속성에 빈 문자열을 지정하는 것을 권장

이외에도 애니메이션이나 깜빡이는 효과, 색상 선택에도 주의해야 하며 ARIA(Accessible Rich Internet Applications) 등 더 살펴보고 주의해야 하는 부분이 존재한다.

웹 접근성 가이드라인을 모두 완벽하게 맞추는 것은 사실상 불가능하지만, 가이드라인을 준수하는 것은 올바른 웹 생태계를 위해 프론트엔드 개발자가 노력해야 할 중요한 요소라는 것을 기억하자.

---

프론트엔드 프레임워크인 React, Angular 등에서도 웹 접근성을 어떻게 추구해야 하는지에 대한 공식 문서를 제공하고 있다.

• React : https://reactjs.org/docs/accessibility.html
• Angular : https://angular.io/guide/accessibility