In this article we will review some useful tools, requirements and recommendations that are appropriate to have in the back of the mind in the universal design of network content.
The article will examine the following areas:
- Contrast Ratio
- Line height, paragraph and spacing
- Use of labels on forms and input
- Alternative text for non-text images and items
- Link dimensions and function
- Run a Access Analysis using Axe
- Try a text-reading tool - for a deeper understanding
- Avoid errors and deficiencies in validation code
Contrast Holed
When it comes to design, it's easy to draw new ones as one seems nice and clean. But what we often forget is that there is a part that has challenges with low contrasts. Inability to read and understand content correctly, if the contrast ratio is too low, is difficult for people with read and write challenges. This typically applies to elements such as titles, paragraphs and buttons. Therefore, it is important to ensure that the background and foreground colors are in a proper contrast with each other. WCAG 2.0 requires a contrast ratio of 4.5:1 to 4.5:1 to be reached.
Examples of contrast relationships in the work with titles and paragraphs.
Check contrast with Google Chrome Developers' Tool
Use Google Chrome's built-in developer tool to see the contrast between background and foreground color. Open in Windows With CTRL + Shift + C or on Mac with CMD + Option + C and select the item you want to inspect more closely.
Check contrast with Stark for Adobe XD
Strong is an extension to Adobe XD that allows you to check contrasts and perform color-blindness analyses. Lassed Strong to Adobe XD
Line height, paragraph and spacing
For people who wear impaired vision and dyslexia, the text on the website can create challenges. Therefore, it is important that we make sure that we have a good readable title and paragraph. According to the upcoming WCAG 2.1, it is recommended to have at least:
- Line spacing to at least 1,5 times the font size
- Distance after paragraph to at least 2 times the font size
- The minimum distance in blocks of text shall be 0,12 times the font size
- The minimum spacing between words shall be 0,16 times the font size
Use of labels on forms and input
People with impaired vision and people with reading and writing problems can use text-reading tools to hear and navigate around the content. Especially when it comes to forms. It is therefore important that forms use input field labels so that the text-to-text-to-read tool perceives the fields correctly.
In the process of forms, we can use labels (labels). Labels contribute to the input fields being properly perceived by the tool and the field being identifiable and meaningful.
In a form, a HTML tag can be used: <label> for the tool to properly perceive the field. Alternative text for non-text images and items
For the Speech tool to perceive images, figures and illustrations and other non-textual elements, an alternative description of the item is required.
Images shall have an alternative caption describing the contents. This applies to all items except images or figures for decorative purposes, in which case the alternative text shall be empty.
Example of an image with alternative text and decorative image without alternative text.
Link dimensions and function
It is recommended that the link be descriptive according to the content of the link destination page. For example, we've developed a list of marketing principlesWhich gives you a better understanding of marketing. The link must also be perceived as a link to the context around them, so that it does not create confusion about the existence of a link or, for example, text. To clarify this, a line can be used below the link. In the CSS document, a text-decoration can be added: subline; on the anchor tag.
Run a Access Analysis using Axe
Axe lets you perform accessibility analysis of web pages and help you detect design errors. Download Axe for Google Chrome
Try a text-reading tool - for a deeper understanding
A text-reading tool can provide deeper insight into how the website is actually experienced by people who are blinded, reduced vision, dyslexia and other cognitive challenges.
Download Chrome Vox for Google Chrome Read more about Mac OS availability
Avoid errors and deficiencies in validation code
Code containing web site errors may cause accessibility tools and users with special tools to be unable to navigate around or perceive the page correctly. Therefore, it is important to validate the code on the website and to make sure that we correct potential errors that the validation tool finds.
Go to W3C HTML Validator Go to W3C CSS Validator
Sources: What says instructions? – Directorate for Management and ICT WCAG 2.0-stander – Directorate for Management and ICT Web Solution – Directorate for Management and ICT Web Directive and WCAG 2.1 – Directorate for Management and ICT Web Content Accesability Guidelines (WCAG) Overview – W3C