Here, we've added the role and aria-checked attributes to explicitly identify the element as a checkbox and to specify that it is checked by default. Using ARIA attributes, however, we can give the element the missing information so the screen reader can properly interpret it. While this works fine for sighted users, a screen reader will give no indication that the element is meant to be a checkbox, so low-vision users may miss the element entirely. The CSS "checkbox" class gives the element the required visual characteristics. In the following snippet, we use a list item as a kind of custom checkbox.
It works by allowing you to specify attributes that modify the way an element is translated into the accessibility tree. The Web Accessibility Initiative's Accessible Rich Internet Applications specification (WAI-ARIA, or just ARIA) is good for bridging areas with accessibility issues that can't be managed with native HTML.
#Aria checkout time how to#
In this lesson, then, we'll explore how to express semantics that HTML can't express on its own. Nor is there an HTML element that provides a semantic characteristic such as "the user needs to know about this as soon as possible". For example, currently there's no standardized HTML element for a very common UI construct, the pop-up menu. So far, we've encouraged using native HTML elements because they give you focus, keyboard support, and built-in semantics, but there are times when a simple layout and native HTML won't do the job.
0 kommentar(er)
