WAI Validation warnings - Explain please

[lozza]

I've just run my site Atypus through the HiSoftware® Cynthia Says™ - Web Content Accessibility Report

and it's highlighted the following warnings:

9.4 Create a logical tab order through links, form controls, and objects.

• Rule: 9.4.1 - All Anchor, AREA, BUTTON, INPUT, OBJECT, SELECT and TEXTAREA elements are required to use the 'tabindex' attribute.
  • Warning - One or more Anchor, AREA, BUTTON, INPUT, OBJECT, SELECT and TEXTAREA elements do not use the 'tabindex' attribute.

9.5 Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls.

• Rule: 9.5.1 - All Anchor, AREA, BUTTON, INPUT, LABEL, LEGEND, and TEXTAREA elements are required to use the 'accesskey' attribute.
  • Warning - One or more Anchor, AREA, BUTTON, INPUT, LABEL, LEGEND, and TEXTAREA elements do not use the 'accesskey' attribute.

Could some explain the 'tabindex' and 'accesskey' attributes in simple terms and how to use them

thank you

 

[Augmented]

tabindex is an attribute that lets you define the order in which elements on the page are focused when you use the tab key. The first element you want to focus when you press tab would take the value "1", the second "2" and so on. This way you can aid non mouse-users to efficiently navigate forms and such.

Google's results pages might be a good example of where tabindexes would be beneficial. Typically the first element I want to focus with the tab key is the text input for the search keyword. However, as there are no tabindexes on the page, I have to hit the tab key 8 times to reach it. Giving the text input a value of 1 would mean I could reach it with a single keypress. Logically, the submit button would be the 2nd tabindex, and then maybe the primary navigation after that.

<input type="text" id="query" tabindex="1" />

Accesskeys are like hotkeys, and provide instant access to functional elements on a page - these can be links, buttons etc. They are usually triggered with a keypress combination such as ALT+SHIFT+(key) in Firefox. Good example, ALT+SHIFT+p triggers the 'Preview Post' button when composing a forum post, and ALT+SHIFT+s submits it. Others are available such as 'b' to create bold text, 'i' for italic and 'u' for underline. I use these frequently.

Access keys are often used for the main navigation (these forums use the numeric keys), and there are conventions to this that are worth researching.

<a href="/index.htm" accesskey="1">Homepage</a>

Note the difference between 'warnings' and 'errors'. Warnings are informative, and errors require action.

 

[lozza]

Brillant i understand that first read lol Thanks!

So question, this code:

<input type="text" id="query" tabindex="1" />

Where would i put it if i want to tabindex my navigation from 1 to 6

<div id="nav">
      <div><img src="images/web.jpg" alt="web" width="280" height="400"></div>
      <ul>
        <li><a href="#">Home...........................................</a></li>
        <li><a href="#">About Us......................................</a></li>
        <li><a href="#">Services.......................................</a></li>
        <li><a href="#">Portfolio.......................................</a></li>
        <li><a href="#">Case Studies................................</a></li>
        <li><a href="#">Contact Us...................................</a></li>
      </ul>
    </div>

 

[Augmented]

<div id="nav">
      <div><img src="images/web.jpg" alt="web" width="280" height="400"></div>
      <ul>
        <li><a href="#" tabindex="1">Home...........................................</a></li>
        <li><a href="#" tabindex="2">About Us......................................</a></li>

etc...

Bear in mind that after the last tabindex, the next tabbed element will fall back to the first default 'tabable' element on the page. So it's worth implementing tabindex with care, as you can create a tab flow that's more confusing than if you didn't add tabindexes - <a> elements are already accessible via tabs, so you may be taking away from the expected user experience.

/edit - http://www.rnib.org.uk/wacblog/general-accessibility/too-much-accessibility-tabindex/

 

[lozza]

Thanks for your help - very good article as well.

I think i'll leave it alone for now but at least i know what it's all about now!