My Reflections
In this lesson, I learned more about using WAI-ARIA to improve the accessibility of websites and interactive components. Three concepts that were new to me were ARIA roles, ARIA states and properties, and managed components such as accessible tab menus.
ARIA roles identify the purpose of an element for assistive
technologies. For example, roles such as
tablist, tab, and
tabpanel help screen-reader users understand how a tab
component is organized. I could use these roles when creating custom
navigation menus, tab interfaces, or other interactive components.
I also learned that ARIA states and properties provide additional
information about an element. Attributes such as
aria-selected, aria-controls, and
aria-labelledby can communicate which tab is selected
and which content panel belongs to it.
These attributes could help make future projects easier to navigate for people who use screen readers, keyboards, or other assistive technologies.
Another new concept was using JavaScript to update accessibility
attributes when a user interacts with a component. When a tab is
selected, JavaScript can hide the previous content, display the new
content, and update the value of
aria-selected.
I could use this approach when building interactive menus, accordions, modal windows, and other dynamic website features.