Screen readers read page content in a linear order, which is defined by the order that content appears in the source code (the Document Object Model) at a given time. Sometimes, when visual positioning is used to change the linear order for display purposes, the logical order is lost when read by a screen reader. This can affect both blind screen-reader users and sighted people with reading difficulties who are listening to content being read.
- Make sure that content is announced in a logical order. Use CSS to position content, rather than layout tables. Be aware of the potential effects on reading flow when using CSS to position content in a location that’s significantly different from where it appears in the content order. Use a DOM inspection tool to check the rendered code order, especially when the content is dynamically updated (see Tools).
- Visually examine the content order of the page, then listen to the page as it’s read by a screen reader. Does the page’s content order make sense when read aloud?