Aria label3/31/2023 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. However, since ARIA only affects the accessibility tree, aria-labelledby does not give you the familiar label-clicking behavior you get from using a label element.For example, you could add a hidden span next to an element you want to label, and refer to that with aria-labelledby. You can use aria-labelledby to refer to elements that are hidden and would otherwise not be in the accessibility tree.The label will be concatenated in the order that the IDREFs are given. Only one label element may be associated with a labelable element, but aria-labelledby can take a list of IDREFs to compose a label from multiple elements.While a label element refers to the thing it labels, the relationship is reversed in the case of aria-labelledby - the thing being labeled refers to the thing that labels it.aria-labelledby may be used on any element, not just labelable elements.This is much like using a label element, with some key differences. aria-labelledby #Īria-labelledby allows us to specify the ID of another element in the DOM as an element's label. ![]() ![]() You might use an aria-label attribute when you have some kind of visual indication of an element's purpose, such as a button that uses a graphic instead of text, but still need to clarify that purpose for anyone who cannot access the visual indication, such as a button that uses only an image to indicate its purpose. This overrides any other native labeling mechanism, such as a label element - for example, if a button has both text content and an aria-label, only the aria-label value will be used. aria-label #Īria-label allows us to specify a string to be used as the accessible label. Let's look at the properties ARIA uses to create accessible labels. In fact, ARIA is the only way to add accessible help or description text. ARIA provides several mechanisms for adding labels and descriptions to elements.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |