Page layouts

Attaining a clear and logical page layout means working on the visual design, content, UX and also the code where the the instructions for assistive technologies are stored. There are extra benefits to a logical page structure that go beyond user experience. For example, search engines can use the data to better index the content of a page.

Benefits of a logical page layout

• Users with cognitive and learning disabilities can find and prioritise content on the page more easily.
• Screen reader users can skip to the main content directly and navigate to sections that are important to them.
• Keyboard users can browse pages and their sections more efficiently. (Otherwise, they have to press the tab key multiple times to navigate through all links in each section).
• People with visual impairments, including people with low vision, have better cues to help them with orientation and page content.
• Mobile users using “reader” or “reading” mode, will only show the main content of the page if it is marked up correctly.
• Certain browser plugins use landmark roles to jump to specific sections on a page.

Page layout considerations

• Design minimally and intentionally users can access the information they need, without reading long blocks of text.
• Make page elements easily located and identifiable including navigation menus, links and text sections.
• Create a clear content hierarchy – place items on the screen according to their relative level of importance. For example, important actions should be at the top or bottom of the screen (reachable with shortcuts). This hierarchy should be established through user testing.
• Implement a responsive / adaptive design – the layout should be resizable and flexible to a minimum of 320 pixels, with no horizontal scroll – so it can be viewed comfortably on a phone.