Standards and best practices

Accessibility best practices

Studio 24 websites should meet WCAG 2.1 level AA as a minimum.

Use the best practices outlined here as a guide for checking your work, prior to using tools to test your code for accessibility issues.

Semantics and structure

  • Use the correct HTML elements
  • Use a logical source order:
    • The page must make sense without CSS
    • Don't surprise users by using CSS to make changes to apparent source order, e.g. with floats and absolutely-positioned elements. Flexbox and CSS Grid are particularly vulnerable to apparent source order surprises; take extra care when using them.
  • Declare an appropriate language attribute on the <html> element
  • Use the lang attribute on HTML elements to indicate when there is a change of language
  • Provide a descriptive <title> element on each page:
    • Give the name of the page and the name of the website
    • If page content is reloaded, e.g. because a user performed a search or because of pagination, the <title> must update to reflect the change:
      <title>Search results for [Search term] (page 3/7) - [Site name]</title>
  • Use appropriate HTML landmarks:
    • There must only be one <main> element on a web page, and it should hold all of the primary page content
    • If there is more than one instance of a landmark region, e.g. multiple <nav> elements, use a labelling technique to distinguish between them
  • Use headings to define the structure of your document:
    • Use a single H1 heading
    • Thereafter use an appropriate heading level for each content section
    • Do not skip heading levels when moving from a lower to a higher number; i.e H2 > H3 > H4, not H2 > H4.
    • See our recommended tools for checking heading hierarchy
  • Use buttons and links appropriately:
    • Button elements are for triggering an action, e.g. submitting information, closing a modal dialog box, toggling hidden content
    • Links are for navigation, whether that's moving to another page or to a specific area of the current page. Always include the href attribute with a valid destination.

Content

  • Use descriptive link text that makes sense out of context - avoid generic phrases like "click here" or "more details". The Readability Guidelines site provides more guidance for good link text.
  • Avoid opening links in new tabs/windows. If you absolutely must do it, warn the user in the link text that it will open in a new window, and for security reasons, be sure to add the rel="noopener noreferrer" attribute to the link.
  • Use tables correctly:
    • Do not use tables for layout
    • Label data tables using the <caption> element (which can contain a heading element)
    • Markup the column and/or row header cells with the <th> element, not the <td> element
    • In simple tables use the scope attribute with a value of col or row on header cells to associate them with an entire column or row of data cells
  • Whenever an <iframe> is included on the page, it must use the title attribute to provide a unique and brief description of its content.

Forms

  • Associate all form controls with appropriate labels
  • Use the <fieldset> and <legend> elements (or the <optgroup> element with the <select> element) to group related controls
  • Placeholders are problematic, so avoid using the placeholder attribute, especially for providing any meaningful instructions. Do not replace a label with a placeholder.
  • Use the autocomplete attribute, where appropriate, to help people fill in forms quickly
  • Well designed forms usually avoid optional fields (one way is with branching questions). This means optional fields should be rare, and we want to highlight them to people:
    • Add the required attribute to mandatory input fields (or aria-required="true" if for some reason you have to use a non-native element as an input)
    • Highlight optional fields only, by adding (optional) to the end of the visible label text for non-mandatory fields

Media

  • Always include the alt attribute on the <img> element and check our advice about alternative text
  • Audio and video elements must be accessible, which could require providing one or more of the following: captions, transcripts and audio descriptions. Check the Web Accessibility Initiative's guide to planning audio and video media for detailed advice.
  • Do not rely on automated captions.

SVG

  • Include width and height attributes for the <svg> element, with sensible numeric values, to stop it from expanding to fill the whole page if the CSS doesn't load
  • Check the SVG guidance in Amplify for how to accessibly markup the <svg> element depending on context (decorative, informative, inside a control)
  • For SVG icons, favour using the currentColor attribute and providing a colour value in the CSS, rather than specifying colour values for fills, strokes and paths within the SVG markup. This will help make them visible in Windows High Contrast Mode/Forced Colors Mode. Does not apply to SVG logos, illustrations or charts.

Colour

  • Check that colour combinations meet the minimum contrast requirements using any of our recommended tools:
    • Text and images of text must have a colour contrast ratio of at least 4.5:1
    • Non-text content such as user-interface components (including form input borders), state indicators (e.g. focus, hover, selected, pressed, checked, visited/unvisited, and expanded/collapsed) and graphical items (e.g. charts and non-decorative icons) must have a colour contrast ratio of at least 3:1
    • The ideal contrast range is 7:1 - 15:1. Higher contrast can be triggering for some people, so avoid combining pure black with pure white.
  • Do not rely solely on colour to convey information, indicate an action, prompt a response or distinguish a visual element. 1 in 12 men are affected by some form of colour blindness, so provide an additional visual cue that is not linked to colour, such as a border, icon, pattern or legend.

Zoom

  • Do not use the meta viewport to disable page zoom on mobile devices
  • A web page must remain functional when only the text is magnified up to 200% of its initial font size. To guarantee content readability:
    • Use relative units - rem or em - for font-size and for managing space (margin and padding)
    • Use a number without units for line-height
    • Avoid defining a fixed height on elements likely to contain text, particularly form fields
    • Be careful when using absolute positioning - check for unwanted content overlaps

Interactivity

  • Make sure controls (e.g. links, buttons, form inputs) are large enough for people to easily access them. The minimum target size is 24 by 24 CSS pixels, but we generally aim for 44 by 44.
  • Leave enough space around controls so that they don't overlap with other targets
  • Make sure users can interact with your page using just the keyboard:
    • Before checking keyboard accessibility, make sure to enable support for tab key navigation in desktop Safari (this setting is not enabled by default)
    • Whenever the mouse can be used to interact with a component, the same must also be true for the keyboard
    • Ensure that keyboard focus is visible and that the focus order is logical
    • Make sure your page does not contain any keyboard traps. Focus must never remain blocked on an element without a way out and must not loop in zone on the page without a way out.
    • Make sure that mouse and keyboard interactions also work on touch screens (and vice versa)
    • Provide skip links to bypass repetitive content, such as the contents of the <header> element
  • Let the user pause, stop, or hide content that moves, blinks, scrolls, or automatically updates
  • Operating systems allow users to indicate that they prefer reduced motion. Animations must respect the user's setting via the prefers-reduced-motion media query.