Skip to content

Accessibility: the new TalkBack, writing good alt text, etc.

  • [...] today we’re releasing an all-new version of TalkBack that includes some of the most highly requested features from the blind and low vision community.

  • Jake and Surma tackle the age-old problem: what should you include in an image's alt text?

  • WCAG 2.2 follows the same theme of WCAG 2.1 – improving accessibility for three groups:

    1. users with cognitive or learning disabilities
    2. users with low vision
    3. users with disabilities on mobile devices
  • While the W3C is an extremely thorough technical document, we thought it might be helpful to create a plain language summary of these changes, focused on required actions and resulting impact.

  • A series of simple tests on accessible form controls.

  • Use the ARIA-CURRENT attribute to let the screen reader know what, for example, page the user is currently on.

    <nav>
    <ul>
    <!-- DON'T DO THIS -->
    <li>
    <a class="active" href="/">Home</a>
    </li>
    <!-- DO THIS INSTEAD -->
    <li>
    <a aria-current="page" href="/">Home</a>
    </li>
    </ul>
    </nav>

    You can even use the ARIA-CURRENT selector in CSS to change the styling of the highlighted navigation element. No more “active” classes.

    /* DON'T STYLE IT LIKE THIS */
    nav a.active {
    color: red;
    }
    /* STYLE IT LIKE THIS */
    nav a[aria-current='page'] {
    color: red;
    }