Mobile accessibility tip – Use visible anchored links

I’m not a huge fan of skip links as a solution for screen reader users on desktop but agree wholeheartedly that visible ones are extremely helpful for sighted keyboard only users who, unlike screen reader users, are forced to tab through content in a linear fashion. The real value being that they are visible – which is why I think of them as anchored links rather than traditional skip links.

When browsing the mobile web keypad users share a similar experience to keyboard only users on desktop; you have to cycle through content in a linear fashion, often through many page elements before you get to what you want. This makes pages less usable, more expensive and creates significant barriers of access for users with poor dexterity.

To create better keypad access on mobile you want to minimise navigation at the top of the page whilst prioritising key content. This can be a tricky balance to reach and is where anchored links can help.

Anchored links: Search, Channels and Categories on BBC iPlayer (iPhone 3)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The BBC iPlayer site uses three skip links at the top of the page: Search, Channels and Categories which fall directly underneath the three links to the three main content areas of the site TV, Radio and Categories. It serves it’s purpose of separating the two sets of links into related navigation sections as well as removing ‘Search’ and it’s form field from valuable real estate at the top of the page whilst remaining accessible. Visually Search, Channels and Categories also have an arrow icon indicating that these links will open lower down the page.

Channels, Search and TV Categories as seen further down the page

 

 

 

 

 

 

 

 

 

 

 

 

 

 

In summary:

  • Prioritise key content at the top of the page
  • Minimise navigation to what is essential
  • Use visible anchored links for further navigation
  • Add visual clues to anchored links to give users more context

See the Mobile Web Best Practices for more information about design for mobile and the relationship between Mobile Web Best Practices and the Web Content Accessibility Guidelines for an understanding of how mobile and accessible web design converge.

7 thoughts on “Mobile accessibility tip – Use visible anchored links

  1. I would like to add one thing that can add to the user experience in case of menus on a mobile device is:
    Provide list for sub-options vertically rather then horrizontally to ensure that sighted users can get the information in their face without requiring to move their eyes from left-to-right.
    In case of screen reader users they anyway have to listen so vertical or horrizontal does not make much of a difference.

    Always BPositive!
    Priti Rohra

  2. Pingback: Navigation & Labeling Reference Links | kabayview.com

  3. Pingback: 모바일 접근성 관련 주요 가이드라인 등 – Henny Swan 블로깅 의역을 중심으로 « 삐돌이의 웹 접근성 & IT Transformation

  4. Fantastic items from you, man. I’ve take into account your stuff previous to and you’re
    just too fantastic. I actually like what you have bought right here, really like what you’re stating and the best way during which you assert it. You are making it enjoyable and you continue to care for to stay it smart. I can not wait to read far more from you. This is actually a wonderful web site.

Comments are closed.