Skip to content

지원자 사용자 흐름에 따른 접근성 개선

Jeongwoo Park edited this page Dec 16, 2024 · 3 revisions

접근성 개선 대상 설정

크루루 서비스의 구조와 사용자 분석

  • 백오피스: 관리자용 인터페이스.
    • 전문 사용자로 제한된 인원이 사용할 것으로 예상
  • 클라이언트 오피스: 지원자용 인터페이스
    • 다양한 배경, 능력을 가진 일반 사용자들을 예상 (잠재적 장애 사용자 포함)

우선순위 설정

접근성 개선의 우선순위는 지원자 인터페이스에 두기로 결정했습니다. 이는 지원자 층이 다양한 디지털 리터러시 수준과 잠재적 장애 사용자를 포함하고 있기 때문입니다.

또한 일반 사용자들의 자유를 보장하고 사회적 포용성을 높이는 것이 중요하다고 판단했습니다.

이에 따라 관리자 인터페이스보다 지원자 인터페이스의 접근성 개선을 우선적으로 진행했습니다.


개선 포인트

1. 공고 공통 요소 및 공고 모집 탭

접근성 개선 이전

image

해당 페이지에서는 웹 접근성 표준을 벗어나는 요소가 발견되지 않았습니다.

모집 공고 내부 내용은 Text Editor를 통해 작성되었습니다. Text Editor는 일반적으로 사용자에게 친숙한 WYSIWYG(What You See Is What You Get) 편집 환경을 제공하며, 작성된 콘텐츠는 HTML 형식으로 출력되어 표준 접근성 규격을 준수합니다. 따라서 웹 접근성 관련 추가적인 처리가 필요하지 않았습니다.

스크린 리더 접근성 개선 이전

_._2024-10-24_._9.09.19.mp4

스크린 리더 사용자가 모집 공고의 제목과 공고 날짜에 대한 정보를 명확하게 전달받지 못하는 문제가 있었습니다. 이는 시각 장애 사용자가 공고의 주요 정보를 인식하는 데 어려움을 주어, 웹 접근성에 부정적인 영향을 미쳤습니다.

이에 따라, 스크린 리더 사용자가 공고의 핵심 정보를 손쉽게 파악할 수 있게 스크린 리더가 모집 공고 제목과 공고 날짜 정보를 정확하게 전달할 수 있도록 접근성 요소를 개선하였습니다.

스크린 리더 접근성 개선 이후

_._2024-10-24_._3.35.29.mp4

2. 지원하기 탭

접근성 개선 이전

_._2024-10-17_._6.12.06.mp4
  1. 많은 Input 요소를 사용하지만, label을 사용하지 않았음.

    다수의 Input 요소가 사용되었음에도 불구하고 레이블(label)을 설정하지 않았습니다. 이는 스크린 리더 사용자들에게 해당 Input 요소의 목적을 명확히 전달할 수 없기 때문에 사용성을 저하할 뿐 아니라 키보드 사용자들이 탭 키를 이용하여 필드를 탐색할 때도 불편함을 겪게 되며 접근성 측면에서 큰 제한이 발생합니다. 또한 모바일 환경에서도 사용자가 필드의 의미를 직관적으로 인식하기 어려워 사용성에 부정적인 영향을 미칩니다.

  2. WCAG에 부합하지 않는 명암비를 사용하였음

    입력 필드에 사용된 텍스트와 배경 색상 간 명암비가 웹 콘텐츠 접근성 지침(WCAG) 기준을 충족하지 않는 문제가 발견되었습니다. 이러한 낮은 명암비는 저시력 사용자들이 텍스트를 읽기 어렵게 만들며, 밝은 햇빛 아래에서 모바일 기기를 사용할 때 콘텐츠를 파악하는 데 장애가 될 것이라 판단했습니다.

접근성 개선 이후

각 인터랙션 요소에 대해 적절한 Label이 설정하였습니다. 사용자가 명확하게 요소의 기능을 인지할 수 있도록 도와주도록 했으며, 스크린 리더를 사용하는 사용자에게도 일관된 내비게이션 경험을 제공하게 되었습니다.

웹 콘텐츠 접근성 지침(WCAG) 2.1의 AA 레벨 기준에 부합하는 명암비(4.5:1)를 적용하였습니다. 구체적으로, 색상 코드 #777676은 텍스트와 배경 간의 명암비 요구 사항을 충족하는 색상으로(하얀색 배경화면 기준 4.528:1의 명암비를 가짐), 특히 작은 크기의 텍스트에 대해 가독성을 확보할 수 있습니다. 따라서 small 태그를 사용하는 텍스트에 이 색상을 적용하여 접근성을 개선하였으며, 이를 통해 모든 사용자가 명확하게 컨텐츠를 구분할 수 있도록 하였습니다.

추가적으로 small태그 스타일을 오버라이딩하는 것 이외, 요소의 중복 사용을 방지할 목적으로 GlobalTheme에 해당 색상을 추가하기도 하였습니다. (예를들어 button 에 낮은 명암비의 스타일이 필요하다면, button 내에 small태그를 사용하는 것이 아닌 해당 button에 낮은 명암비를 적용할 수 있게 설정했습니다.)

small {
    color: #777676;
  }
image 1

스크린 리더 개선 이전

_._2024-10-17_._6.21.34.mp4

현재 시스템에서는 질문의 총 개수와 각 항목이 몇 번째 질문인지를 명확하게 확인할 수 없는 문제가 있었습니다. ‘지원하기’ 기능은 사용자가 질문을 보다 정확히 인지하는 것이 중요하다고 판단하였고, 접근성의 중요한 측면으로 판단하였습니다.

따라서 질문의 순서와 총 개수를 명확히 제공하는 기능을 추가하여 스크린 리더 사용자들의 접근성을 개선하는 것이 필요하다고 결론 내렸습니다.

스크린 리더 개선 이후

_._2024-10-24_._3.47.48.mp4