Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.
Accessibility overlaps with several areas, including inclusion, design for all, universal design, and addressing the digital divide.
Similarly, accessibility is related to user experience, usability, and user-centered design. One of the reasons to understand this is that the methodologies and techniques in user-centered design work well for addressing the needs of people with disabilities, and including them, in creating accessible websites and apps.
When using images, ensure you add descriptive ‘alt text’. This helps in two ways: if the viewer is using assistive technology such as a screen ready, or if the image doesn’t load properly. If the image is purely decorative, you can skip using alt text.
Remember: Use images to enhance, not to inform. Avoid using images that contain important text content.
Alt text can and should be added to web images, social media post images, and images in Word and PowerPoint documents.
<aside> <img src="/icons/new-alert_red.svg" alt="/icons/new-alert_red.svg" width="40px" />
Image captions are not alt text.
</aside>
Most content we make is digital, so images should be compressed and have small dimensions (maximum of 1920 pixels on the longest edge). This helps make images more accessible by being faster to load and less impactful to older devices or poor internet connections.
You can make images smaller by re-saving them at a smaller size on Canva (or an editor on your device), or by using an online tool such as ImageResizer.
<aside> <img src="/icons/new-alert_red.svg" alt="/icons/new-alert_red.svg" width="40px" />
Avoid uploading confidential materials to online image editors or resizers. Contact Josh R for resizing of confidential images.
</aside>
Keep all font sizes above 12pt (16px). For slide decks, you may want to increase the minimum to 20pt.
Try to keep lines of text less than 11-12 words long (on a single line). This helps with both visual accessibility and cognitive load. Generally this means making a text box/text area narrower rather than increasing font size.
Ensure you use our accessible brand colour combinations for all text and headings.
The ideal line height is 0.9 to 1.3.
Use paragraph spacing rather than extra returns to create space between sections of text.
Avoid using double spaces after a full stop.
Use headings in web content (website, Notion) and in Word/PowerPoint documents. These have built-in hierarchy functionality which is important for accessibility technology such as screen readers, keyboard or other device controls, and also SEO.
It is important that headings follow a logical order, so H2s (Heading 2) should be ‘children’ of H1s, and H3s should only be ‘children’ of H2s, for example. Conversely, H2s should not be nested as ‘children’ beneath a H3, and so on.
When creating a hyperlink on the web or in a Word/PowerPoint document, it is better to make it clear as to what it is rather than a generic ‘click here’.
<aside> <img src="/icons/thought-dialogue_green.svg" alt="/icons/thought-dialogue_green.svg" width="40px" />
Find out more about using our branded slides and accessible colour combinations.
</aside>
Our slide deck templates have some built-in resources to help with accessibility, and the text and image accessibility rules above are also important to consider for slides.
If a slide deck is going to have a lot of content, it is far more accessible and engaging to split the content over many slides rather than cramming the content into a few slides.
More slides with less text is better than fewer slides with lots of text. This helps reduce cognitive load and makes it easier to find or direct people to specific content later on.