HTML5 ARIA là gì?


249

HTML5 ARIA là gì? Tôi không hiểu làm thế nào để thực hiện nó.


4
Lưu ý rằng WAI-ARIA có trước HTML5 và không yêu cầu nó, mặc dù các thuộc tính ARIA sẽ chỉ được coi là hợp lệ bởi trình xác thực HTML5 hoặc khi so sánh với DTD mở rộng ARIA. Tuy nhiên, dự thảo HTML5 hiện không cho phép một số cấu trúc WAI-ARIA.
Alohci

Tôi đã thấy điều này trong html của Facebook.
Sắp xếp

Câu trả lời:


213

WAI-ARIA là một đặc tả xác định hỗ trợ cho các ứng dụng web có thể truy cập. Nó xác định một loạt các tiện ích mở rộng đánh dấu (chủ yếu là các thuộc tính trên các yếu tố HTML5), có thể được nhà phát triển ứng dụng web sử dụng để cung cấp thông tin bổ sung về ngữ nghĩa của các yếu tố khác nhau cho các công nghệ hỗ trợ như trình đọc màn hình. Tất nhiên, để ARIA hoạt động, tác nhân người dùng HTTP diễn giải đánh dấu cần hỗ trợ ARIA, nhưng thông số kỹ thuật được tạo theo cách đó, để cho phép các tác nhân người dùng cấp thấp bỏ qua đánh dấu cụ thể của ARIA mà không ảnh hưởng đến chức năng của ứng dụng web.

Đây là một ví dụ từ thông số ARIA:

<ul role="menubar">

  <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem" aria-haspopup="false">New</li>
      <li role="menuitem" aria-haspopup="false">Open…</li>
      ...
    </ul>
  </li>
  ...
</ul>

Lưu ý rolethuộc tính trên <ul>phần tử bên ngoài . Thuộc tính này không ảnh hưởng đến bất kỳ cách nào đánh dấu được hiển thị trên màn hình bởi trình duyệt; tuy nhiên, các trình duyệt hỗ trợ ARIA sẽ thêm thông tin trợ năng dành riêng cho hệ điều hành vào thành phần UI được hiển thị, để trình đọc màn hình có thể hiểu nó dưới dạng menu và đọc to với ngữ cảnh đủ để người dùng cuối hiểu (ví dụ: rõ ràng "menu" gợi ý âm thanh) và có thể tương tác với nó (ví dụ: điều hướng bằng giọng nói).


11
Sự khác biệt giữa thuộc tính dữ liệu và aria là gì?
JackMahoney

55
ariađặc biệt cho khả năng truy cập và không nên được sử dụng để lưu trữ dữ liệu ngẫu nhiên. datalà cho dữ liệu ngẫu nhiên, ứng dụng cần liên kết với nút.
Franci Penov

2
Xin lưu ý: role="menu""menuitem"chính xác cho APPS (= phần mềm có các menu như File > Openhoặc Edit > Copy to clipboard. Đối với trang web cổ điển, có lẽ tốt hơn là giữ nguyên thông thường <ul>(danh sách vai trò theo mặc định) vì bạn chỉ cung cấp liên kết đến các trang web khác và không có chức năng như "lưu" hoặc "sao chép / dán". Nếu bạn đang sử dụng, role="menu"bạn cũng phải thêm hỗ trợ để điều hướng menu bằng các phím mũi tên trên bàn phím như các menu phần mềm / ứng dụng thông thường
Rất tiếc

62

ARIA là viết tắt của Ứng dụng Internet phong phú có thể truy cập.

WAI-ARIA là một công nghệ cực kỳ mạnh mẽ cho phép các nhà phát triển dễ dàng mô tả mục đích, trạng thái và chức năng khác của giao diện người dùng trực quan phong phú - theo cách mà Công nghệ hỗ trợ có thể hiểu được. WAI-ARIA cuối cùng đã được tích hợp vào dự thảo hoạt động hiện tại của đặc tả HTML 5.

Và nếu bạn đang tự hỏi WAI-ARIA là gì, thì nó cũng tương tự.

Xin lưu ý các thuật ngữ WAI-ARIA và ARIA đề cập đến cùng một điều. Tuy nhiên, đúng hơn là sử dụng WAI-ARIA để thừa nhận nguồn gốc của nó trong WAI.

WAI = Sáng kiến ​​truy cập web

Từ vẻ ngoài của nó, ARIA được sử dụng cho các công nghệ hỗ trợ và chủ yếu là đọc màn hình.

Hầu hết các nghi ngờ của bạn sẽ được xóa nếu bạn đọc bài viết này

http://www.w3.org/TR/aria-in-html/


23

Nó là gì?

WAI-ARIA là viết tắt của Sáng kiến ​​Khả năng truy cập Web - Ứng dụng Internet phong phú có thể truy cập . Nó là một tập hợp các thuộc tính để giúp nâng cao ngữ nghĩa của một trang web hoặc ứng dụng web để giúp các công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình cho người mù, hiểu được những điều nhất định không có nguồn gốc từ HTML. Thông tin được hiển thị có thể bao gồm từ một thứ đơn giản như nói với trình đọc màn hình kích hoạt liên kết hoặc nút vừa hiển thị hoặc ẩn nhiều mục hơn, đến các vật dụng phức tạp như toàn bộ hệ thống menu hoặc chế độ xem dạng cây phân cấp.

Điều này đạt được bằng cách áp dụng các vai trò và thuộc tính trạng thái cho đánh dấu HTML 4.01 trở lên không liên quan đến bố cục hoặc chức năng trình duyệt, nhưng cung cấp thêm thông tin cho các công nghệ hỗ trợ.

Một góc đá của WAI-ARIA là thuộc tính vai trò. Nó yêu cầu trình duyệt nói với công nghệ hỗ trợ rằng phần tử HTML được sử dụng không thực sự là tên mà phần tử gợi ý, mà là một thứ khác. Mặc dù ban đầu nó chỉ là một phần tử div, nhưng phần tử div này có thể là nơi chứa danh sách các mục tự động hoàn thành, trong trường hợp đó, vai trò của hộp thư listbox sẽ thích hợp để sử dụng. Tương tự, một div khác là con của div container đó và chứa một mục tùy chọn duy nhất, sau đó sẽ nhận được một vai trò của tùy chọn Riên. Hai div, nhưng thông qua các vai trò, ý nghĩa hoàn toàn khác nhau. Các vai trò được mô hình hóa sau khi các đối tác ứng dụng máy tính để bàn thường được sử dụng.

Một ngoại lệ cho điều này là các vai trò mang tính bước ngoặt tài liệu, không thay đổi ý nghĩa thực sự của yếu tố được đề cập, nhưng cung cấp thông tin về địa điểm cụ thể này trong tài liệu.

Viên đá góc thứ hai là các quốc gia và tài sản của WAI-ARIA. Chúng xác định trạng thái của một số phần tử gốc hoặc WAI-ARIA nhất định, chẳng hạn như nếu một cái gì đó bị thu gọn hoặc mở rộng, một phần tử biểu mẫu là bắt buộc, một cái gì đó có một menu bật lên được gắn vào nó hoặc tương tự. Chúng thường động và thay đổi giá trị của chúng trong suốt vòng đời của một ứng dụng web và thường được thao tác thông qua JavaScript.

Nó là gì không?

WAI-ARIA không nhằm mục đích ảnh hưởng đến hành vi của trình duyệt. Ví dụ, không giống như một phần tử nút thực, một div mà bạn rót vai trò của nút Nút trên đó không cung cấp cho bạn khả năng tập trung bàn phím, trình xử lý nhấp chuột tự động khi nhấn phím cách hoặc phím Enter và các thuộc tính khác có thể bắt nguồn từ cái nút. Bản thân trình duyệt không biết rằng div có vai trò của nút Nút là một nút, chỉ có phần API khả năng truy cập của nó.

Kết quả là, điều này có nghĩa là bạn hoàn toàn phải thực hiện điều hướng bàn phím, khả năng tập trung và các mẫu hành vi khác được biết đến từ các ứng dụng máy tính để bàn. Bạn có thể tìm thấy một số kỹ thuật ARIA nâng cao ở đây .

Khi nào tôi không nên sử dụng nó?

Vâng, đó là chính xác, phần này đến đầu tiên! Bởi vì quy tắc đầu tiên của việc sử dụng WAI-ARIA là: Đừng sử dụng nó trừ khi bạn thực sự phải làm! Bạn càng có ít WAI-ARIA và bạn càng có thể tin tưởng vào việc sử dụng các widget HTML gốc thì càng tốt! Có một số quy tắc để làm theo, bạn có thể kiểm tra chúng ở đây .


13

ARIA là gì?

ARIA nổi lên như một cách để giải quyết vấn đề tiếp cận khi sử dụng ngôn ngữ đánh dấu dành cho tài liệu, HTML, để xây dựng giao diện người dùng (UI). HTML bao gồm rất nhiều tính năng tuyệt vời để xử lý các tài liệu (P, h3, UL, TABLE) nhưng chỉ các thành phần UI cơ bản như A, INPUT và BUTTON. Windows và các hệ điều hành khác hỗ trợ API cho phép (Công nghệ hỗ trợ) AT truy cập chức năng của các điều khiển UI. Internet Explorer và các trình duyệt khác ánh xạ các phần tử HTML gốc vào API khả năng truy cập, nhưng các điều khiển html không phong phú như các điều khiển phổ biến trên các hệ điều hành máy tính để bàn và không đủ cho các ứng dụng web hiện đại Các điều khiển tùy chỉnh có thể mở rộng các phần tử html để cung cấp sự phong phú UI cần thiết cho các ứng dụng web hiện đại. Trước ARIA, trình duyệt không có cách nào để thể hiện sự phong phú thêm này cho API khả năng truy cập hoặc AT. Ví dụ kinh điển về vấn đề này là thêm trình xử lý nhấp chuột vào hình ảnh. Nó tạo ra thứ dường như là nút có thể nhấp cho người dùng chuột, nhưng vẫn chỉ là hình ảnh cho bàn phím hoặc người dùng AT.

Giải pháp là tạo ra một tập hợp các thuộc tính cho phép các nhà phát triển mở rộng HTML bằng ngữ nghĩa UI. Thuật ngữ ARIA cho một nhóm các thành phần HTML có chức năng tùy chỉnh và sử dụng các thuộc tính ARIA để ánh xạ các chức năng này tới các API khả năng truy cập là một Widget Widget. ARIA cũng cung cấp một phương tiện để các tác giả ghi lại vai trò của chính nội dung, do đó, cho phép AT xây dựng các cơ chế điều hướng thay thế cho nội dung dễ sử dụng hơn nhiều so với việc đọc toàn văn hoặc chỉ lặp qua danh sách các liên kết.

Điều quan trọng cần nhớ là trong các trường hợp đơn giản, nên sử dụng các điều khiển HTML gốc và định kiểu chúng hơn là sử dụng ARIA. Đó là không phát minh lại bánh xe, hoặc hộp kiểm, nếu bạn không phải.

May mắn thay, đánh dấu ARIA có thể được thêm vào các trang web hiện tại mà không thay đổi hành vi cho người dùng chính. Điều này giúp giảm đáng kể chi phí sửa đổi và thử nghiệm trang web hoặc ứng dụng.


7

Tôi đã chạy một số câu hỏi khác liên quan đến ARIA. Nhưng nội dung của nó có vẻ hứa hẹn hơn cho câu hỏi này. muốn chia sẻ chúng

ARIA là gì?

Nếu bạn nỗ lực để làm cho trang web của bạn có thể truy cập được đối với người dùng có nhiều thói quen duyệt web và khuyết tật thể chất khác nhau, bạn có thể sẽ nhận ra vai trò và thuộc tính aria- *. WAI-ARIA (Ứng dụng Internet phong phú có thể truy cập) là phương pháp cung cấp các cách để xác định nội dung và ứng dụng web động của bạn để người khuyết tật có thể xác định và tương tác thành công với nó. Điều này được thực hiện thông qua các vai trò xác định cấu trúc của tài liệu hoặc ứng dụng hoặc thông qua các thuộc tính aria- * xác định một widget - vai trò, mối quan hệ, trạng thái hoặc thuộc tính.

Việc sử dụng ARIA được khuyến nghị trong các thông số kỹ thuật để làm cho các ứng dụng HTML5 dễ truy cập hơn. Khi sử dụng các yếu tố HTML5 ngữ nghĩa, bạn nên đặt vai trò tương ứng của chúng.

Và xem video này bạn ống cho ARIA trực tiếp.


Hiệu chỉnh nhỏ: Khi sử dụng các phần tử HTML5 ngữ nghĩa, bạn chỉ nên đặt vai trò tương ứng của chúng nếu ngữ nghĩa của phần tử bạn đã chọn không cung cấp đủ thông tin. Nói cách khác, nếu bạn có thành phần điều hướng, không cần thêm vai trò = "điều hướng", vì vai trò đã rõ ràng từ lựa chọn thành phần. Nhưng nếu bạn có một yếu tố đầu vào để tìm kiếm trang web, bạn nên thêm vai trò = "tìm kiếm" vì các yếu tố đầu vào được sử dụng cho nhiều thứ khác ngoài tìm kiếm và điều này đánh dấu đầu vào cụ thể đó là có vai trò tìm kiếm.
brennanyoung
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.