Navigation

DO

1. Keep your navigation style and format consistent across all your site pages

2. Make actions easily reversible with obvious mechanisms to go back and return to your homepage

3. Use ‘skip to main content’ links

4. Ensure forms have descriptive labels and provide help messages for completion

5. Make interactive elements easy to identify, for example links should be recognisable by being buttons, arrows or another clear graphic device

6. Ensure all mouse functionality is also usable by keyboard

7. Use recognisable focus indicators (the parts of a page the tab button can be used to jump to) to allow navigation by keyboard-only users

8. Use instinctive norms – scrolling horizontally rather than vertically may be quirky but can also be confusing or distracting

DON'T

1. Use multiple layers of menu navigation

2. Allow keyboard focus to get trapped

3. Force people to remember items or actions from other pages – use prompts or reminders if required

Layout

Layout

DO

1. Use grids to design simple and consistent page layouts

2. Consider your content hierarchy. People don’t read in straight lines – their eyes are drawn to headers, buttons and moving objects

3. Ensure you’ve created and tested responsive design so your web pages display properly across different device sizes

DON'T

1. Put key information around the edges of large pages or screens – keep design within a central field of vision and use more steps / pages if necessary

2. Overuse headers, buttons or other similar items – if you try and make everything a priority, nothing is a priority

Functionality

Functionality

DO

1. Make text resizable up to 400% without any information being lost

2. Reduce the need for clicking by enabling autofill and using address finders

3. Make clickable areas at least 44x44px to avoid the need for precision

4. Give clickable sections at least 32px between each other to reduce touch errors for people using touch screens

5. Ensure all widgets and tools are usable by keyboard only, for example carousels and help tips should be able to be tabbed as well as clicked to display

6. Let people check their answers to longer forms or surveys before submitting and if possible allow them to save and come back to them another time

7. Be sure to include text that explains what will happen after a form is submitted to manage expectations

DON'T

1. Create functions that need more than one action or button to be used at once, like screenshotting or using sliders

2. Use pressure-sensitive touch

3. Create functions that need both dexterity and vision together (such as lining up something to click)

4. Require accurate spelling – enable autocorrect or provide suggestions where possible

5. Don’t include time-pressurised tasks unless necessary

Video and content

Video & audio content

DO

1. Provide play / pause and volume control buttons for video and audio content

2. Remove unnecessary flashy or noisy elements

3. Avoid distracting continuous movement

4. Use a Photosensitive Epilepsy Analysis Tool if using content with lots of flashing to assess whether it is suitable for all viewers, or ensure it doesn’t autoplay and has an adequate warning

Code and development

Code & development stage

DO

1. Test your design through a screen reader such as NVDA for Windows or Voiceover for Mac

2. Ensure your webpage’s language is set in its code so screen readers know how to read it

3. Structure content using HTML5 rather than relying on e.g. text size and placement for structure

4. Use proper heading structure to help with focus indicators

DON'T

1. Use tab index values of 1 or greater to change the default keyboard navigation order