Examples of ‘skip links’ on some bank sites

Posted on Tuesday, 21 August 2012 by Steve Faulkner

While discussing long descriptions on the HTML working group mailing list I took a look at how some sites provide skip links as an example of contingent visible display of content as a more palatable design concept for some accessibility features, as against always displayed or always visually hidden.

Poor implementation of skip links on some bank web sites

I started looking at banks as I knew the bank I use implemented a skip link that was displayed on focus, rather than always hidden or always visible, and thought this was a good example of a design compromise, whereby the feature was available to those that may benefit (keyboard users), but does not effect the visual design for mouse users.

I didn’t start out looking for poor ‘skip link’ implementation examples, but quickly found them… here are some random examples of bank sites that implement the display on focus skip link, which Jim thatcher uses, and discusses in his article Skip Navigation Links

The Halifax bank web site

halifax home page partial screenshot

visible skip link box displayed on focus, outlined to ease identification

The halifax bank site has the following links (including 4 skip ‘jump’ links) that display on focus as a blue box (no visible text) that partially obscures other page content:

The co-operative bank site

co-op home page partial screenshot

co-op 'skip navigation' link partially obscured by the bank logo

The Co-op bank site has 3 skip links that display on focus, the links have a transparent background so are obscured by the other content.

The HSBC bank site

HSBC home page partial screenshot

HSBC 'skip page header and navigation' link

Has a nice clean skip link that displays on focus, too bad it doesn’t work in FireFox.

Some working implementations

first direct home page partial screenshot

First direct bank 'skip to main content' link

  • First direct bank has a nice clearly visible skip link that displays on focus and works as it should.
  • Standard Chartered bank has a nice clearly visible skip link that displays on focus and works as it should.
  • Scotiabank has a nice clearly visible skip link that displays on focus and works as it should.

About Steve Faulkner

Steven is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at Vision Australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C HTML Working Group and the W3C Protocols and Formats Working Group. He is an editor of several specifications at the W3C including HTML 5.1, Using WAI-ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility

Comments

  1. Hi George,
    Currently browsers do not support keyboard navigation via landmark roles, so for keyboard users who do not also use assistive tech, a visible skip link is needed.

Comments are closed.

Recent Posts

See all posts in the blog archive

I‘d like to take this opportunity to thank you all for your great business and for your flexibility during our contract amendment. Your people are sensational.

Ray Douha, Sr. UI Planner, State of Minnesota