Content order

Must

Content order must be logical.

Description

All users benefit when content is logically ordered, in particular users of assistive technology that follows the flow of the page or screen.

Assistive technology such as screen readers will read through a page or screen in content order, regardless of the layout. However, expert users may jump between elements such as headings and move forward or backward from that point.

IOS

iOS sets reading order internally based upon screen layout. Developers must override accessibilityElementAtIndex, accessibilityElementCount and indexOfAccessibilityElement to change the order. This is the UIAccessibilityContainer informal protocol. All elements presented by it must be direct sub views of the main view, but it can contain other views that conform to the protocol and thus the developer can implement an ordering of elements of their own choice.

iOS example

 
view.accessibilityElements = @[moduleButton, followLabel, buttonContainer];                        
A custom view that lacks an implementation of {code}accessibilityElements{/code}.                        

ANDROID

The ordering of the focus movement is based on an algorithm which finds the nearest neighbour in a given direction. If the default algorithm does not match the intended behaviour explicit overrides can be by provided using XML attributes in the layout file:

  • nextFocusDown
  • nextFocusLeft
  • nextFocusRight
  • nextFocusUp

or use setNextFocusDownId() and setNextFocusRightId(), etc.

Android example

<EditText  
android:hint="@string/text_2_desc" 
android:nextFocusDown="@+id/edit3"
android:nextFocusUp="@+id/edit1"
android:nextFocusLeft="@+id/edit1" 
android:nextFocusRight="@+id/edit3" />                        

HTML

Screen reader software renders content in the order in which it appears in the document object model (DOM). Place content in the DOM in the correct order either through source code or inserting nodes in the DOM. If content must be presented different visually from the logical reading order then use CSS to change the position of the content.

HTML example

<div>Banner </div>
<div>
 <div style="float:left;">
  <div><h1>Main story</h1></div>
  <div>Story content</div>
 </div>
 <div style="float:right;">Supplementary info</div>
</div>                        
<div>Banner</div>
<div>
<div><h1>Main story</h1></div>
<div style="position:relative; left:50%;top:-50%;">Supplementary info</div>
<div>Story content</div>
</div>                        

TESTING

 

Procedures
  1. Activate a screen reader software.
  2. Navigate using standard commands for next and previous.
  3. Verify that the content is announced in a meaningful sequence.
Results

The following check is true:

  • The content is announced in a meaningful sequence.