[매일메일] 웹 접근성과 개선 방법 (FE.250114)

웹 접근성이란?

- 모든 사용자가 제약없이 웹 페이지에 동등하게 이용할 수 있도록 보장한다

- 장애인, 고령자, 네트워크 환경이 약한 지역의 거주자 등에 무관하게 동등한 접근 보장

 

웹 접근성 개선 방법?

1. 시맨틱 태그: HTML에서 콘텐츠의 의미와 구조를 명확히 나타내기 위해 사용

   - 웹 페이지 구조와 의미를 명확하게 전달해 스크린 리더가 콘텐츠를 쉽게 이해

시맨틱 태그	설명	시맨틱 태그	설명
header	문서나 섹션의 머리글	nav	네비게이션 링크 모음
main	문서 주요 콘텐츠 영역	article	독립적이고 완전한 콘텐츠
section	주제 기반으로 문서 구분	asdie	별도로 부가적인 정보 제공
footer	문서나 섹션의 바닥글	figcaption	이미지, 차트 등에 대한 설명

(+ 비시맨틱 태그: 콘텐츠의 의미보다는 스타일링이나 구조를 나타냄 <div>, <span>)

 

2. ARIA(Accessible Rich Internet Applications) 속성

   - 스크린 리더가 동적 콘텐츠나 복잡한 UI 요소 올바르게 인식하도록 돕는 HTML 속성의 집합

역할(Role)	요소의 용도나 목적을 명시함 <div role="button">Click</div>: 스크린 리더에 해당 요소가 버튼임을 알림.
상태(State)	요소의 현재 상태를 나타냄 <button aria-pressed="false">Toggle</button>: 버튼이 현재 눌리지 않은 상태임.
속성(Property)	요소의 추가 정보 제공 aria-labelledby: 특정 요소가 다른 요소에 의해 라벨링 되었음을 알림. <div id="diescription>This is a description</div> <input type="text" aria-describedby="description/>

- 단, 기존 HTML 태그와 속성 중복을 피할 것. (예: <button role="button>Cllick</button>)

 

3. Focus 명확히 지정: 키보드 네비게이션 지원. 키보드만으로 웹 탐색 가능.

  - Focus: 현재 상호작용하고 있는 요소

  - 스크린 리더는 Focus가 있는 요소를 읽어 사용자가 현재 위치와 상호작용 가능한 요소를 이해하도록 도움.

  - 기본적으로 HTML 요소 배치 순서(문서의 DOM 순서)에 따라 초점이 이동함. 필요할 경우 tabindex로 tab order 제어.

     예: <div tabindex="0">zero</div>

  - css에 :focus 선택자를 사용해 focus 가능한 요소를 시각적으로 구분함. (outline:none 코드는 피해야 함. 구분 불가능.)

  - script에 .focus() 메소드를 사용해 팝업, 모달 등의 동적 콘텐츠를 사용할 때 focus management(초점 이동)을 제어함.

 

4. 참조

- 위 항목을 충족하는 데 매몰되기 보다 각 장애 유형 별로 사용자가 어떤 경험을 하고 있는지 파악하는 것이 중요함

- 웹 접근성을 개선하면 SEO(검색 엔진 최적화)가 함께 개선되는 효과가 있음.

 

웹 접근성 표준

- WCAG(Web Content Accessibility Guidelines): 국제적으로 인정받는 웹 접근성 지침.

---

출처

1. 매일메일, 2025.01.14. 웹 접근성의 개념과 개선 방법에 대해 설명해주세요. https://maeil-mail.kr

2. gpt에게 웹 접근성에 대해 묻다