ARIA Attributes: The Basics

HTML: <img src="image.jpg" alt="A descriptive text" width="200" height="150">
Attributes used > src , alt, width, height

CSS:
​/* Targets disabled buttons */
​button[disabled] { background-color: grey; cursor: not-allowed; }
Attributes used: background-color and cursor

Roles - used to define the type or purpose of an element (e.g., role="button", role="dialog")

States - dynamic properties, such as selected, checked, or disabled, whose value may be changed by users or application events. (e.g., aria-expanded="true" or "false").
​

Properties - provide information about the nature of an element, such as its name, orientation, or position in a set. Properties are less likely to change than states. (e.g., aria-labelledby="id")

aria-hidden – hides an element from assistive tech

aria-label – gives an element an accessible

aria-labelledby – labels an element by referencing another element

aria-describedby – gives additional descriptive text for an element

aria-expanded – can provide assistive tech information on an element's state (like a dropdown), like expanded or collapsed