Screenreaders and how they work (part 2)

How do users navigate and interact with web pages?

To help understand the reasons behind technical accessibility requirements, its worthwhile describing just a few of the strategies available to a screen reader user for navigating and interacting with web pages.

Tabbing:

Users can jump forwards or backwards, from one focusable control to the next using the TAB and Shift-TAB keys. Hyperlinks and form controls are always in the tab order, but for controls built from other HTML elements (e.g. <span>s and <div>s), these must be added to the tab order manually using tabindex.

Arrow keys, enter and space:

Arrow keys are used to interact with controls (e.g., a select dropdown or set of radio buttons); enter and space often activate buttons, links and other focusable controls.

Tables:

<caption>s and row and column headings (<th>s): Using a command key, users can jump directly from table to table in a webpage, and then navigate the rows and columns using arrow keys. If the table has a <caption>,it is announced when it receives screen reader focus; if the table has properly marked up row and column headers , they are announced while users navigate up and down rows and across columns.

Headings:

Users can navigate a hierarchical heading structure. For instance, users can move directly to the <h1> (which should head up the main content) when the page loads, or by jumping from one subsection to the next if they are headed by <h2>s. They can also access a list of headings, ordered in order of appearance, hierarchy or alphabetically, through which they can browse and move focus to any one directly.

ARIA landmark roles:

If ARIA landmark role attributes are used to mark headers, navigation, search widgets, main content and footers, users can jump from one block to the next.

Hyperlinks:

Users can jump from hyperlink to hyperlink, or bring up a list of hyperlinks, order them in a number of ways, and then move to or follow one of them.

<label>s and <fieldset>s

Likewise for form controls – users can jump sequentially through form controls, or bring up a list of labels, then order them in different ways, browse through them, choose one, and jump straight to that control. If a form control has an associated <legend> this is announced as context for each of the labels a <fieldset> contains.

Lists:

Jump to the beginning or end of lists with one command (<ul>, <ol>, and <dl>) or move to each list item in turn.

The implications? Use semantic markup

Reading through the short list of strategies above, it should be apparent that effective understanding content in, and navigation of, webpages relies heavily on semantic markup and structured content (headings, lists, labels, fieldsets, etc.). This is why it is important to always use appropriate semantic elements, and is a requirement of WCAG 2.

Remember, while semantically neutral markup may be styled using CSS to visually convey structure, this structure cannot be detected by screen readers – so this structural and semantic information is lost to their users. For example, all the following can be styled with CSS to visually convey structure and meaning, but screen reader users will miss out on this contextual and structural information.

Using <div>s for <fieldset>s,

<b>old or <strong> for headings or labels

<span>s with onclick events standing in for hyperlinks

a series of <span>s for a list

Further more, if semantic markup is used inappropriately, it can lead to screen reader users missing or misunderstanding page content, or perhaps skipping over what they assume is content they are not interested in. For example,
Using headings to embolden text instead of <strong>

Form controls with no <label>s

<label>s with no form controls

non hierarchical use of headings

buttons where a hyperlink would be more appropriate (e.g. for navigation links)

Taking all of the above into account, screen readers, like browsers, work most robustly and consistently when web pages are well crafted with semantic code.

Remember: One of the main foundations of accessibility is using semantic markup.