Page content

Text

  • 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

Links

  • Ensure links are recognisable – underlined is preferred.
  • Ensure links have :focus state 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-label has 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: <main> or <div role="main">
  • 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

Buttons

  • Ensure all buttons have a descriptive title or aria-label for users with screen readers

Images

  • 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

  • Tables have proper headers and column attributes

iFrames

  • When using iframes, it’s important that all content contained in them is accessible.
  • Ensure a title=" or name=" attribute has been specified that describes the content of the iframe

Target size

  • 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.