HTML aria *
Created By: chatGPT
ARIA (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML to improve accessibility for people with disabilities. These attributes can help assistive technologies like screen readers convey more information about web content. Here are some commonly used
aria-* attributes:aria-label is used to provide an accessible name for an element. This is useful when an element does not have visible text.
<button aria-label="Close">✖️</button>aria-hidden is used to indicate that an element should be hidden from accessibility tools. It accepts values of
true or false.<div aria-hidden="true">This content is hidden from screen readers.</div>aria-expanded is used to indicate the state of expandable elements, like dropdowns or accordions. It shows whether an element is expanded or collapsed.
<button aria-expanded="false" onclick="toggleDropdown()">Menu</button>aria-controls is used to identify the element(s) that are controlled by another element. For instance, this helps describe relationships between buttons and the sections they control.
<button aria-controls="section1">Show Section 1</button>
<div id="section1">Content goes here.</div>aria-describedby provides a reference to another element that contains a description for the current element, enhancing the user's understanding.
It's important to use these attributes appropriately to ensure that your web applications are more accessible. Always test with screen readers and other accessibility tools to confirm that the implementation meets the needs of users.<input type="text" aria-describedby="emailHelp" />
<span id="emailHelp">We'll never share your email with anyone else.</span>