Major Quick search button should use the aria-expanded attribute and keep it in sync with the UI so that screen readers can tell if the quick search is activated or not.
________________________
The expand/collapse state of a toggle-type element is missing or is used incorrectly.
Element Name: The "Search" button.
Location of the element: At the top right corner of the main content.
Recommendation to fix
RULE :
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.
HOW TO FIX:
Fix this issue by using the aria-expanded attribute on the actionable toggle element (e.g. the <button> element) with a value of "true" (when the section is expanded) or "false" (when the section is collapsed).
<h3><button aria-expanded="true">When will I receive my refund?</button></h3>
<div class="faq-expanded">You should receive your refund within 5 business days....</div>
REFERENCE:
W3C ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-expanded
BACKGROUND:
When collapsible content is used, a screen reader user must be able to determine whether the collapsible content below the toggle element is in the expanded state or in the collapsed state.
- links to
