_WCAG 2.1 – what should you pay attention to?

Imagine that you are a blind or visually impaired person and would like to log into your own bank account via a website or mobile app. You enter the password, select further options, go to the next page, but at some point you can’t do anything more… You don’t have access to the full functionality of the application. Why?

When owning or building a website or web application, you should remember about the mandatory rules of digital access, WCAG 2.1. For some entities, failure to adapt a website or mobile application to the following standards may result in a financial penalty. Would you like to know what WCAG is, why it’s important and what is its legal basis? You’ve just come to the right place – I’ve included a full explanation and list of developer recommendations in this article.

1.       What is WCAG 2.1

Web Content Accessibility Guidelines – WCAG 2.1 is a collection of documents that contain recommendations for creating websites accessible to all users. Access to the website means the degree to which it can be seen, understood and viewed by all users, regardless of their disability and regardless of the properties of the software and hardware they use. Estimating that 1/7 of the entire population are people with various types of disabilities and only 1/10 of them use the Internet, they shouldn’t be ignored in the digital space, and the above-mentioned regulation on adapting websites to all users is right.

2. WCAG 2.1 standard in the world

Since WCAG standards are universal, the vast majority of countries have based their legislation on accessibility issues and combating digital exclusion on them. In 2016, the European Parliament adopted Directive 2016/2102, according to which both websites and mobile apps associated with public bodies and entities must meet the second level of standard accessibility criteria, minimum at WCAG 2.0 level (A and AA).

3. WCAG 2.1 – recommendations for programmers

WCAG 2.1 recommendations are very concise, contain only universal recommendations. However, they cannot always be used directly, therefore, two supporting documents were created:

• Understanding WCAG 2.1
• Techniques for WCAG 2.1

The documents mentioned above are very extensive (they have nearly a thousand pages) – the consequence is that many website developers either know the WCAG 2.1 guidelines briefly or do not know them at all. Which means that the vast majority of websites do not meet even the minimum requirements included in the WCAG 2.1 documentation. Therefore, to facilitate the work of programmers for whom it’s almost impossible to get through the top of the guidelines, hundreds of WCAG 2.1 summaries are created, which contain the most important tips for building sites accessible to everyone. We show some very important recommendations below, after implementation of which you will be guaranteed that the website is fully functional and accessible to every user. This applies to both blind, visually impaired, people with physical disabilities, deaf people, dyslexia or various types of intellectual dysfunction. An extra bonus is the fact that due to the introduced recommendations, the website will be more friendly to the elderly and those who have no experience in using the Internet.

4. What should you pay attention to in the first place:

• graphic elements should have a concise alternative text (alt), which is to describe what’s on the graphic or where the graphic is a link, there should be information where this link leads. When the graphics have a purely decorative task, the alt attribute should be empty,
• avoid animated elements and moving texts because they distract everyone without exception. Moreover, very aggressive, fast-animated graphics can be a threat to people who suffer from photogenic epilepsy,
• spaces in the text, the ability to change the space between paragraphs, lines, words and letters,
• audio files, all without exception, for example programs, interviews or lectures should be supplemented with text transcription. The media players on the site should be manageable using the keyboard and of course should be accessible to the blind,
• content should be displayed under the mouse pointer or after focusing,
• multimedia and Flash files should be available in an alternative form, not as the only possibility to use the functionality,
• character keyboard shortcuts,
• commonly used files available for download, such as PDF or DOC, should have a structure that will help blind people to view them,
• time limits – informing the user that inactivity may result in data loss,
• texts on the website should be written in the simplest way possible, of course as far as possible so that people with intellectual disabilities could also understand them,
• cancellation of indicator events when an element is accidentally touched,
• published texts should be legible, divided into paragraphs, letters, subsections and other helpful sections, each properly provided with headings (h1-h6), so that blind people can easily get to interesting information. Furthermore, the texts should not be justified to the right. Letter abbreviations should be expanded on each first occurrence, on each page,
• navigation should be consistent, logical, and uniform throughout the website, of course, navigation should also be possible from the keyboard,
• adjusting the content to the screen width without scrolling horizontally,
• all active elements (banners, links, form fields) should be clear. It’s recommended to strengthen the default focus so that the visually impaired do not have a problem finding it. A good solution is the frame visible when navigating the page using the TAB key,
• orientation, displaying the screen content in portrait and landscape orientation,
• contrast of non-text elements,
• all links, without exception, should be unique and understandable, also out of context. Do not use “click here” or “more” links. Moreover, links should not be opened in a new window or browser tab without warning,
• indicator gestures,
• “skip to main content” or “skip links” is a popular link that leads directly to the content of a single page. This is extremely important on websites that have very extensive navigation and menus,
• waking up with movement,
• the color contrast of all elements, without exception, whose task is to convey content (links, texts, banners) must have a text to background ratio of at least 4.5 to 1, and ideally it is not less than 7 to 1,
• target size, a minimum size of 44×44 CSS pixels of the element, if it is required to touch it,
• page zoom to at least 200%, with the help of tools offered by the browser. Moreover, a zoomed page cannot “lose” content,
• titles must be unique and should inform about the content of the subpage on which the user is located,
• headers (h1-h6) should be the basic way to organize the content on the page. Remember that the heading h1 should be the title of the main text on each subpage,
• ordered and unordered lists should also be used to systematize content in texts or elements contained in navigation,
• both the language of the page and the language of foreign-language fragments should be marked with the lang attribute,
• quotes should be highlighted, at least by using quotation marks,
• the website code should comply with the standards, tables should not be used as a structural element of the website,
• tables whose purpose is data visualization should be built in the simplest way possible and should have headers,
• always use animations after interaction with the user,
• the frames should be titled
• scripts and applets should be available to both blind people and people who only use the keyboard,
• status messages of all actions on the site,
• forms, including search engine forms, should be built according to standards. Each form field and buttons should be properly described,
• the website should be available in browsers and devices with CSS disabled.

By following the above guidelines, we can be sure that our app or website will be accessible and fully functional for a much wider group of users without excluding groups of people with disabilities.