4. Sensible Reading Order

Ensure that current screen reading software (screen readers) can read the media in a sensible order.
Note: In many cases, the reading order will be fine naturally. The techniques offered here explain how the reading order is established and how to make corrections if needed.

Rationale

Screen readers, browsers, and media players work together to try to provide a sensible reading order. However, sometimes the organization of the content results in a reading order that does not make sense. For example, commonly, features that are listed side-by-side might be read intermixed with each other, as in the table below:

an unstructured table (antipattern) showing 2 rows, 4 cells of content and listing their reading order

(read first) Yesterday's Schedule	(read second) Today's Schedule
(read third) 9 AM Breakfast – Lobby 12:00 Lunch – Picnic Area 5:00 Dinner – Cafeteria	(read fourth) 8 AM Breakfast – Cafeteria 12:30 Lunch – Ball Room 1 6:30 Dinner – Ball Room 2

This type of issue can be resolved without changing the visual layout. For example, in HTML, we restructure the underlying source code. In Flash, we indicate a reading order by numbering elements behind the scenes.

HTML & JavaScript

Layout Tables (legacy)

The reading order for a layout table begins with the first cell in the first row. In left-to-right languages, like English, this is the left-most cell in the top row. The cell adjacent to that cell is next, and so on. Then the second row is read in the same way. The image below shows the reading order for a layout table in a left-to-right language:

This is actually the source code order. If your content does not make logical sense following that order:

• Update to a CSS layout where the source code order is logical

  OR
• Reorganize the table layout so that the contents appear in a logical order in the source code. And, add role="presentation" to the opening <table> tag for layout tables to prevent screen readers from announcing the table structure.

CSS Layouts

The reading order follows the source code order in html and xhtml, regardless of how the items are arranged on the page using CSS. So, be sure to place elements and content in a logical reading order in the source code. This will also make your page readable when CSS positioning is over-ridden, turned off, or not available.

A common challenge occurs when Web developers wish to have a horizontal list of letters or numbers situated at the right side of the screen. Often they place these links in the source code backwards (for example, z through a), and then they use CSS float:right to float each item to the right. Since z is first, it floats all they way to the right and the rest of the letters follow, line up and look correct visually. Open example of incorrect use of float: right in a new window. However, the links are backwards for screen reader users and users who have turned off CSS. To resolve this, put the links in a-z order in a div element. Then, size the div so that it is only just large enough for the links. Finally, apply CSS float:right to the div. Open example of corrected use of float:right in a new window.

When JavaScript and/or CSS is used to Place Elements on the Page

As mentioned above, the reading order in HTML follows the source code order. So, if you use JavaScript to write source code, as you might do using document.write or by setting innerHTML, just add it in a location where it makes sense. Similarly, if elements are typed into the html source and then hidden or shown using JavaScript, as you might do using display:none and display:block, just place them in the source code according to the order in which the page should be read.

However, if you use Document Object Model coding to add elements to the page, the reading order might not follow the source code order. When objects are created and stored in variables, the order in which the code is written is not relevant. Instead, the structure of the Document Object Model itself will determine the reading order. Within each object in the Document Object Model, starting with the document object, child nodes are read in order from the first node to the last node (x.childNodes[0], x.childNodes[1] ... x.lastChild). As each child object is encountered, its children are read in a similar fashion, so that the tree is read as shown in the following example, where a div object contains the following child objects:

• some text ("a text node" in DOM terminology)
• a link
• an ordered list with three child list items
• an image with an alt attribute

So, when dynamically adding nodes to the document object model (e.g. appendChild, insertBefore, replaceChild) place them in a logical location in the document tree. For example, if a newly added paragraph should be read just before an ordered list with id L, you might add it as follows:

/* Create paragraph \*/ 
var newP = document.createElement("p");
/* Backslash below escapes line break \*/
var PText = document.createTextNode("This \
    list will help with the questions \
    you missed!");
newP.appendChild(PText);
/* Get existing ordered list  \*/
var existingL = document.getElementById("L");
/* Get parent of existing ordered list  \*/
var parentObj = existingL.parentNode 
/*Place new paragraph inside the parent of the ordered list, just before the ordered list  \*/
parentObj.insertBefore(newP, existingL);

And, in this example, a new paragraph is created and is placed just after an ordered list with id L:

/* Create paragraph \*/
var newP = document.createElement("p");
var PText = document.createTextNode("Good job with the list; now take a break!");
newP.appendChild(PText);
/* Get existing ordered list  \*/
var existingL = document.getElementById("L");
/* Get parent of existing ordered list  \*/
var parentObj = existingL.parentNode
/* Get the next sibling of the existing ordered list \*/
var nextS = existingL.nextSibling
/* don't worry if there's a chance nextS will be null - see below \*/
/* Place new paragraph inside the parent of the ordered list,  just after the ordered list  \*/
parentObj.insertBefore(newP, nextS);
/* if nextS is null, insertBefore will place newP at the end of parentObj, which would be just after the existing ordered list, in that case. \*/

Flash & Flex

Reading order in Flash and Flex is set according to an algorithm that chooses the next item to read based on which item is top-most and/or left-most. As such, if you have a purely vertical layout, the movie will be read from top to bottom. This is often a sensible reading order. Similarly, if you have a purely horizontal layout, the movie will be read from left to right, which again, is often a sensible reading order. However, when there are both vertical and horizontal elements, the reading order often becomes nonsensical and confusing. If you test your movie or application in JAWS and the reading order makes sense, there is nothing else that you need to do to meet PG 4. If you test your movie or application in JAWS and the reading order does not make sense, you will need to set the tabIndex for each item in your movie that should be read with a screen reader. TabIndex in Flash/Flex works differently from the tabindex property in HTML. In Flash/Flex, when correcting the reading order, you must set the tabIndex for every element that a screen reader should read, including buttons, links, form fields, other active element, and any text elements. You can set tabIndex in the accessibility panel in the Flash authoring tool. You can also set tabIndex using action script: myObject.tabIndex = 10; You can set tabIndex in MXML (Mark-up used in Flex Builder, Flex Server, or Flash Builder Applications): <mx:Text x="35" y="27" tabIndex="10" text="Welcome Students!" /> You can skip numbers when setting tabIndex. So, counting by 10 is wise, as it allows you to insert items in the middle of the reading order without renumbering every item. For example, if you realize you need a new item between the items with tabIndex 20 and 30, you can use a tabIndex of 25.

Additional Details

In order to set the reading order using tabIndex, you will need to avoid using static text. In addition, there are special considerations regarding instance names, off-screen elements, and embedded movies. See Adobe's Flash Reading Order Guide (new window) for additional details.

Common Misconception

Many developers worry that setting tabIndex this way will force keyboard access users to tab to each bit text while trying to reach a button, link or form control. This is true in HTML, but this is not the case in Flash and Flex. TabIndex does not change whether or not an element is treated as an active element for keyboard access.

Android Applications

The reading over is based on an algorithm which finds the nearest neighbor in a given direction. The reading order and focus order can be modified if it's not correct based on the layout of the page.

Reading order and focus order MUST follow a meaningful sequence for TalkBack and Keyboard users.

Controlling Reading and Focus Order for TalkBack Users with accessibilityTraversalBefore and nextFocusForward

android:accessibilityTraversalBefore="@id/button"
android:nextFocusForward="@+id/button"  

Grouping content into logical announcements

Android's developer docs on accessibility cover Grouping Content by creating natural groupings and organizing content into single announcements using android:focusable="true".

If users should treat a set of elements as a single unit of information, you can group these elements in a focusable container.

<RelativeLayout
android:id="@+id/song_data_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/song_title"
android:text="@string/song_title" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/singer"
android:layout_toRightOf="@id/song_title"
android:text="@string/singer" />
...
</RelativeLayout>

iOS Applications

The reading order in iOS applications is defined by the order in which the elements are added to the screen. In the individual, table or custom container views, the order is set by the order in which they are defined in the UIAccessibilityContainer protocol array. To change the reading order use accessibilityElementAtIndex, accessibilityElementCount and indexOfAccessibilityElement.

Grouping content to correct reading order with shouldGroupAccessibilityChildren

shouldGroupAccessibilityChildren is a Boolean value indicating whether VoiceOver should group together the elements that are children of the receiver, regardless of their positions on the screen.

For example, consider an app that shows items in vertical columns. Normally, VoiceOver would navigate through these items in horizontal rows. Setting the value of this property to true on the parent view of the items in the vertical columns causes VoiceOver to respect the app’s grouping and navigate them correctly.

PDF in Acrobat

The reading order in a PDF document is determined by the order of the tags in the tags tree.

If the reading order of the PDF document is not sensible, simply drag the tags for the elements into the desired order in Acrobat's tags panel. This will not affect the visual layout.

The location of the tags panel will vary depending on your version of Acrobat. In Acrobat 9 Pro, for example, you can find the panel at View > Navigation Panels > Tags.

Word

The reading order in a Word document is often fine and cannot be modified as it can in HTML or a PowerPoint presentation. In Word, content is read top-down, left-right. Tables are also read in this order which works well for typical data tables but can cause similar issues as HTML tables when used for layout.

To avoid empty paragraphs, use paragraph spacing and column breaks for fine control of text placement. This will reduce how often screen readers such as JAWS says blank when navigating with reading keys.

Text Boxes and Floating Images

Avoid using text boxes and floating images. Screen readers often do not read the content of text boxes and do not announce their presence. When using images, use "inline" text wrapping to ensure that they are read with the text in the correct order. Images that float in front of the text have the same issues as text boxes.

PowerPoint

The reading order in PowerPoint is determined by the order shown in the selection pane, and that order is from the bottom to the top of the list of elements. Use the buttons in the selection pane to arrange the items properly. Consider making this adjustment for each master slide layout of the template to reduce future work.

When adding any new elements to a slide, check the reading order to ensure that it presents the content in a way that makes sense. In PowerPoint 2007 and 2010, use the selection pane. The reading order is the order in which the shapes are listed starting with the bottom-most item to top.

In PowerPoint 2003, the reading order is determined using the outline panel and the drawing order. The outline panel provides an outline of the text content that appears on the slides. For content that does not appear in the outline panel, tab through the elements of the slide to verify the order. To change the order, right click and element and choose Order. This command is also available on the Drawing toolbar. As with all versions of PowerPoint, save time by ensuring that the order of the master slide layouts is correct before adding slides.

Testing HTML

Testing technique	Description
Tools	One usually doesn’t need a specialized tool to detect reading order problems. Listening with a screen reader (like JAWS or VoiceOver), or slowly highlighting the page from the top to the bottom will show reading order problems when they exist. But there are tools that you may prefer for analyzing HTML pages. You can use Linearize Page in the Miscellaneous menu of the Firefox Web Developer toolbar or Text-only with the Wave browser plugin. The reading order for a screen reader is the same as the order of the corresponding text in the source code. So in cases where you are puzzled by reading order for some specific section, you can always check the source code for the text in question, using the "view source" function of your browser or your favorite toolbar.
Output	Each of the suggested techniques displays the order in which the content will be read by a screen reader.
Analysis	Errors in this area are relatively rare. The situation to watch for is the use of layout tables in such a way that the reading order of the table is not the intended order of the page. An example would be a section for sign-in next to one for register, but coded as a table whose first column is the sign-in section and whose second column is the register section. In that case, the reading order would alternate between the sign-in and the register sections. Also, lists of numbered or lettered links aligned to the right are often in a backwards reading order.

Screen Reader Commands

AT	Read all from top of page	Read from current position to end of page	Stop Reading	Read Next Item / Read Previous Item
JAWS	Control Home then Insert Down Arrow	Insert Down Arrow	Control	Up or Down Arrow
VoiceOver on iOS (iPad, iPhone, iPod Touch)	Two finger swipe up	Two finger swipe down	Two finger single tap (repeat to resume)	Single finger swipe left or right
Window-Eyes	Control Shift W	Control Shift R	Control	Up or Down Arrow
NVDA	Page Up then NVDA Key Down Arrow	NVDA Key Down Arrow	Control	Up or Down Arrow

Testing Mobile Applications

Testing technique	Description
Tools	Listen to the screen using a screen reader.
Output	Content is read in a logical order by the screen reader.
Analysis	As you listen to the page, are the page components read in an order that makes sense. The reading order does not necessarily need to match the visual order but the content needs to be in a logical order that preserves the meaning and is not confusing to users who may not see the page.

Screen Reader Commands

AT	Read all from top of page	Read from current position to end of page	Stop Reading	Read Next Item / Read Previous Item
VoiceOver on iOS (iPad, iPhone, iPod Touch)	Two finger swipe up	Two finger swipe down	Two finger single tap (repeat to resume)	Single finger swipe left or right
Talkback on Android	Up then down or Open Global Context Menu (Down then right) then select Read from Top * may have changed *		Global Context Menu: Down then right then select Pause Feedback	Single finger swipe left or right

Testing PDF in Acrobat

Testing technique	Description
Tools	The tags order is used by screen readers to define reading order. Go to the Tags menu and in the navigation panel options menu select Highlight Content. Scroll through the tags and visually check the order. Acrobat Read Out Loud and reflow follow the reading order defined in the Order pane. Open TouchUp Reading Order (TURO) and select Show page content order. Then inspect the numbered order in the content. In Acrobat 9, TURO is under Advanced > Accessibility. In Acrobat 10, TURO is a tool on the toolbar labeled "Adjust Reading Order" and it is also under Tools > Accessibility. You can also use Read Out Loud, located on the View menu, and a screen reader to verify the order.
Output	Evaluate the order shown in the tags tree and order pane, and use a screen reader and Read Out Loud to verify that the content is read in a logical order.
Analysis	Document any instances where content is displayed or read in an order that does not make sense, or is not adjacent to related content. For example, figures and figure captions should be seen in reflow and read in close proximity to text that refers to them.

Related Guidelines

508 Web § 1194.22 (d)

Documents shall be organized so they are readable without requiring an associated style sheet.

WCAG 2.0 Level A - SC 1.3.2

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined