Creating websites based on WCAG – 16 accessibility tips for web developers

Investing in accessibility serves not only providing equal opportunities and preventing the exclusion of people with disabilities. Clearer pages and easier-to-understand graphical interfaces improve the experience of all users. When there is such fierce competition on the web, accessibility can be what distinguishes a product or service apart from other available offers.

Today, every developer creating websites and mobile applications should be familiar with WCAG guidelines, reasonable coding practices and accessibility testing. Already at the design stage, you can make the right decisions and avoid non-compliance with WCAG recommendations. Solutions proposed by UX designers or graphic designers may be visually attractive and modern, but from the perspective of people with disabilities, they are often an obstacle.

Examples of difficulties for people with disabilities:

• colours with too low contrast – can make not all information readable;
• too dynamically changing content on the website;
• lack of information about new elements on the website – important for the visually impaired (using an electronic magnifying glass or enhanced contrast option) or blind people (using screen readers).

WCAG-based solutions sometimes require more work, but the effort put into design, implementation, and testing will pay off in the form of a mature product that will reach wider target audience.

Recommendations for developers resulting from WCAG:

1. Keyboard friendly website

Navigating the website should be possible without using the mouse. To ensure that a user has access to all content on the site, a few keys are usually used: TAB, SHIFT + TAB, ENTER, SPACEBAR, and arrows. The ability to use all functions of the website with just a keyboard is especially crucial for blind users, who only use a keyboard, and users with motor coordination disorders or upper body muscular insufficiency.

2. All content readily available

In addition to customising the website for keyboard operation, there is a need to make sure that entire content on a page is available. This is usually simple, but it can be a problem when the page has a dynamic content. It should always "inform" the assistive tools about the change; otherwise, the user will miss new content.

3. Important for text and language

• a language of the page and a foreign language excerpts denote with the attribute 'lang';
• quotes should be properly highlighted – at least put in quotation marks;
• maintain an appropriate colour contrast of all content elements (texts, links, banners) or functional elements – the correct contrast is considered to be one whose ratio is 4.5: 1 for small texts and 3: 1 for large ones.
• a text must be written in the most straightforward possible language so that it is accessible to less educated people or people with intellectual disabilities;
• published in a legible way – divided into paragraphs, letters and other sections;
• letter abbreviations expanded in the first instance on each page;
• supplemented with headings (h1-h6) so that blind people can move to the section of interest to them.

4. Resizable text

Most devices and browsers allow users to change a text size, which is helpful for people with visual impairments. However, if a page is not built to support this feature, resizing text can break the design or make interaction with the page more difficult. Ideally, if it should be enlarged up to 200% using browser tools; such a page must not "lose" content. It is okay if it fits horizontally in the window and horizontal screen scroll bar does not appear.

It's a good idea to use relative sizes that allow text to scale depending on other content and screen size. Never disable user scalability, as this will make it difficult for users to resize text. To make sure the page meets these criteria, it is worth testing font sizes by increasing the zoom level in the browser.

5. Careful colour matching

There is a common misconception about colour-blindness (not to be confused with daltonism) that it is a matter of seeing only black and white, while it is a much broader problem. In short, some people perceive colours in a unique way. As such, make sure that chosen colours on a page contrast well, so that everyone can distinguish between the different elements on the page. The most important thing is to make a text stand out against the background. Ideally, a dark colour should be paired with a light one, making sure they don't penetrate each other.

There are many online tools with which one can test colour combinations. It's good when they give a real-time evaluation. The Contrast Checker utility allows its users to switch to monochrome mode to verify how effective the mix is.

6. Graphic elements and alternative text

Where it is needed, alternative content formats should be provided (e.g. text alternatives to images, graphics, charts, and audio and video recordings). A text that replaces an image if it doesn't load. Screen readers have access to alt text (sometimes called alt attributes, alt descriptions, or alt tags) to “read” an image. In the graphic description field, the user is given a context (try to include keywords when it makes sense) which otherwise could have been missed. The alternative text also helps to improve the website's SEO by giving search engines more information to index. Also:

• when the graphic is also a link, enter a description in the picture where the link leads to;
• have an "empty alt attribute" when graphics are purely decorative;
• avoid animated elements and moving texts as they distract users, not only those with disabilities;
• some, incredibly aggressive, and quickly animated graphics, may pose a threat to people suffering from photogenic epilepsy.

7. Sound files (broadcasts, interviews, lectures)

• depending on the material, they should be supplemented with an audio description or text transcription;
• their players need to be keyboard operable and accessible to blind people.

8. Video and multimedia files

If any sound on the website is played automatically for more than 3 seconds, there is a pause or stop or a volume control mechanism regardless of the overall system volume level. When a screen-reader is used, it can be difficult to determine how to turn off the media (a user is surprised by a sudden noise). Therefore, avoid attaching items that start without first monitoring the user. Moreover, the files should:

• be supplemented by subtitles for deaf people;
• have access to players for the blind people and those using only a keyboard.

9. Navigation on the website

It is best to avoid automatic navigation because a user needs more time to digest all the information before proceeding to the next slide or section. In general, the entire navigation (menu) must be consistent, logical, unchangeable, and available throughout the whole service from the keyboard level.

10. Interactive elements

All interactive elements (forms, links, banners) should be:

• visually clear with focus (usually in the form of a frame visible during navigation on a page with the TAB key);
• with unique and understandable links, also out of context;
• not described like: ">>" or "more" or "click here";
• not to open in a new browser window or a tab without warning.

11. Skip links

It is recommended to apply an improvement in the form of 'skip links', also known as the skip mechanism. They are used to skip some blocks in the service by using appropriate anchors on the website and going directly to selected content. This is especially important in services that have many links in the navigation/menu. This kind of help is not only for the blind but also for the visually impaired or people with motor dysfunctions – it seems that each user may need such support in certain situations.

12. Page and subpage titles

They must be unique and inform about the content of the subpage on which a user is located, and the layout of the content in a title should be built according to the scheme: [Subpage title] – [Institution name].

13. Applying headers to the correct content structure

An essential task in the website accessibility is to organise content using headers. Subpages are also to be based on headers, with (h1-h6) as the basis for organising content on the site. This makes the content easier to understand and improves its flow. Clear headers help screen readers to interpret pages, which makes navigation much easier.

It should be checked that appropriate levels of headers are used in the content, e.g. only one h1 per page. This is followed by subheadings starting with h2, which can be nested further (h3, etc.). They should always be used in strict order. 

14. Tables, frames, etc.

They are useful by themselves, as long as they are not used for purposes other than tabular data. Therefore: they are not used as a structural element of the page. They make it easier for users, including those using assistive technology, to analyse large amounts of data. For maximum benefit, tables should be as simple as possible, and be provided with headlines. There are guides on how to code a table while respecting accessibility standards. As for the frames, they must be properly titled.

15. Well-designed forms

Forms, including a search engine form, are a useful addition to most websites as long as they are carefully designed and form fields and buttons are correctly described. One should also strive for placing labels next to relevant fields. While a sighted user can easily match the label to the right area or option, this may not be obvious to a person using a screen reader.

16. Convenient file download

Possible to download from the site files such as PDF, Word etc. should be prepared as accessible, i.e. they must have a structure that helps blind people to view such documents.

In summary it is worth adding that the website created according to the above procedures should be available in browsers and devices with disabled CSS support.

If you're interested in the accessibility of websites and other digital products, you can read more in this article, where we write about WCAG history and the Web Accessibility Guidelines.