Note: This article is not about a specific standard. If you're required to conform to a specific standard, such as WCAG 2.0 or Section 508 of the US Federal Rehabilitation Act, please also look at what that specific standard demands.
Making the Site Accessible for Alternative Technologies
Add alt text for all relevant images. The only exceptions are images that are only decorative, that are not necessary to understand the website or interact with its content. Alt text is text as an alternative for an image. Screen readers will read the alt text instead of the image.
Alt text should be functional, not a description of the image. For example, the Android 7 Search symbol should have the alt text "Search", not the alt text "Magnifying glass". If the image is used on a button, give it an alt text of what the button does, e. g. "Submit".
If there is text in the image, for example if the image is a logo, the text should be included in the alt text.
Include alt text in an image using the alt attribute. It is used like this:
If the image is only decorative, set the alt text as alt="".
Describe the image elsewhere if it's very complex or has a lot of information. For example, if it's a chart or graph, describe its content above or below the image. Reference that in the alt text, for example "Chart of median household income in the USA from 2000 to 2017, as described below". You can also link to a document with all the values as text or a table.
Consider using CSS for only decorative images. This way, these images also disappear if the user turns off CSS. Background images can be included using the CSS background-image attribute. For example: html { background-image: url("example.png"); }
Use HTML5 semantic tags. HTML5 has added many semantic tags, i. e. tags that are used to describe the content. These tags allow technologies like a screen reader or the Reader Mode of some browsers to "understand" the content and display it in a meaningful way. If you're using bold and italic text for emphasis, not just for styling, use the and . This is also supported in earlier versions of HTML. Use
Use ARIA when necessary. Although it's better to use the native HTML elements, sometimes there are none available for your purpose. In that case, you can use ARIA (Accessible Rich Internet Applications). Note that you should not change the semantics of the HTML elements unless absolutely necessary. For example, this:
This is a banner with a first-level heading
This is a banner with a first-level heading
Set the language of the document and of parts that are different. This is done with the HTML lang attribute. It allows screen readers to pronounce the parts and the page correctly, and conventional browsers to render the text more accurately (for example to switch between right-to-left and left-to-right writing direction).
Use form elements for forms. For example, to make a button, use button or input, not the a or div elements. The latter two rely on CSS and JavaScript to act like a button, which are not always available. Also, you need to do additional work to make it focus correctly and inform the browser that it's a button. So it's easier and more accessible to just use the button or input element.
Label forms properly. To associate a label with a form control, use
Making the Site Readable
Allow users to change style. This is most important, because different users prefer or need different adjustments. For example, people with some vision deficiencies need high contrast to read the text, while some people with cognitive disabilities need low contrast to read it.This includes font size, colour scheme, contrast, font style, line spacing, and margins. Turn off all stylesheets and try to navigate the site. It should still be readable and usable. Provide possibilities on your site to change the style, for example a button to resize text or a menu to select the colour scheme.
Set enough spacing. Make sure to make it relative to font size, so that if the font size is changed, the text is still readable. Line height (line spacing) should be at least 1.5 times the font size. In CSS, this is done as follows: line-height: 1.5; Spacing between paragraphs should be at least 2 times the font size. This can be done by setting the bottom margin of the paragraphs: margin-bottom: 2em; You can adjust word spacing with the CSS word-spacing attribute and letter spacing with letter-spacing. Too much of it also makes the text harder to read, so use your good judgement. However, make sure that if the letter spacing is resized to 0.12em, and the word spacing to 0.16em, the text is still readable.
Have high enough contrast. Some people can't read the text if the contrast is too low. There are many automated tools to check the contrast. You can also turn off colour and look at the website yourself. Also provide an option to make low contrast, because too high contrast is also hard to read for some people.
Avoid justifying text on both sides. Keep text justified on left side with ragged right edge. This style is easier to read, especially for people with dyslexia.
Choose a big enough font. A good approximation is to use at least 12px, and optimally 16px or even 18px.
Avoid long lines. These can make it hard to follow the flow of the text. Use maximum 80 characters (maximum 40 if the text is in Chinese, Japanese or Korean).
Use colors tastefully. Too many bright colors could cause a headache in sensitive people. Use bright colors only as accents. Try a more subdued color palette with colors like grays, pastels, and colors that aren't too saturated.
Reduce animations to a minimum. Or remove them entirely. Animations can be a distraction and prevent the user from reading the main content. If you have animations, have an option to turn them off. This also applies to auto-playing videos and pop-ups/overlays.
Don't flash any element more than 3 times per second. Alternatively, keep the flashes below threshold by restricting them to a small area. Not doing this can cause seizures due to photosensitivity.
Making Your Content Usable
Use clear and concise language, especially for instructions. Don't use more than one conjunction and two commas. Use words that are commonly used in the context. Do not use double negatives. Avoid metaphors and non-literal language.
Give the user enough time to read and process the content. Inform the user in advance about when their session will time out. Alert them when the time is about to expire, and give an obvious way to prolong it.
Structure the content. Use headings and subheadings when it makes sense. Prefer lists with bullet points or numbers to long passages of text. Use paragraphs to break down long walls of text.
Make your site keyboard-navigable. Some people have motor issues that prevent them from using a mouse. They need to navigate the site with a keyboard. Give a clear focus outline. Don't remove it. It shows which element has been selected with the keyboard. If the user can move the focus to an element, they must also be able to move the focus away from it using the keyboard.
Provide different formats for media. Make text, video (with closed captions), audio, and pictures. This way, every user can choose the format that they prefer.
Comments
0 comment