Web Accessibility Information Site

Skip Left Navigation

Navigation Page

Accessible navigation is a vital part of making any website accessible. If the images and navigation on a website are accessible then many of the access barriers that blind and visually impaired users face when trying to use websites are broken down. Therefore this highlights the important role that accessible navigation can play in an accessible website.

A website can feature a number of various types of navigation including links, search boxes etc, the position of the sites navigation can also vary from website to website. There are a number of techniques that a web developer can use to help make their websites accessible to blind and visually impaired users these, are discussed in more detail on this page.

Skip Navigation

A skip navigation works in a similar way to a hyperlink, when clicked it allows the user to jump over a list of navigation links to a bookmark just above the beginning of the main content the main content of a page. If a skip navigation link is not included on a page then the user will have to listen to all of the links before they reach the main content. There maybe some users who want to listen to the links, so that they can select the link that they require. However other users may not want to listen to the links, for example regular visitors to a site who already know the list of links and are only interested in the main content of the page.

It is recommended that the skip navigation link be placed at the top of the page so that it is the first element of the page that is announced by a screen reader, the skip navigation link can be visible or invisible. An example of a skip navigation link that is written in HTML is given below.

However the web developer should be aware that the above method would only work successfully in Internet Explorer 4 or earlier. There is a bug in Internet Explorer 5 and 6 that means this skip navigation method will not work. Rather than skipping over the links to the main content the screen reader just begins reading from the start of the page in Internet Explorer 5 and Internet Explorer 6. Therefore a different method must be used in order for the skip navigation link to be able to work successfully in Internet Explorer 5 and 6. This method is very similar to the method above, with one major difference. The target of the link e.g. “Main” in the example above must be placed in some sort of element e.g. Span or Table in order to work correctly in Internet Explorer 5 and 6. An HTML source code example is given below.

Tab Index and Tab Order

A tab index provides a method of navigating around a site for a blind or visually impaired user. It can be used on almost all HTML tags. A tab index is used to specify the tab order of a web page. A tab index can aid accessibility because it allows a blind or visually impaired user to tab through the important elements on a page. A tab order can be created by assigning a number to each element on the page, each element will then be accessed in ascending order. So the element that is assigned the number 1 will always be first in the tab order. No page element can be assigned a 0 in the tab order, as a 0 is equivalent to a blank tab index. If two elements are assigned the same number in the tab order then the element that appears first in HTML source code will be announced first in the tab order.

It is recommended that the tab index have a logical tab order with the most important items at the beginning of the index. Ideally it should be used on all page elements to allow users to use the tab key to move between them in a logical order. Elements that could be included in a tab index are, a search box, a site map, an image or a set of navigational links etc.

The web developer should be aware that only Internet Explorer 4 or higher and Netscape Navigator 6 or higher supports tab indexes. An HTML source code example of the tab index for the tables page is given below.

Access Keys

Access keys are very similar to tab indexes as they can be applied to almost all HTML tags and they provide a method of navigation around a site for a blind or visually impaired user. Access keys allow a blind or visually impaired users to access an element on a web page directly using a keyboard shortcut. They can do this pressing the Alt key in Windows and the Apple key in Macs together with the access key and then they need to press enter. Using both a tab index and tab order along with access keys gives blind uses that use screen readers control over the order that they read a page.

It is recommended that access keys be used on the major “landmarks” of a page For example forms, tables and links. However it is recommended that only a small number of access keys be used on any page. If a large number of access keys are used then things may become difficult. If the web developer using access keys then they should provide a page telling users, which access keys apply to which links. On this site this information is contained in the Web Accessibility Policy page. Some of the more up-to-date versions of Jaws announce the access key for the page element automatically but not everybody has the most up-to-date screen reader, (it should be noted that other screen readers such as Windows-Eyes were not tested to see if they announced the access key for a page element).

The web developer should be aware that access keys have a number of problems. An access key requires at least to keystrokes in order to be executed. Some blind or partially sighted users may find this difficult. A developer must be careful not to select an access key that conflicts with Windows access keys when they are assigning an access key to an element on a page e.g. Alt+f opens a file in windows. Using one of the Windows shortcuts could lead to a very unexpected outcome for the blind or visually impaired user and in certain cases screen readers can overwrite the Windows shortcuts. The browser support for access keys is also very poor. At present only Internet Explorer 4 or higher supports access keys.

An HTML source code example of a set of links that includes an access key for each link is given below.

Dynamic Menu’s

Using Dynamic HTML menus (DHTML) for navigation is not recommended as DHTML uses device dependant JavaScript such as onmouseover, which can only be activated using a mouse. A blind and visually impaired user would be able to access the top level menu’s but would not be able to access the options available in those menu’s. This means that DHTML is completely inaccessible via the keyboard. They also create accessibility problems for partially users who use screen magnification software as they cannot be enlarged. If a DHTML navigation menu is used then it is recommended that an access alternative be provided.

One such alternative could be to put a hyperlink onto each available top level menu, this could then link to a page that contains a list of text links that are equivalent to those available in the DHTML menu, the Microsoft website uses this method. The Australian National Rugby League website uses a simile method, however instead of the link leading to a page that contains a list of equivalent links, it leads to the first page of the selected DHTML menu. A list of links equivalent to those available in the selected DHTML menu are then listed down the left-hand side of the page.

It has been recently discovered that it is possible to make DHTML menu’s accessible via the keyboard. However the disadvantage of this method is that the blind or visually impaired user has to tab through all of the links in all of the drop-down menu’s until they reach the link that they require. Although this method does make the DHTML menu accessible via the keyboard it is not very usable.

Links

It is recommended that all links within a website should be given a meaningful name which conveys to the user the destination of the link. Creating meaningfully named links also ensures that the links make sense both in the context of the page and out of context e.g. when a blind or visually impaired user uses their screen reader to display a list of links on a page. Link names such as “click here” or “learn more” are not recommended. Click here is not recommended because a blind or partially user is unlikely to be able to see where on the page they need to click. Similarly if they hear the word “learn more” then they are unlikely to know what they will “learn more” about.

Some web developers may choose to use images as links for navigation. If this is the case then each image needs to have an alt text describing the destination of the link. It is also recommended that an equivalent set of text links be provided on the same page. It is also recommended that a web developer provide a skip navigation link (discussed above). Therefore a blind or visually impaired user using a screen reader will have a method of skipping over the links on a page, so that they can reach the main content.

Site Maps

Having a site map on a web page makes the website easier to navigate for all users, because it allows all users to find the information that they are looking for within a website. Site maps also provide a method of visualising the website for all users as well as providing blind or visually impaired users with an alternative method of navigating the website. A site map is often a list of text links, which can be easily accessed by blind and visually impaired users.

It is recommended that the site map be easy to access therefore it is recommended that a link to the site map be placed on every page on the website (just as it is on this website). A site map can also provide business benefits as a well-designed site map may result in a website being placed higher in the search engines.

Right Navigation

If a web developer chooses to use right-hand navigation then it is considered very important that the web developer produces a logical tab order that includes skip navigation links.

The tab order of a page that uses right navigation is important because a screen reader always reads a page from left to right, therefore if a page uses right navigation it is likely to announce the main content before announcing the right navigation links. Although announcing main content before navigation is a popular method amongst blind and visually impaired uses it is not common, and as long as skip navigation links are used then a blind or visually impaired user using a screen reader can easily skip over the main content to ensure that the right navigation is announced before the main content.

A web developer may need to provide a skip navigation links that skips over the main content to the right navigation, then once the screen reader has finished announcing the right navigation links include another skip navigation links that takes the user to the main content on the page.

A far easier method for solving this problem would be to put the right navigation links of the page before the main content in the HTML source. A web developer needs to be aware that assistive technology such as a screen reader will announce elements in the order in which they appear in the HTML source code, not the order in which they appear on the screen.

Hierarchical Navigation

Hierarchical navigation is also known as breadcrums and “you are here” navigation. This is a techniques that is used quite heavily by Yahoo!. It is designed to tell a user where there are within a website or in Yahoo’s case a directory. The breadcrumb navigation that is used by Yahoo is simply a list of text links and therefore is often self-explanatory to a blind or visually impaired user who is using a screen reader, as the current page is always the page in the directory path that is not a link.

Hierarchical navigation systems can also be created using an image map, where some sort of highlighting is used to represent the page that the user is presently on. However using colour along to convey information can make such navigation inaccessible to blind or visually impaired users. Therefore a web developer needs to find another method (other than highlighting) to represent the current page.

The method that can be used to solve this problems is to create a image map that treats all the previous pages in the trail as links, while making the current page a non link so that it will display and be interpreted by a screen reader as plain text (therefore it works in a similar way to the breadcrumb navigation described above). Therefore it means that a screen reader can easily differentiate between links and plain text and can convey this information to the user. It may also assist a blind or visually impaired user if the web developer included an alt text on the image map “hop spot” that represents the current page saying “you are here” followed by the page name. Therefore a blind or visually impaired user would be absolutely certain about the page that they currently on. An HTML source code example of a non link is given below.

Multiple Navigation Bars

If a web page has more than one navigation bar (such as this one) then it is recommended that a skip navigation link be placed on each navigation bar, so that a blind or visually impaired user is able to skip all sets of navigational links on the page. However rather than going to the main content it is recommended that the skip navigation link goes to the next set of navigational links, because the link that a user requires maybe in another set navigational links. The next skip navigation link should either go to the next navigation bar (if there is one) or the main content (if there isn’t). An HTML source code example of how a skip navigation links can be used to navigate between multiple navigation bars is given below.

Search Boxes

It is recommended that a search box be placed in the top-left hand corner of a web page or somewhere near the top of the page, so that it is one of the first elements on the page that is announced by a screen reader. If a web developer has a set of links that appear before the search box then it is recommended that the web developer provide a skip navigation link that allows a blind or visually impaired user using a screen reader to skip over those links to the search box. What is not recommended is that a web developer use a skip navigation link to skip over the search box.

It is not recommended that the web developer place the search box on a separate page, but if this is the case then it is recommended that the link to the search page be included in the tab index of the page that links to the search facility. An HTML example of how a web developer can use a skip navigation link to skip to a search box is given below.

Frames

Frames are not recommended as a method of navigation for a website. However if a web developer develops a site that uses frames than there are methods that a web developer can use to make frame pages more accessible.

The web developer should ensure that include a NO FRAMES content, so that if a blind or visually impaired user has difficulty using the frames site this gives then an accessible alternative. The No Frames content should be equivalent to the content provided on the frames page.

In order for frames page to be anywhere near accessible to blind or visually impaired users using screen readers the web developer may use the TITLE element to convey the meaning of each of the frames on the page e.g. a banner, left navigation, main content, footer. If meaningful titles are used then this provides a blind or visually impaired user with information about the type of information that each frame contains. A blind or visually impaired user can then use this information to choose the frame that wish to access e.g. main content. An HTML source code example for the outline of a frames page with suitably named titles for each frame is given below.

Alternatively the web developer could use the FRAME elements in the main page, these point to the individual frame pages. These need to be given meaningful name and title attributes. An HTML source code example is given below.

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. A screen reader is likely to use the TITLE element of the individual frame pages while a talking browser is likely to use the title attribute. Therefore the web developer should ensure that both the name and title attributes are meaningfully named. Ideally they should be given the same name (as in the source code example), but they can be given different names if the web developer feels that this would be beneficial.

Reading Order

A web developer needs to be aware that a screen reader may not necessarily read elements as they appear on a web page to a sighted user. When reading a web page a screen reader reads the source code of the page. Therefore it announces elements on a page in the order that they appear in the source code. So if the left navigation appears after the main content in the source code, then it means that the screen reader will output the main content before outputting the left navigation. Therefore a web developer needs to ensure that the order that the screen reader outputs elements on the page is the same as the order in which the elements on the page appear to a sighted user.

A web developer can do this by testing there page with a screen reader, listening to the order in which page elements are outputted by the screen reader and then comparing the order with the order in which the page elements appear on to a sighted user. Alternatively the Wave testing tool can analyse the source code of a web page and show a web developer the order in which elements on there page is likely to be outputted by a screen reader.