< Back to Demos | Learn more at PaulJAdam.com >

Remove Filter Buttons

Search Results Filtered By:

Code Method Used

A fieldset element wraps the group of filters and contains aria-live="assertive" and aria-relevant="removals" attributes and values to tell the screen reader to speak aloud the names of buttons removed. VoiceOver macOS: "Output" recorded during form element navigation.
  1. Button aria-labelledby value points to IDs of Remove Filter icon image and span holding visible button text.
    VoiceOver macOS: "Remove Filter Highest Rated button"
  2. Button aria-label value includes the string "Remove Filter" plus the visible text. Icon is aria-hidden.
    VoiceOver macOS: "Remove Filter New & Noteworthy button"
  3. Icon is placed before the button text and icon has an aria-label and img role.
    VoiceOver macOS: "Remove Filter Most Popular button"
  4. Icon is placed before the button text and icon has CSS generated :before content alt:"Remove Filter"; value.
    VoiceOver macOS: "Remove Filter Most Reviews button"
  5. Icon has CSS generated :before content decorative alt:" "; value and button has title attribute value of "Remove Filter".
    VoiceOver macOS: "Top Paid button" (help text delay) "Remove Filter"
  6. There is no alt text for the icon and nothing added to the accessible name or description.
    VoiceOver macOS: "Top Free  button"
    VoiceOver caption panel shows a square with a question mark after the word Top Free and before , button.