In order to ensure Arts websites are accessible for as many users as possible, it’s important to keep the following best practices in mind when updating and maintaining your site.
Alternative text
Alternative (alt) text is descriptive text which conveys the meaning and context of a visual item in a digital setting. It allows users who are not able to see images due to technological constraints or cognitive or visual impairments to understand the content and function of those images. It is also used by search engines to understand page content and purpose.
It is important to include Alt Text for all images to ensure they are accessible.
Real text over embedded text
It is beneficial to use real text instead of text embedded within graphics. Real text can be manipulated and modified by the user to increase legibility, while text that is included within an image is much less adaptable and can not be read using screen readers.
Wherever possible, include written text as live text on a page instead of an image. If you must include it as an image, ensure alt text is used.
Headings and font styles
Headings define the hierarchy of content on a page, and should always be used in order of most to least important, as they can also be used for navigation by browser plug-ins and assistive technologies.
Arts CMS provides four heading styles as well as a body and blockquote style. It’s important to always use these heading styles when building pages and updating content to ensure content hierarchy on pages is clear to all users.
Column width and line length
The length of a line of text has a significant impact on its legibility. Both long lines of text and lines of text that are very short are tiring for the eye to read. For printed text, an optimal line length is generally regarded as being anywhere from 45-75 characters, whereas Google’s Material Design guidelines recommends 40-60 characters for body text on screen.
For Arts CMS, we’ve used wider margins on text only pages to ensure that lines of body text fall between 60-65 characters per line on desktop devices. While this leads to increased white space on pages, it eases the reading experience by reducing strain on the eye.
Colour contrast
Sufficient colour contrast is important in ensuring websites are legible for all users. All Arts CMS websites use a colour palette that is WCAG AA accessible, meaning elements have enough contrast to stand out from their backgrounds.
Colour contrast can be tested at various sizes and scales using the WebAIM contrast checker tool. When using coloured elements on your site, always ensure there is sufficient contrast between the background and foreground so that the text or object is legible.
Additional resources
Making your websites more accessible for specific user groups increases usability for all user groups. If you’d like to learn more about usability best practices, we recommend the following resources.