웹 접근성 향상을 위한 HTML에서 사용 가능한 WAI-ARIA ( + 웹 접근성 사이트 )

web accessibility

 

웹 접근성 향상을 위한 HTML에서 사용 가능한 WAI-ARIA

 

 

안녕하세요~

 

웹(web)분야에서 일하고 계신 분들이 라면,

어느 포지션에 작업하시던 웹 접근성에 대해 들어보거나 웹 접근성을 고려하며 작업을 하고 계실 거라 생각됩니다.

 

웹 접근성(Web Accessibility)은 비장애인뿐만 아니라 장애인 분들도 웹사이트를 원활하게 사용할 수 있도록 웹사이트를 개발하는 것을 말합니다.

 

흔히, "웹 접근성을 맞춘다."라고 많이 표현되고 있습니다.

 

웹 접근성은 어느 한 포지션에서만 사이트의 웹 접근성을 위해서 신경 써서 작업하는 게 아닌,

<기획/디자인/마크업/프론트/백앤드> 웹사이트를 제작하는 모든 협업 포지션에서 신경 써야 할 부분이라고 생각됩니다.

각각의 포지션에서 웹 접근성을 위한 작업이 필요하기 때문입니다.

 

그중에서, 이번 포스팅에는 <마크업/프론트/백앤드> 개발 포지션에서 작업할 때 사용할 수 있는 WAI-ARIA를 소개합니다.

 

WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)는

W3C가 정의한 기술로 사용자  인터페이스 구성 요소의 컨트롤과 동적인 콘텐츠에 잘 접근하기 위해 사용되는 기술입니다.

 

HTML의 마크업 언어만으로 웹사이트를 제작할 수는 없습니다.

특히 요즘은 개발자들은 ajax, script 등 클라이언트 사이드 스크립트와 같은 언어로 웹사이트 제작에 사용합니다.클라이언트 사이드 스크립트 기술로 제작된 사이트는 서버로부터 요청하지 않고, 클라이언트 쪽에서 요청이 가능합니다.개발에 있어 편리하게 사용할 수 있는 기술이지만,클라이언트 사이드 스크립트 기술로 장애가 있는 유저 입장에서는 정상적인 접근이 되지 않을 수 있습니다.정상적인 접근이 가능하도록 WAI-ARIA를 사용해 역할(Role), 속성(Property), 상태(State) 정보를 전달해 장애가 있는 유저들도 정상적인 웹사이트 사용이 가능하도록 할 수 있습니다.

 

HTML 엘리먼트에 WAI-ARIA의 속성을 사용할 수 있는 가능 여부에 대해 정리되어 있는 차트를 소개합니다.
https://aria.markuplint.dev/

WAI-ARIA Cheat Sheet

 

 

 

 

단순히 보이는 화면과 일반적인 마우스, 키보드로 접근이 가능한지에 대해서만 테스트하고 웹사이트를 개발하지 않고,

스크린리더기, 음성인식 등 포인팅 장치를 사용하기 어려운 장애가 있는 분들도 웹사이트를 편리하게 사용할 수 있도록 고려하여 개발하면 모든 유저분들이 차별 없이 웹사이트를 사용할 수 있습니다.

 

 

유익하셨다면,

채널 추가 / 블로그 구독 / 공감 부탁드려요 🙏