Notes about Web Accessibility- Part 2

Status: Work in progress.
Last update: June 18, 2015

Lesson 2: Navigation

Rule: A method shall be provide that permits the user to skip repetitive navigation links. Specially when navigation is repeated in all pages or included in a page template.

User goal: Navigate to relevant content.

How?

  1. Include a links that allow the user to skip over the navigation and go straight to the main content in the page.
    These links can be visible or invisible for non-disable users.
    Example: “Jump to main content” or “Skip navigation”
  2. Use HTML Headings properly. Screen readers and some browsers allow users to move from heading to heading announcing the headings at the corresponding level (h1, h2, h3, h4, h5).

Some options of how to implement this:

  • Text link at the top (visible)
  • Text link positioned off the screen and move it in on focus
  • Use tiny image links (1x1px) of the same color of the background
  • Use text links of the same color of the background

Alert! Do not use display: none to hide navigation links. Screen readers respect display: none interpreting it to mean don’t display in any medium including speech.

TIPS: How to improve your navigation links (or any kind of links)

  1. Choose wording on your links so the user can understand what the link will do.
  2. Organize your content using true headings (h1, h2, h3, h4, h5) and lists.
  3. Make sure content is well structure and clearly written. Check spelling, grammar and readability.
Advertisements

Thanks for your comments

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s