탐색 건너뛰기 링크를 만드는 방법
에 대한
키보드를 사용하여 웹사이트를 탐색할 때 주요 콘텐츠에 도달하기 전에 웹사이트의 탐색 헤더를 탭해야 하는 경우가 많습니다. 원하는 페이지에 도달하기 위해 많은 페이지를 통과할 때 특히 실망스럽습니다. 이 튜토리얼에서는 키보드 사용자가 내비게이션을 통해 쉽게 탭 이동을 피하고 주요 콘텐츠로 바로 이동할 수 있도록 "네비게이션 건너뛰기"링크를 만드는 과정을 안내합니다.
우리는 무엇을 만들고 있습니까?
여기서 우리가 만들고 있는 것은 기본적으로 웹 사이트를 탐색하는 동안에는 보이지 않지만 사용자가 Tab 키로 사이트를 탐색할 때 포커스를 받으면 표시되는 링크입니다.
왜요?
자습서로 이동하기 전에 일반적인 질문에 답해 보겠습니다.
Why do I need to make my site fully accessible with a keyboard?
일부 사용자는 웹 탐색을 위해 키보드에 의존합니다. 운동 장애가 있는 사용자는 종종 마우스나 다른 장치로 탐색하기가 어렵습니다. 따라서 우리 웹사이트는 키보드로 100% 액세스할 수 있어야 합니다.
This article from WebAIM does a better job at explaining the importance of keyboard accessibility.
웹 사이트 설정
먼저 웹사이트의 기본 레이아웃을 만들어 보겠습니다. 최종 결과는 다음과 같습니다.
다음과 같은 기본 홈페이지가 됩니다.
<header>에 탐색 요소를 포함하는 <nav>를 포함하는 A <ul> <main>HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#" id="site-name">MySite</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<p><a href="#">Lorem ipsum dolor</a> sit amet consectetur adipisicing elit. Explicabo aperiam distinctio nostrum, cum incidunt pariatur consequuntur ullam. Odit laboriosam magni amet eligendi perferendis corporis quae. Obcaecati eaque iusto, magnam mollitia porro tenetur temporibus ex magni, vero inventore nulla hic ipsum nostrum repellendus, ut reiciendis repellat. Aliquam consequuntur in perferendis beatae.</p>
<p>At placeat natus nemo quam, fuga ipsam accusantium in vitae nam quae velit numquam alias perspiciatis veniam quod eligendi aliquam fugiat ipsum doloremque laudantium. Id eum nobis cupiditate laudantium est in soluta quasi accusantium, rem quos unde iusto voluptates quibusdam dolore quaerat, provident laboriosam ipsum natus nam perspiciatis possimus. Laborum!</p>
<p>Minima pariatur accusamus sequi hic fuga consequatur eaque, veritatis molestias vel atque fugiat, natus, nesciunt suscipit laborum non sunt quaerat cum ea assumenda deserunt voluptates vitae iusto sed ducimus. Eligendi quos nam exercitationem et adipisci vero iure, quidem ad. Amet quia exercitationem illum soluta doloremque dolorum aperiam totam vel ipsum!</p>
<p>Animi beatae dolores laborum placeat sed corporis minus, reprehenderit commodi officia eligendi, magni expedita, alias sunt saepe quas! Mollitia cum rerum aperiam reprehenderit. Aliquam tempora nemo mollitia sed tenetur eaque labore sit fugit illo consequuntur? At quibusdam, adipisci beatae a reprehenderit iure vitae maxime perspiciatis. Necessitatibus aperiam ratione ad perspiciatis.</p>
<p>Repudiandae fugiat veniam sint quibusdam itaque earum, expedita provident quasi dolor repellendus! Maiores, expedita? Ut neque quo, doloremque quaerat repellat corporis laudantium voluptatibus omnis a qui blanditiis dolorem odio, quia voluptatem ullam nam harum necessitatibus cupiditate, pariatur distinctio aliquam labore! Beatae in reprehenderit sint! Quae molestiae reiciendis voluptates dolor pariatur!</p>
<p>Voluptate, enim minus omnis beatae quisquam, perspiciatis ea atque eos quaerat ab, vitae tenetur explicabo nisi tempora exercitationem amet ullam debitis earum dolore. Unde ea quia aliquid similique delectus culpa, molestias neque dignissimos corporis odit ab necessitatibus impedit deserunt dolore? Rem, blanditiis vel? Doloribus, minima alias facere iure nemo consequuntur!</p>
<p>Fugit laudantium reiciendis vero molestiae facere! Voluptate maiores similique vitae ipsa nam ipsum saepe, sit rem sapiente debitis nihil temporibus asperiores laborum velit odio inventore, recusandae ratione! Officiis laborum fuga nostrum, quo cum repellendus soluta expedita iusto qui corporis aliquam perspiciatis minus accusantium in ut. Voluptates quia omnis fuga ipsum.</p>
<p>Porro sint numquam placeat molestias soluta hic velit ratione, commodi nam earum et a delectus molestiae praesentium officia eaque adipisci error aut asperiores. Voluptates, quos eveniet magni optio amet culpa dolorum ad quidem ipsam incidunt illum explicabo non atque rerum blanditiis labore harum dolore repudiandae quod repellat. Quisquam, nobis odit?</p>
<p>Eaque, quos eveniet voluptas commodi assumenda nostrum id in veniam nulla, tenetur itaque provident. Ex numquam nesciunt quaerat est quos ab doloremque debitis harum facere quae? Dicta non, doloremque, aperiam a nisi totam modi quis assumenda deserunt animi quaerat! Ratione veritatis enim cupiditate ut et facere veniam quasi? Tenetur, autem.</p>
<p>Sit, hic consequuntur? Dicta adipisci nobis voluptatibus excepturi nemo veritatis iusto in, vel magni laborum, perspiciatis impedit? Dolorum ducimus soluta consectetur neque voluptate totam architecto temporibus autem veritatis perferendis, sit ratione officia illum, quidem vel iste obcaecati eaque consequatur! Autem quo repellendus nihil quisquam. Doloremque repellendus natus magni illum tempora.</p>
</article>
</main>
<footer>
2021 Savvas Stephanides
</footer>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
body{
background-color: #2b2e4a;
}
header{
background-color: #903749;
box-shadow: 0 0 30px 6px #e84545;
}
header nav{
width: 900px;
margin: auto;
}
header nav ul{
list-style: none;
display: flex;
}
header nav ul li a{
color: white;
display: block;
padding: 21px;
text-decoration: none;
}
header nav ul li a:hover{
text-decoration: underline;
}
header nav ul li a#site-name{
font-weight: bold;
color: white;
}
main article{
width: 900px;
margin: auto;
margin-top: 60px;
}
main article p{
padding: 15px 21px;
line-height: 1.5;
}
main article p,
main article p a{
color: white;
}
탐색 건너뛰기 링크 만들기
이제 링크를 만들어야 합니다. 이를 위해 다음 두 가지 작업을 수행해야 합니다.
<main> 태그를 앵커로 만듭니다1. <main> 태그를 앵커로 만듭니다.
이렇게 하려면
<main> 태그에 ID를 부여하기만 하면 됩니다. 그것을 부르자 main-part :- <main>
+ <main id="main-part">
2. 링크 만들기
이제
<body> 태그 바로 아래 및 <header> 태그 바로 앞에 "탐색 건너뛰기"링크를 만들어야 합니다.<body>
+ <a href="#main-part" id="skip-navigation">Skip navigation</a>
<header>
3. 보이지 않게 만들기
이제 사용자에게 숨길 필요가 있습니다. 우리는 CSS로 그렇게 합니다:
#skip-navigation{
position: fixed;
top: -100%;
left: 0;
background-color: #903749;
color: white;
text-decoration: none;
padding: 18px;
border: 3px solid #e84545;
}
position: fixed 및 top: -100% 라인을 확인하십시오. 링크를 보이지 않게 만드는 선입니다.4. :focus에서 볼 수 있도록 합니다.
마지막으로 링크에 포커스가 있을 때 링크의
top 매개변수를 설정합니다.#skip-navigation:focus{
top: 0;
}
그리고 그게 다야! 페이지를 열고 탭 버튼을 누르자마자 내비게이션 건너뛰기 버튼이 표시됩니다. Enter 키를 누르면 메인 콘텐츠로 바로 이동합니다!
See live demo
결론
이 튜토리얼이 도움이 되었나요? 여기 또는 에서 알려주세요!
Reference
이 문제에 관하여(탐색 건너뛰기 링크를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/savvasstephnds/how-to-create-a-skip-navigation-link-5e56텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
