DEV 3.4 Allow users to easily bypass information

Recommendations

• Provide skip links to get to main content:
  • Text='Skip to page contents' - this links to the main title of the page.
• Make the skip link visible if possible:
  • This makes it useful for keyboard users as well as screen reader users.
• If using an invisible skip link, there are various methods of hiding it, including:
  • alt text on a 1 pixel transparent gif;
  • Text formatted with CSS to be same as background
  • Text formatted with CSS to have no space {height:0; width:0; overflow:hidden; position:absolute;}
  • Do not use css {style: hidden;} or {display: none;} - this makes the text also invisible to screen readers.
• Group related links and objects together and provide a way to bypass the group, e.g:
  • Use headings (see DEV 5.2);
  • For forms, use fieldset and legend (see DEV 7.3).
• Provide Accesskeys
  • Don't overdo it but provide for major sections and document the accesskeys in an accessibility statement;
  • NB: be careful with the choice of accesskeys because they can cause conflicts with browser software and adaptive technology. This situation is unfortunate as it limits the usefulness and memorability of the accesskeys. A safe option is to use the keys recommended by the UK government in their accesskey standard (see list in examples section), or generally just numbers.

Examples

Skip code examples (this bypasses the code below - a timely example that avoids screen reader users having to listen to all the code if they don't want to).