You probably don't even realize how many people with vision, hearing, movement or cognitive impairments can use your site. According to statistics, the number of disabled people in Poland is about 4.7 million, or 12.2% of the population! A survey conducted at the end of 2014 shows that 42% of people are moderately disabled, 28% significantly disabled and 25% have a certificate of a slight degree of disability. A large percentage of people in the world also have various types of disorders related to color blindness. On average, 1 in 12 men and 1 in 200 women suffer from it.
The WCAG (Web Content Accessibility Guidelines) is a collection of documents developed and published by the Web Accessibility Initiative, which contain guidelines for the design of digital products taking into account the needs of people with disabilities and disorders of various types. The current standard is WCAG 2.1, which was also introduced in Poland at the end of 2019. People who use the Internet, often professionally active, but with certain disabilities should be able to navigate the web without problems, on any website, including your store. Find out how you can ensure the basic convenience of use with 10 rules that you should apply in your store.
1. Non-textual information
Any non-textual information should provide an alternative method of familiarizing yourself with the content. The exception is elements that perform an exclusively decorative role. Other graphics, photos, banners, illustrations should contain the so-called ALT (alternative) attribute, which is usually placed in the code of the page. This type of description helps people who use readers to familiarize themselves with the content of the site. If the graphic is needed to clarify the context, then it is imperative to supplement the ALT attribute.
A common mistake in stores is to place a graphic with ready-made text on a banner - unfortunately, no reader will identify that a given graphic contains text, but will treat it as a single image. Remember that a well-placed banner is a graphic, photo or illustration and appropriately coded text on it (not part of the graphic). In this case, the graphic element does not have to be supplemented with alternative text if it will perform a decorative function. In contrast, the text on it will be easily readable for special programs for blind and visually impaired people.
2. Video materials
They must contain subtitles or transcripts that depict not only dialogues, but also describe sound information, for example, laughter, the sound of the sea, the sound of a car. The user must be able to turn on or stop the video or audio and control the playback volume.
Remember that the video does not play automatically, even more so with sound. Users should have full control of the site and know perfectly well what is happening on it. On the other hand, as for other effects on the page, such as animations, they should not flash more than 3 times per second, so as not to confuse users and cause discomfort in people suffering from photogenic epilepsy.
3. Site map
The structure of the information on the site should be available in text form. Thanks to this, the user will be able to familiarize himself with all the categories and subcategories available in the store, by quickly going through its content using the keyboard or reader.
4. Featured Information
Plan your content so that the most important information is clearly visible. The use of color cannot be the only way to highlight certain information, indicate actions, force responses or distinguish elements.
Messages should be clear in the message and signal in text the effect of choosing a given option, e.g. after adding a product to the cart, it is not enough just a short message, disappearing after a certain time and changing the color of the product name to green, but it is also worth clearly communicating through the content: “The product has been added to the cart”. This information should also not automatically disappear, but give the opportunity to disable it or go to the cart so that the user can fully familiarize himself with the message and decide on further action in the store.
5. Navigating the page with the keyboard
All website functionality must be accessible to keyboard-only users. If it is possible to use the website using the keyboard by other methods than the accepted ones (using arrows, tabs, other shortcuts), the user should be informed about how he should navigate on the given page. Also, make sure that all the generally accepted hotkeys work in your store.
6. Time Limits
If a certain process is limited in time (for example, the ordering process or the time to make a payment), the user can extend this time or disable the limit. Keep in mind the people who are slower to operate the pages and give them the comfort of shopping in your store so that they do not stress over time limits. However, if you do not want the timeout to be off completely, apply a limit of at least 20 hours.
7. Color and contrast
Elements on the page, such as text or buttons, should have a contrast of 4. 5:1 against their background. For larger graphics or text with a font size between 14 and 18 pt, the contrast may be 3:1. You can check this property using various tools (e.g. Stark plugin for design programs) or websites (e.g. webaim.org, contrast-ratio.com). You can also explore some elements on your site with the developer tool in any browser.
8. Markings
To make navigation on the site understandable, include titles on each subpage. Thanks to this, the user will clearly see which page he is on, not only with the help of barely visible crumbs (so-called breadcrumbs). Describe the links verbatim (e.g., “Read on” at the blog's brief instead of “Click here”) or place them in a context that allows users to understand its purpose. Also remember that the icons are properly signed, they should have labels. Make sure that all elements on the page have their place, do not duplicate, are consistent, placed in the right context.
9. Transitions on the page
Check your store for unclear transitions between subpages. Pay attention to how the dropdown elements develop, how they work in the desktop version of the content available in the hover state. It is important that hovering over an interface element does not mean changing the context. Users should use a click, a clear choice, to go to a given subpage. Otherwise, it can cause them to become confused and change the context too quickly and incomprehensibly.
10. Error information
Apply validations to forms. Describe the field in the form appropriately, not just by indicating the place of error. A well-described error has an appropriate label and indicates how to fix it correctly. Do not apply the same message to all fields, but describe each field separately. For example, in the event of an error in the e-mail address, inform the user that there is an error in the given field that needs to be corrected and the correct format of the address is nazwa@email.com.
As UX designers, we always emphasize the importance of website accessibility. We want it to be easily supported by all users, which is why we provide key guidelines to developers implementing the sites. You already know how many of your potential customers can have problems making purchases if you do not follow even the basic principles of the WCAG standard. Remember that even people who are temporarily immobilized may have problems, for example with a broken arm, who will feel even more severely the inability to freely use the store in which they previously made purchases without problems. Thanks to the implementation of the recommendations, the satisfaction of using your site will increase, you will stand out from the competition that does not yet adhere to the rules (unfortunately, this is still the overwhelming percentage of stores) and you will gain loyal customers who will appreciate your contribution to making it easier for them to navigate the web.
