Consistent components should be used

Components should be communicated consistently regardless of software or sense that is used to perceive the content. The visual display should allow users to predict where to find information and how to use it. Consistent and logical layouts will help sighted and non-sighted touch screen users predict where they should touch in order to perform a task.

To help users orientate themselves within content, navigational aids should be provided such as back buttons, arrows, next and previous buttons. Back buttons should always move the user back to the previous step and act like a breadcrumb trail. Next and Previous buttons could be used in addition to simply scrolling left or right to perform the same action. Providing multiple ways to navigate is always helpful especially when scrolling left/right or up/down might not be as discoverable as explicit links to carry out the same function.

Navigation should also be clear; the visual appearance of a control, object or element should inform the user how to interact with it. For example do not use links that are styled to look like buttons as this can be confusing for users of assistive technology such as speech input or screen readers.

Equally describing gestures in an alternative, tooltip, or hint should be avoided as the gesture or action might be different for assistive technology users than users with no assistive technology.

Tip

Where appropriate it’s a good idea to provide two ways to complete the same action on touch devices. For example you might be able to tap to delete an item as well as swipe to delete an item. This means users who have trouble using certain gestures have a fallback to other gestures. It also accommodates different expectations on how to interact with elements.

Additionally, always use common gestures for commonly used design patterns:

• Slideshows and carousels should support horizontal scrolling or swipe gestures
• Toggle and slider elements can be dragged, and they fully support touch gestures as a fallback
• Scrolling elements support native (inertia) scrolling

HTML

Use visual styling to indicate that an item is actionable. Links should be different from static text for example a different font weight, outline, or some other visual styling that doesn't rely on color alone. Use of standard anchor elements without turning off underlining will automatically provide this for links however where there are many links on a page or long links this can introduce legibility issues on small screens.

HTML Example

<a href="/..."> Next story</a>
<button>Next story</button>   

HTML Failure

<div onclick="openStory();"> Next story </div>  

Testing

Recommended tool/method: Screen Reader / Manual

1. Activate a screen reader
2. Navigate through actionable items
3. Verify that the visual appearance of the screen and control, elements, and objects indicate their purpose and action status
4. Verify that the purpose of elements, objects, and control is announced