Accessible Navigation

1. Accessible Navigation

2. 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

5. 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

6. 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?

7. 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

8. 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

9. 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.

10. 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.

11. 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.

12. 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.

13. 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.

14. 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.

15. 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.

16. 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.

17. 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.

18. 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.

19. 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

20. 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

21. 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.

22. 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.

23. Example D Rice

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

25. 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.

26. 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.

27. 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.

28. Click here website Click here Click here Click here Click here Click here Click here Click here

29. 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.

30. 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;

31. 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

32. 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

33. 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.

34. 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)

35. American Council for blind website

36. 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

37. 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.

38. 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

39. 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

40. 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

41. 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>

42. 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

43. 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

44. 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

45. 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

46. 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

47. Examples of this • Due to Jim Thatcher • <li class = “skip”><a href = #cont” id= “skpnav”> Skip Navigation</a></li>

48. 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 }

49. 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

50. 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.