In this document I will discuss best practices for making graphic elements accessible from a visual perspective. Please also refer to the ‘Image Accessibility Best Practices’ guide for details on Alt text accessibility.
Colour
Information conveyed by colour must be accompanied by a ‘programmatically discernible’ alternative text (alt text); what this means is the (alt) text needs to convey the same information to those who use screen readers as to those who can rely on colour distinctions. Therefore the use of colour should only be used to distinguish user interface/UI-elements or links from other text if there is a colour contrast of at least 3:1. In addition links require an additional underline or [ box ] outline when a user hovers over the link.
Contrast
Text that is smaller than 18-point regular font or 14-point bold font needs to have a contrast ratio with the background of 7 to 1. Larger fonts require a ratio of 4.5 to 1. If large fonts are used on images, then a contrast ratio of 3 to 1 is needed with the background.
Areas on an image that have an activation (where the mouse pointer can activate and click) needs to have a minimum visual contrast of 3 to 1 with the adjacent background.
If an image is used on the web it needs to be compatible with Windows High Contrast Mode and must not have any features that override compatibility.
Visual Layout
If blocks of content are used, they must be separated visually and be distinct from each other. One could consider using margins, or padding. Layouts should have a single visual focus, with the design drawing attention to the intended area of focus. Labels should be kept close to the points of activation/control.
Target Size
Actionable elements need to be a minimum of 44 pixels by 44 pixels. A margin of at least 6 pixels of inactive space should be implemented around all actionable elements of the visual content.
Reading Order and Focus Order
Logical and intuitive reading and navigation order of elements in focus need to be implemented. Consider using a screen reader to test how visually impaired users engage with content.
Typography
On all visuals Serif fonts must be used. Sans serif fonts cannot be used as they can cause user confusion; examples: the upper case I (as in Index) and the lower case L (as in Literacy).
Paragraph and line spacing need to be set at a minimum of 1.5. There should be no more than 80 characters per line in any one section, and no more than 40 characters (Japanese, Chinese or Korean), in any one line.
The text must never be fully justified and should be developed in such a way as to permit full user customization.
Hidden Content and CSS-Generated Content
Content that is hidden or inactive for sighted viewers must also be hidden and inactive for screen reader users, until it becomes available for both user types, ensuring that the experience is the same for both groups.
The use of CSS-generated content should be avoided.