Skip to main content

SVa11y

Go to home page

Anchors

All anchors (links) should have a valid 'href' attribute and explicit link text. <a href="index.html">Go to homepage</a> In this example, the 'href' attribute sends the user to 'index.html' and the link text is 'Go to homepage'.

Even if the link does not take the user to a new page, the href attribute is still a must. Without the 'href' attribute, the link will not be focusable with the keyboard, rendering the anchor inaccessible to keyboard only users. <a href="javascript:void(0);">Go to homepage</a>

Screen reader output

Go to homepage link

Anchors (Opens in a new window)

If an anchor is opening in a new window, the user must be alerted. Methods for this include adding 'screen-reader-only' text, or adding an icon with alt text alerting the user. The most common text for either of these methods is 'Opens in a new window'

Screen-reader-only text

<a href="new_window.html" target="_blank">  New Window HTML  <span class="screen-reader-only">  Opens in a new window  </span></a>"

Using an image with valid alt text

<a href="new_window.html" target="_blank">New Window HTML <img src="new_window.png" alt="Opens in a new window" /></a>

Screen reader output

New Window HTML Opens in a new window link

Anchors (Linked images)

When an image is the sole piece of content inside of an anchor, ensure the image has descriptive alt text. <a href="index.html"><img src="index.png" alt="Go to homepage" /></a>

Without explicit and descriptive alt text on the image, screen readers will have nothing to read out to the user, rendering this anchor in accessible to non-sighted users.

Screen reader output

Go to homepage link

Buttons

All buttons require explicit text. Screen readers will read out the text of the button. <button>Submit</button>

ARIA

You can also use the attribute 'role="button"' on an anchor and effectively turn it into a button. <a href="javascript:void(0);" role="button">Submit</a>

Screen reader output

Submit button

Dialog (Modal)

There are a number of considerations that must be taken into account when adding a modal dialog to your site.

  1. The parent container (generally a <div> requires the attribute 'role="dialog"' <div role="dialog">
  2. The parent container (div) should contain the attribute 'aria-lablledby'. The value for this is generally the #id of the <h2> inside of the dialog <div role="dialog" aria-labelledby="dialog_heading_id">
  3. The dialog should contain an a heading with a valid #id
    <h2 id="dialog_heading_id"/>
  4. Focus should be trapped inside of the dialog. Tabbing past the last tabbable element should take the user back to the first tabbable element
  5. Ensure all images (background, foreground) have the proper textual equivalent
  6. The background content should have the attribute 'aria-hidden="true"'

Click here to see an example modal dialog

Click here to download the source files

Dialog (Non-Modal)

Drawers (also known as Accordions)