![]() This is a useful technique when there is some extra explanatory text that a user might need, whether it applies only to users of assistive technology or all users.Ī common example is a password input field that is accompanied by some descriptive text explaining the minimum password requirements. Like aria-labelledby, aria-describedby may reference elements that are otherwise not visible, whether hidden from the DOM, or hidden from assistive technology users. ![]() aria-describedby #Īria-describedby provides an accessible description in the same way that aria-labelledby provides a label. This makes the currently selected item appear to assistive technology as if it is the focused item. For example, in a listbox, you might want to leave page focus on the listbox container, but keep its aria-activedescendant attribute updated to the currently selected list item. Just as the active element of a page is the one that has focus, setting the active descendant of an element allows us to tell assistive technology that an element should be presented to the user as the focused element when its parent actually has the focus. aria-activedescendant #Īria-activedescendant plays a related role. For example, if a pop-up sub-menu is visually positioned near its parent menu, but cannot be a DOM child of its parent because it would affect the visual presentation, you can use aria-owns to present the sub-menu as a child of the parent menu to a screen reader. This attribute allows us to tell assistive technology that an element that is separate in the DOM should be treated as a child of the current element, or to rearrange existing child elements into a different order. aria-owns #Īria-owns is one of the most widely used ARIA relationships. The difference in each case is what that link means and how it is presented to users. Six of these, aria-activedescendant, aria-controls, aria-describedby, aria-labelledby, and aria-owns, take a reference to one or more elements to create a new link between elements on the page. The ARIA specification lists eight relationship attributes. In the case of aria-labelledby, that relationship is "this element is labelled by that element". A relationship attribute creates a semantic relationship between elements on the page regardless of their DOM relationship. Relationships #Īria-labelledby is an example of a relationship attribute. So, for example, if an element has both an aria-labelledby and an aria-label, or an aria-labelledby and a native HTML label, the aria-labelledby label always takes precedence. Importantly, aria-labelledby overrides all other name sources for an element.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |