aria-label은 무엇이며 어떻게 사용해야합니까?
몇 시간 전에 aria-label 속성 에 대해 읽었습니다 .
현재 요소를 레이블링하는 문자열 값을 정의합니다.
그러나 내 생각에 이것은 title속성이해야 할 일입니다. 몇 가지 예와 설명을 얻기 위해 Mozilla 개발자 네트워크 를 자세히 살펴 보았지만 내가 찾은 유일한 것은
<button aria-label="Close" onclick="myDialog.close()">X</button>
어떤 레이블도 제공하지 않으므로 아이디어를 잘못 이해했다고 가정합니다. jsfiddle 에서 여기에서 시도했습니다 .
그래서 제 질문은 : 왜 필요 aria-label하며 어떻게 사용해야합니까?
보조 기술 (예 : 스크린 리더)이 익명 HTML 요소에 레이블을 첨부 할 수 있도록 설계된 속성입니다 .
그래서 <label>요소가 있습니다 :
<label for="fmUserName">Your name</label>
<input id="fmUserName">
는 <label>명시 적으로 자신의 이름을 입력하도록 사용자에게 알려줍니다 input어디에 상자 id="fmUserName".
aria-label거의 동일한 작업을 수행하지만 label화면에 표시 하는 것이 실용적이지 않은 경우 입니다. 가지고 MDN이 예를 :
<button aria-label="Close" onclick="myDialog.close()">X</button>`
대부분의 사람들은이 버튼이 대화 상자를 닫을 것이라고 시각적으로 유추 할 수 있습니다. 보조 기술을 사용하는 시각 장애인은 "X"를 큰 소리로들을 수 있습니다. 시각적 단서가없는 것은 아닙니다. aria-label버튼의 기능을 명시 적으로 알려줍니다.
당신이 제공하는 예에서, 당신은 완벽하게 맞습니다, 당신은 title 속성을 설정해야합니다.
aria-label보조 기술 (예 : 화면 판독기)에서 사용하는 도구 인 경우 기본적으로 브라우저에서 지원되지 않으며 영향을 미치지 않습니다. WCAG의 대상이되는 대부분의 사람들 (예 : 화면 판독기 사용자 제외), 예를 들어 지적 장애가있는 사람에게는 도움이되지 않습니다.
"X"는 버튼이 이끄는 동작에 정보를 제공하기에 충분하지 않습니다 (컴퓨터 지식이없는 사람에 대해 생각). "닫기", "삭제", "취소", "축소", 이상한 십자가, 낙서, 아무것도 의미하지 않을 수 있습니다.
는 W3C가 촉진 보인다는 사실에도 불구하고 aria-label오히려 그 title여기 속성 : http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 비슷한 예를, 당신은 기술 것을 볼 수 있습니다 지원에는 표준 브라우저가 포함되지 않습니다 : http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14
실제로 aria-label,이 정확한 상황에서 조치에 더 많은 컨텍스트를 제공하는 데 사용될 수 있습니다.
예를 들어, 시각 장애인은 비전이 좋은 우리와 같은 팝업을 인식하지 못합니다. 상황의 변화와 같습니다. "페이지로 돌아 가기"는 스크린 리더가없는 사람에게 "닫기"가 더 중요한 경우 스크린 리더를위한보다 편리한 대안입니다.
<button
aria-label="Back to the page"
title="Close" onclick="myDialog.close()">X</button>
aria-label당신이 실제로 어떻게 도움이 되는지 알고 싶다면 .. 다음 단계를 따르십시오.
아래 코드가있는 html 페이지 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<button title="Close"> X </button>
<br />
<br />
<br />
<br />
<button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>
이제 차이점을 관찰하기 위해 브라우저에서 실행되는 가상 화면 판독기 에뮬레이터가 필요합니다. 따라서 크롬 브라우저 사용자는 chromevox 확장 프로그램을 설치 하고 mozilla 사용자는 송곳니 스크린 리더 addin을 사용할 수 있습니다.
귀에서 설치 넣어 헤드폰으로 완료되면, (탭을 눌러) 두 버튼의 HTML 페이지와 메이크업에 초점을 열고 하나씩 ... 당신이들을 수 있습니다 ..에 초점을 first x button.. 단지 당신을 말할 것이다 x button..하지만 second x button..의 경우 back to the page button에만 들립니다 ..
나는 당신이 지금 그것을 잘 얻었기를 바랍니다!
전제 조건 :
Aria는 시각 장애인의 사용자 경험을 향상시키는 데 사용됩니다. 시각 장애가있는 사용자는 JAWS, NVDA와 같은 화면 판독기 소프트웨어를 사용하여 응용 프로그램을 탐색합니다. 응용 프로그램을 탐색하는 동안 화면 판독기 소프트웨어는 사용자에게 컨텐츠를 알려줍니다. Aria는 스크린 리더 사용자가 컨트롤의 역할, 상태, 레이블 및 목적을 이해하는 데 도움이되는 코드에 컨텐츠를 추가하는 데 사용할 수 있습니다.
아리아는 시각적으로 아무것도 바꾸지 않습니다. (Aria는 디자이너들도 무서워합니다).
아리아 라벨
aria-label 속성은 레이블을 화면 판독기 사용자에게 전달하는 데 사용됩니다. 일반적으로 검색 입력 필드에는 시각적 레이블이 없습니다 (디자이너에게 감사). aria-label을 사용하여 화면 판독기 사용자에게 제어 레이블을 전달할 수 있습니다.
사용하는 방법:
<input type="edit" aria-label="search" placeholder="search">
응용 프로그램에는 시각적 인 변화가 없습니다. 그러나 스크린 리더는 제어의 목적을 이해할 수 있습니다
aria-labelledby
aria-label 및 aria-labelledby는 레이블을 전달하는 데 사용됩니다. 그러나 aria-labelledby는 페이지에 이미 존재하는 모든 레이블을 참조하는 데 사용할 수 있지만 aria-label은 시각적으로 표시되지 않은 레이블을 전달하는 데 사용됩니다
접근법 1 :
<span id="sd">Search</span>
<input type="text" aria-labelledby="sd">
접근법 2 :
aria-labelledby를 사용하여 화면 판독기 사용자를 위해 두 개의 레이블을 결합 할 수도 있습니다
<span id="de">Billing Address</span>
<span id="sd">First Name</span>
<input type="text" aria-labelledby="de sd">
참고 URL : https://stackoverflow.com/questions/22039910/what-is-aria-label-and-how-should-i-use-it
'Programing' 카테고리의 다른 글
| 내용에 맞게 iframe의 너비와 높이를 조정합니다 (0) | 2020.03.24 |
|---|---|
| 신뢰 저장소 및 키 저장소 정의 (0) | 2020.03.24 |
| 별도의 자바 스크립트 파일이없는 웹 작업자? (0) | 2020.03.24 |
| Thrift와 프로토콜 버퍼의 가장 큰 차이점은 무엇입니까? (0) | 2020.03.24 |
| 악용 가능한 PHP 함수 (0) | 2020.03.24 |