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.
- 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).
- 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.