Link building, how to evaluate the effectiveness of your strategy. Have wondered why given phrases…
Web accessibility, how to make your website more accessible? There are millions of web users around the world with different disabilities.
Yet many websites are not fully accessible to them.
Many web designers, when building websites or mobile apps, completely ignore web accessibility. So what is web accessibility and WCAG?
How to make your website more accessible? How to check if your website is accessible? In today’s blog post we will answer all these questions.
What is web accessibility?
Website accessibility is all practices designed to make all tools or digital products fully accessible to web users with diverse disabilities. As a result, no user experiences barriers that would make it difficult or even impossible to use particular digital products.
Web accessibility takes into account different types of disabilities concerning:
- visual impairments.
Importantly, web accessibility also applies to people without disabilities. For example, users with broken arms or lost glasses. Or people who have a slow or unstable Internet connection or elderly people.
Web accessibility and business opportunities
It turns out that web accessibility plays an important role in business success as well. Accessible design allows you to improve user experience and the feeling of satisfaction.
With web accessibility you ensure equal access to your digital product for all users:
- young or elderly;
- with or without different disabilities;
- people in rich countries or in developing countries.
By not excluding any users you increase your audience range and enhance your brand.
Web accessibility and legislation
The legislation is one of the main reasons why you cannot ignore web accessibility. Internet and online activities are becoming a practically inseparable part of our lives.
In many countries equal access to digital products is not a good will but a legal obligation. Many nations adopt the rules set out in the Web Content Accessibility Guidelines (WCAG) 2.0 in their legislation.
1. United States
In this country, Section 508 Amendment to the Rehabilitation Act of 1973 was introduced to ensure that every digital product is fully accessible to all users with various disabilities. Absolutely every federal agency is obliged to follow this law.
And provide equal access to its information technology. Moreover, in 2017, Title III of the Americans with Disabilities Act (ADA) was introduced.
Its main objective was to fight discrimination against disabled people. Many lawsuits have been filed on the basis of ADA against owners of digital products that have not provided full accessibility.
2. European Union
In 2016, the European Parliament accepted the Web Accessibility Directive. This means that every website and mobile application managed by public sector bodies in all EU member states must be fully accessible to all users.
Web Content Accessibility Guidelines (WCAG)
Web Content Accessibility Guidelines (WCAG) are recommendations developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). Provide guidance on how to make web content more accessible to users with different disabilities.
1. WCAG 1.0
WCAG (version 1.0) was first published in 1999. It contained a list of 14 principles of accessible design to be followed. They have been divided by their priority level:
- must (Priority 1);
- should (Priority 2);
- may (Priority 3).
The principles described in WCAG 1.0 related to issues such as:
- providing clear navigation;
- using markup and style sheets;
- not relying only on colors;
- providing information for better orientation;
- using W3C guidelines.
2. WCAG 2.0
WCAG 2.0 were published in 2008 and contained recommendations divided into 4 main principles:
WCAG 2.0 describes techniques which are regularly updated to help web designers meet all the criteria to provide fully accessible design.
WCAG 2.0 uses levels of concordance (A, AA, AAA) indicating the obligation to meet given criteria.
According to WCAG 2.0, every digital product should, for example:
- contain alternative texts for all non-text elements;
- provide access to all functions from a keyboard;
- provide readable and understandable text content;
- ensure that each page can be operated in a fully predictable way;
- ensure that users can correct their mistakes;
- give users enough time to read text content.
3. WCAG 2.1
An upgraded version of WCAG 2.0 published in 2018. WCAG 2.1 focused on providing guidance to make digital products more accessible to 3 main groups of users:
- with low vision;
- cognitive disabilities;
- disabled users using mobiles.
How to make your website more accessible?
1. Use Alt Text for all images
You have already optimized your website for search engines. In this case, you probably know that each image should have an alternative text.
Contains the most important keywords, but you should be aware that alt text can be used for other purposes. Owing to alt text, all users with visual impairment, who use screen readers, have access to visual information.
This attribute added to each image is read by screen readers.
2. Provide captions to your video content
Video is one of the most popular forms of content. But you have to remember that not only text or images on your website must be fully accessible to all users.
The same applies to videos you create for your website, blog or social media channels. So that every user can easily access all information in your video content, you must provide captions.
They should be synchronized with the content and available on various devices.
3. Provide correct heading structure
The correct structure of each page is a huge help for users using screen readers. It makes navigation through your content much easier and more efficient.
You should provide correct headings to get the page well-structured. You will be able to indicate which section is the main one and which is less relevant. This way, screen readers will easier interpret your content.
Headings define the structure of your pages. They are extremely important for disabled users. Here are the key rules you need to follow to provide the correct heading structure:
- never skip headings: each page must have well-structured headings;
- each page should have one H1 heading: multiple H1 headings on one page are not well-supported;
- use subheadings (H2-H6) to define particular sections.
4. Use contrast colors for web accessibility
There is more than one type of color blindness. You have to take them all into account when designing your website and choosing its visual layout.
Remember that colors are not just for visual purposes only.
They should convey information or indicate an action. Make your website more accessible to users with different types of color blindness.
Make sure that color is not the only one component of presenting information. Use shapes, icons, sounds, different sizes as well.
WCAG also indicates a minimum contrast between text and images of text which is 4.5:1. However, there are 3 exceptions to this rule:
- large text: large-scale text should have a minimum contrast ratio of 3:1;
- incidental: decorative elements which do not provide significant content, do not have a minimum contrast;
- logotype: when it comes to text there is no specified minimum contrast.
5. Make every form easily accessible
Forms are an integral part of practically every website. Maybe typically you don’t notice how important they are. But even in every social media platform you need to fill a form in order to sign up.
In online stores you need to provide all the necessary information in order to complete the transaction. On your site you must design all forms to be as accessible as possible.
- make sure that each field is properly labeled;
- provide information and instructions on how to fill in each field in the form correctly;
- prevent errors: inform users immediately that some errors occur in their forms;
- notify users when they fill in the fields correctly;
- if the form is long and contains many fields, divide it into several pages.
6. Provide informative title tags
Title tags are, without a doubt, the most important element that has a direct impact on the ranking. For that reason, many people just stuff title tags with keywords.
This practice has nothing to do with accessibility. The content you place in title is the first information that the user gets when using screen readers. Make it as accessible as you can.
- include in the title tag the most important information about the content and purpose of the page;
- not to stuff title with keywords;
- follow the best SEO practices.
7. Make the navigation consistent and intuitive
We have already described headings and how they allow you to introduce well-structured and correct navigation. But navigation is so much more than that. If you want to design accessible navigation keep in mind the following issues:
- each page within your website should have a similar layout;
- all visual elements that have a similar function should have a coherent form;
- create a sitemap for complicated and complex websites;
- breadcrumbs may be a huge help as well.
8. Enable resizable text
All users using different types of devices or browsers should be able to resize text. This feature is extremely useful for users with visual impairments.
You should design your website in such a way to make it possible to resize text and not to destroy the layout. Use relative sizes that enable text to be scaled.
The text should be scalable up to 200 percent without losing its functionality.
When it comes to text spacing, WCAG prepared some guidelines you need to follow:
- space between paragraphs should be at least 2 times the font size;
- line height should be at least 1.5 times the font size;
- tracking (space between letters) should be at least 0.12 times the font size;
- space between words should be at least 0.16 times the font size.
How to check the web accessibility?
Do you want to check whether your website is fully accessible and meets all the requirements? There are several ways to do it:
1. WAVE web accessibility evaluation tool
This official tool by WebAIM constantly updates since 2001. It will show you all accessibility errors on your website. You can also add it as an extension to Chrome or Firefox. With WAVE you will be able to check if:
- the structure of your website is correct;
- the color contrast is sufficient;
- all non-text elements have alternative text;
- there are missing form labels or empty buttons and links.
This Chrome and Firefox extension provides all the information you can use. You will be able to improve performance and quality of your website.
This tool generates a report with final scores in 4 categories:
- best practices;
Would like to find out whether your digital product is accessible? Move to the main Accessibility report. You will find all the elements that need to be optimized or improved.
Web accessibility to all users
When designing, accessibility is something you absolutely shouldn’t skip or neglect. There are millions of web users around the world who struggle with different types of disabilities.
They shouldn’t be excluded from access to digital products.
Would you like to discover all the recommendations provided by WCAG? Visit the official W3C website. You will find all the necessary information there! For other info about this topic you can contact us!