Session 4: Visible Texts for Icons

- | #texts4icons | Accessibility Club Meetup #8

Session notes

  • Author: Sascha Moeser

    Example of sortable tables

    Best practices for accessible / inclusive icons

    • Use aria-hidden / aria-label / role in icon SVGs
    • For icons in e.g. links / buttons, usually the aria-label is added to the
    • interactive element to give context
    • Possible solution: <title> in SVG will be read through screen reader
    • Special use case in sorted tables:
      • On button that sorts table, the problem is that the focus stays on the button after sorting, reading out the next action rather than the current state
      • We did not find a proper solution to this problem within the session (we tried e.g. setting aria-live but this lead to reading out all column headers of the table upon sorting one column)

    Best practice example