Language, Reading Order, and Hidden Content

The document’s source order is important. Screen readers and keyboard navigation generally follow the DOM order, while CSS can rearrange elements visually. If the visual order and reading order differ significantly, people can become disoriented.

Keep the HTML order aligned with the order in which the information should be understood. Use CSS for responsive layout, but test the page at different widths and with keyboard navigation.

Set the page language on the root element and mark a passage in another language when it changes pronunciation or interpretation:

<html lang="en">
  <body>
    <p>The greeting is <span lang="hi">नमस्ते</span>.</p>
  </body>
</html>

The hidden attribute removes content from normal presentation and the accessibility tree. aria-hidden="true" hides content from assistive technology but does not visually hide it or necessarily remove it from keyboard interaction. Do not use it on a focusable control or on an ancestor of focusable controls unless the interaction has been handled correctly.

Read the page without CSS, tab through interactive elements, and inspect the language and heading structure. These checks often reveal issues that are difficult to spot in a polished screenshot.