Skip to content

Accessibility standards for websites

These standards help remove accessibility barriers for our web users. They are specific to the web experiences we design and build for our Sainsbury's brands.

On this page

Whether you’re part of a team designing web experiences or part of a team building web experiences, we encourage you to work together to deliver accessible products.

The following web standards are based on the Web Content Accessibility Guidelines (WCAG 2.1). We've taken the guidance from WCAG 2.1 and made it more specific to the kind of web experiences we design and build for our Sainsbury's brands.

For support making products accessible or to provide some feedback, get in touch with us.

Web standards for designing

Make sure to follow these standards by annotating your designs with relevant accessibility information before you hand them over to the team building your web experiences.

Things to check

1.1 Left align blocks of text

1.2 Use sentence case text

1.3 Don't use images of text

1.4 Check the colour contrast meets WCAG 2.1 AA

1.5 Don't convey information using only colour

1.6 Factor in large font settings into your designs

1.7 Make sure content is responsive at all breakpoints

Things to annotate

1.8 Give text alternatives for icons and images

1.9 Always provide a visible form field label

1.10 Communicate the intended reading and focus order

1.11 Communicate your content with headings h1 to h6

Web standards for developing

By following these standards when building for web, we can help deliver accessible web experiences for our users.

2.1 Use semantic content sectioning elements with correct ARIA roles

2.2 Structure content with nested heading elements

2.3 Announce errors, status changes and content updates

2.4 Make sure all elements have the correct roles, states and properties

2.5 Define the human language of the document

2.6 Don't remove visible focus states for focusable elements

2.7 All form fields must have an accessible name

2.8 All buttons and links must have an accessible name

2.9 All buttons links and controls must be keyboard accessible

2.10 Focusable elements should follow a logical reading order

2.11 Define font sizes and text container dimensions in relative units to support font scaling

2.12 Content can be presented at a width of 320 CSS pixels without horizontal scrolling

2.13 Provide correct autocomplete attributes for form fields

Get in touch

We’re on hand to answer any questions about web accessibility or help you with your next project.
Email
Microsoft Teams
Slack
© J Sainsbury plc 2024The digital assets and code included in these guidelines may only be used with the permission of, and for the benefit of, the J Sainsbury plc Group.
Privacy hub||Cookies policy||Feedback