Mục đích của thuộc tính nhóm Vai trò trong HTML là gì?

Tôi tiếp tục thấy các thuộc tính vai trò trong công việc của một số người. Tôi cũng sử dụng nó, nhưng tôi không chắc về tác dụng của nó.

Ví dụ:

<header id="header" role="banner">
    Header stuff in here
</header>

Hoặc là:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

Hoặc là:

<section id="main" role="main">
     Main content stuff in here
</section>

Là thuộc tính vai trò này cần thiết?

Là thuộc tính này tốt hơn cho ngữ nghĩa?

Nó có cải thiện SEO không?

Một danh sách các vai trò có thể được tìm thấy ở đây , nhưng tôi thấy một số người tạo nên vai trò của họ. Điều đó được cho phép hay sử dụng đúng thuộc tính vai trò?

Bất kỳ suy nghĩ về điều này?

Hầu hết các vai trò bạn thấy được xác định là một phần của ARIA 1.0 và sau đó được tích hợp vào HTML5. Một số yếu tố HTML5 mới (hộp thoại, chính, v.v.) thậm chí dựa trên vai trò ARIA ban đầu.

http://www.w3.org/TR/wai-aria/

Có hai lý do chính để sử dụng vai trò ngoài yếu tố ngữ nghĩa bản địa của bạn.

Lý do số 1. Ghi đè vai trò trong đó không có yếu tố ngôn ngữ máy chủ nào phù hợp hoặc, vì nhiều lý do, một yếu tố ít phù hợp về mặt ngữ nghĩa đã được sử dụng.

Trong ví dụ này, một liên kết đã được sử dụng, mặc dù chức năng kết quả giống nút hơn là liên kết điều hướng.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

Trình đọc màn hình sẽ nghe thấy điều này dưới dạng một nút (trái ngược với liên kết) và bạn có thể sử dụng bộ chọn thuộc tính CSS để tránh class-itis và div-itis.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

Lý do # 2. Sao lưu vai trò của phần tử bản địa, để hỗ trợ các trình duyệt đã triển khai vai trò ARIA nhưng chưa thực hiện vai trò của phần tử gốc.

Ví dụ: vai trò "chính" đã được hỗ trợ trong các trình duyệt trong nhiều năm, nhưng đây là một bổ sung tương đối gần đây cho HTML5, vì vậy nhiều trình duyệt chưa hỗ trợ ngữ nghĩa cho <main>.

<main role="main">…</main>

Điều này là dư thừa về mặt kỹ thuật, nhưng giúp một số người dùng và không gây hại gì. Trong một vài năm, kỹ thuật này có thể sẽ trở nên không cần thiết.

Bạn cũng đã viết:

Tôi thấy một số người tạo nên của riêng họ. Điều đó được cho phép hay sử dụng đúng thuộc tính vai trò?

Đó là cách sử dụng hợp lệ của thuộc tính trừ khi không bao gồm vai trò thực sự. Trình duyệt sẽ áp dụng vai trò được công nhận đầu tiên trong danh sách mã thông báo.

<span role="foo link note bar">...</a>

Trong danh sách, chỉ linkvà notelà các vai trò hợp lệ, và do đó vai trò liên kết sẽ được áp dụng vì nó xuất hiện trước. Nếu bạn sử dụng vai trò tùy chỉnh, hãy đảm bảo rằng chúng không xung đột với bất kỳ vai trò được xác định nào trong ARIA hoặc ngôn ngữ máy chủ bạn đang sử dụng (HTML, SVG, MathML, v.v.)

Theo tôi hiểu, các vai trò ban đầu được xác định bởi XHTML nhưng không được chấp nhận. Tuy nhiên, giờ đây chúng được định nghĩa bởi HTML 5, xem tại đây: https://www.w3.org/WAI/PF/aria/roles#abauge_roles_header

Mục đích của thuộc tính vai trò là xác định để phân tích phần mềm chức năng chính xác của một phần tử (và các phần tử con của nó) như là một phần của ứng dụng web. Đây chủ yếu là một thứ có thể truy cập cho trình đọc màn hình, nhưng tôi cũng có thể thấy nó hữu ích cho các trình duyệt nhúng và trình quét màn hình. Để hữu ích cho ứng dụng khách HTML bất thường, thuộc tính cần phải được đặt thành một trong các vai trò từ thông số tôi đã liên kết. Nếu bạn tự trang điểm, chức năng 'tương lai' này không thể hoạt động - một nhận xét sẽ tốt hơn.

Thực tiễn tại đây: http : //www.accessiblecARM.org/articles/2011/04/html5-aria-2011/

Là thuộc tính vai trò này cần thiết?

Trả lời: Có .

• Thuộc tính vai trò là cần thiết để hỗ trợ Ứng dụng Internet phong phú có thể truy cập ( WAI-ARIA ) để xác định vai trò trong các ngôn ngữ dựa trên XML, khi các ngôn ngữ không xác định thuộc tính vai trò riêng của chúng.
• Mặc dù đây là lý do thuộc tính vai trò được Nhóm công thức định dạng và định dạng xuất bản , thuộc tính này cũng có nhiều trường hợp sử dụng chung hơn.

Nó cung cấp cho bạn:

• Khả năng tiếp cận
• Thích ứng thiết bị
• Xử lý phía máy chủ
• Mô tả dữ liệu phức tạp, ...

Tôi nhận ra đây là một câu hỏi cũ, nhưng một sự cân nhắc khác có thể tùy thuộc vào yêu cầu chính xác của bạn là việc xác thực trên https://validator.w3.org/ tạo ra các cảnh báo như sau:

Cảnh báo: Vai trò của biểu mẫu là không cần thiết đối với dạng phần tử.

Thuộc tính vai trò chủ yếu cải thiện khả năng truy cập cho những người sử dụng trình đọc màn hình. Đối với một số trường hợp, chúng tôi sử dụng nó như khả năng truy cập, điều chỉnh thiết bị, xử lý phía máy chủ và mô tả dữ liệu phức tạp. Biết thêm nhấp chuột: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribution .