컨텐츠 건너 뛰기에 대한 깊은 다이빙-CSS 튜토리얼-php.cn

콘텐츠를 건너 뛰는 데있어 깊은 다이빙

많은 컴퓨터 사용자가 마우스를 사용하여 웹 페이지를 탐색하지만 많은 사람들이 키보드 작업에 의존합니다. 이론적으로, 키보드를 사용하여 웹 페이지를 찾아 보는 것은 문제가되지 않습니다. 탭 키를 눌러 집중 요소 사이를 이동 한 다음 Enter 키를 눌러 활성화하면 간단하고 쉽게 수행 할 수 있습니다! 그러나 많은 (대부분의 경우가 아닌 경우) 사이트에는 꼭대기에 링크 메뉴가 있으며 때로는 대상 콘텐츠에 도달하려면 여러 키 프레스가 필요합니다. 예를 들어, 스위스 최대의 뉴스 사이트 중 하나 인 20min의 홈페이지에는 헤드 라인을 읽기 위해 거의 40 개의 주요 프레스가 필요할 수 있습니다. 이는 최고의 사용자 경험이 아닙니다.

따라서 키보드 사용자가 지루하고 떠나는 대신 웹 사이트를 실제로 사용하려면 장면 뒤에서 작업을 수행하여 주요 콘텐츠로 바로 점프 할 수 있도록해야합니다. 웹 전체에 흩어져있는 다양한 트릭 (CSS 트릭 포함)을 찾을 수 있지만 대부분의 트릭을 무시하고 많은 사람들이 구식 또는 더 이상 사용되지 않는 코드를 사용하는 것이 좋습니다. 이 기사에서는 컨텐츠를 건너 뛰고 2021 친화적 인 방식으로 모든 것을 다루겠습니다.

두 가지 유형의 키보드 사용자

사람들은 코딩 관점에서 내비게이션에 다양한 유형의 키보드 또는 이와 동등한 스위치 기어를 사용하지만 두 가지 사용자 만 고려하면됩니다.

Keyb 이 장치는 일반적으로 심각한 시각 장애가있는 사람들이 사용합니다.
다른 모든 키보드 사용자.

Skip Content 기술은 마우스 사용자를 방해하지 않고 동시에 두 그룹 그룹의 요구를 충족시켜야합니다. 우리는 두 가지 보완 기술을 사용하여 최상의 결과를 얻을 것입니다 : 랜드 마크 와 링크를 건너 뜁니다 .

기본 예를 확인하십시오

우리가 다룰 기술을 설명하기 위해 Style Magic 이라는 샘플 웹 사이트를 만들었습니다. 마우스 사용자를위한 양호한 작업 조건으로 시작하지만 키보드를 사용하는 사용자에게는 약간의 번거 로움입니다. Codepen의 기본 웹 사이트와 각 기술의 버전을 찾을 수 있으며 Codepen에서 키보드 내비게이션을 테스트하는 것이 약간 까다 롭기 때문에 여기에서 독립형 버전도 찾을 수 있습니다.

탭 키를 사용 하여이 예제를 탐색해보십시오. (독립형 페이지에서 더 쉽게; 탭 키가 링크 사이에서 이동하면 Shift Tab 키가 뒤로 이동합니다.) 나쁘지는 않지만 메뉴 항목이 많지 않기 때문입니다.

시간이 있고 Windows 시스템을 사용하는 경우 NVDA 화면 리더의 무료 사본을 다운로드하고 모든 예제를 시도하고 사용 방법에 대한 Webaim의 개요를 참조하십시오. 대부분의 MAC 사용자는 이미 음성 화면 리더에 액세스 할 수 있으며 WebAim은 사용 방법에 대한 훌륭한 소개가 있습니다.

랜드 마크를 추가하십시오

화면 읽기 소프트웨어가 할 수있는 한 가지는 웹 페이지에서 찾은 랜드 마크 목록을 표시하는 것입니다. 랜드 마크는 페이지의 중요한 영역을 나타내며 사용자는 목록을 호출하여 랜드 마크 중 하나로 직접 이동할 수 있습니다.

전체 키보드와 함께 NVDA를 사용하는 경우 Ins F7을 눌러 "요소 목록"을 가져오고 Alt D를 눌러 랜드 마크를 표시하십시오. (웹 프로젝트 로터를 사용하여 Voiceover에서 유사한 목록을 찾을 수 있습니다.) 그러나 샘플 사이트 에서이 작업을 수행하면 쓸모없는 빈 목록 만 표시됩니다.

이 문제를 먼저 해결합시다.

랜드 마크를 추가하는 것은 매우 쉽습니다 . HTML5를 사용하는 경우 HTML5 시맨틱 요소에 직접 연결되어 있기 때문에 웹 사이트에서 사용했을 수 있습니다.<h1></h1> 도착하다<h6></h6> ,,,<main></main> ,등).

다음은 사이트 제목 섹션을 생성하는 데 사용되는 HTML 전후 수정의 예입니다.

<div>
  <div>
    <div><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">스타일 마법</a></div>
    <div>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">집</a>

      </div>
  </div>
</div>

로그인 후 복사

이 되다

<header>
 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">스타일 마법</a><nav aria-label="Main menu"> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">집</a>

    </nav></header>

로그인 후 복사

사용 된 수업은 동일하게 유지되므로 CSS를 변경할 필요가 없습니다.

다음은 샘플 사이트에서 작성해야 할 변경 사항의 전체 목록입니다.

제목은 페이지 상단에 표시됩니다.<div> 이제 그것은입니다<code><header></header> 요소.
브랜드 포함<div> 이제 그것은입니다<code><header></header> 요소.
두 가지 메뉴<div> 그랬어<code><nav></nav> 요소 교체.
두 가지 새로운 것<nav></nav> 요소는이를 설명하는 aria-label 속성을 얻었습니다. 페이지 상단의 메뉴는 "기본 메뉴"이고 페이지 하단의 메뉴는 "유틸리티 메뉴"입니다.
페이지의 주요 내용이 포함되어 있습니다 이제 그것은입니다<main></main> 요소.
페이지 하단의 바닥 글을 나타냅니다<div> 이제 그것은입니다<code><footer></footer> 요소. Codepen에서 전체 업데이트 된 HTML을 볼 수 있습니다. NVDA의 랜드 마크 목록 트릭을 다시 시도해 봅시다 ( INS F7 및 Alt D- 직접 테스트 할 수있는 독립형 페이지에 대한 링크입니다). 기이! 이제 배너 랜드 마크가 있습니다 (지도<header></header> 메인 메뉴 (메인 메뉴) (맨 위에지도<nav></nav> 메인 aria-label (맵<main></main> ) 및 내용 정보 (지도에<footer></footer> ). 이 대화 상자에서는 탭 키와 커서 키를 사용하여 메인 랜드 마크를 선택하고 페이지의 내용으로 직접 점프하거나 더 나은 경우 페이지를 탐색하면서 하나의 랜드 마크 문자에서 다음 랜드 마크 문자로 직접 점프 할 수 있습니다. JAWS 스크린 리더 사용자는 더 쉽습니다. 브라우징을하면서 Q 키를 누르면 메인 랜드 마크로 직접 점프합니다. 또한 시맨틱 요소를 사용하면 검색 엔진이 콘텐츠를 더 잘 이해하고 인덱싱하는 데 도움이 될 수 있습니다. 이것은 웹 사이트에 더 액세스 할 수 있도록하기위한 좋은 플러스입니다. 건너 뛰기 링크를 추가하십시오 이 순간에“일이 끝났다”고 생각하고 있기를 바랍니다. 글쎄, 나는 항상 "" "고려해야 할"이라는 것을 두려워합니다. 2011 년에 Google은 Ctrl F를 사용하여 웹 페이지 검색에 관한 연구를 수행했으며 놀라운 90%의 사람들이 그것이 존재한다는 것을 알지 못하거나 사용하지 않았다는 것을 발견했습니다. 랜드 마크와 관련하여 스크린 리더를 사용하는 사용자는 대략 동일하게 행동합니다. 많은 비율 이이 기능이 매우 유용하더라도 전혀 사용하지 않습니다. 따라서 당사는 웹 사이트에 Skip 링크를 추가하여 사용자 그룹과 스크린 리더를 사용하지 않는 모든 키보드 사용자를 모두 돕습니다. 좋은 링크 건너 뛰기의 기본 요구 사항은 다음과 같습니다. 필요할 때 Screen Reader 사용자를 포함한 모든 키보드 사용자에게는 보일 것입니다 . 키보드 사용자에게 그 역할을 설명하기에 충분한 정보를 제공 해야합니다 . 가장 넓은 현재 브라우저에서 실행 해야합니다 . 마우스 사용자의 탐색을 방해해서는 안됩니다 . 1 단계 : 키보드 초점 모양을 향상시킵니다 먼저 웹 사이트 전체에서 키보드 초점의 가시성을 향상시킬 것입니다. 워드 프로세서에서 텍스트를 편집 할 때 키보드 초점을 커서 위치와 동등한 것으로 생각할 수 있습니다. 탭 키를 사용하여 탐색하면 키보드 초점이 링크 (또는 양식 컨트롤) 사이를 이동합니다. 최신 웹 브라우저는 키보드 초점이 어디에 있는지 보여주는 데 매우 적합하지만 여전히 도움을받을 수 있습니다. 우리의 목표는 무엇보다 눈에 띄게 만드는 것이지만 포커스 링을 스타일링하는 많은 창의적인 방법이 있습니다. 우리는 :focus 스타일 설정에 대한 초점 의사 클래스를 사용할 수 있습니다 (그리고 샘플 사이트에서 수행 한 :hover 도 같은 스타일을 적용하는 것이 좋습니다 - 코드 펜, 라이브 사이트). 그것은 우리가 최소한 할 수있는 일이지만, 일반적으로 한 걸음 더 나아가 링크 색상을 전체 페이지에 :focus . 초점 상태에 대한 CSS는 다음과 같습니다 :focus 상태 (우리가 제공 한 코드의 사본 :hover ) : A : 초점 { /* 전체 페이지에 대한 일반 규칙* / Border-Bottom-Color : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b1295e6; } .menu-right a : 초점, . 브랜딩 A : 초점 { /* 제목과 바닥 글*/에서 링크의 색상을 되돌립니다. 배경색 : 흰색; 색상 : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b1295e6; } 로그인 후 복사 2 단계 : HTML 및 CSS를 추가하십시오 마지막 변경 사항은 건너 뛰는 링크 자체를 HTML 및 CSS에 추가하는 것입니다. 트리거 (링크)와 대상 (랜드 마크)의 두 부분으로 구성됩니다. 이것은 트리거에 권장하는 HTML입니다. 페이지의 시작 부분에 있습니다.<header></header> 요소 내부 : <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target" class="text-assistive display-at-top-on-focus">주요 콘텐츠로 건너 뜁니다.</a> 로그인 후 복사 이것은 대상의 HTML이며 직접 배치됩니다.<main></main> 컨텐츠가 시작되기 전에 : <a id="skip-link-target" class="text-assistive" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target">주요 컨텐츠의 시작.</a> <main></main> 로그인 후 복사 HTML의 작동 방식은 다음과 같습니다. Skip Link Contactor는 표준 페이지 조각 (href = "https://www.php.cn/link/93ac0c50ddddd620dc7b88e5fe05fe15bskip-link-target")을 사용하여 Skip Link Target (target)을 참조합니다.<a></a> ) ID 속성. 링크에 이어 키보드 초점이 트리거에서 대상으로 이동합니다. 우리는 앵커에 연결합니다 (<a></a> ) 요소, 직접적으로<main></main> 요소가 ID 속성을 추가하는 두 가지 이유가 있습니다. 첫째, 키보드 초점이 올바르게 움직일 수 없다는 문제를 피합니다 (일부 브라우저에서는 문제가 될 수 있습니다). 두 링크의 텍스트는 사용자에게 무슨 일이 일어나고 있는지 명확하게 설명하기 위해 설명 적입니다. 이제 기능적인 건너 뛰기 링크가 있지만 문제가 있습니다. 모두가 볼 수 있습니다. 우리는 CSS를 사용하여 기본적으로 숨기려면 마우스 사용자를 방해하지 않을 수 있으며 키보드 초점을 수신 할 때만 나타납니다. 이 작업을 수행하는 방법에는 여러 가지가 있지만 대부분은 피해야 할 잘못된 방법이 있습니다. 해야 할 것 : clip-path 사용하여 링크를 보이지 않게 만들거나 transform: translate 또는 position: absolute 화면을 오프 스크린으로 배치하십시오. display: none , visibility: hidden , hidden 속성, 또는 건너 뛰는 링크의 너비 또는 높이를 0으로 설정하십시오. 이 모든 것이 하나 또는 두 가지 유형의 키보드 사용자가 스킵 링크를 사용할 수 없게 만듭니다. clip 사용 하지 않아야합니다 . 다음은이 두 링크를 숨기는 것이 좋습니다. clip-path 를 사용하는 -webkit- 버전과 접두사는 작성 당시 사용자의 96.84%를 커버 할 수 있으며, 이는 대부분의 웹 사이트 및 사용 사례에 대해 괜찮습니다. 유스 케이스에 필요한 경우 사용 가능한 다른 기술이 많이 있으며 WebAim에 자세히 설명되어 있습니다. .Text-Assistive { -webkit-clip-path : 다각형 (0 0, 0 0, 0 0, 0 0); 클립 경로 : 다각형 (0 0, 0 0, 0 0, 0 0); 박스 사이징 : 국경 박스; 위치 : 절대; 여백 : 0; 패딩 : 0; } 로그인 후 복사 집중할 때 링크를 표시하려면이 CSS의 버전, 색상 및 크기를 사용하여 브랜드와 일치하는 것이 좋습니다. .Text-Assistive.display-at-top-on-focus { 상단 : 0; 왼쪽 : 0; 너비 : 100%; } .Text-Assistive.display-at-top-on-focus : Focus { -webkit-clip-path : 없음; 클립 경로 : 없음; Z- 인덱스 : 999; 높이 : 80px; 라인 높이 : 80px; 배경 : 흰색; 글꼴 크기 : 1.2REM; 텍스트 결정 : 없음; 색상 : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b1295e6; 텍스트 정렬 : 센터; } https://www.php.cn/link/93ac0c50dddddc7b88e5fe05c70e15bskip-link-target:focus { 배경 : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b084367; 색상 : 흰색; } 로그인 후 복사 이는 페이지 상단에 트리거 및 대상의 매우 눈에 띄는 표시를 제공하며, 여기서 사용자는 페이지가로드 된 직후 키보드 초점을 볼 것으로 예상합니다. 링크를 따르면 색상이 변경되어 무언가가 발생했다는 명확한 피드백을 제공합니다. 코드 펜에서 직접 코드를 수정하고 (아래 그림과 같이) 독립형 페이지에서 NVDA로 테스트 할 수 있습니다. 추가 개선 건너 뛰기 링크는 크리스마스를 위한 것이 아니라 메인 메뉴를위한 것이 아니라 페이지에 긴 링크 목록이 포함될 때마다 유용합니다. 실제로이 코드펜은 CSS의 transform: translateY() 사용하여 페이지 컨텐츠에서 스킵 링크를 사용하는 좋은 방법을 보여줍니다. 이전 브라우저를 지원 해야하는 "운이 좋은"위치에 있다면 다음은이 팁입니다 (독립 페이지). 확인합시다! 마지막으로, 두 가지 카테고리의 키보드 사용자에게 Skip Links가 작동하는 방법에 대한 짧은 비디오 데모가 있습니다. NVDA 화면 리더를 사용할 때 건너 뛰기 링크가 수행되는 방법은 다음과 같습니다. (비디오를 여기에 포함시켜야합니다) 스크린 리더가 필요없이 키보드를 사용하여 다시 찾아 볼 때 발생하는 일은 다음과 같습니다. (비디오를 여기에 포함시켜야합니다) 우리는 2021 년에 Skip Link에 액세스하려는 현대적인 접근 방식을 보았습니다. 우리는 과거 예제에서 더 나은 CSS 관행에 맞게 업데이트하고 키보드 사용자의 UI를 개선하며 화면 리더를 사용하는 사용자의 경험을 향상시켜 업데이트 된 HTML 접근 방식 덕분에 아이디어를 빌 렸습니다.