'콘텐츠로 건너 뛰기'링크를 만드는 방법

건너 뛰기 링크는 사용자가 페이지 간 이동하는 데 도움이되는 작은 내부 탐색 링크입니다. 키보드 사용자와 스크린 리더가 페이지의 다른 요소를 먼저 가로지 않고 페이지 상단에서 컨텐츠로 점프 할 수있는 접근성 향상으로 사용되는 종종 숨겨져 있기 때문에 실제로 볼 수 없습니다.

실제로 DevTools를 열면 CSS- 트릭에서 찾을 수 있습니다.

제 생각에는 링크를 건너 뛰는 가장 좋은 방법은 링크를 숨기고 초점을 맞추면 표시하는 것입니다. 따라서 HTML에 링크가 있다고 가정합니다.

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">
  콘텐츠로 건너 뜁니다</a>

… 우리는 절대적인 위치를 제공하고 화면에서 멀리 옮길 수 있습니다.

 .skip-to-content-link {
  왼쪽 : 50%;
  위치 : 절대;
  변환 : Translatey (-100%);
}

그런 다음 집중하면 다시 분리하고 프로세스에서 어떤 방식으로도 스타일을 지정할 수 있습니다.

 .skip-to-content-link {
  배경 : #e77e23;
  높이 : 30px;
  왼쪽 : 50%;
  패딩 : 8px;
  위치 : 절대;
  변환 : Translatey (-100%);
  전환 : 0.3S 변환;
}

.Skip-to-Content-Link : Focus {
  변환 : Translatey (0%);
}

이것은 우리의 링크가 집중 될 때까지 링크를 숨기고 집중할 때 표시합니다.

이제 Miles Davis의 유명한 인용문부터 시작하여 자세히 설명하겠습니다.

시간이 주요 요인이 아니며 유일한 요인입니다 .

비가 오는 아일랜드 에서이 글을 쓰면서 많은 사용자가 내가 익숙한 네트워크를 사용할 때 직면 한 문제를 생각했습니다. 우리는 모든 사용자를 고려하지 않고 훌륭한 사용자 경험을 창출하기 위해 많은 노력을 기울이고 그들의 요구를 충족시키는 방법을 고려했습니다. Frontend Masters에서 Marcy Sutton의 코스를 마치기 전에 링크를 건너 뛰는 것에 대해 들어 본 적이 없습니다. Skip Links 사용의 힘과 단순성에 대해 배우면서 CSS 트릭보다 다른 플랫폼이 무엇인지 인식을 높이기위한 임무를 수행하기로 결정했습니다!

솔루션은 질문에 대한 답변이므로 키보드 사용자와 스크린 리더가 페이지의 내용을 빠르게 찾는 데 도움이되는 솔루션은 무엇입니까? 요컨대, 해결책은 시간 입니다. 사용자가 가장 관심이있는 웹 사이트의 일부로 탐색 할 수 있도록하여 귀중한 시간을 절약 할 수 있습니다.

Sky News 웹 사이트를 예로 들어 보겠습니다. 사용자가 모든 탐색 항목을 건너 뛰고 기본 컨텐츠로 직접 이동할 수있는 "콘텐츠 건너 뛰기"버튼을 제공합니다.

키보드를 사용하여 페이지 상단으로 이동 하여이 버튼을 볼 수 있습니다. 이것은 위에 표시된 구현과 유사합니다. 링크는 항상 문서에 있지만 집중할 때만 볼 수 있습니다.

이것은 우리 가이 기사에서 함께 만들 수있는 건너 뛰기 링크의 유형입니다.

샘플 웹 사이트

스킵 링크를 시연하는 데 사용할 샘플 웹 사이트를 만들었습니다.

이 사이트에는 많은 탐색 링크가 있지만 시간을 절약하기 위해 "홈"과 "블로그 페이지"의 두 페이지 만 있습니다. 이것은 우리에게 일이 어떻게 작동하는지에 대한 아이디어를 제공하기에 충분합니다.

문제를 결정하십시오

다음은 사용중인 탐색입니다.

총 8 개의 내비게이션 항목이 있으며 키보드 사용자와 스크린 리더는 먼저 이러한 항목을 이동하여 내비게이션 아래의 주요 컨텐츠에 도달해야합니다.

이것이 문제입니다. 탐색은 사용자에게 중요하지 않을 수 있습니다. 어쩌면 사용자는 기사에 대한 직접 링크를 받고 콘텐츠에 액세스하려고합니다.

이것은 Skip Links를 사용하기에 완벽한 사용 사례입니다.

링크를 만듭니다

"콘텐츠로 건너 뛰기"링크를 만드는 방법에는 여러 가지가 있습니다. 내가 좋아하는 것은 Sky News와 비슷한 예입니다. 즉, 링크가 집중 될 때까지 숨기는 것입니다. 이것은 예를 들어 페이지 상단 또는 근처에 링크를 넣을 수 있음을 의미합니다.<header></header> 요소 내부.

 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">콘텐츠로 건너 뜁니다</a>

이 링크에는 .skip-link 클래스가 있으므로 스타일링 할 수 있습니다. href 속성은 https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3 을 가리 며 페이지 하단에 추가합니다.<main></main> 요소의 ID. 클릭하면 링크가 점프하는 곳입니다.

 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">콘텐츠로 건너 뜁니다</a>

<main></main>

스타일없이 제목에 링크를 넣으면 이것이 우리가 가진 것입니다.

이것은 훌륭해 보이지 않지만 기능은 존재합니다. 키보드를 사용하여 링크를 탐색하고 초점을 얻을 때 Enter를 누르십시오.

이제 아름답게 보이게 할 시간입니다. 먼저 포지셔닝을 수정하고 Skip Link가 초점을 맞추는 경우에만 표시해야합니다.

 .skip-link {
  배경 : #319795;
  색상 : #ffff;
  글꼴 중량 : 700;
  왼쪽 : 50%;
  패딩 : 4px;
  위치 : 절대;
  변환 : Translatey (-100%);
}

.skip-link : 포커스 {
  변환 : Translatey (0%);
}

여기의 마법은 transform 속성에 있으며, 스킵 링크가 초점을 맞추는 지 여부를 기반으로 숨기고 표시합니다. transform 속성에서 빠르게 변환하여 조금 더 좋아 보이도록합시다.

 .skip-link {
  /* 이전과 동일*/
  전환 : 0.3S 변환;
}

이제보기로 변환하여 조금 더 나은 것입니다.

당신은 지금 (희망적으로) 내가 가진 것을 아래에 가져야합니다.

보시다시피, 링크는 탐색을 우회하고 직접 점프합니다.<main></main> 요소.

여러 링크를 사용해도 괜찮습니다!

현재이 링크는 하나의 목적 만 사용하는데, 이는 웹 사이트에 컨텐츠를 건너 뛰는 것입니다. 그러나 우리는 거기서 멈출 필요가 없습니다.

한 걸음 더 나아가 웹 사이트 바닥 글로 이동하는 방법과 같은 더 많은 옵션으로 스킵 링크를 만들 수 있습니다. 당신이 상상할 수 있듯이, 이것은 우리가 한 일과 매우 유사합니다.

여러 건너 뛰기 링크를 사용하여 샘플 웹 사이트의 블로그 페이지를 쉽게 사용할 수 있도록하겠습니다. 블로그는 일반적으로 Ajax를 사용하며 페이지 하단에 도달하면 더 많은 게시물이로드됩니다. 따라서 웹 사이트의 바닥 글에 도달하기가 어렵습니다. 이것이 우리가 해결하고 싶은 문제입니다.

따라서 모든 자동로드 비즈니스를 우회하고 사용자를 https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf 요소로 직접 이동하는 두 번째 링크를 추가하겠습니다.

<div>
  <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">콘텐츠</a> 또는 <a href="https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf">바닥 글로</a> 건너 뜁니다
</div>

또한 CSS를 조금 수정하고 :focus-within 사용해야합니다.

 .skip-link {
  변환 : Translatey (-100%);
}

.skip-link : focus-within {
  변환 : Translatey (0%);
}

이것은 우리의 .skip-link 요소의 어떤 것이 초점을 맞추면, 우리는 그것을 표시 할 것임을 의미합니다. 불행히도, Internet Explorer 나 Opera Mini는 focus-within 지원하지 않지만 적용 범위가 매우 좋으며 Polyfill을 사용할 수 있습니다.

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

마지막으로해야 할 일은 바닥 글 요소에 ID가 있는지 확인하여 링크가 점프 할 수있는 것이 있는지 확인하는 것입니다.

<footer id="footer"></footer>

이것이 우리에게 가져 오는 것입니다.

한 걸음 더 나아가고 싶다면 (이를 권장합니다), 사용자가 둘을 차별화 할 수 있도록 각 링크를 다르게 스타일링 할 수 있습니다. 이 예제의 두 링크는 ​​Pure White이며, 이는 단일 작업을 수행하는 단일 버튼에 매우 효과적이지만 다르게 렌더링되면 두 링크를 처리하고 있음을 더 명확하게 만듭니다.

결론을 건너 뛰십시오

웹 사이트에서 Skip Links를 사용합니까? 아니면 그렇지 않다면, 이것이 당신이 하나를 사용하도록 설득합니까? 웹 사이트의 접근성과 관련하여 링크를 건너 뛰는 것이 우수한 부가 가치임을 분명히 바랍니다. 모든 접근성 문제를 해결하는 것은 만병 통치약이 아니지만 일부 사용 사례를 해결하므로보다 완벽한 사용자 경험을 만듭니다.

다음은이 기술 또는 유사한 기술을 사용하는 잘 알려진 웹 사이트입니다.

• 아마존
• 체이스 뱅크
• Google (링크 건너 뛰기가 아니라 접근성 피드백을 제공하는 링크)
• 목표
• 뉴욕 타임즈
• Zillow

위 내용은 '콘텐츠로 건너 뛰기'링크를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!