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

Question

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ề hiệu quả của nó.

Ví dụ:

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

Hoặc:

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

Hoặc:

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

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

Thuộc tính này có tốt hơn cho ngữ nghĩa không?

Ứng dụng có cải thiện SEO không?

Danh sách vai trò có thể được tìm thấy here, nhưng tôi thấy một số người tự tạo nên. Điều đó có được phép hoặc sử dụng đúng thuộc tính vai trò không?

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

Answer 1

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

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

Có hai lý do chính để sử dụng vai trò, thêm vào yếu tố ngữ nghĩa mẹ đẻ của bạn.

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

Trong ví dụ này, liên kết đã được sử dụng, mặc dù chức năng kết quả có nhiều nút hơn so với 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 điều này dưới dạng nút (trái ngược với liên kết) và bạn có thể sử dụng công cụ chọn thuộc tính CSS để tránh phân lớp và divis itis.

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

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

Ví dụ: vai trò "chính" đã được hỗ trợ trong trình duyệt trong nhiều năm, nhưng đó 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 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ở thành 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 riêng của họ. Điều đó có được phép hoặc sử dụng đúng thuộc tính vai trò không?

Đó là việc sử dụng hợp lệ thuộc tính trừ khi không có 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> 

Out của danh sách, chỉ link và note là vai trò hợp lệ, và do đó vai trò liên kết sẽ được áp dụng bởi vì nó xảy ra trước. Nếu bạn sử dụng vai trò tùy chỉnh, đảm bảo rằng chúng không mâu thuẫn với bất kỳ vai trò quy định tại ARIA hoặc ngôn ngữ máy chủ mà bạn đang sử dụng (HTML, SVG, MathML, vv)

Answer 2

Như 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 xác định bằng HTML 5, xem tại đây: http://www.w3.org/TR/wai-aria/complete#roles

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

thực tiễn ở đây: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

Answer 3

hữu ích cho Bootstrap nút từ neo

<a href="#" class="btn btn-info" role="button">Link Button</a> 

Từ đây: Bootstrap Buttons

Answer 4

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

Trả lời: Có.

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

Nó cung cấp cho bạn:

• Tiếp cận
• thích ứng Device
• Server-side chế biến
• Complex mô tả dữ liệu, ... vv.