- Ensure all copy on a website has appropriate text spacing, line-height and padding.
- Ensure full width text is not used unless the font size is sufficient to only have 90 characters on one line
- Users can resize text up to 200% without the layout or page breaking
Also see our typography section for more detail
- Ensure links are recognisable – underlined is preferred.
- Ensure links have
:focusstate and are styled correctly. For example: Solid focus colour for buttons / banners, border top and bottom for text links
- Check link content is useful and describes what a user will get if clicking on the link. If something descriptive can’t be used in the link text then ensure a descriptive
aria-labelhas been added. For example:
aria-label="telephone number 01392 383000"
- Ensure links tab in a logical order (use tab indexing if needed although good HTML structure should mean that this happens correctly without needing to define a tab index)
- Provide a ‘Skip to main content’ link that goes to the main content landmark. For example:
- Ensure the site doesn’t have any empty links. For example: a link with just an icon in will appear as empty. Some supporting text should also be available but can be hidden using text-intent or another similar alternative. Do not use display:none
- Check for redundant links
- Ensure all buttons have a descriptive title or aria-label for users with screen readers
- Use alt text that describes what’s in an image. For example “group photo of people outside smiling”
- Check header, footer, sidebar and fix any issues with images that are not in library.
- If the alt attribute is empty, ensure the image is purely decorative.
- Avoid using “Image of” or “Picture of” as the screen reader will notify the user that it’s an image.
- Also avoid using all caps as some screen readers will read each letter, i.e. W-A-R-N-I-N-G.
Media (Video / Audio)
- Ensure all video content includes subtitles
- Where reasonable, transcripts should be created to support audio and video content
- All video controls should be accessible by keyboard
- Tables have proper headers and column attributes
- When using iframes, it’s important that all content contained in them is accessible.
- Ensure a
name="attribute has been specified that describes the content of the iframe
- Any link/button or interface item that requires a click or press should be at least 44px by 44px. For example a button to close a modal.