About CIA


Section 4. Content Organization and Navigation

Accessibility Score Sheet Questions

4.1    Are appropriate text and code labels included to allow quick orientation and movement between pages and sections?

 4.2    Is content organized when stylesheets are turned off?

 4.3    Can the user skip navigation functions/sidebar and go straight to the content?

 4.4    Is the user informed if the location of the focus changes unexpectedly?

 4.5    Is the user informed when content changes dynamically?

 4.6    Are tables used appropriately, clearly organized, and labeled?

 4.7    If Frames are used, are they labeled with the title attribute?


Organizing and displaying content, alerting users when content changes, and facilitating navigation between content supports use with assistive technology. Rationale behind specific standards are below, but the key point is that users with assistive technology have to be able to access content, understand it in context, and know when it changes. Most assistive technology interacts with content in a linear fashion and only interacts with a small amount of content at a time so creating well organized, clearly labeled groups of information facilitates use.

Heading tags and links are important navigation tools in screen readers, which allow the user to bring up an ordered list of each and skip directly to that header or ink. Every web site and web application should ensure that H1 through H3 are used in a logical structure that reflects the content organization. Groups of information or sections of an application should be labeled with an appropriate header tag to facilitate moving between those sections with a screen reader. All links should be placed on text (or alt text) that will tell the user where the link goes. If Click Here is the text encompassed by each link, then the screen reader will display a list of links that all say “Click Here.”

Cascading Style Sheets (CSS) are not supported by all assistive technology and user-defined style sheets can enable users to define specific viewing preferences to accommodate their disability. For instance, users with low vision may create their own style sheet so that, regardless of the web pages they visit, all text is displayed in an extra-large font with white characters on a black background. For good access, therefore, it is critical that designers ensure that their web pages and applications do not require a specific style sheet.

A method for skipping navigation links and accessing content directly should be provided. In addition, when the focus or content changes dynamically, the application needs to notify the user and facilitate moving from section to section within the application.

Test Approach

1a. Start by visually inspecting the interface to see if content is grouped and groups are clearly labeled.

1b. Client applications: With JAWS turned ON, make sure the organization makes sense as JAWS reads through the page.

Web applications: View the heading structure using JAWS (INSERT+F6) or an accessibility toolbar (Navigation>Headings and Navigation>Title in the FF Accessibility Toolbar).

  • Make sure the header tags are used logically and correctly.
  • The main page title should be H1, primary sections H2, subsections H3. JAWS does not always read below H3 and there is rarely a need to go below this heading level. There should only be one H1 tag.

Test Regions with JAWS on (Insert-Ctrl-R) and read the page title (Insert-T)

2. Question 4.2 is N/A for client applications. For web applications, use an accessibility toolbar or other means to disable styles, view text only, or apply a high contrast style. Examine the content. Is it still presented in an understandable order and grouping? It does not need to be identical, but all the information should be present and make sense when read together.

3. With JAWS turned OFF, hit the tab key until you are a few tab stops into the application.

  • Is there a link to skip directly to the main content?
  • Is the link visible when the focus is on it?

Note: Some applications have no repetitive content at the top of the page to skip and in this case no skip link is needed.

4. Ask the developers if the application ever automatically takes or moves the focus. Also, keep an eye out for this in your other testing.

If the answer is yes, then with JAWS turned on, ensure the user is notified when the focus is moved.

Note: In general, it is best to avoid moving the focus automatically.

5. Ask the developer if any content changes dynamically (email updates, etc.), without the user initiating the change.

If the answer is yes, then with JAWS turned on ensure the user is notified when the content is updated.

6. This only applies if tables are used. Use an accessibility toolbar and JAWS to evaluate the page.

  • If tables are used for layout purposes, there should be no title, row, or column headers and JAWS shouldn’t read the table, columns or headers.
  • Data tables should be identified as a table and should have column and row headers. Tables should be simplified as much as possible.
  • To test with JAWS, use INSERT+Num Pad Plus to turn on the virtual cursor. Then use T to move to the next table, CTRL+INSERT+T to list tables, CTRL+ALT+Arrow Keys to move around. To test with the accessibility toolbar, Navigation>Data Tables and Styles>Tables.

7. Only applies to web pages with Frames. Note that iFrames are accessibility neutral and do not apply here. Examine errors from the accessibility toolbar (Navigation>Frames) and visually inspect the source to ensure frames include the title attribute.

Development Techniques

  • Use external style sheets.
  • Group related data and headings both visually and within the code.
  • Provide text equivalents for any image or text generated by style sheets that conveys content (e.g. via the background-image, list-style, or content properties).
  • Use header tags appropriately and ensure they include a visual indication of the different levels. Heading tags 1-3 should be used in every application to facilitate navigation.
  • Ensure important content appears in the document object. Text generated by style sheets is not part of the document source and will not be available to assistive technologies that access content through the Document Object Model Level 1 (DOM1).
  • When CSS positioning is used to create tabular effects, consider using a TABLE element to create the same effect. If a rule (e.g. the HR element) is used to indicate structure, make the document readable without style sheets by indicating the structure in a non-visual way as well. (e.g. by using structural markup).
  • For background and additional information on how accessibility is affected by style sheets, see the W3C’s CSS Techniques for Web Content Accessibility Guidelines. These guidelines describe in detail how style sheets might be used to create accessible pages.
  • Place a link at the top left of the page or attach a link at the top left of the page to an unimportant image. The target of the image link is the beginning of the page’s main content. See www.webaim.org for an elegant skip link design.
  • Identify regions that dynamically change as alive regions using ARIA (aria-live=”off”) and assign a value that makes sense for the content’s importance (See WAI-ARIA — http://www.w3.org/WAI/intro/aria for more information):
    • Off- tells the screen reader to not announce the update. If/when the screen reader user encounters the updated content, it will be read at that time. This would be used for non-important or irrelevant content updates.
    • Polite - notifies the user of the content change as soon as he/she is done with the current task. This might take the form of a beep or an audio indication of the update. The user can then choose to directly jump to the updated content. This value would be the most common for content updates, especially for things like status notification, weather or stock updates, chat messages, etc.
    • Assertive – user being alerted to the content change immediately or as soon as possible. Assertive would be used for important updates, such as error messages.
    • Rude - reserved for the most critical of updates. It would immediately inform the user of the update and possibly set focus immediately to the updated content.
  • In rich web applications, include the following ARIA roles. These are included in the html as role=”” for example: <div id=”maincontent” role=”main”> . They allow assistive technology to navigate to key areas of the web application using keyboard commands (See WAI-ARIA — http://www.w3.org/WAI/intro/aria for more information):
    • Navigation – The area that contains the navigation links for the document or web site.
    • Main – The main or central content of the document.
    • Search – This section contains the search functionality for the site.
    • Contentinfo - Informational child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on. Use this for classification information.

Posted: Jan 07, 2016 12:41 PM
Last Updated: Jan 07, 2016 12:41 PM