Website content and focus order

When developing webpages you must make sure a webpage or application's content and focusable elements have a meaningful order. This helps people who use assistive technologies such as screen readers, speech input or keyboard only to understand the content and navigate it easily.

Content order

Content order, also known as reading order, is the order in which all content in a webpage is presented visually and in the Hyper Text Markup Language (HTML) code. This includes static content such as text and images as well as actionable elements such as links, form inputs, buttons and controls.   

Content order is important for people who use a screen reader or use their own style sheets because they read content in sequential order. For example, somebody listening to a webpage with a screen reader may listen to content as it appears in the HTML code. It's important related information, such as a heading and associated text or images, are grouped together in the code so they're read together. 

On the Scottish Government homepage, for example, the main heading is followed by the search, an image and text about the Scottish Government in the code. This follows a logical order. But if the search appeared in between the image and the paragraph of text, it would be illogical. 

Focus order

Focus order is the order in which actionable elements such as links, form inputs, buttons and controls can be accessed. These elements can be accessed via the keyboard or using other inputs such as speech, switch devices or touch screen gestures. You can use keyboard accessibility for techniques to ensure a meaningful focus order. 

Focus order is important for people who use a screen reader or only navigate using the keyboard. This is because they navigate elements in a sequential order using the TAB key to move to the next element and Shift+Tab to navigate in the reverse order.

Situations where focus order is particularly important is when related content is visually grouped in 2 columns. The focus order should sequentially move through each column from top to bottom and not right to left across the columns. 

Image example of the content in 2 columns. The tab order is highlighted for links 1 to 4 in the first column and links 5 to 8 in the second:

Creating a logical content and focus order

The best way to ensure a logical content and focus order is to match the code and the visual order.

This means coding headings, text, forms and other content in the order in which you would expect to read it. It also involves grouping related content in the code, for example, sections in a form. 

Occasionally it might not be possible to code content to match the visual order. In which case, keyboard focus will need to be managed so that it makes sense. For example, if a button opens a dialog, the focus must be moved to the first item in the dialog. When the dialog is closed, the focus should return to the button that opened it or the next step in the journey.

Tips

Follow these tips to improve user experience:

• collaborate with designers to ensure the designs can be coded in a way that preserves the logical meaning of the page
• test the focus order of a page by tabbing through the page using the TAB key

Further information

• The Design System has guidance on using focus states to make it clear to a user which part of a webpage they're on.