Accessibility in visual design

This page features a list of visual design aspects that affect accessibility.

Page content layout

• Are the contents of the page divided into clear, logical wholes that can be presented with HTML structure elements?
• Is the order of the contents of the page logical and visually easy to perceive on differently sized screens?
• Is the distance between elements sufficient to separate them from one another?
• Is the distance between elements that belong together sufficiently short to indicate that the contents belong together?
• Are content elements of different levels of meaning visually distinguishable as well?
• Does the placement of elements conform to common and conventional design solutions?
• Is the placement of elements consistent on all pages?

Colours and contrasts

• Are the colours used clear and distinguishable (from one another)?
• The colours are not glaringly intense.
• The colours can be distinguished from one another in different forms of colour blindness as well.
• The contrast between foreground and background colours is sufficient.
• Links are separated from the rest of the text visually as well, not merely with colour.
• The active element (focus) is visually highlighted when the website is used with a keyboard.
• No information is indicated with colour alone.

Typography

• The font used is clear and easy to read.
• The font size used is large enough.
• The row length of text paragraphs must not exceed 80 characters.
• The leading is at least 1.5 times the font size.
• The paragraph spacing is at least twice the font size – the contrast between the text and the background colours is at least 4.5 for normal text and 3 for large text.
• The text is aligned to the left side – all HTML title levels are taken into account in the design.

Images and icons

• If an image has a caption text, it is presented clearly in connection with the image.
• Any decorative images and icons are useful and informative.
• The images selected serve their purpose and are functional in terms of both their content and their colour scheme (for colour blind people as well, if possible).

Forms

• All form fields have a title text that is always visible.
• The titles of form fields are descriptive of the contents of the input fields.
• The distance between the title and the input field indicates that they belong together.
• Form buttons are placed clearly in connection with the form or function.
• The error notifications of forms are visually distinguishable and the erroneous information is highlighted sufficiently.
• The notification following a successfully submitted form must be distinguishable and clearly highlighted.