ARIA labels are used to make websites and web applications more accessible to people with disabilities, especially those who use assistive technologies like screen readers. Here are some commonly used ARIA labels explained in simpler terms:
Imagine you have a button with a picture of a shopping cart. The aria-label is like a spoken description for that button. So, if you set aria-label="Add to Cart", when someone using a screen reader encounters the button, it will read out "Add to Cart" to let them know what the button does.
This is like having someone else describe what the button does. You give the ID of another element (like a heading or a paragraph) to the button, and the content of that element will be used as the label. For example, if you have a button next to a heading that says "Read More," you can link the button to the heading using aria-labelledby="headingID" to use the heading text as the label for the button.
This is similar to aria-labelledby, but instead of describing the purpose of the element, it provides additional information. For instance, if a button has some extra details or explanations in a nearby paragraph, you can use aria-describedby="paragraphID" to associate the button with that paragraph's content.
When an element has aria-hidden="true", it means that it's invisible to assistive technologies. It's useful when there are decorative or redundant elements that should not be announced by screen readers, so they won't confuse users.
This is used with elements that can expand or collapse, like accordions or menus. When an accordion is expanded, you set aria-expanded="true", and when it's collapsed, you set it to false. It helps assistive technology users understand the current state of the element.
When an element is disabled, such as a disabled button, you use aria-disabled="true" to let users know that it cannot be interacted with.
This is used to announce live updates to content that change dynamically without a page reload. For instance, if new chat messages appear on a webpage, you can use aria-live="polite" to notify assistive technology users about the new messages.