aria-label은 무엇이며 어떻게 사용해야합니까?

321

몇 시간 전에 aria-label 속성 에 대해 읽었습니다 .

현재 요소를 레이블링하는 문자열 값을 정의합니다.

그러나 내 생각에 이것은 title속성이해야 할 일입니다. 몇 가지 예와 설명을 얻기 위해 Mozilla 개발자 네트워크 를 자세히 살펴 봤지만 내가 찾은 유일한 것은

<button aria-label="Close" onclick="myDialog.close()">X</button>

어떤 레이블도 제공하지 않으므로 아이디어를 잘못 이해했다고 가정합니다. jsfiddle 에서 여기에서 시도했습니다 .

그래서 제 질문은 : 왜 필요 aria-label하며 어떻게 사용해야합니까?

html assistive-technology

— 살바도르 달리
소스

3

링크 한 리소스를 보면 aria-labeltitle 속성에서 제공하는 툴팁을 표시하지 않으려는 경우 사용될 수 있습니다 . 보이는 라벨 또는 툴팁이 바람직하지 않은 경우 작성자는 액세스 가능한 이름을 요소는 아리아 라벨을 사용하여

— 파브리 지오 Calderan

13

fyi ARIA = 액세스 가능한 풍부한 인터넷 응용 프로그램

— Eric D' Souza

<h1> 요소 내부의 실제 보이는 텍스트가 너무 짧고 전체 텍스트를 표시하고 싶지 않은 경우 더 설명적인 <h1> 텍스트에 aria-label을 사용하는 것이 적절한 지 아는 사람이 있습니까? 이 스레드의 예제에서 레이블을 사용할 수 있습니다. 그러나 제목은 제목에 적용되지

— HelloWorld

당신이 요구하는 유일한 적절한 비슷한 것은 더 많은 정보를 필요로하는 "longdesc"속성 (이미지에만 해당)입니다. 어쨌든 항상 설명 적이어야하기 때문에 텍스트를위한 것이있을 것입니다. -@HelloWorld

— Jamie Paterson

427

보조 기술 (예 : 스크린 리더)이 익명 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버튼의 기능을 명시 적으로 알려줍니다.

— 올리 호지 슨
소스

4

설명 해주셔서 감사합니다.하지만 그는 어떻게들을 수 있습니까? 이것을 들으려면 브라우저 (크롬)에서 무엇을해야합니까? 시각 장애인이이 버튼이 어디에 있는지 모른다면 어떻게이 버튼을 선택할 수 있습니까?

— 살바도르 달리

1

ChromeVox 와 같은 확장 프로그램 이 시작하기에 좋은 장소 라고 생각 합니까? 나는 그것을 사용한 적이 없다. 그들은 (예를 들어이되는 HTML에서 단서를 복용, 사용자에게 큰 소리로 화면을 읽어 작업을 h1더 이상 강조되어야한다 p, a링크 명확하게 , , form` 정보를 입력 할 곳을 나타냅니다 aria-*, 속성이 요소가하는 일에 더 단서를 제공 등) .

— Olly Hodgson

2

이 특별한 경우에는 title에 추가하겠습니다 attribute. 사용자가 X를 가리키면 '보는'툴팁에 아무런 해가 없습니다.

— GolezTrol

3

ChromeVox 외에도 NVDA가 있습니다. 둘 다 설치 및 시작이 쉽고 마스터하기가 매우 어렵습니다.

— ivarni

1

@SalvadorDali-정보 용입니다. 모바일 맹인에서 안드로이드 모바일과 같은 접근성 도구를 활성화 할 수 있습니다. 그것은 TalkBack이며 iOS 모바일의 경우 VoiceOver입니다. 이를 사용하면 페이지를 한 줄씩 읽습니다.

— Rahul J. Rane

71

당신이 제공하는 예에서, 당신은 완벽하게 맞습니다, 당신은 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>

— 아담
소스

35

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 있습니다 ..

나는 당신이 지금 그것을 잘 얻었기를 바랍니다!

— 모밋
소스

1

중요한 점은 title첫 번째 버튼에서도 속성이 무시 된다는 것 입니다. 더 많은 정보 : silktide.com/…

— Sphinxxx

2

여전히 그렇습니까? 여전히 더 나은 제공 하나에 title 와 aria-label ?

— Kamafeather

2

이것이 바로 내가 원하는 것입니다. 나는 그것이 실제 세계에서 어떻게 작동하는지 chromevox, 매력처럼 작품을보고 듣고 싶었고 아리아 레이블이 붙은 분야를 암송 할 것입니다. 감사.

— Raj Rajeshwar Singh Rathore

7

전제 조건 :

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">

— ndioewbnc
소스

3

그만큼 title마우스가 요소를 유혹 할 때 속성은 툴팁이 표시됩니다. 이것은 큰 도움이되지만 이동성 장애로 인해 마우스를 사용할 수없는 사람이나이 툴팁을 볼 수없는 사람 (예 : 시각 장애가있는 사람 또는 스크린 리더를 사용하는 사람)에게는 도움이되지 않습니다.

따라서 여기서 신중한 접근 방식은 모든 사용자에게 서비스를 제공하는 것입니다. 둘 다 추가 title하고aria-label다른 유형의 사용자와 다른 유형의 웹 서비스를 제공하는 속성을 .

여기 에 깊이 있는 설명 aria-label이 있습니다.

— 루카 랑카
소스