웹 서비스를 개발할 때, 종종 접근성을 간과하는 경우가 많습니다. 하지만 접근성을 소홀히 하면 사용자에게 큰 불편을 초래할 수 있으며, 웹의 창시자 팀 버너스 리의 말처럼 모든 사람이 쉽게 접근할 수 있어야 합니다. 본 글에서는 실제 사용자의 경험을 바탕으로 잃어버린 접근성을 회복한 여정에 대해 소개하겠습니다.
탐색 단위 만들기: 유용한 랜드마크와 머리말
접근성을 어떻게 회복할 수 있을까요? 첫걸음은 스크린 리더 사용자들에게 의미 있는 탐색 단위를 제공하는 것입니다. 우리는 페이지의 구조를 개선하기 위해 랜드마크와 머리말을 추가했습니다. 랜드마크는 웹 페이지의 주요 섹션을 식별하는 역할을 하며, 사용자가 원하는 정보를 빠르게 찾도록 돕습니다. 반면, 머리말은 각 섹션의 내용을 간결하게 요약해 주어, 사용자들이 페이지를 쉽고 효율적으로 탐색할 수 있도록 합니다. 우리는 이 두 가지 요소를 명확하게 설정하여 사용자가 페이지 내에서 자신이 원하는 정보를 금방 찾을 수 있도록 돕기로 결정했습니다. 이 작업을 진행하면서, 문서의 시맨틱 구조가 개선되었으며, 페이지 내에서 모든 사용자가 유용한 정보를 빠르게 찾아낼 수 있는 환경을 조성하는 데 기여했습니다.
또한, 실제로 스크린 리더를 사용해보며 개선된 탐색 단위를 확인하였습니다. 랜드마크와 머리말이 적용된 페이지를 탐색할 때, 사용자들은 이전보다 훨씬 빠르고 쉽게 원하는 정보를 찾을 수 있었습니다. 예를 들어, "혜택"이나 "다른 사람들이 함께 본 상품" 같은 머리말을 통해 쉽게 접근할 수 있었습니다. 이러한 구조적 변화는 사용자가 정보를 찾는 데 필요한 시간을 절약해 주었고, 이는 스크린 리더 사용자들뿐만 아니라 모든 사용자에게도 이점을 제공합니다. 실제로 스크린 리더 사용자들은 이러한 개선 덕분에 페이지를 보다 쉽게 탐색하고, 원하는 기능이나 정보를 보다 정확하게 파악하게 되었습니다.
파편화된 텍스트 통합하여 사용자 경험 향상
두 번째 접근성 회복의 여정은 파편화된 텍스트를 통합하는 것이었습니다. 이전 페이지의 경우, 스크린 리더는 판매가와 같은 주요 정보를 "990"과 "원"으로 나누어 읽았습니다. 이러한 파편화는 불필요한 스와이프 동작을 유발할 뿐만 아니라, 사용자들이 내용의 맥락을 이해하기 어렵게 만들었습니다. 이러한 문제를 해결하기 위해, 우리는 템플릿 리터럴을 사용하여 텍스트를 하나의 문자열로 표현하였고, 화면에 보이는 내용과 스크린 리더의 발화 내용을 일치시켰습니다. 이를 통해 스크린 리더 사용자들은 이제 더 이상 파편화된 정보를 듣지 않게 되었고, 훨씬 매끄럽고 자연스럽게 탐색을 진행할 수 있게 되었습니다.
이 외에도, 스타일링의 문제로 인해 시각적으로 텍스트를 분리할 수밖에 없는 경우에는 숨겨진 요소를 사용하여 화면에는 보이지 않으면서도 스크린 리더에게는 제대로 읽히도록 설정했습니다. 이러한 방안은 스크린 리더 사용자들이 보다 명확한 정보를 받아볼 수 있도록 도왔습니다. 결과적으로, 사용자들은 불필요한 스와이프를 줄이고, 정보의 흐름을 더 잘 이해할 수 있게 되었습니다. 이러한 개선은 단순한 접근성 향상 이상의 효과를 가져왔고, 이는 실제로 사용자들의 만족도를 높이는데 기여했습니다. 따라서, 이러한 텍스트 통합 작업은 접근성 회복의 중요한 한 축이 되었고, 사용자 경험을 한층 강화하는 데 기여하게 되었습니다.
상호작용 요소의 역할 명확히 하기
마지막으로, 상호작용 요소의 역할을 명확히 하여 접근성을 회복하는 데 집중했습니다. 상품 상세 페이지에 있는 많은 버튼들이 단순히 "버튼"이라고만 읽히거나, 맥락 없이 "전체 보기", "자세히"라는 단어만 존재했습니다. 사용자는 버튼을 읽을 때, 어떤 행동을 하게 될지를 기대하기 어려웠고, 이는 사용자 경험의 질을 크게 저하시켰습니다. 따라서, 우리는 각 버튼에게 명확한 설명을 추가하여 스크린 리더 사용자가 어떤 기능을 수행할 수 있는지를 쉽게 이해하도록 만들었습니다. 이를 통해 사용자는 이제 버튼을 클릭할 때, 어떤 결과를 예상할 수 있는지를 명확히 인식하게 되었습니다.
스타일적인 부분에서도 변화가 필요했습니다. 예를 들어, 찜하기 버튼과 같은 토글 요소는 스크린 리더가 현재 상태를 인식할 수 없었습니다. 따라서 aria-pressed 속성을 통해 현재 찜한 상태를 알리도록 설정하였고, 이는 사용자에게 훨씬 더 친절한 인터페이스를 만들어주었습니다. 또한, 모달이나 바텀 시트를 여는 버튼에 대해서도 aria-haspopup과 aria-expanded 속성을 추가하여, 클릭 시 어떤 일이 벌어질지 예측할 수 있도록 하였습니다. 이렇게 역할을 명확히 하였던 작업은 스크린 리더 사용자들이 보다 쉽게 상호작용을 이해하게 해주었으며, 이는 개선된 사용자 경험으로 이어졌습니다.
결론
이번 접근성 회복 여정에서 우리는 스크린 리더 사용자들이 겪는 다양한 문제와 그 해결책을 찾았습니다. 특히 페이지 탐색을 쉽게 만들기 위해 랜드마크와 머리말을 추가했고, 파편화된 텍스트를 통합하여 사용자에게 명확한 정보를 제공했습니다.마지막으로, 상호작용 요소의 역할을 명확히 하여 사용자들이 보다 쉽게 웹 페이지를 탐색할 수 있도록 개선하였습니다. 이러한 변화 덕분에 접근성 점수가 90점 이상으로 향상되었고, 사용자 경험 역시 깨어나게 되었습니다.
앞으로도 우리는 접근성 향상을 위해 계속해서 노력할 것입니다. 다음 단계로는 다른 페이지로 접근성 개선 작업을 확장하고, 보다 효율적인 접근성 테스트 자동화를 검토하는 등의 계획을 갖고 있습니다. 또한, 새로운 컴포넌트를 개발할 때 접근성을 고려한 규칙을 만들어 나갈 예정입니다. 여러분도 오늘 스크린 리더를 통해 자신의 웹사이트 혹은 애플리케이션을 확인해 보시기를 권장합니다. 익숙한 화면이 낯설게 느껴질 때, 새로운 문제들을 발견하게 될 것입니다. 모든 사용자를 위한 웹 서비스를 만드는 데 필수적인 첫걸음입니다.
.png)
