Preserving correct reading order

This video explains how inserting dynamic content can affect logical reading and focus order. Preserving correct reading order

Transcript

Hi, I’m Gosia from Nomensa and today I’d like to show you how inserting dynamic content into pages can affect meaningful sequence and focus order.

Sometimes page content is added or shown dynamically, as a result of a user action. Such content can include tooltips, date pickers, and expandable menus. Let’s have a look at a sample Web page. [Fragment of a “FAQs” page is shown. Under “How can I pay?” heading the following text is displayed: “We accept the following payment methods: – direct debit – cheques – credit cards.” Next to the “credit card” phrase there’s a small round button with a question mark.]

On this page, when the user selects a question mark button, some additional information is displayed underneath it. [The user clicks on the button. A box with extra information is displayed directly underneath “credit cards” list item. This box includes the following information: “Please note that we only accept Visa and Mastercard”. “Visa” and “Mastercard” are links.] Visually, this new content appears straight after the button. However, if we look at the same page displayed in the code order, we can see that this additional content was actually inserted into the Document Object Model at the bottom of the page, after the footer, and then repositioned using CSS. [The user selects “Linearize page” option from the web developer toolbar in the browser window. The page is now shown in source code order. The box with additional information is not displayed underneath “credit card” phrase anymore – when user scrolls the page, the box can be seen after the footer.]

Although it doesn’t really affect sighted mouse users, it can cause problems for keyboard users and people using assistive technologies, such as screen readers. The reading order in a screen reader is based on the order of the HTML elements in the DOM. That’s why screen reader users will be unlikely to notice that new content was added at the bottom of the page, and they may assume that the “show more information” button simply didn’t work. [The “linearize page” option is disabled. The page is shown in the usual order.] This also causes problems to sighted keyboard users, as the focus order is not correct. When the user selects the “show more information” button, the links within this content should be the next elements to receive focus. However, as they’ve been placed after the footer, they are actually the last elements on this page to receive keyboard focus. [User tabs through page content. The focus goes first to a link displayed below the links within the “additional information” box, then to left column with submenu, then to links within the footer, and then finally to links within “additional information” box] Let’s have a look at this page again. This time the extra information has been added to the page straight after the “show more information” button. As a result, both the reading order in a screen reader and the tab order are now correct. [User tabs through page content again. This time focus moves first to links within the “additional information” box, and then to the content displayed below.]

That’s why it’s important to insert dynamic content into the page immediately following its trigger element. In that way, the new content becomes the next element in both the tab order and the reading order in a screen reader.