37signals의 프로그래머인 Berno PTO는 본 발표에서 Rails와 Hotwire를 활용하여 웹 애플리케이션의 접근성을 높이는 방법에 대해 심도 있게 다룹니다. 그는 두 살 때 시력을 잃었지만, 다섯 살 때부터 컴퓨터와 인터넷을 통해 세상을 접하며 프로그래밍에 대한 열정을 키웠습니다. 이러한 개인적인 경험을 통해 그는 웹 접근성이 단순히 기술적 요구사항을 넘어, 모든 이에게 정보의 평등한 접근 기회를 제공하는 중요한 가치임을 강조합니다. 스크린 리더를 통한 웹 탐색 방식을 상세히 설명하며, 개발자들이 간과하기 쉬운 접근성 문제를 지적하고, 이를 해결하기 위한 실질적인 가이드라인을 제시합니다.
Berno PTO는 스크린 리더가 웹 페이지를 해석하고 사용자에게 전달하는 방식을 설명하며, 단순히 탭(Tab) 키로만 탐색하는 것이 아닌, HTML 문서 객체 모델(DOM)의 구조와 정보 순서에 따라 좌에서 우, 위에서 아래로 읽어나간다고 설명합니다. 그는 스크린 리더마다 작동 방식과 단축키가 다르지만, 핵심은 HTML의 시맨틱 구조를 잘 활용하는 것이라고 강조합니다. 마치 검색 엔진이 페이지를 색인화하듯이, 스크린 리더 사용자도 HTML 시맨틱을 통해 페이지 구조를 인지하고 효율적으로 탐색합니다. 따라서 개발자는 사용자 인터페이스와 상호작용에 의미가 있는 방식으로 HTML 요소를 구성해야 합니다.
주요 접근성 권고 사항으로는 다음을 제시합니다:
-
올바른 영역(Regions/Landmarks) 사용:
<main>,<header>,<nav>,<aside>,<footer>와 같은 시맨틱 영역 요소를 사용하여 스크린 리더 사용자가 페이지의 주요 구역을 쉽게 탐색할 수 있도록 해야 합니다. 이는 스크린 리더가 ‘D’ 키와 같은 특정 단축키를 통해 영역 간 이동을 가능하게 합니다. -
제목(Headings) 계층 구조 준수: 제목은 단순히 글자 크기를 조절하는 용도가 아니라, 페이지의 의미론적 계층과 목차 역할을 수행합니다.
<h1>부터<h6>까지의 계층을 정확히 지켜야 스크린 리더 사용자가 페이지 내용을 효과적으로 이해하고 탐색할 수 있습니다. 스타일과 제목 번호를 분리하여 관리하는 것이 중요합니다. -
링크(Links)와 버튼(Buttons)의 명확한 구분: 페이지 이동(GET 메서드)에는
<a>태그를, 특정 동작(액션)을 유발하는 경우에는<button>태그를 사용해야 합니다.href속성에#을 넣거나, 링크에 버튼 클래스를 적용하여 혼란을 주는 행위를 피해야 합니다. 아이콘만 있는 버튼의 경우aria-label속성을 활용하여 스크린 리더가 버튼의 기능을 명확히 전달할 수 있도록 해야 합니다. -
네이티브 HTML 요소 활용: 커스텀 UI 요소를 직접 개발하기보다는, 기본적으로 접근성을 고려하여 설계된 네이티브 HTML 요소(예:
<input type="checkbox">)를 최대한 활용할 것을 권장합니다. 네이티브 요소는 다양한 브라우저와 스크린 리더에서 일관된 동작을 보장하며, CSS를 통해 시각적 디자인을 커스터마이징하면서도 접근성을 유지할 수 있습니다. -
올바른 요소 숨김 처리: 요소를 숨길 때는
hidden속성,display: none,visibility: hidden과 같은 적절한 CSS 속성을 사용해야 합니다. 요소를 단순히 화면 밖으로 이동시키는 방식은 스크린 리더가 여전히 해당 요소를 읽어 혼란을 야기할 수 있습니다.details,dialog(특히popover속성 포함)와 같은 새로운 HTML5 요소는 확장 가능한 콘텐츠나 모달 다이얼로그를 접근성 있게 구현하는 데 매우 유용합니다.dialog요소는 기본적으로 접근성을 지원하며, Esc 키로 닫거나 외부 클릭으로 닫는 기능 등을 내장하고 있어 개발 편의성을 높입니다.
결론적으로, 웹 접근성 구현은 바퀴를 재발명하는 것이 아니라, 웹 표준과 브라우저의 기본 동작에 따르는 것이 핵심입니다. 이는 개발자의 노력을 줄이고 제품의 유지보수성을 높이며, 동시에 사용자에게는 더욱 쉽고 편리한 경험을 제공합니다.
웹 접근성은 더 이상 선택 사항이 아닌 필수 요소이며, 개발 초기 단계부터 고려할 때 가장 효율적으로 구현될 수 있습니다. 후반부에 접근성을 추가하려 하면 시간과 비용이 많이 소요될 수 있습니다. Berno PTO는 `aria` 속성의 과도한 사용보다는 HTML 시맨틱 요소의 올바른 활용을 통해 견고한 접근성을 확보할 것을 권고합니다. 기존 웹사이트의 접근성을 개선하고자 한다면, 영역과 제목의 올바른 사용, 링크와 버튼의 적절한 구분, 아이콘 버튼의 `aria-label` 추가, 커스텀 컨트롤을 네이티브 요소로 대체, 그리고 `dialog`와 같은 새로운 HTML5 요소의 활용을 우선적으로 검토해야 합니다. 마지막으로, 실제 스크린 리더를 사용하여 자신의 웹 페이지를 테스트해보는 것이 접근성 문제를 파악하는 가장 효과적인 방법임을 강조하며, 그의 아버지처럼 인터넷이 모두에게 열린 창이 되기를 바라는 마음을 전하며 발표를 마무리합니다. 접근성은 개발자와 사용자 모두에게 윈-윈(win-win)의 결과를 가져다줍니다.