키보드 접근성 향상을 위한 3가지 간단한 팁
키보드 액세스 기능
키보드 접근성은 주어진 시간에 마우스에 100% 의존하지 않도록 하는 것입니다.이것은 당신이 키보드를 사용하여 웹 페이지를 조회할 수 있다는 것을 의미한다.해봤어?나는 이제 키보드로 내비게이션을 하는 것에 익숙해졌다. 왜냐하면 나는 마우스를 사용하는 것을 싫어하기 때문이다. 그러나 기술자와 비기술자가 모두 나를 놀라게 하는 것을 들었을 때, 나는 항상 놀랐다. 왜냐하면 그들은 실제로 키보드로 페이지를 조회할 수 있을 것이라고 생각하지 못했기 때문이다.
내가 키보드를 즐겨 사용하는 것 외에 왜 이것이 접근성에 매우 중요합니까?어떤 사람들은 운동성 진전을 앓고 있어서 근육을 통제하기 어렵다.어떤 사람들은 거의 손을 쓸 수 없다.맹인은 자주 키보드와 화면 판독기를 결합하여 사용한다.더 선진적인 보조 기술을 사용해야 하는 사람들도 대부분 일반 키보드의 기능을 모방하고 있다.따라서 이것은 우리의 사이트와 응용 프로그램이 키보드를 통해 접근할 수 있고 각종 접근 가능한 문제를 해결할 수 있다는 것을 의미합니다!만약 네가 충분히 일찍 생각하고 너무 많이 생각하지 않는다면, 이것은 통상적으로 매우 재미있는 과정이다.
팁 1: div 사용을 중지하고 의미 HTML 사용
나는 많은 사람들이 디자인이 정교하고 아름다운 상호작용 응용 프로그램을 만드는 것을 본 적이 있다.나는 특이한 햄버거 아이콘을 눌렀는데, 메뉴가 화면 꼭대기에서 미묘한 애니메이션으로 아름답게 나타났다.나는 블로그 페이지에 들어가서 선택 목록을 사용하여 주제를 선별하기 시작했다.선택 목록에 깨끗하고 우아한 드롭다운 목록 a가 있습니다. 그리고 제
tab 키를 사용해 보겠습니다.무슨 좋은 점이 있습니까?나의 초점 표시기는 마침 햄버거 아이콘을 지나갔다.이것은 내가 메뉴를 열 수 없다는 것을 의미하는 것입니까?내가 모르는 메뉴를 열 수 있는 다른 방법이 있습니까?나는 그 기이한 선택 목록에 가서 주제를 찾았지만, 심지어는 그것을 열 수도 없었다.만약 당신이 정말 키보드에 의존한다면, 당신은 어떤 느낌을 갖게 될 것이라고 상상해 보세요.이 글을 쓸 때 나는 매우 화가 났다. 왜냐하면 사람들이 이 글에 주의하지 않을 때 나는 매우 화가 났기 때문이다.내 비누통을 들어줘서 고마워.
왜 이 항목들은 우리의 키보드에서 작용하지 않습니까?이 메뉴의 HTML을 살펴보겠습니다.
<div class="hamburger-menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<nav>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
Tabindexes는 정수 값을 사용합니다.그러나 이 점의 단순성을 유지하고 교육의 최선의 실천을 위해 우리는 그것을 가장 자주 사용하는 두 가지 값으로 축소할 것이다.
0과-1.본론으로 들어가기 위해 0 = 포커스 가능, -1 = 포커스 불가능.기본적으로 모든 브라우저에서 링크, 단추, 폼 요소는 초점을 맞출 수 있습니다.이것은 그들의tabindex가 0이라는 것을 의미한다.div의 기본 tabindex는 무엇입니까?너는 내가 정력을 집중할 수 없다는 것에 근거하여 추측할 수 있니?
PSA: tabindex를 조정하지 않고 단추와 유사한 것을 만들려고 하면 키보드가 접근할 수 없습니다.기본적으로 화면 판독기에서 잘 나오지 않습니다. 설령 당신이 그것을 하나 준다 하더라도.HTML로 정의하고 햄버거 메뉴를
<div> 요소로 만드는 것이 좋습니다.대부분의 사람들은 단추의 기본 브라우저 스타일 때문에 이렇게 하는 것을 좋아하지 않는다.그런데 어떻게 된 거예요?당신은 CSS로 이 문제를 해결할 수 있습니다!이겨라, 이겨라!또 다른 장점은 단추의 기본 동작과 이벤트 탐지기 때문에, 단추처럼 작동하기 위해div를 수정할 필요가 없다는 것입니다.이것이 바로 제가 상기 HTML을 다시 포맷하는 방법입니다(아래
tabindex="0"와 관련된 CSS 참조).<button class="hamburger-menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="visually-hidden">Menu</span>
</button>
<nav>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
팁 2: 항상 기본 탐색을 건너뛸 수 있는 옵션을 제공합니다.
내가 여기에서 말하는 것은 모두 동리심이기 때문에, 우리는 인류의 관점에서 이것이 무엇을 의미하는지 이야기합시다.어떤 이유로든 마우스를 사용할 수 없다고 상상해 보세요.너는 처음으로 한 사이트에 와서 내비게이션을 훑어보고 네가 어디로 가고 싶은지 보고 싶다.키보드를 사용하여 페이지를 찾을 수 있습니다.
페이지 내용만 훑어보고 싶을 때, 내비게이션 전체를 다시 훑어봐야 한다고 상상해 보세요.이것은 내 메뉴에 있어서 그리 대단한 것은 아닐 것이다. 왜냐하면 그것은 단지 세 개의 링크만 있기 때문이다.하지만, 우리는 이곳에서 진실입니다. 초대형 메뉴는 모두 인터넷에 있습니다!만약 그 초대형 메뉴들이 심지어 방문할 수 있다면 (하하하, 너는 알다시피, 많은 메뉴가 안 된다면, 그것은 마치 고통처럼 들린다.
이 문제를 해결하는 방법은 매우 축 처진 과일이다.HTML
<button>에 표시된 첫 번째 요소는 "주요 내용으로 건너뛰기"라는 링크여야 합니다..visually-hidden 값은 메인 패키지의 id와 일치하는 책갈피 값이어야 합니다.다음은 현재 블로그에서 수행하는 방법입니다.<a class="focusable visually-hidden" href="#main-content">Skip to main content</a>
...
<nav class="menu-main">
<ul class="menu">
<li class="menu-item"><a href="/about">About</a></li>
<li class="menu-item"><a href="/blog">Blog</a></li>
<li class="menu-item"><a href="/contact">Contact</a></li>
</ul>
</nav>
...
<main id="main-content">
...
</main>
<body> 원소의 id와 일치합니다.이것은 누군가가 이 링크를 클릭하면 주요 내용 구역에 직접 들어가서 전체 내비게이션에서tab키를 사용할 필요가 없게 한다.이것은 이미 이 사이트에 익숙하거나 다른 출처에서 당신의 사이트를 가리키는 링크를 클릭하는 사람에게도 도움이 됩니다.내가 내 사이트에서 하는 일은 네가 그것을 주목할 때만 링크를 표시하는 것이다.이렇게, 이것은 처음에tab 키를 눌렀을 때만 나타납니다.다음은
href 및 #main-content 관련 CSS입니다..visually-hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.focusable.visually-hidden:focus {
position: relative;
left: 0;
width: auto;
height: auto;
overflow: auto;
}
팁 3: 포커스 표시기를 제거하지 마십시오.
무엇이 초점 지표입니까?기본적으로, 그것들은 통상적으로tabindex가 0인 요소 주위에서 브라우저의 윤곽에 특정됩니다.Google Chrome의 기본 초점은 다음과 같습니다.
Firefox의 기본 초점은 다음과 같습니다.
Safari에서 기본 초점은 다음과 같습니다.
당신은 당신의 디자이너가 못생겼다고 해서 초점지시기를 삭제하는 것이 아니라 높은 대비도의 초점지시기를 디자인해서 당신의 사이트 브랜드에 더욱 부합하도록 할 수 있습니다.이것이 바로 내가 한 일이다.
당신이 무엇을 하든지 CSS에 쓰지 마세요
<main>.제 TED 강연을 들어주셔서 감사합니다.나는 이 힌트들이 네가 키보드를 사용하기 시작하는 데 도움을 줄 수 있기를 바란다.문제가 있으면 언제든지 연락 주세요.만약 네가 나에게서 무장애성에 관한 더 많은 정보를 듣고 싶다면, 나는 매우 기쁘다subscribe to my bi-weekly newsletter.
Reference
이 문제에 관하여(키보드 접근성 향상을 위한 3가지 간단한 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lkopacz/3-simple-tips-to-improve-keyboard-accessibility-5hc8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
