Hướng dẫn aria-label css
Điểm bài viết [Tổng cộng:
3 Trung bình: 3.7] Đây là một thuộc tính được thêm vào trong HTML5 nhằm giúp giải thích nội dung hoặc hành động trên các trình đọc (screen readers) hỗ trợ người khuyết tật. Lấy ví dụ, bạn có một nút bấm đóng popup như sau: Nếu trong trình đọc, nó sẽ chỉ phát ra âm thanh “x” mà không giúp người dùng nhận biết hành vi nào sẽ được tiến hành. Khi sử dụng Điều này là cần thiết nhằm giúp tăng khả năng tiếp cận của người
khuyết tật với website của bạn. Sử dụng Tình huống này đã được mình mô tả ở trên, tức là phần mô tả nội dung cho các nút bấm theo dạng action (không liên kết). Đối với các liên kết, việc gắn thêm mô tả giúp người dùng chỉ hướng tốt hơn, đặc biệt là với nhiều loại liên kết có cùng kiểu nhưng khác nội dung như “View Room”, “View Detail” đối với nhiều loại “Room” khác nhau chẳng hạn. Việc cụ thể hóa liên kết bằng cách gắn thêm thông tin là điều cần thiết.
Tình huống 3: Form nhập dữ liệu với mô tảTình huống này chỉ dấu
Tình huống 4: Sử dụng kết hợp cùng thuộc tính roleVới các thuộc tính
Thuộc tính arial-labelbyBên cạnh thuộc tính
Thực chất, nó giống như một chỉ định vào 1 element có chứa id để screen reader có thể đọc. Cũng bởi nguyên do trên, nó yêu cầu:
Một ví dụ khác về
Tài liệu tham khảo
Các bạn quan tâm có thể tham khảo khóa học Web Accessibility Compliance (TreeHouse) để nắm vững hơn nhé. 3.6 9 đánh giá Đánh giá bài viết Post Views: 3.568 Điều hướng bài viếtThe Sometimes the default
accessible name of an element is missing, or does not accurately describe its contents, and there is no content visible in the DOM that can be associated with the object to give it meaning. A common example is a button containing an SVG or icon font (which you shouldn't be using) without any text. In cases
where an interactive element has no accessible name, or an accessible name that isn't accurate, and there is no content visible in the DOM that can be referenced via the Note:
Most content has an accessible name generated from its immediate wrapping element's text content. Accessible names can also be created by certain attributes or associated elements. By default, a button's accessible name is the content between the opening and closing
If none of these options are
available, or if the default accessible name is not appropriate, use the
The purpose of The Don't "overuse" Not all
elements can be given an accessible name. Neither If you give your Note: The ValuesA string of text that will be the accessible name for the object. ARIAMixin API
The ElementInternals.ariaLabel The Associated rolesUsed in almost all roles except roles that can not be provided an accessible name by the author. The Note: The Specifications
See Also |