시맨틱 및 콘텐츠 탐색

페이지 탐색에서 의미론의 역할

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

어포던스, 시맨틱, 보조 기술이 접근성 트리를 사용하여 사용자를 위한 대체 사용자 환경을 만드는 방법을 알아봤습니다. 표현력이 뛰어난 시맨틱 HTML을 작성하면 많은 표준 요소에 시맨틱과 지원 동작이 모두 내장되어 있으므로 별도의 노력 없이도 접근성을 크게 높일 수 있습니다.

이 강의에서는 스크린 리더 사용자에게 특히 탐색과 관련하여 매우 중요한, 눈에 잘 띄지 않는 시맨틱을 다룹니다. 컨트롤이 많지만 콘텐츠가 많지 않은 간단한 페이지에서는 페이지를 쉽게 스캔하여 필요한 항목을 찾을 수 있습니다. 하지만 위키백과 항목이나 뉴스 애그리게이터와 같이 콘텐츠가 많은 페이지에서는 모든 내용을 위에서 아래로 읽어 내려가는 것이 실용적이지 않습니다. 콘텐츠를 효율적으로 탐색할 방법이 필요합니다.

개발자는 스크린 리더가 사용하기 지루하고 느리거나 스크린 리더가 찾을 수 있도록 화면의 모든 항목에 포커스를 설정할 수 있어야 한다고 잘못 생각하는 경우가 많습니다. 하지만 사실은 그렇지 않은 경우가 많습니다.

스크린 리더 사용자는 정보를 찾기 위해 제목 목록을 사용하는 경우가 많습니다. 대부분의 스크린 리더에는 페이지 제목 목록을 쉽게 분리하고 스캔하는 방법이 있습니다. 이를 로터라고 하는 중요한 기능이라고 합니다. HTML 제목을 효과적으로 사용하여 이 기능을 지원하는 방법을 알아보겠습니다.

효과적인 제목 사용

먼저 이전에 언급한 DOM 순서가 중요하다는 점을 다시 한번 강조하겠습니다. 포커스 순서뿐만 아니라 스크린 리더 순서에도 중요합니다. VoiceOver, NVDA, JAWS, ChromeVox와 같은 스크린 리더를 실험해 보면 제목 목록이 시각적 순서가 아닌 DOM 순서를 따르는 것을 알 수 있습니다.

이는 일반적으로 스크린 리더에 적용됩니다. 스크린 리더는 접근성 트리와 상호작용하며 접근성 트리는 DOM 트리를 기반으로 하므로 스크린 리더가 인식하는 순서는 DOM 순서를 직접 기반으로 합니다. 따라서 적절한 제목 구조가 그 어느 때보다 중요합니다.

구조가 잘 잡힌 대부분의 페이지에서는 콘텐츠 블록 간의 상위-하위 관계를 나타내기 위해 제목 수준이 중첩됩니다. WebAIM 체크리스트에서는 이 기법을 반복적으로 언급합니다.

  • 1.3.1에 '시맨틱 마크업이 제목을 지정하는 데 사용됩니다'라고 언급
  • 2.4.1에서 콘텐츠 블록을 우회하는 기법으로 제목 구조를 언급함
  • 2.4.6에서는 유용한 제목을 작성하는 방법에 관한 몇 가지 세부정보를 설명합니다.
  • 2.4.10: '콘텐츠의 개별 섹션은 적절한 경우 제목을 사용하여 지정됩니다.'라고 명시되어 있습니다.

모든 제목이 화면에 표시되어야 하는 것은 아닙니다. 예를 들어 위키피디아는 일부 제목을 의도적으로 화면 밖에 배치하여 스크린 리더 및 기타 보조 기술에 만 액세스할 수 있도록 하는 기법을 사용합니다.

<style>
    .sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
</style>

<h2 class="sr-only">This heading is offscreen.</h2>

복잡한 애플리케이션의 경우 시각적 디자인에 제목이 필요하지 않거나 제목을 표시할 공간이 없는 경우 제목을 수용하는 좋은 방법이 될 수 있습니다.

기타 탐색 옵션

제목이 잘 지정된 페이지는 스크린 리더 사용자의 탐색에 도움이 되지만 링크, 양식 컨트롤, 랜드마크 등 페이지를 이동하는 데 사용할 수 있는 다른 요소도 있습니다.

독자는 스크린 리더의 로터 기능 (페이지 제목 목록을 쉽게 분리하고 스캔하는 방법)을 사용하여 페이지의 링크 목록에 액세스할 수 있습니다. 위키와 같이 링크가 많은 경우 독자가 링크 내에서 검색어를 검색할 수 있습니다. 이렇게 하면 페이지에서 용어가 발생할 때마다 발생하는 것이 아니라 용어가 실제로 포함된 링크로만 검색 결과가 제한됩니다.

이 기능은 스크린 리더가 링크를 찾을 수 있고 링크 텍스트가 의미가 있는 경우에만 유용합니다. 예를 들어 다음과 같은 일반적인 패턴은 링크를 찾기 어렵게 만듭니다.

  • href 속성이 없는 앵커 태그 단일 페이지 애플리케이션에서 자주 사용되는 이러한 링크 타겟은 스크린 리더에 문제를 일으킵니다. 단일 페이지 앱에 관한 도움말에서 자세히 알아보세요.
  • 링크로 구현된 버튼 이로 인해 스크린 리더가 콘텐츠를 링크로 해석하고 버튼 기능이 손실됩니다. 이러한 경우에는 앵커 태그를 실제 버튼으로 대체하고 적절하게 스타일을 지정합니다.
  • 링크 콘텐츠로 사용되는 이미지입니다. 필요한 경우 연결된 이미지를 스크린 리더에서 사용할 수 없는 경우가 있습니다. 링크가 보조 기술에 올바르게 노출되도록 하려면 이미지에 alt 속성 텍스트가 있는지 확인하세요.

링크 텍스트가 좋지 않은 것도 문제입니다. '자세히 알아보기' 또는 '여기 클릭'과 같이 클릭 가능한 텍스트는 링크가 연결되는 위치에 관한 시맨틱 정보를 제공하지 않습니다. 대신 '반응형 디자인에 대해 자세히 알아보기' 또는 '이 캔버스 튜토리얼 보기'와 같은 설명 텍스트를 사용하여 스크린 리더가 링크에 관한 의미 있는 맥락을 제공할 수 있도록 하세요.

로터는 양식 컨트롤 목록을 검색할 수도 있습니다. 독자는 이 목록을 사용하여 특정 항목을 검색하고 해당 항목으로 바로 이동할 수 있습니다.

스크린 리더에서 흔히 발생하는 오류는 발음입니다. 예를 들어 화면 리더가 'Udacity'를 'oo-dacity'로 발음하거나, 전화번호를 큰 정수로 읽거나, 대문자로 된 텍스트를 약어인 것처럼 읽을 수 있습니다. 흥미롭게도 스크린 리더 사용자는 이러한 특징에 익숙하며 이를 고려합니다.

일부 개발자는 음성으로 읽히는 스크린 리더 전용 텍스트를 제공하여 이 문제를 해결하려고 합니다. 발음 철자법에 관한 간단한 규칙은 다음과 같습니다. 사용하지 마세요. 문제를 악화시킬 뿐입니다. 예를 들어 사용자가 점자 디스플레이를 사용하는 경우 단어 철자가 잘못되어 혼란이 가중됩니다. 스크린 리더를 사용하면 단어를 소리 내어 읽을 수 있으므로 리더가 환경을 제어하고 언제 필요한지 결정하도록 하세요.

로터를 사용하면 랜드마크 목록을 볼 수 있습니다. 이 목록은 독자가 HTML 랜드마크 요소에서 제공하는 기본 콘텐츠와 탐색 랜드마크를 찾는 데 도움이 됩니다.

HTML5에서는 header, footer, nav, article, section, main, aside를 비롯하여 페이지의 시맨틱 구조를 정의하는 데 도움이 되는 몇 가지 새로운 요소를 도입했습니다. 이러한 요소는 기본 제공 스타일을 강제하지 않고 페이지에 구조적 단서를 제공합니다 (어쨌든 CSS로 해야 함).

시맨틱 구조 요소는 반복되는 여러 div 블록을 대체하며, 작성자와 독자 모두에게 페이지 구조를 직관적으로 표현하는 더 명확하고 설명적인 방법을 제공합니다.