Accessible Navigation

What is navigation about?

• Navigation and accessible navigation?

• Are they different?

• Typically a sighted user or a mouse user will look at a page decide what they want and select it

• Consider the following page from the US dept of Agriculture www.usda.gov

Looking at the headlines

• The headlines are sited in the page centre under the headline In the News

• Before this there are 106 words which if we were using a keyboard or a screen reader to navigate would all have to be traversed and possibly read out

• Using Jaws for example this would take 51 secs- Using a keyboard there are at least 28 links to traverse using the tab key

Contrast this with the mouse user

• Focus in and select item – one click and we are gone

• Even to focus- after 28 tab clicks would you know where you are- How is the item, under consideration , highlighted?

Heading Navigation

• You should use heading markup to navigate your page.

• You can use it to skip over repetitive navigation links and get to the main content

• Additionally if page has good headings the site will be clearer and easier for everyone to understand and use

Heading Navigation

• If a page is well structured and the headings are marked up as HTML heading elements (h1 to h6) then a screen reader user can easily get a useful survey of the page content and useful access to that content by just navigating through the content using for example the H key

Remember

• Make sure your document uses headings not style

• Most screen readers have a H command that allows the user to access a list of the page headers and this greatly helps page navigation

• It also provides a nice summary of the main topics of the page.

Reading Order

• Navigating the page is complex

• As a general rule reading order is in order of occurrence in the page code.

• This may not be what you see

• There are a number of common issues

such as tables, improper use of styles

versus structure and so on.

Css

• CSS can be used to position page elements anywhere on the screen regardless of their code order

• This will impact on the resultant display and cause a conflict between assistive and browser output.

Images

• The use of images for text can cause significant accessibility problems, particularly for users with impaired vision (including many elderly people) since they are unable to use the browser to increase the size of the navigation labels.

• Also, without an appropriate alternative (alt) text for each link label, the navigation may be inaccessible to users of screen reading technologies.

Images

• Images are often used for navigation elements as a way of providing feedback to the user through JavaScript mouseovers (rollovers).

• As the user moves the mouse onto the image, JavaScript will switch the display to an alternative image. JavaScript however, can cause some problems for users of assistive technologies.

• Similar mouseover user-feedback that is more accessible can be provided with Cascading Style Sheets.

General Navigation Principles

• Be consistent with navigation across each page of the site.

• Provide a link back to the homepage from every page: e.g. logo at top left of page, an explicit 'home' link.

• Use common, accepted layouts and navigation standards. This means the user will not need to spend time working out how to use your site. Simplicity and consistency is the key.

Navigation Bars

• Use clear navigation bars:

• Make them distinct and distinguishable from the content;

• Choose the labels for the navigation bar items very carefully - make them meaningful and understandable. Avoid ambiguous terms.

Feedback

• Provide feedback on navigation bars:

• Highlight the current page on navigation bars where possible;

• Disable the link to the current page: – this provides extra non-visual feedback, – this avoids potential misunderstanding and

reloading of the same page.

Dropdown Menus

• Be careful with dropdown menus: • Avoid multi-levelled cascades:

– these can be difficult to use, especially where fine control is required;

• If using then: – test with a range of users to ensure ease of use – ensure the menus can be used with a keyboard – ensure the navigation the menu provides is available

without the need for scripting, e.g. • Implement in CSS • Make the top menu item a link to an overview page that

presents the full set of links present in the cascading menu.

Links Style

• Make all in-page links easily recognisable: – Style links so that they are clearly

distinguishable from other non-link text: • Blue underlined is the standard but other styling is

fine as long as it is obvious that a link is a link;

– Limit the number of styles you use (ideally to just 1) and use consistently.

Links

• Place in-page links where they are needed for action and are supported by the surrounding context: – Do not force a user to hunt for a link elsewhere if it

makes sense to place it right where it is needed.

• Be careful not to overdo links in body text: – Rather than pepper a passage with many links,

consider a separate section at the end that lists related links.

• Ensure all navigational items can be used with a keyboard as well as a mouse

Tip

• Providing more than one route to information can improve the ease of use for people who browse in different ways and use different browsing technologies

• Provide a site search (if appropriate): – Place it on every page and ensure it is visible

without scrolling; – Provide an advanced search:

• The advanced search form should permit complex searches without knowledge of syntax such as boolean logic.

• Provide a site map/contents list.

Breadcrumbs

• Provide 'breadcrumb' navigation: – This provides information about where the

current page is in the site structure and provides navigation to higher levels;

– It is helpful to have a 'you are here' title to the breadcrumb:

• This will help everyone understand what it is but can be particularly useful for screen reader users,

• If necessary, the title can be hidden with CSS.

Example D Rice

Page Contents

• Provide within page 'contents' navigation: – Useful on long pages with good structure; – Insert 'Back to top' links where useful on long

pages.

Meaningful Links

• Most visual users quickly scan content pages and often their visual focus is primarily on the links (things they can do).

• Some people (e.g. screen reader users) similarly scan pages by tabbing through from one link to the next or by listing just the links.

Short Links

• Links should be short, but descriptive: – Don't link whole paragraphs.

• It is important that links have inherent and sensible meanings to support this scanning behaviour.

• You should not force your audience to read all the surrounding words if you could convey the essential information in the link itself.

Click Here

• Avoid 'click here' type terminology: – Do not use 'click here', 'more', 'full

information', 'pdf', 'file', etc; – Each link should clearly indicate its

destination or function, out of context of the text surrounding it;

– Each link should be distinct from others in the page.

Click here website

Click here

Click here

Click here

Click here

Click here

Click here

Click here

Useful Information

• Provide useful information about the link: – e.g. the file format, the size of a download, notification of an

external site, notification of a pop-up window; – This information is useful to provide in the link itself but

sometimes, to assist with reading of the links, it may be more sensible to include the information next to the link.

• Use the link title attribute liberally: – Use this to provide additional useful information about the link. – The information in the title attribute appears as a 'tooltip' in some

browsers and can be read out by screen readers.

Other Links

• Separate adjacent links with a non-link printable character: – 'link | link2' or '[link] [link 2]' is standard:

• can style (hide) with CSS;

– This was a particular requirement for some older adaptive technologies - not as important now but still worth implementing.

• Lists of links should be coded as lists: – This avoids confusion caused by links wrapping over

multiple lines where it may be unclear whether they are single links or multiple separate, links;

Tip:

• Copy out just the links from your page. Can you distinguish between them? Can you predict the result of clicking on each of them? If not, change them

Skip Navigation Links

• This allows us to skip to links that we want to visit and avoid repeated navigation links such as those on the top of the page for example in the earlier web site.

• There are a number of techniques for this

Skip Techniques

• Placing a skip navigation link in normal text

• Creating a link as alt-text on a one pixel image

• Using a text link styled to be invisible

• Using CSS to expose the text of a link when it receives focus.

Placing a skip navigation link

• The simplest technique is to just place a text link at the top of the page.

• An example is the American Council of the Blind website (WWW.acb.org)

American Council for blind website

• When a visitor opens the page with a screen reader the first thing they will hear is

• “Link skip navigation links”• The code for this is • <a href = “#nonav”><font-size = “2”>skip

Navigation Links</font></a>• There is an anchor with the code on the

ACB logo

Continued

• <a name = “nonav”><img src =“acob5.gif” alt = American Council for the Blind</a>

• This means when the skip link is followed, the alt-text for the logo is next to be announced.

Note

• The anchor doesn’t have to be content

<a name = “nonav” id = “nonav”></a> is valid and could have been placed just before the logo

People With Disabilities

• They are best served when skip links are on the screen and normal text

• Users who can see the screen who are non mouse users will not be surprised when links appear and disappear

Creating a link as alt-text on a one pixel image

• An invisible 1 pixel image is the skip navigation link

• The image is associated with the link

• Clicking on it jumps to main content

• It is usually placed at the top left hand side of the page

• When images are turned off you should see the alternative text

Sample code for this

• <a href = “#ContentArea”><img src = http://www.dit.ie/comp/images/1.gif

alt “Click here to go to main content”

width = “10” height = “1” ></a>

• This jumps to anchor

• <a name = “ContentArea”></a>

This technique

• Provides a section 508 compatible fix

• Is used on many sites including IBM(www.ibm.com)

• The visual appearance of the page isnt changed

• Link will be shown on the status bar

Using a text link styled to be invisible

• Technique is to make link invisible by making it the same colour as the background

• This means it cannot be seen

• It can only be read out by a screen reader

Invisible Links

<a href = c”><font color = “#ffffff” size = “6”>Skip to Content</font>

</a>

Obviously this could and should also be achieved with CSS

Problem with this approach

• Lots of invisible links mean lots of repeated link text being read out by screen readers

• This is a big burden for users of this technology

• Not to be recommended

• Its really using Style for structure

Exposing the link when it gets focus

• The link is originally position off screen

• When it gets focus through the keyboard

then it is brought front and centre

Examples of this

• Due to Jim Thatcher

• <li class = “skip”><a href = #cont”

id= “skpnav”> Skip Navigation</a></li>

Styling of class skip

• .skip a {padding 0 0.5em; display: inline; z-index: 2; text-decoration: none; position absolute; width 14em; left -200em}

• .skip a:focus, .skip a:active {position absolute; left 0.5em; border: solid #333 2px; color #fff; background #555 }

With this styling

• The inactive unfocussed skip link is off screen but is available to a screen reader.

• When it gets focus it is repositioned on screen and is made visible

Frames

• Frames are an extremely difficult obstacle for many technologies to cope with

• There are issues with readers etc getting stuck in them and also losing sense of orientation because they are poorly labeled.

Minimum Frames navigation requirements.

• The user should include appropriate frame links which point to different frames

• There should also be some information about the frames purpose to allow the user to skip over the frame if its not of interest.

• Creating Quality Frames• Adding skip navigation links is not the only way to satisfy the Access

Board Navigation standard on skipping repetitive navigation links. Frames, if correctly implemented, can also provide navigation that is accessible and pleasant for a user who is blind. To create frames that are useful, you must use titles that convey meaning.

• If a user knows there are three frames, a banner frame, a navigation frame, and a main content frame, for example, then on entering the site the visitor can go directly to the content frame assuming it is well identified. This is very much like a skip navigation link.

• Similarly, if the user prefers to check out some of the navigation links first, that is easy too.

• Implementing Frame Titles• For frames to be "correctly implemented," they must meet the

following Section 508 provision:• Paragraph 1194.22 (i)

Frames shall be titled with text that facilitates frame identification and navigation.

• Frames can be an asset to users of screen readers if the labels on the frames are explicit. Such labels as top, bottom, or left, provide no clue as to what is contained in the frame. Labels such as "navigation bar" or "main content" are meaningful and facilitate frame identification and navigation.

• A graphics browser can, in effect, display several pages at the same time by using frames. When a text browser opens a frame site, it can only work with one page at a time. So, text browsers offer a list of frames from which the user can select the one to be explored. If those frames are not meaningfully identified, then the user will not know which way to turn.

Frame Titles

• First, every page should have a title as given in the title element which is part of head content:

• <head> ... <title>Test Frame Page</title>... </head> ... And for each frame page:

• <head> ... <title>Navigation Frame</title>... </head> ... <head> ... <title>Banner Frame</title> ... </head> ... <head> ... <title>Main Content Frame</title> ... </head> ...

Second way

• The second way in which titles are involved is that the frame elements in the main page which point to the individual frame pages need title (and name) attributes.

Frameset code

• The code below illustrates the main page or frameset page of a framed site.

• There are three frames which are named (name attribute) "navigation," "banner," and "main" and whose page titles have been appropriately coded as above.

• Those names are provided both as the name and the title of each frame element.

Code

<frameset rows="20,*"> <frame src="Banner.htm" ... id="banner"

name="Banner" title="Banner"> <frameset cols="150,*"> <frame src="Left.htm" ... id="leftnavigation"

name="Navigation" title="Navigation"> <frame src="content.htm" ... id="maincontent"

name="maincontent" title="Main Content"></frameset>

</frameset> </frameset>

Readers

• When a text browser or a screen reader lists the frames in a site, the text appearing in that list is the title or name attribute of the frame element.

• Lynx uses the name attribute while IBM Home Page Reader Version 2.5 uses the title attribute. A screen reader is likely to use the title element of the individual frame pages.

Summary for Frames

• Assistive technology has not focused in on one method of identifying frames so it is important to provide identification in more than one way.

• You should always include meaningful title elements on all your pages. In addition, place useful title elements on the individual frame pages.

• Each frame element in the frameset should have both meaningful name and title attributes.

• For example, the title attribute might be "main content" while the name attribute could be "maincontent" with the space removed because name attributes can't have spaces.

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.

Tabbing Through the page

• Some people navigate through pages using the tab key rather than the mouse.

• You must ensure that the order that page elements are presented is logical and gives a similar experience to that which would be obtained visually.

• Try to ensure that the default tab order is the most logical route: – This will simply be the order that elements

appear in the underlying code that makes the page.

Tabindex

• If you can't get a logical default order, use the tabindex attribute to change the tab order to suit user needs: – NB: Use of tabindex can cause problems so

ensure you test the page to check that is is logical and usable

• It is most often useful for forms;

– The order follows numeric order lowest to highest that you set for tabindex

• Use positive integer.

Tabindex

• Second <input ... tabindex="20">

• First <input ...tabindex="1">Third <input ... tabindex="30">

TIP

• Tip: Use the keyboard to tab through the page. Does it make sense this way?

UK Government accesskeys standard:

• S - Skip navigation 1 - Home page 2 - What's new

3 - Site map 4 - Search 5 - Frequently asked questions (FAQ) 6 - Help

7 - Complaints procedure 8 - Terms and conditions 9 - Feedback form 0 - Access key details