[TIL] 웹 접근성의 개념과 개선 방법에 대해 설명

매일메일이라는 서비스를 이용해 TIL을 작성하려고 한다.

매일메일에서 질문을 받고 해당 질문에 대해 공부하는 방식이다.

매일메일은 기술면접 질문을 매일 메일로 보내주는 서비스이다. 혹시 서비스가 궁금할 수 있는 사람들을 위해 아래 링크를 첨부한다!

https://www.maeil-mail.kr/

매일메일 - 기술 면접 질문 구독 서비스

 

오늘의 질문은 웹 접근성의 개념과 개선 방법에 대해 설명하는 것이다.

웹 접근성이란?

정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항이다.

 

웹 접근성 준수 고려사항

• 시각
  • 실명, 색각 이상,다양한 형태의 저시력을 포함한 시각 장애
• 이동성
  • 파킨슨병, 근육병, 뇌성마비, 뇌졸중과 같은 조건으로 인한 근육 속도 저하, 근육 제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수없는 상태
    
• 청각
  • 영상, 음성 콘텐츠에 자막,원고, 수화등의 대체수단 부제로인한 인식이 불가능한 상태
• 인지
  • 문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애(난독증, 난산증 등)

[출처] 한국웹접근성인증평가원 링크

https://www.wa.or.kr/m1/sub1.asp

웹접근성이란? > WA : 한국웹접근성인증평가원

 

개선 방법

개선 방법으로는 다양한 방법이 있다.

 

시멘틱 태그 사용하기

시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그다. 

기존 HTML <div> 태그의 기능과 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위해 존재한다. 시맨틱 태그의 요소로는 <header>, <nav>, <article>, <section>, <footer>, <main> 등이 존재한다. 이러한 시맨틱 태그 요소는 콘텐츠를 논리적 섹션으로 구성하고 각 부분의 역할과 기능을 전달하는 데 도움이 된다.

 

aria-label

상호작용을 하는 요소에 접근자 이름이 없거나, 접근자 이름이 부정확한 경우, 또는 aria-labelledby 속성을 통해 참조되는 DOM 안에 보이는 콘텐츠가 없는 경우에 aria-label 속성은 이 속성이 부여된 상호작용 요소에 지정할 문자열을 정의하는데 사용될 수 있다.

<SearchButton aria-label="검색"/>

 

<img> tag alt 속성

<img> 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다.

이러한 alt 속성은 사용자가 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공한다.

 

이 방법 외에도 다양한 개선 방법이 있다.