스크린 리더를위한 숨겨진 목차

StackOverflow https://stackoverflow.com/questions/613203

  •  03-07-2019
  •  | 
  •  

문제

몇 개의 사이트에서 페이지 상단에 내비게이션 섹션이 포함되어 있으며 페이지의 다른 부분에 대한 내부 링크가 포함되어있어 스크린 리더가있는 사용자가 컨텐츠, 메뉴, 바닥 글, 바닥 글로 빠르게 이동할 수 있습니다. 이 "NAV"요소는 CSS와 함께 화면에서 이동하여 일반 사용자가 보이지 않습니다.

이것을 구현하는 가장 좋은 방법은 무엇입니까? 즉, 스크린 리더에게 가장 접근하기 쉽고 가장 적합하지 않은 것은 무엇입니까? 내가 함께하고있는 것은 다음과 같습니다.

<div id="nav">
    <a href="#one">Jump to section one</a>
    <a href="#two">Jump to section two</a>
    <a href="#three">Jump to section three</a>
</div>

<!-- versus -->

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

첫 번째는 마크 업에서 훨씬 더 깨끗하다는 이점이 있지만 정확히 의미는 아닙니다. 또한 "섹션 1 점프로 점프로 점프하여 섹션 3으로 점프하는 것"처럼 보입니다. 숨겨져 있기 때문에 시각적 외관이 중요하지 않다는 것을 알고 있지만 그것이 읽는 방식에 영향을 미칩니다. 각각 사이에 적절한 일시 정지가 있습니까?

두 번째는 구문에서 조금 더 장점이지만 희망적으로 더 설명 적입니다.

이것들 중 어느 것이 더 좋고, 더 나은 방법이 있습니까?

도움이 되었습니까?

해결책

Firefox 용 플러그인을 다운로드 할 수 있습니다 송곳니 (실제 스크린 리더 턱과 관련하여). 그것은 턱이 읽을 텍스트를 생성 할 것입니다. 매우 편리합니다. 나는 다른 링크를 따라 링크에 대한 좋은 의미 론적 레이아웃을 가지고 갈 것입니다. 나는 또한 그것을 숨기고있다 

#nav {
    position: absolute;
    left: 0;
    top: -9999px

}

사용 display: none 5월 일부 스크린 리더에서는 읽지 마십시오.

내 사이트에서 나는 일반적으로 이것을했다.

<div id="section-nav">
    <p>Jump to</p>
    <ul>
       <li><a href="#section1">Section1</a></li>
    </ul>
</div>

다른 팁

스크린 리더는 일반적으로 하이퍼 링크를 발표합니다. 즉, 첫 번째 예제는 "섹션 1로 점프로 점프하여 섹션 2로 점프로 점프"가 아니라 "링크 : 섹션 1로 점프, 링크 : 섹션 2로 점프 : 링크 : 섹션으로 점프하십시오. 세 "또는 그와 같은.

(개인적으로, 나는 여전히 두 번째 의미 옵션과 함께 갈 것이지만, 그것은 단지 내 개인적인 취향 일뿐입니다.)

링크를 #NAV의 ID (또는 클래스)와 함께 배치해야합니다. 이것은 스크린 리더를 사용하는 사람들에게 컨텐츠가 링크 목록이라는 헤드 업을 제공합니다. "이것은 세 가지 항목이있는 목록입니다."

"#NAV"의 ID와 함께 "ul"을 "div"에 배치하는 것은 기능적이지만 DIV는 식별을 위해 "ul"을 포장하는 것 외에는 아무것도하지 않습니다. "ul"을 ID를 ID만으로도 더 깨끗하고 "div"를 남겨 두는 것이 더 깨끗합니다. 다음 코드가 최고입니다 (제 생각에는). 깨끗하고 요점까지.

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

CSS로 페이지에서 텍스트를 제거하려면 다음을 사용합니다.

ul#nav {
    position: absolute;
    left: -9999px
}

의미 론적 레이아웃이 좋으면 필요하지 않습니다. 이미 사용하고있는 내비게이션 요소를 화면 리더와 호환 할 수 있습니다. 두 번째 옵션은 일반적으로 그렇게하는 방법입니다. 현재하고있는 일에 맞게 목록 항목을 스타일링 할 수 있습니다.

요청한 일을하는 가장 좋은 방법은 <ul> 그 안에 앵커가 있습니다.

그러나 WebKit에는 초점이 실제로 타겟팅 된 요소로 전환되지 않도록하는 몇 가지 버그가 있으므로 초점이 이동하도록 이벤트 핸들러를 링크에 첨부해야합니다. 또한 대상이 탭 포커스 Sable이어야합니다 (tabindex="-1" 이것을 위해 작동합니다).

그러나 페이지에 제목 구조가 양호한 경우 화면 리더 사용자는 작성중인이 탐색 메뉴가 필요하지 않고 페이지를 탐색 할 수 있습니다. 실제로이 메뉴는 화면 리더가없는 사용자에게만 유용 할 수 있습니다. 이 경우 키보드 에이프 사용자가 볼 수 있도록 초점에 표시하도록하려고합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top