Accessibility
      Back to home
      1. PageTiger User Guide
      2. Creating a document
      3. Accessibility

      Accessibility - Best practice essentials

      Essential best practices to help you begin creating accessible document designs.

      Colour

      • Ensure there is enough contrast between text and background colour.
      • Don’t rely on colour alone to convey important information, as people with colour blindness may not perceive the colours as intended.
      • Avoid using very bright or clashing colours, as they can cause eye strain or be difficult to read, especially those with visual impairments or sensitive to bright light.
      • When placing text over images or using coloured backgrounds, ensure the text remains legible and stands out.
      • Avoid using too many colours.

      WebAIM Contrast Checker is a popular tool for evaluating the colour contrast ratio between two colours.

      Writing style

      • Always write with accessibility in mind by using short, simple sentences.
      • Use plain language, and avoid jargon and abbreviations.
      • Break content into small paragraphs with white space for easier reading.
      • Make sure your key message is at the beginning of each section or paragraph.
      • Use descriptive text to explain the purpose of a button rather than vague language like "click here'.
      • Avoid writing in all caps - this can be can be difficult to read as it reduces the visual distinction between letters. 

      Text Formatting

      • Use a Story panel for any Headings, and ensure a Text panel is used only for body text.
        • Story panels use H2 for Headline, Paragraph for Strapline and Paragraph for Body.
        • Text panels use Paragraph for Body.
      • Avoid underlined/bold/italic text, as this can be difficult for dyslexic readers.
      • Most screen readers don't announce bold or italic text, so any emphasis is lost on a screen reader, a underlined text can be mistaken for a link.
      • Avoid using a font that is too small to read - consider using interactivity, such as a More Information pop-up box, if you would like to add more content.
      • Ensure there is suitable spacing between lines, as tight line spacing can cause lines to crowd together, making it harder for users to distinguish between them.

      • Ensure there is plenty of white space between paragraphs, headings, and sections. This creates a cleaner, less cluttered appearance and improves readability.

      • Add adequate margins around content to avoid the text being too close to the edge of a panel or page.

      Text Fonts

      • Accessible fonts should be easy to see, read and understand for everyone.  
      • Avoid decorative or overly complex fonts that might be hard to read.
      • Use standard web-safe fonts that are widely supported across devices and platforms - suggestions include Roboto, Open Sans, Lato, Nunito/Nunito Sans, Merriweather, Source Sans Pro and Inter. All suggest fonts are available from GoogleFonts.
      • Stick to a small set of font families for consistency and readability. Don't mix too many different fonts in one page.

      Images

      • Avoid images that include lots of text, as this won't be read out by screen readers.
      • If text in an image is necessary, ensure that the font is legible, has enough contrast, and is accompanied by alt text describing the message.
      • Include alt text for images:
        • aim for 125 characters or less.
        • describe the content of the image without being too wordy.
        • avoid redundant phrases like "image of" or "picture of" as screen readers already know it's an image.
      Purpose     Recommended Length Notes
      Informative images (e.g. icons, product photos) Less 125 characters Clear and concise is best
      Decorative images  0 Set to be hidden from screen readers
      Complex images (e.g. charts, infographics) < 125 characters to summarise the image + detailed description elsewhere Add a more information module with full detail
      Alternatives for diagrams with heavy text
      • Provide text outside the image
        If a diagram contains a lot of text, make sure the same content is available in an accessible format outside the image. For example, add a Story panel below the image, or provide a More Info pop-up with the full text.
      • Use alt text wisely
        Alt text shouldn’t attempt to capture every detail from the diagram. Instead, summarise the purpose of the image and direct readers to the full description.
        For example: “Diagram showing the stages of the course workflow. Full text description follows.”
      • Avoid overwhelming learners
        Diagrams with lots of text can be hard to process for all users, not just those using assistive technologies. Consider moving some of the content into the surrounding page. That way, the diagram serves mainly as a visual overview or quick reference.

      Design

      Design isn't just about aesthetics - it's about creating an experience that’s usable and accessible for all users.

      • Whitespace (or negative space) is just as important as the content itself, as it helps to improve readability, navigation, and the overall visual appeal of your design.
      • Ensure spacing is consistent in your design, such as margins, padding, and line spacing—this helps to create a balanced design and makes content easier to digest.
      • Ensure each piece of interactivity is spaced far enough apart to avoid accidental clicks.
      • Position content in a way that aligns with natural reading patterns - most users read left to right and top to bottom, so place key your content accordingly.
      • Place important call-to-action buttons toward the centre or bottom of the page to catch users’ attention as they reach the end of a section.
      • Use fixed navigation that remains visible.
      • Consider using a menu to help users navigate.