This post is for Day 15 of Mercari Advent Calendar 2021, brought to you by Sahil Khokhar from the Mercari JP Web team.
I would like to take this opportunity to continue my efforts towards helping everyone understand Web Accessibility.
After explaining The Importance of Web Accessibility and Web Accessibility through Internationalization and Localization in my previous blogs, today I would like to divert the attention of the readers towards how they can perform an accessibility test for their web application to find certain high-level issues.
Around 15% of the world’s population has some kind of disability (WHO), which makes over 1 billion people around the globe who may be missing out on the experience your product (web app) offers. That’s a huge number! Think how much wider reach your product can get if you add those diverse 1 billion people as Daily Active Users (DAU) of your product. Hopefully, by the end of this blog, you will be able to understand how and why to carry out a basic accessibility test for your web app.
As the term implies, Accessibility Testing is a process that helps to form an understanding of how accessible a digital product or service is for people with disabilities or other digital access needs. To put it in simpler words, it is the practice of making your web app accessible to as many people as possible.
The Value of Accessibility Testing for Your Organization
Businesses need to enable and make their crucial applications to be easily accessible, even to people with disabilities. Various government organizations across the world have made multiple legalizations to make IT products accessible for disabled people. Through the introduction of the Web Accessibility Initiative (WCAG), the WCAG 2.1 strives to make the web easily accessible, usable, and understandable. Moreover, the WCAG 2.1 is a definitive guideline that businesses should follow during web app development, and the one definite way of doing it is by leveraging an accessibility test. Accessibility Testing helps in many ways, such as:
- Finding issues to make the web app easily accessible for users with disabilities or challenges
- Satisfying the existing and future legal requirements by helping to follow the ethics
- Attracting users and increasing the market share of the company
- Being accessible for users with a low-bandwidth (slow internet connection)
- Making the web app and information available for the users across various regions (diverse backgrounds) – I covered this aspect more in detail in my blog on Web Accessibility through Internationalization and Localization
Simple and Effective Accessibility Testing Methods
The W3C provides a lengthy set of WCAG 2.1 guidelines that can be daunting for some organizations who are new in trying to adopt web accessibility standards for their digital products. Although these guidelines, written by some of the most knowledgeable folks in the industry, can sometimes act as a barrier-to-entry for these new digital businesses.
How not to be afraid of Accessibility Testing anymore? : Read through the simple but effective methods mentioned below to check the type of experience delivered by your web app to people with special digital access needs.
- Using Keyboard Navigation: By using only your keyboard to interact with the web app, you can test whether it is accessible for people who can only use a keyboard. Here, the test process is uncomplicated: Interact with the web app using only the keyboard. Through the ‘Tab’ key, you can traverse forward in the tab order. By activating the ‘Shift’ and ‘Tab’ keys simultaneously, you will traverse backward in the tab order. By pressing the ‘Enter’ key, you will follow links, and so on. Keyboard accessibility is necessary for users who are blind, have low vision, or have motor control disorders. Moreover, screen readers also have a heavy reliance on correct keyboard navigation.
➨ Head over to Mercari JP Web and enjoy the delightful experience of smooth keyboard navigation.
- Checking the Page Title: A title tag is needed for every page, and therefore, finding the HTML tag that is associated with that is essential. It is done by going on the ‘view source’ option built into most of the modern browsers. Title testing can help in ensuring that the page titles provide meaning in a clear, concise way that is compatible with both search engine crawlers and assistive technology such as screen readers.
➨ To get a reference of some page titles, check out Mercari JP Web.
- Turning Off Images: Even though people with cognitive disorders can benefit from the combination of text and images for understanding information, images solely should not be used to make the users understand the page. Text that is presented in images should be placed in the markup, except for logos or trademarks. Images presenting important content should have a text alternative. This can be done through the in-built functionality within your web browser. Google Chrome, for example, provides an advanced option for turning images on and off.
➨ Mercari JP Web gives you a great reference of how we handle alternative texts for images.
- Checking the Color Contrast: For web accessibility, checking the color contrast is as critical as it is simple. By making use of sufficiently-contrasting colors, the font visibility of a website is stark enough to distinguish for most people. Users having a low-contrast vision, low-vision, or color vision deficiency benefit when the content on a website has adequate contrast. As per the WCAG 2.1 success criterion 1.4.3, the minimum contrast ratio for normal text should be at least 4.5:1, and for large text (18 point or larger, or 14 point or larger and bold), the contrast ratio must meet a minimum of at least 3:1.
➨ Check out the color contrasts for some texts/headings at Mercari JP Web.
- Zooming In: As per the WCAG 2.0 requirement 1.4.4, content can be zoomed to 200% and should still work without assistive technology. Further, screen magnification should not cause any interference with the other accessibility requirements. Testing this can be pretty simple. You can zoom your web browser to 200% and see what happens to the layout and content of the webpage. By performing this preliminary testing, you can identify some obvious accessibility issues with the display like the content elements overlapping or disappearing, functioning of the navigation elements and menus, etc.
➨ Try browsing items on Mercari JP Web with 200% zoom.
- Checking Video Transcripts and Closed Captions: Transcripts and Closed captions are essential to the accessibility of media, like videos. What first comes to mind are the benefits captions and transcripts have for users who are deaf or have hearing loss. Checking the transcripts and captions is easy. All you need to do is to go to a video and within the player, see if there is an option to turn on closed captions. You need to ensure the option works with a mouse and keyboard. Then, you need to identify if there is a text transcript that accompanies the video. If they don’t seem adequate to you or you don’t find them, you should look into making videos that are more robust and accessible for all.
➨ YouTube is a great platform that deals with Transcripts and Closed Captions excellently!
Wrapping Up
You might think that your web app is problem-free and is great to go live. However, the only way for you to be 100% sure of it is to take it through accessibility testing. Having a non-optimized web app will lead to limitations in your services, further disconnecting your organization from a large number of users. The best way of conducting accessibility testing is by putting yourself in the role of the user and using your web app as the user. The insights you’ll get about your web app quality will amaze you, and steer clear of all the worries and lawsuits of having a less-accessible web app.
Tomorrow’s article, for the 16th day of Mercari Advent Calendar will be by Daisuke Maki. Please look forward to it!
Mercari is looking for talented engineers from all around the globe!! If this all sounds interesting to you, why not apply?
