Update Accessibility Pattern Index to cover the difference between the usage of role, state and property ARIA labels

[Rabia2219]

Overview

We need to update the accessibility patterns index page to explain the different types of ARIA labels.

Action Items

• [ ]

Resources/Instructions

• https://github.com/hackforla/accessibility/blob/main/docs/getting-started/accessibility-patterns-index/index.md

[rayneng]

Role vs. State. vs. Property

Example 1: Expandable button

<button
  role="button"
  aria-expanded="false"
  aria-controls="menu">
  Menu
</button>

<div id="menu" hidden>
  ...
</div>

Attribute	Type	Meaning
role="button"	Role	"Treat this element as a button."
aria-expanded="false"	State	"The menu is currently collapsed." (changes to true when opened)
aria-controls="menu"	Property	"This button controls the element whose id is menu."

Note: The role never changes, state changes on interaction, and property describes relationship between elements.

Example 2: Text input with an error

<label for="email">Email</label>

<input
  id="email"
  type="email"
  aria-required="true"
  aria-invalid="true"
  aria-describedby="email-error">

<p id="email-error">
  Please enter a valid email address.
</p>

Attribute	Type	Meaning
(implicit role="textbox")	Role	Browsers already know an is a textbox.
aria-invalid="true"	State	The current value is invalid.
aria-required="true"	Property	This field is required.
aria-describedby="email-error"	Property	The input is described by the error message.

Note: role is already built into the HTML element, so you don't need to specify it.