Skip to content

Latest commit

 

History

History
64 lines (53 loc) · 2.65 KB

all-aria-attributes.md

File metadata and controls

64 lines (53 loc) · 2.65 KB

Certainly! ARIA (Accessible Rich Internet Applications) attributes are a set of attributes defined by the W3C to enhance the accessibility of web content, especially for dynamic and interactive components. Here are some common ARIA attributes and how they can be used to improve accessibility:

  1. aria-label and aria-labelledby:
  • aria-label: Provides a label for an element when a visible label is not present.
<button aria-label="Close">X</button>
  • aria-labelledby: References the ID of another element to provide a label.
<h2 id="modalTitle">Important Information</h2>
<div role="dialog" aria-labelledby="modalTitle">...</div>
  1. aria-describedby: Indicates the IDs of elements that provide additional descriptive text related to an element.
<button aria-describedby="tooltip">Hover for more info</button>
<div id="tooltip">Additional information about the button</div>
  1. aria-hidden: Indicates whether an element should be visible or hidden to assistive technologies.
<div aria-hidden="true">This content is hidden</div>
  1. aria-live: Defines the live region behavior for screen readers. It's often used for dynamically updating content.
<div aria-live="assertive">Alert: New message received</div>
  1. aria-expanded and aria-controls:
  • aria-expanded: Indicates whether a region is currently expanded or collapsed.
<button aria-expanded="false" aria-controls="collapseContent">Toggle Content</button>
<div id="collapseContent" style="display:none;">Hidden content</div>
  • aria-controls: References the IDs of elements that are controlled by another element.
<div role="tab" id="tab1" aria-controls="tabpanel1">Tab 1</div>
<div id="tabpanel1" role="tabpanel" aria-labelledby="tab1">Tab 1 content</div>
  1. aria-disabled: Indicates whether an interactive element is currently disabled.
<button aria-disabled="true">Disabled Button</button>
  1. aria-haspopup and aria-owns:
  • aria-haspopup: Indicates that an element has a popup context menu or sub-level menu.
<button aria-haspopup="true" aria-owns="menu">Show Menu</button>
  • aria-owns: References the IDs of elements owned by another element.
<div id="menu" role="menu">...</div>

These are just a few examples, and there are many more ARIA attributes available. It's important to use them judiciously and in conjunction with proper HTML semantics to ensure a meaningful and accessible experience for all users. Additionally, testing your website with tools like Lighthouse and screen readers can help identify and address accessibility issues.