Role = "button"이 충분하지 않을 경우

내가 특별히 좋아하는 사이트를 찾을 때마다 나는 브라우저의 개발 도구를 열어 그것이 어떻게 만들어졌는지 이해한다.말할 필요도 없이, 나는 자주 이렇게 한다.어떤 경우, 나는 사이트의 진정한 접근성을 이해하기 위해 코드만 볼 뿐이다.항상 엄지손가락처럼 튀어나오는 것이 있다. 바로 부정확한 캐릭터 속성을 가진 요소다.
이 글에서, 나는 롤=button, 그것이 어떻게 남용되고, 어떻게 쉽게 접근할 수 있는지 토론할 것이다.
개발자들은 role="button"를 사용하여 요소를'버튼'으로 전환하는 경향이 있다.AT 사용자에게 속성role="button"이 있는 요소가 사실상 단추라는 것을 보여주기 위해서다.많은 경우에, 이것은 이 요소를 접근할 수 있도록 하기에는 부족하다.
시작하기 전에 내가 말하고 싶은 것은 모든 상황에서 일반<button>원소를 사용하는 것이 일반role="button"원소를 사용하는 것보다 더 바람직하다는 것이다.이 역할은 네이티브 버튼 요소를 사용할 수 없는 이벤트에서만 사용할 수 있습니다.

무엇이 부족합니까?role="button"를 사용할 때 원소가 옵션이 될 수 있는지 확인해야 합니다. 원소 자체가 옵션이 없을 때만 이렇게 해야 합니다.예를 들어 유효한<a> 속성이 추가된 경우 앵커 요소href는 이 컴퓨터에서 탭으로 사용할 수 있습니다.
다음 장면을 상상해 보세요. 사용자는 검색 단추를 사용해야 하지만 이것은div입니다.

<!-- Toggles search input on/off -->

<div onclick="openSesame">Search</div>

<!-- This is not at all accessible! -->

위의 예에서는 요소에 액세스할 수 없습니다.
요소를 로컬 버튼으로 변환할 수 없는 제약이 있을 수 있습니다.이것이 바로 role="button"의 용무지이다.

<!-- role attribute takes value as a string -->

<div role="button" onclick="openSesame">Search</div>

<!-- is now a "button" in the accessibility tree -->

비록 우리는 매우 가깝지만, 이것은 여전히 실현할 수 없는 것이다.AT 사용자는 테이블을 만들 수도 없고, 요소에 주목할 수도 없습니다.tabindex가 없기 때문입니다.우리는 이 문제를 해결하기 위해 '0' 값의tabindex를 추가할 수 있습니다.

<!-- tabindex="0" means element is in sequential focus navigation of the page -->
<div role="button" tabindex="0" onclick="openSesame">Search</div>

내 말 들으니까 모자랄 수도 있어. 이상하지 않을 수도 있어.어떤 경우, AT 사용자는 현재 이 단추를 초점을 맞추고 터치할 수 있지만, 일부 사용자는 여전히 터치할 수 없습니다.
일부 화면 판독기는 Enter 키를 눌렀을 때 버튼 이벤트가 아닌 '클릭' 을 시뮬레이션합니다.이것은 위의 예에서'onclick'이벤트가 실제로 어떤 시간에 터치된다는 것을 의미한다.대부분의 사람들에게 그것은 여전히 접근할 수 없다.이것은 내가 이 문장에서 상세하게 토론할 주제가 아니지만, 이것은 항상 주의할 만한 것이다.
대부분의 경우, 만약 내가 원소가 Role="button"을 가지고 있는 것을 본다면, 세 가지 기준 중 두 가지가 부합된다.하나는 role="button" 이고, 두 번째는 tabindex 이다. 비록 실제 버튼 이벤트와 연결되지 않지만.
또 일부 상황에서 Role="button"을 포함하는 요소는 본 기계의 옵션 카드화 요소이다. 예를 들어 닻 요소<a>(유효한href가 추가된 경우).이 경우 [캐리지 리턴] 키는 유효하지만 스페이스바를 사용하여 앵커 요소를 활성화할 수는 없으며 <button> 요소를 사용하면 [스페이스 바]와 [캐리지 리턴]이 모두 앵커 요소를 트리거합니다.

액세스 가능한 방법
이 컴퓨터의 단추를 사용할 수 없을 때, 접근 가능한 단추를 만드는 것은 매우 간단하다.이것이 바로 왜

단계 1: 역할 추가

<!-- Add role="button" to the elem -->

<div role="button">Hello, I'm now a button!</div>

Role = "button"을 추가하면 AT 사용자에게 "button"을 발표할 수 있습니다.만약 이 역할이 없다면 AT 사용자는 그 역할이 어떤 유형의 요소인지 곤혹스러울 수 있습니다.역할이 추가되면 액세스 트리에 버튼으로 나열됩니다.

2단계: 탭 색인 추가

<div role="button" tabindex="0">Hello, I’m a button!</div>

tabindex는 사용자가 그것을 주목할 수 있도록 요소가 옵션으로 되어 있는지 확인합니다.보통tabindex 값을 0 이상으로 설정하는 것을 권장하지 않습니다.Here's a good post on why you shouldn't set a positive tabindex. 마이너스tabindex(예를 들어 -1)는 tab 순서에서 이 요소를 삭제하고 프로그래밍을 통해 초점을 이 요소로 설정할 수 있음을 주의하십시오.

3단계: 키 이벤트 추가

document.querySelector('div[role="button"]').addEventListener('keydown', function(e) {
  const keyD = e.key !== undefined ? e.key : e.keyCode;
  // e.key && e.keycode have mixed support - keycode is deprecated but support is greater than e.key
  // I tested within IE11, Firefox, Chrome, Edge (latest) & all had good support for e.key

    if ( (keyD === 'Enter' || keyD === 13) || (['Spacebar', ' '].indexOf(keyD) >= 0 || keyD === 32)) {
    // In IE11 and lower, e.key will equal "Spacebar" instead of ' '

    // Default behavior is prevented to prevent the page to scroll when "space" is pressed
    e.preventDefault();
    this.click();
  }
});

적당한 키다운 이벤트를 추가하려면 요소가 클릭 이벤트를 촉발할 수 있도록 해야 합니다. (만약 하나가 추가된다면.)버튼 이벤트를 실현할 수 있는 방법은 많지만, 저는 당신의 상황에 맞는 어떤 방법도 사용할 것입니다.

4단계: 테스트
너는 반드시 자주 수동으로 어떤 것들을 테스트해야 한다. 특히 어떤 목적에서 나온 것이다.키다운 이벤트를 막거나 요소에 초점을 맞추는 스타일이 올바르지 않을 수도 있습니다.테스트를 해봐야 알 수 있어!이를 위해 키보드를 사용하여 원소를 터치해 볼 수 있습니다.
나는 또 스크린 리더를 시험해 보는 것을 건의한다.NVDA를 강력히 추천합니다free open source screen reader.화면 판독기가 사전 설치되어 있을 수 있습니다!
만약 당신이 맥OS 사용자라면 Voice Over에 접근할 수 있을 것이다. 이것은 매우 쉽게 사용할 수 있는 화면 리더이다.VoiceOver comes pre-installed with most Mac systems.
만약 당신이 윈도우즈 사용자라면, "설명자"which is a screen reader made by Microsoft 를 설치해야 합니다.

노멀 고딕

앵커 요소 및 역할 = 버튼
요소에 캐릭터를 추가하는 것은 쉬우나 더 많은 캐릭터를 추가해야 기능을 충분히 발휘할 수 있다는 것을 의식하지 못했다.나는 닻원소<a>와 role="button"가 연결되는 것을 자주 본다.이것은 좋지만, 나는 이 요소의 진정한 접근성을 확보하는 데 절차가 부족하다는 것을 자주 본다.
앵커 요소는 [캐리지 리턴] 키로만 트리거되고 기본 버튼 요소는 [캐리지 리턴] 및 [스페이스 바] 키로만 트리거됩니다.
앵커 요소에 버튼 역할이 액세스할 수 있는지 확인하려면 스페이스 바에 대해 별도의 아래쪽 키를 추가합니다.이 키 이벤트는 클릭하거나 [amp]lt;Enter[amp]gt; 키를 누르는 것과 동일한 이벤트를 트리거해야 합니다.

스타일 및 역할 = 버튼role="button"를 사용할 때는 요소를 실제 버튼 스타일로 설정하는 것이 좋습니다.이것은 완전히 요구되는 것은 아니지만, 사용자가 단추를 식별할 수 있도록 보장할 것이다.

같은 클릭과 버튼 이벤트가 없습니다
keydown 이벤트는 클릭 이벤트와 같은 이벤트를 촉발해야 합니다.클릭 이벤트가 첨부되어 있고 요소role="button"의 기능이 클릭, 입력 또는 공백과 동일해야 합니다.

영탄조 속성
Role="button"에 쉽게 액세스할 수 있도록 여러 ARIA 속성을 사용할 수 있습니다.

aria-pressed속성aria-pressed의 값은 진짜, 가짜 또는 혼합일 수 있다.이 속성을 사용하면 단추의 상태를 표시하는 '전환' 단추를 만들 수 있습니다.값이 "진짜"인 경우 현재 버튼이 눌려 있음을 나타내고, 값이 "가짜"인 경우 현재 버튼이 눌려 있지 않음을 나타냅니다.블렌드 값은 버튼이 제어하는 여러 항목의 값이 동일한 값을 공유하지 않는다는 것을 의미합니다.나는 개인적으로 이전에 아리아 pressed = "mixed"를 사용하는 것을 본 적이 없고, 나 자신도 사용한 적이 없다.
Here's a bit more information about aria-pressed from the specification .

aria-expandedaria expanded를 사용하면 이 요소나 제어된 요소가 펼쳐지거나 접혔음을 사용자에게 알릴 수 있습니다.This is generally used when making accordions 이 중 내용은 처음에는 숨겨져 있으며 트리거를 활성화할 때만 펼쳐집니다.aria-expanded 지원되는 값은 참 또는 거짓입니다.
You can learn more from the specification .

한층 더 읽다
이것들이 있습니다. 이 글이 방문할 수 있는 단추를 만드는 데 도움을 줄 수 있기를 바랍니다.WAI-ARIA를 사용하는 데는 여러 가지 방법이 있는데, 그 중 일부를 곧 소개할 수 있기를 바랍니다.언제든지 질문해 주세요!
여기에 몇 개의 댓글이 있는데, 나는 본문에서 토론한 내용을 보충할 것이라고 믿는다.

ARIA: button role - Accessibility | MDN

Toggle Buttons - Inclusive Components

Button Examples | WAI-ARIA Authoring Practices 1.1

Keyboard Accessibility with the Space Bar

What does "focusable" mean? - ally.js

Using ARIA