Nhãn aria là gì và tôi nên sử dụng nó như thế nào?

321

Vài giờ trước tôi đã đọc về thuộc tính nhãn aria , trong đó:

Xác định một giá trị chuỗi gắn nhãn phần tử hiện tại.

Nhưng theo tôi đây là những gì titlethuộc tính được cho là phải làm. Tôi đã tìm hiểu thêm trong Mạng lưới Nhà phát triển Mozilla để lấy một số ví dụ và giải thích, nhưng điều duy nhất tôi tìm thấy là

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

Điều này không cung cấp cho tôi bất kỳ nhãn nào (vì vậy tôi cho rằng tôi đã hiểu nhầm ý tưởng). Tôi đã thử nó ở đây trong jsfiddle .

Vì vậy, câu hỏi của tôi là: tại sao tôi cần aria-labelvà tôi nên sử dụng nó như thế nào?

html assistive-technology

— Salvador Dali
nguồn

3

Nhìn vào tài nguyên mà bạn đã liên kết, dường như aria-labelcó thể được sử dụng nếu bạn không muốn hiển thị chú giải công cụ được cung cấp bởi thuộc tính tiêu đề: Trong trường hợp nhãn hiển thị hoặc chú giải công cụ hiển thị là không mong muốn, tác giả CÓ THỂ đặt tên có thể truy cập của yếu tố sử dụng nhãn aria

— Fabrizio Calderan

13

fyi ARIA = Các ứng dụng Internet phong phú có thể truy cập

— Eric D'Souza

Có ai biết có thích hợp sử dụng nhãn aria cho văn bản <h1> mô tả hơn không khi văn bản hiển thị thực tế bên trong phần tử <h1> quá ngắn và không muốn hiển thị toàn bộ văn bản? Trong các ví dụ trong chủ đề này, một nhãn có thể được sử dụng. Nhưng các nhãn không áp dụng cho các tiêu đề, đó là lý do tại sao tôi hỏi

— HelloWorld

Điều tương tự thích hợp duy nhất mà bạn đang yêu cầu là thuộc tính "longdesc" (chỉ dành cho hình ảnh) cần thêm thông tin - không thể tưởng tượng sẽ có một văn bản vì nó luôn luôn phải được mô tả. - @HelloWorld

— Jamie Paterson

427

Đây là một thuộc tính được thiết kế để giúp công nghệ hỗ trợ (ví dụ: trình đọc màn hình) đính kèm nhãn vào thành phần HTML ẩn danh khác.

Vì vậy, có <label>yếu tố:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

Các <label>nói một cách rõ ràng người dùng nhập tên của họ vào inputhộp nơi id="fmUserName".

aria-labelthực hiện nhiều điều tương tự, nhưng đối với những trường hợp không thực tế hoặc mong muốn có labelmàn hình. Lấy ví dụ MDN :

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

Hầu hết mọi người sẽ có thể suy luận trực quan rằng nút này sẽ đóng hộp thoại. Một người mù sử dụng công nghệ hỗ trợ có thể chỉ nghe thấy tiếng "X" đọc to, điều đó không có nghĩa gì nhiều nếu không có manh mối trực quan. aria-labelnói rõ cho họ biết nút này sẽ làm gì.

— Olly Hodgson
nguồn

4

Cảm ơn đã giải thích, nhưng làm thế nào anh ta sẽ nghe gần? Tôi có thể làm gì trong trình duyệt của mình (chrome) để nghe điều này? Và làm thế nào một người mù có thể chọn nút này nếu anh ta không biết nó ở đâu?

— Salvador Dali

1

Tôi đoán một tiện ích mở rộng như ChromeVox sẽ là một nơi tốt để bắt đầu? Tôi chưa bao giờ sử dụng nó mặc dù. Chúng hoạt động bằng cách đọc to màn hình cho người dùng, lấy tín hiệu từ HTML (ví dụ: h1cần nhấn mạnh hơn a p, arõ ràng là một dạng liên kết ' , chỉ ra ở đâu đó để nhập thông tin, aria-*các thuộc tính cung cấp thêm manh mối cho những gì các yếu tố làm, v.v.) .

— Olly Hodgson

2

Trong trường hợp cụ thể này, tôi sẽ thêm nó vào một tiêu đề attribute. Không có hại trong việc hiển thị một chú giải công cụ để 'nhìn thấy' người dùng khi họ di chuột lên X.

— GolezTrol

3

Ngoài ChromeVox, còn có NVDA . Cả hai đều khá dễ cài đặt và bắt đầu và khá khó để thành thạo.

— ivarni

1

@SalvadorDali - chỉ để biết thông tin. trong người mù di động có thể kích hoạt công cụ trợ năng như trên điện thoại di động Android, đó là TalkBack và đối với điện thoại di động iOS, đó là VoiceOver. bằng cách sử dụng này, trang được đọc từng dòng.

— Rahul J. Rane

71

Trong ví dụ bạn đưa ra, bạn hoàn toàn đúng, bạn phải đặt thuộc tính tiêu đề.

Nếu aria-labellà một công cụ được sử dụng bởi các công nghệ hỗ trợ (như trình đọc màn hình), thì nó không được hỗ trợ trên các trình duyệt và không có tác dụng đối với chúng. Nó sẽ không giúp được gì cho hầu hết những người bị WCAG (trừ người dùng trình đọc màn hình), ví dụ như một người bị thiểu năng trí tuệ.

"X" không đủ để cung cấp thông tin cho hành động được dẫn bằng nút (nghĩ về người không có kiến thức về máy tính). Nó có thể có nghĩa là "đóng", "xóa", "hủy", "giảm", một chữ thập lạ, vẽ nguệch ngoạc, không có gì.

Mặc dù thực tế là W3C dường như thúc đẩy aria-labelthay vì titlethuộc tính ở đây: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 trong một ví dụ tương tự, bạn có thể thấy rằng công nghệ hỗ trợ không bao gồm các trình duyệt tiêu chuẩn: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

Trong thực tế aria-label, trong tình huống chính xác này có thể được sử dụng để cung cấp thêm ngữ cảnh cho một hành động:

Chẳng hạn, những người mù không nhận thấy các quảng cáo như những người trong chúng ta có tầm nhìn tốt, nó giống như một sự thay đổi của bối cảnh. "Quay lại trang" sẽ là một thay thế thuận tiện hơn cho trình đọc màn hình, khi "Đóng" có ý nghĩa hơn đối với người không có trình đọc màn hình.

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>

— Ađam
nguồn

35

Nếu bạn muốn biết làm thế nào để aria-labelgiúp bạn thực tế .. thì hãy làm theo các bước ... bạn sẽ tự mình lấy nó ..

Tạo một trang html có mã bên dưới

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

Bây giờ, bạn cần một trình giả lập trình đọc màn hình ảo sẽ chạy trên trình duyệt để quan sát sự khác biệt. Vì vậy, người dùng trình duyệt chrome có thể cài đặt tiện ích mở rộng chromevox và người dùng mozilla có thể đi với addin trình đọc màn hình fangs

Sau khi cài đặt xong, hãy đặt tai nghe vào tai, mở trang html và tập trung vào cả hai nút (bằng cách nhấn tab) từng cái một .. và bạn có thể nghe thấy .. tập trung vào first x button.. sẽ chỉ cho bạn biết x button.. nhưng trong trường hợp second x button.. bạn sẽ back to the page buttonchỉ nghe thấy ..

tôi hy vọng bạn đã nhận được nó ngay bây giờ !!

— Moumit
nguồn

1

Một điểm quan trọng là titlethuộc tính bị bỏ qua, ngay cả trên nút đầu tiên. Thêm thông tin: Silktide.com/ từ

— Sphinxxx

2

Có còn như vậy không? Vẫn tốt hơn để cung cấp một trong hai title và aria-label ?

— Kamafeather

2

Đây chính xác là những gì tôi muốn. Tôi chỉ muốn xem và nghe cách nó hoạt động trong thế giới thực và các chromevoxtác phẩm giống như một lá bùa và sẽ đọc thuộc các lĩnh vực aria-labellingby. Cảm ơn.

— Raj Rajeshwar Singh Rathore

7

Điều kiện tiên quyết:

Aria được sử dụng để cải thiện trải nghiệm người dùng của người dùng khiếm thị. Người dùng khiếm thị điều hướng mặc dù ứng dụng sử dụng phần mềm đọc màn hình như JAWS, NVDA, .. Trong khi điều hướng qua ứng dụng, phần mềm đọc màn hình sẽ thông báo nội dung cho người dùng. Có thể sử dụng Aria để thêm nội dung trong mã giúp người dùng trình đọc màn hình hiểu vai trò, trạng thái, nhãn và mục đích của điều khiển

Aria không thay đổi bất cứ điều gì trực quan. (Aria cũng sợ các nhà thiết kế).

nhãn aria

thuộc tính aria-nhãn được sử dụng để giao tiếp nhãn cho người dùng trình đọc màn hình. Thông thường trường tìm kiếm không có nhãn trực quan (nhờ các nhà thiết kế). aria-nhãn có thể được sử dụng để truyền đạt nhãn kiểm soát tới người dùng trình đọc màn hình

Cách sử dụng:

<input type="edit" aria-label="search" placeholder="search">

Không có thay đổi trực quan trong ứng dụng. Nhưng độc giả màn hình có thể hiểu mục đích của điều khiển

aria-labellingby

Cả aria-nhãn và aria-labellingby đều được sử dụng để truyền đạt nhãn. Nhưng aria-labellingby có thể được sử dụng để tham chiếu bất kỳ nhãn nào đã có trong trang trong khi nhãn aria được sử dụng để truyền đạt nhãn mà tôi không hiển thị trực quan

Cách tiếp cận 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

Cách tiếp cận 2:

aria-labellingby cũng có thể được sử dụng để kết hợp hai nhãn cho người dùng trình đọc màn hình

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">

— ndioewbnc
nguồn

3

Các titlethuộc tính sẽ hiển thị một tooltip khi chuột được lơ lửng nguyên tố này. Mặc dù đây là một bổ sung tuyệt vời, nhưng nó không giúp những người không thể sử dụng chuột (do khuyết tật di động) hoặc những người không thể nhìn thấy chú giải công cụ này (ví dụ: người khuyết tật thị giác hoặc người sử dụng trình đọc màn hình).

Như vậy, cách tiếp cận chánh niệm ở đây sẽ là phục vụ tất cả người dùng. Tôi sẽ thêm cả hai titlevà aria-labelthuộc tính (phục vụ các loại người dùng khác nhau và các loại sử dụng web khác nhau).

Đây là một bài viết tốt giải thích aria-labelsâu

— lucalanca
nguồn