접근성에 대한 고민이 선택에서 필수로 조금씩 바뀌는 것 같아요. 접근성에도 다양한 주제와 논의 대상이 포함되지만, 중요한 건 접근성에 대한 논의가 이전보다 더 활발히 진행된다는 것과 참고할 자료와 내용 역시 많아진다는 게 아닐까 싶습니다. 그래서 오늘은, 웹 기준이지만 모바일에서도 사용할 수 있는 디자인 패턴을 접근성 관점에서 제공하는 서비스를 소개하고자 합니다.

접근성 관련, 국내에서는 한국형 웹 콘텐츠 접근성 지침을 제공하고 있으며(웹 접근성 연구소) 국제적으로 W3C의 WCAG라 불리는 접근성 가이드를 표준으로 활용하기도 합니다. 오늘 소개할 디자인 패턴은 W3C에서 제공하는 것으로 아코디언 UI, 얼럿, 다이얼로그 등 30여개의 디자인 패턴을 기본 정보와 더불어 접근성 관점에서 생각해볼 수 있도록 도와줍니다.

아무래도, 자주 쓰이지 않는 패턴보다 자주 쓰이는 디자인 패턴으로 시작해야 접근성에 기본적인 설계에서부터 접근성을 고려할 수 있지 않을까 싶어요. 제공되는 디자인 패턴이 우리에게 익숙한 것들로 구성된 이유이기도 합니다. 리스트에는 어떤 디자인 패턴인지 대표 이미지와 함께 설명이 포함되어 있습니다.

상세 페이지로 진입하면, 해당 디자인 패턴에 대한 자세한 정보를 확인할 수 있습니다. 예를 들어 얼럿과 메시지 다이얼로그의 경우 패턴에 대한 기본적인 정보와 더불어 예제를 함께 제공하는 것을 알 수 있습니다. 기존에 제공되는 디자인 패턴과 다른 점이 있다면, 접근성에 대한 정보를 함께 준다는 점입니다.

우리가 보통 생각하는 얼럿과 다이얼로그는 특정 시점에 텍스트와 함께 제공하는 것을 의미하는데요. 접근성 관점에서 생각하면 소리를 함께 제공하는 등의 옵션을 고려해볼 수 있습니다. 이런 정보를 함께 제공하기에 기존에 적용된 패턴을 접근성 측면에서 다시 생각하는데 필요한 과정이나 시간을 절약할 수 있어요.

이번에는 ‘링크’에 해당되는 내용입니다. 일부 디자인 패턴에는 특별히 주의해야 하는 내용 등을 포함하고 있어 참고하기 좋습니다. 접근성 체크리스트 등이 별도 자료로 제공되는 경우가 많은데, 이는 당장의 적용보다는 확인에 초점이 맞춰져 있어 이후 과정을 별도로 거쳐야 하는데요. 이곳은 접근성 디자인 패턴에 대한 기본 설명과 예제가 다수 포함되어 있어 활용도가 더 높다는 생각이 듭니다.

접근성을 고려해, 변형된 예제도 잘 정리된 모습입니다. 예제는 CodePen을 통해 실제 어떻게 동작하는지 자세히 살펴볼 수 있습니다.

앞서, 접근성 체크리스트 등 접근성과 관련된 서비스나 자료를 몇 번 소개한 적 있는데 30여 개에 해당하는 디자인 패턴을 이렇게 자세히 확인할 수 있는 경우는 없었기에 더 반갑게 느껴지네요. 더 자세한 내용은 링크를 통해 확인하실 수 있으며, 아래 내용과 함께 살펴보시면 더 많은 도움을 받으실 수 있습니다!