NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

웹 접근성은 다양한 사용자를 고려, 웹사이트에서 제공하는 정보를 차별과 제한 없이 동등하게 이용할 수 있도록 보장하는 것을 의미합니다. 국내에서는 한국형 웹 콘텐츠 접근성 지침을 제공하고 있으며, (웹 접근성 연구소) 국제적으로 W3C의 WCAG라 불리는 접근성 가이드를 표준으로 활용하기도 합니다. 

 

W3C 접근성 가이드 문서

 

다만 가이드에서 제공하는 모든 내용을 다 숙지하고 하나씩 반영하기는 쉽지 않은데요. 실제로 위 이미지는 W3C에서 제공하는 접근성 가이드 문서로, 자세한 내용이 담겨 있지만 확인이 어렵습니다. 그래서 오늘은 체크리스트 형태로 접근성에 해당하는 항목을 보다 쉽게 확인하고 적용할 수 있도록 도와주는 웹서비스 'The A11Y Project를' 소개하고자 합니다. 

 

16개 접근성 항목을 체크리스트와 설명으로 살펴보기

웹 접근성 The A11Y Project

 

웹 접근성에 대한 정보를 찾다 보면 'A11Y'라는 표현을 자주 접하게 됩니다. 이는 '접근성'을 뜻하는 Acceessibility의 처음과 마지막 A,Y 사이에 포함된 글자가 11개라는 것을 의미하며, 긴 철자를 축약해 사용하는 것에서 시작되었습니다. 오늘 소개할 서비스 이름에도 포함되어 있으며, 'The A11Y Project'는 표준 가이드를 바탕으로 우리가 접근성의 관점에서 무엇을, 어떻게 고려하면 좋은지에 대한 내용을 보기 좋게 정리해주는 곳입니다. 대표적으로 항목별 체크리스트를 제공하며, 접근성 테스트 등에 필요한 툴과 책 등의 리소스도 확인할 수 있습니다.

 

웹 접근성 The A11Y Project

 

접근성 관점에서 'The A11Y Project'가 제공하는 항목은 총 16개입니다. (다음 단계 이후는 제외) 콘텐츠, 키보드, 이미지, 비디오, 오디오, 컬러, 모바일과 터치 등이 포함되어 있으며, 각 항목에 따라 우리가 고려해야 하는 내용과 실제 어떤 가이드를 따르면 좋은지에 대한 내용이 정리되어 있습니다. 왼쪽 메뉴를 통해 원하는 항목으로 바로 이동할 수 있으며, 원 페이지로 구성되어 있어 하나씩 차례대로 내용을 살펴보는 것도 가능합니다.

 

웹 접근성 The A11Y Project

 

1) 콘텐츠

먼저 콘텐츠입니다. 콘텐츠는 사이트를 구성하는 가장 기본적이고 핵심적인 요소입니다. 예전에 한 서비스가 아랍어를 제공하며 왼쪽 정렬을 적용해 부정적 리뷰가 많이 등록된 적 있습니다. 한글은 왼쪽에서 오른쪽으로 읽기에 왼쪽 정렬이 적합하지만, 아랍어는 오른쪽에서 왼쪽으로 읽기에 오른쪽 정렬이 필요합니다. 이처럼 콘텐츠에서는 복잡한 언어 사용을 하지 않아야 하며, 언어의 성격에 따라 정렬을 어떻게 해야 하는지에 대한 내용이 담겨 있습니다.

 

웹 접근성 The A11Y Project

 

콘텐츠에 포함된 각 항목은 아코디언 UI가 적용되어 있어 클릭 시 상세 내용 확인이 가능합니다. 상세 내용 확인은 대부분 '링크'로 구성되어 있으며 해당 링크는 접근성 가이드로 바로 이동합니다. 덕분에 접근성에 대한 핵심을 더 빠르게 학습하고, 우리 상황을 대입하기 좋습니다. 접근성 가이드 문서는 내용이 꽉 들어차 있어 중요한 내용을 파악하기가 상대적으로 어렵기 때문입니다.

 

웹 접근성 The A11Y Project

 

텍스트 정렬이나 여백 등을 접근성 관점에서 어떻게 구성해야 하는지, W3C 접근성 가이드 문서에서 확인한 모습입니다. 'The A11Y Project'에서 제공하는 내용을 먼저 확인하고, 링크를 통해 이동한 것으로 필요할 경우 이렇게 상세 내용을 더 살펴보는 방법을 활용할 수 있습니다. 사실 접근성에 대한 모든 항목을 일괄 적용하는 건 불가능하기에 우리 서비스를 이용하는 사람들을 대상으로 우선 적용해야 하는 것이 무엇인지, 먼저 따져본 뒤 문서를 살펴보는 것이 필요하다고 생각합니다. 그런 맥락에서 이곳은 기본적으로 살펴봐야 하는 내용이 잘 정리되어 있어 더 편리하게 느껴집니다. 

 

웹 접근성 The A11Y Project

 

2) 이미지

콘텐츠에 이어 살펴본 건 '이미지'로 다른 항목들 역시 같은 방법으로 확인할 수 있습니다. 이미지를 볼 수 없는 사람을 위해 이미지를 설명할 수 있는 속성이 포함되어 있는지가 첫 번째 내용으로 포함된 모습입니다. 각 내용 왼쪽에는 '체크박스'가 포함되어 있어, 서비스에 적용이 되었는지 또는 학습을 완료했는지 등 보는 사람의 기준에 따라 활용할 수 있습니다. 저는 처음에는 읽었다는 표시로, 이후에는 웹 서비스 내 적용 또는 대안이 있는지 등을 따지기 위해 사용했습니다. 

 

웹 접근성 The A11Y Project

 

3) 모바일과 터치

마지막 체크리스트 항목인 모바일과 터치까지 동일한 구성으로 확인할 수 있습니다. 체크박스가 적용되어 있다는 점도 좋지만, 앞서 말한 것처럼 모든 내용을 상세히 담고 있는 가이드 문서 대비 항목별 중요 내용을 빠르게 살펴볼 수 있다는 점, 우리에게 필요한 점을 먼저 보고 가이드 내 상세 내용으로 연결된다는 점이 이곳의 가장 큰 매력입니다.

 

 

미디어, 툴, 교육 등 다채로운 리소스 제공

웹 접근성 The A11Y Project

 

접근성에 대한 내용을 보기 좋게 확인할 수 있는 것과 더불어 'The A11Y Project'를 자주 찾게 되는 또 하나의 이유는 바로 다양한 리소스를 정리, 제공하기 때문입니다. 화면에 적용된 컬러가 접근성 관점에서 부족한 점은 없는지 등을 알려주는 피그마 플러그인 등 개인적으로 접근성 관련 '툴'을 여기에서 많이 알게 되었습니다. 또한 관련 사례나 교육 자료, 책이나 뉴스레터 등도 잘 정리되어 있어 초기 학습에 도움을 받을 수 있습니다.

 

웹 접근성 The A11Y Project

 

1) 툴

툴은 브라우저 확장 프로그램, 컬러, 개발, 스크린 리더 등으로 구성되어 있는데 각 서비스가 어떤 카테고리에 속하는지와 이름, 간단한 소개를 함께 볼 수 있습니다. 한 줄 내외의 설명이지만 서비스를 이해하기에 충분한 수준이라 리스트를 통해 원하는 툴을 빠르게 찾아볼 수 있어 좋습니다.

 

웹 접근성 The A11Y Project

 

서비스 별 링크도 적용되어 있어 위와 같이 특정 서비스 화면으로 바로 이동할 수 있습니다. 위 서비스는 'Accessible color palette builder'로 컬러 조합을 만들 수 있는 기존 서비스와 크게 다르지 않지만, 접근성에 맞는 컬러를 누구나 쉽게 확인하고 최대 여섯 가지까지 조합할 수 있도록 도와줍니다. 이처럼 관련 툴을 직접 찾지 않아도 대표적으로 활용 가능한 리스트를 주제에 따라 확인할 수 있습니다.

 

웹 접근성 The A11Y Project

 

2) 뉴스레터

접근성 관련 정보와 변화를 꾸준히 살펴볼 수 있는 뉴스레터 리스트도 제공합니다. 'Accessibility Weekly'를 알게 되어 구독 중인데, 2015년부터 277개 뉴스레터가 발행되었으며 다양한 적용 사례는 물론 뉴스 등을 함께 볼 수 있습니다. 

 

웹 접근성 The A11Y Project

 

그 외에도 모바일 앱 환경에 맞는 가이드 등 접근성에 대한 상황별 여러 내용을 확인할 수 있습니다. 하루아침에 확인하긴 어려운 양이 담겨 있어, 즐겨찾기를 해두고 필요한 내용이 있거나 궁금한 점이 있을 때 다시 살펴보는 방법을 활용하고 있습니다. 

 

 

어떻게 활용하면 좋을까

접근성은 우리가 앱이나 웹 환경을 이해하는 방법 중 하나로 확인하고 학습해야 할 내용이 정말 많습니다. 중요한 건 접근성 강화를 필요로 하는 사람들이 점차 늘어나고 있으며, 우리 역시 이런 흐름에 조금씩 적응할 필요가 있다는 점입니다. 'The A11Y Project'는 접근성을 쉽게 시작할 수 있는 출발점으로 활용하기 좋은 곳입니다. 어떤 항목을 어떻게 적용하면 좋을지에 대한 내용을 깔끔하게 정리해 줍니다. 먼저 우리에게 필요한 것을 확인하고, 해당 항목을 입히는데 필요한 추가 학습 자료와 툴을 찾아보는 과정으로 활용해 보는 것을 추천합니다.

 

<참고 자료>

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.