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.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

If you violate the Regulations , your post will be deleted.

    _All posts in this category

    Third Party QA Testing with Xray

    Hiring Third Party QA teams to verify a product has become a common practice - find out what Third Party QA Testing is…
    Read more

    From Java to Go - scaling competences in the Software Development Centre team

    Transition Technologies PSC experts talk about the 'Go Academy' initiative and the benefits of learning the Go programming language in delivering efficient solutions…
    Read more

    IT staff augmentation – flexible way of scaling the IT team

    IT staff augmentation increases the potential of your team. An additional specialist is support in completing daily tasks and meeting deadlines. The presence…
    Read more

    How to protect yourself from phishing using authentication?

    We live in the age of big data - they are more valuable than money in the world we live in. Identity theft…
    Read more

    What should you know about serverless computing?

    Serverless cmputing still raises a lot of doubts, especially among those environments that are just starting to use cloud services or are just…
    Read more

    6 Common misconceptions about Scrum methodology

    6 of the most common myths and misconceptions around Scrum so you can spot and avoid them.
    Read more

    Agility. All you need to know about the agile methodology

    What actually is agile? How did it all start? What are the principles that characterise this working method, how does it differ from…
    Read more

    On-line accessibility following WCAG standards and its impact on the company’s image.

    Now is a perfect time for a thorough analysis of our online activities while taking into account a broader perspective than before. Implementing…
    Read more

    WCAG – why it is worth having an accessible website, web systems and mobile app

    Have you ever wondered how blind and disabled people use websites? Standard activities that we perform on a daily basis on the Internet…
    Read more

    What is WCAG and how to meet compliance?

    The Modern society is very computerized. We want to have access to our music, books or movies wherever we are, regardless whether we’re…
    Read more

    New features in Java

    A lot has changed in Java. A few years have passed since the release of its most popular version 8. All the time…
    Read more

    Proxy Product Owner role in software development nearshoring and R&D augmentation

    Today it is an imperative to be able to quickly build and deliver innovative and advanced software products not only to keep the…
    Read more

    Nearshoring – more opportunities for your business

    The IT sector is one of the most dynamically evolving business industries. It is not only due to the technology it offers but…
    Read more

    How to build a professional development team in a few steps quickly and effectively – a case study

    The current trends in developing and supplying individual software for companies have significantly moved towards the model based on outsourcing. This is a…
    Read more

    FIDO – safer or more convenient?

    We have been trying for a long time to devise safer and more effective ways of identifying a user than by using a…
    Read more

    _Let’s get in touch

    Contact us