시맨틱 및 콘텐츠 탐색

페이지 탐색에서 시맨틱의 역할

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 블록을 대체합니다. 페이지 구조를 직관적으로 표현할 수 있도록 더 명확하고 구체적인 방법 제공 사용할 수 있습니다