ARIA properties define additional semantics not supported in regular HTML. Most ARIA properties are static and will not change once they are set. An example of an ARIA property is <button aria-haspopup="true">. This property extends the standard button to cause a screen reader to announce that the button if activated, will trigger a pop-up.
The aria-describedby attribute provides an accessible description for an element. This is similar to the aria-labelledby element in the way that you have an element you set as the description.
<label for="my-field">Field label</label>
<input type="text" id="my-field" aria-describedby="help-text" />
<div id="help-text">This is the help text</div>With aria-required you can tell assistive technologies that a form field is required. The attribute has no other functionality. This can be used in cases you don't want HTML validation for some reason, for example, in some JavaScript-based solutions. But if you use HTML validation, there is no need for aria-required, just use the required attribute.
Always aim to avoid having elements without visual labelling. But in the cases you need to have one, remember to use ARIA to provide an accessible name to it.
The aria-label attribute should be used in cases where a text label is not visible on the screen. Assign it a string that labels the current element. The aria-label will override any other native labeling (for example, the <label> element). A good place you might want to provide an aria-label is when you have a button that is visually represented by an image. In this kind of situation, it's good to pause to think if you want to provide the sighted users also with more information than just the image. You can, for example, use the title attribute.
You shouldn't use aria-label everywhere. For example, you don't need to tell the user that an element is a footer. The footer element should be defined with the <footer> tag.
Case 1: A button that is visually represented by an image. You should provide an aria-label to assistive technology users.
<button aria-label="Close window"><img src="/path/to/the/image" /></button>
Case 2: You have an input field without a visible label. You should provide the assistive technologies a label. It is always a good practice to provide each input field with a visible label. That way you can ensure that all your users can use the information. At least don't rely on the placeholder to act as a label, because the placeholder is not a label.
<input aria-label="Search content" />
With aria-labelledby you specify an HTML element that has the label for the element. The element you use as the label can be hidden visually (but it rarely should be).
If the element is inside the parent in the DOM, don't use this type of ARIA. But if you can't infer the relationship from the DOM, use ARIA. Using ARIA will help assistive technologies understand the relationships between the elements.
When you have one element controlling the behaviour of another, choose aria-controls. When an element owns another element, use aria-owns.
The aria-controls attribute tells the element controls another element. A typical use is when one element controls the behaviour or state of another element. An example use case would be accordions or tabs.
<button aria-controls="tabContent">My tab</button><div id="tabContent" role="tabpanel">Content for the tab</div>
Aria-owns tells the element should be treated as a child of the current element. An element can have one explicit owner.
An example use case would be a dropdown menu, like a pop-up sub-menu. Often the other element has dynamically generated content, like a dialog or a menu.
<button id="dropdownButton" aria-haspopup="true" aria-owns="dropdownMenu">Dropdown</button> <div id="dropdownMenu" role="menu">Content for the dropdown menu</div>