스크린 리더(Screen Reader)를 위한 웹 페이지 레이아웃 설계

레이아웃을 주로 시각적인 문제로 생각하기는 쉽습니다. 헤더는 상단에 위치하고, 사이드바는 이쪽에 있으며, 콜 투 액션(Call to Action)은 콘텐츠 위의 오버레이로 나타납니다(농담입니다). 그리드(Grids), 테두리(Borders), 간격(Spacing), 그리고 색상(Color)은 모두 가치 있는 시각적 데이터를 전달하지만, 만약 이러한 페이지 구조에 대한 힌트가 오직 시각적으로만 보인다면 일부 사용자들은 귀하의 콘텐츠를 이해할 수 없다고 느낄 수 있습니다.

웹에서 스크린 리더(Screen Reader)를 사용해 본다면 이를 직접 경험할 수 있습니다. 제가 Mac에서 VoiceOver를 실행하여 테스트해 보았을 때, 스크린 리더 사용자에게 많은 페이지는 유용한 조직적 단서(Organizational cues)가 결여된 채 그저 거대한 '콘텐츠'의 더미에 불과하다는 것을 깨달았습니다.

이러한 경험은 마치 어떤 세부 사항이 중요하거나 이야기의 주요 흐름과 관련이 있는지에 대한 아무런 표시 없이 길게 늘어지는 이야기를 듣는 것과 비슷할 수 있습니다. 이야기 중간쯤에 이르면, 당신이 찾고 있는 것을 찾을 수 있을지조차 알 수 없기 때문에 계속 듣는 것이 가치가 있는지 확신할 수 없게 됩니다. 웹사이트의 맥락에서 보면, 스크린 리더가 사이드바 링크 50개가 담긴 목록을 절반쯤 읽어 내려가고 있을 때, 당신은 이 사이트에 과연 가치 있는 콘텐츠가 있기는 한 것인지 의구심을 갖기 시작할 수도 있습니다.

이러한 경험은 오직 시각적으로만 구축된 레이아웃을 가진 웹사이트들로 인해 발생합니다. 하지만 이상적으로는, 우리의 시각적 레이아웃이 콘텐츠의 기저에 깔린 조직적 모델(Organizational model)을 가리켜야 합니다. 레이아웃은 개념적 모델(Conceptual model)을 위한 시각적 지표(Visual indicators)가 되어야 합니다. 시각적 지표는 이 모델을 드러내는 하나의 방법일 뿐입니다. Web Accessibility Initiative의 ARIA (Accessible Rich Internet Applications) 프로젝트는 이러한 지표가 필요한 사용자들에게 대안적인 지표를 제공합니다.

저는 보조 기술(Assistive technology) 사용자들을 위해 단순한 웹 페이지를 사용하기 쉽고, 탐색하기 쉬우며, 읽기 쉽게 만들기 위해 이러한 지표들을 어떻게 활용하는지 살펴볼 것입니다. 모든 예제 코드는 github에서 확인할 수 있습니다.

접근성(Accessibility) 실력을 높이고 싶으신가요? 저의 무료 이메일 코스를 확인해 보세요: ✉️ 흔한 접근성 실수와 이를 피하는 방법.

꽤 단순한 레이아웃을 가진 페이지의 예시를 살펴보겠습니다. 상단에는 로고와 네비게이션 (Navigation)을 포함하는 헤더 (Header)가 있고, 본문 내용 (Body content), 우측에는 관련 포스트 목록과 소셜 미디어 공유 링크 목록이 있는 사이드바 (Sidebar), 본문 아래의 검색창 (Search box), 그리고 비즈니스 연락처 정보가 포함된 푸터 (Footer)가 있습니다.

시각적으로는 단순한 그리드 (Grid)와 배경색을 사용하여 서로 다른 요소들을 구분함으로써 콘텐츠가 꽤 잘 나뉘어 있습니다. 이 페이지에서 VoiceOver를 실행하면, 다음 요소 명령 (Next element command)을 사용하여 페이지를 꽤 잘 탐색할 수 있습니다. 마크업 (Markup) 내 요소들의 순서가 시각적 요소의 순서를 거의 그대로 따르고 있기 때문입니다. 먼저 헤더를 읽고, 그다음 본문 내용을 읽고, 그다음 사이드바, 검색창, 마지막으로 푸터를 읽습니다. 이는 꽤 괜찮은 상태입니다. 만약 CAPS + U를 눌러 VoiceOver 메뉴를 불러오면, 페이지의 모든 헤더 (Headers)와 모든 링크 (Links) 목록을 가져와서 해당 위치로 직접 이동할 수 있습니다.

잘 구조화된 HTML, <div> 요소를 사용한 간단한 그룹화 (Grouping), 그리고 헤딩 태그 (Heading tags)의 적절한 사용만으로도 우리는 괜찮은 경험을 얻을 수 있습니다. 앞서 언급한 중구난방인 스토리 웹사이트들보다는 낫지만, 훨씬 더 좋아질 수 있습니다.

먼저 페이지의 첫 번째 항목으로 건너뛰기 링크 (Skip-link)를 추가하겠습니다. 건너뛰기 링크는 매우 일반적인 접근성 (Accessibility) 기능으로, 사용자가 모든 웹 페이지에서 반복되는 긴 링크 목록이나 기타 정보를 지나 현재 페이지의 메인 콘텐츠 (Main content)로 직접 건너뛸 수 있게 해줍니다.

이것은 페이지의 탭 순서 (Tab order)에서 첫 번째 요소인 링크입니다. 일반적으로 시각적으로는 숨겨져 있지만, 포커스 (Focus)가 되면 화면에 나타납니다. 링크를 시각적으로 숨기기 위해 다음과 같은 CSS를 추가하겠습니다:

.skip {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
...

건너뛰기 링크의 연결 위치는 페이지의 메인 콘텐츠를 가리키는 id여야 합니다. 우리의 경우, <div class="content"> 섹션에 id="main"을 추가하고, 건너뛰기 링크에 href="#main"이라는 URL을 부여했습니다.

건너뛰기 링크 페이지를 방문하여 Tab 키를 누르면 해당 링크가 표시되어야 합니다. 만약 VoiceOver를 실행하고 페이지를 탐색하기 시작하면, 건너뛰기 링크가 가장 먼저 마주치는 요소여야 하며, 이를 클릭하면 VoiceOver가 페이지의 메인 콘텐츠(main content)를 읽기 시작해야 합니다.

이 단계를 통해 사용자가 페이지의 핵심 내용으로 바로 건너뛸 수 있게 했지만, 메인 콘텐츠에 쉽게 접근하는 것 외에 사용자는 여전히 페이지의 나머지 부분에 대한 명확한 개념적 지도(conceptual map)를 가지고 있지 않습니다.

사용자에게 페이지의 개념적 지도를 제공하는 한 가지 방법은 <header>, <nav>, <main>, <section>, <aside>와 같은 시맨틱 HTML5 (semantic HTML5) 요소를 사용하는 것입니다. 이러한 요소들은 브라우저와 스크린 리더(screen reader)에 의해 파싱되는 내장된 데이터를 가지고 있습니다. 이 요소들은 웹 페이지에 랜드마크(landmarks)를 생성합니다. <div> 요소 대신 이러한 요소들을 신중하게 사용함으로써, 보조 공학 기기(assistive technology devices)에 추가적인 정보를 제공하고 사용자가 페이지의 개념적 지도를 구축하는 데 도움을 줄 수 있습니다.

이전과 동일한 레이아웃을 유지하면서, 일부 <div>를 시맨틱 HTML5 요소로 교체했습니다. 또한 검색 컴포넌트에 role 속성을 추가했습니다. 대안으로는, 모든 <div>를 그대로 유지하면서 새로운 HTML5 요소로 교체하는 대신 role을 추가할 수도 있습니다. (ARIA 역할(roles)에 대해서는 w3 가이드라인을 참조하세요)

• <div class="header">가 <header class="header">로 변경됨
• <div class="main-navigation">가 <nav class="main-navigation">로 변경됨
• <div class="content">가 <main class="content">로 변경됨
• <div class="sidebar">가 <aside class="sidebar">로 변경됨
• <div class="related-posts">가 <section class="related-posts">로 변경됨
• <div class="search">가 <div class="search" role="search">로 변경됨

이제 VoiceOver를 실행하고 CAPS + U를 누르면 새로운 랜드마크(Landmarks) 메뉴가 나타납니다. 이 메뉴 안에서 다음과 같은 요소들을 확인할 수 있습니다:

• banner
• navigation
• main
• complementary
• search
• content information

이러한 메뉴 항목 중 어느 것이라도 선택하면 사용자는 해당 요소로 즉시 이동할 수 있으므로, 페이지의 다양한 요소들을 쉽게 탐색할 수 있습니다. 만약 사용자가 페이지 하단에 있더라도, Landmarks(랜드마크) 메뉴를 통해 헤더에 있는 메인 내비게이션(navigation)으로 쉽게 되돌아갈 수 있습니다.

우리는 페이지의 탐색 가능성(navigability)을 획기적으로 높였고 사용자에게 초기 지도(map)를 제공했지만, 이 경험을 정말 멋지게 만들기 위해서는 몇 가지 부족한 점이 있습니다. 첫째, 사이트 섹션의 이름들이 상당히 일반적입니다. 메뉴를 듣는 것만으로는 각 요소에 무엇이 들어있는지 정확히 알 수 없습니다. 둘째, 일부 요소들은 탐색하기가 쉽지 않습니다. 예를 들어, 사이드바 구성 요소들이 모두 'complementary'라는 레이블 아래에 그룹화되어 있습니다.

우리는 이 경험을 더욱 개선하기 위해 잘 설계된 ARIA 레이블(labels)을 추가할 수 있습니다.

ARIA 레이블을 곳곳에 배치함으로써 사용자에게 우리 레이아웃에 대한 더욱 상세한 개념적 지도(conceptual map)를 제공할 수 있습니다.

다음 반복 단계(iteration)에서 저는 다음과 같은 레이블들을 추가했습니다:

<nav class="main-navigation"> 요소는 이제 aria-label로 Primary Navigation을 가집니다.

<main class="content"> 요소는 이제 aria-labelledby 속성으로 main-title을 가지며, 해당 요소의 <h1>은 id로 main-title을 가집니다.

<aside class="sidebar"> 요소는 이제 aria-labelledby 속성으로 sidebar-title을 가지며, 해당 요소의 <h2>는 id로 sidebar-title을 가집니다.

• 사이드바에 있는 두 <section> 요소 모두 이제 적절한 ARIA 레이블을 가집니다.

다시 VoiceOver를 실행하고 CAPS+U를 눌러 Landmarks 메뉴를 불러와 보겠습니다. 이제 우리가 제공한 ARIA 레이블이 각각의 일반적인 메뉴 항목 옆에 표시되는 것을 볼 수 있습니다. 또한, 우리가 레이블을 제공한 <section> 요소들(Related Posts, Share Links)이 이제 각각의 메뉴 항목을 갖게 되었기 때문에 몇 개의 메뉴 항목이 추가되었습니다.

이제 보조 기술 (Assistive Technology) 사용자는 보조 기술을 사용하지 않는 사용자(Non-assistive technology user)와 비교했을 때, 이 웹사이트에서 수행할 수 있는 콘텐츠와 동작에 대해 동등하거나 어쩌면 더 나은 개념적 지도 (Conceptual map)를 갖게 되었습니다. 이들은 사이트의 모든 내용을 빠르게 개괄할 수 있고, 원하는 페이지 섹션으로 쉽게 이동할 수 있으며, 찾고 있는 것을 신속하게 발견할 수 있습니다.

잘 구조화된 HTML 마크업 (Markup), ARIA 역할 (ARIA roles)의 사려 깊은 사용, 그리고 ARIA 레이블 (ARIA labels)을 이용한 사이트 섹션의 세심한 레이블링 (Labeling)을 결합함으로써, 우리는 보조 기술을 사용하지 않는 사용자의 경험에 필적하는 보조 기술 사용자를 위한 사용자 경험 (User experience)을 창출할 수 있습니다. 우리는 시각적 레이아웃에 암시적으로 존재하던 개념적 지도를 보조 기술이 인식할 수 있도록 노출할 수 있었습니다.

작업 과정에서 개념적 지도의 빈틈이나 불필요하게 동일한 기능을 가진 섹션들을 발견할 수도 있습니다. 이 과정은 여러분의 설계를 명확히 하고, 개념적 또는 시각적으로 타당하지 않을 수 있는 영역을 식별하며, 사이트의 모든 사용자를 위한 설계를 개선하는 데 도움을 줄 수 있습니다.

접근 가능한 웹사이트 구축에 대해 더 깊이 알고 싶으신가요? 저의 무료 이메일 코스에 참여하세요: 📨 흔한 접근성 실수와 이를 피하는 방법. 30일 동안, 10개의 레슨, 100% 재미 보장! 😀 여기에서 신청하세요!