Understanding the concept of Website Accessibility
Website accessibility needs needs enough time, effort, resources, and commitment to create an accessible website. In addition, you have to make sure your website provides equal access to all users, especially for those with disabilities. In this blog, we will take you through the things to look out for during a website accessibility check.
Web content accessibility guideline is a comprehensive resource to create a website. However, WCAG accessibility guidelines can be intimidating. Therefore, we will talk about how to conduct a simple and routine accessibility check according to WCAG guidelines.
You must understand your website must follow WCAG and the Americans with Disabilities Act to remain legit in the marketplace. If your website fails to meet the above criteria, you may face legal complications or penalties.
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines which are the most significant guidelines available for web accessibility policy. Created by the W3C, an NGO founded in the halls of MT’s laboratory for computer science in the year 1994.
How long does a website accessibility check take?
This will depend on the website size along with the level of adherence to WCAG standards or criteria. Also, make sure to remember that AA conformance is far from perfect accessibility and should be considered as a baseline.
The WCAG guidelines can be applied to websites of any size. The larger the website the more effort is required to carry out the accessibility check. To save time, you can focus on the the page that brings the most traffic to your site.
Optimizing the homepage and landing page seems to deliver a huge influence on on-site accessibility. Additionally, you need to prioritize the page you review by traffic level until you have checked them all.
How to Run a Website Accessibility Check?
Let us discuss how you can complete a basic accessibility check that addresses common accessibility challenges. You can run a manual check assisted through an automated accessibility checker such as the WAVE tool.
Title
While conducting an accessibility check on your website, page title is a good thing to start with. The page title is usually available at the top of the browser window. It is seen in search engine results and bookmarks.
A good page title will facilitate the visitor to understand where they are on your website. This means it communicates the purpose of the page for users. A page title seems to be concise but includes sufficient information to determine the page along with its purpose.
How to check accessibility of page titles?
Page titles are designated in the page HTML by the <title> element. Each page available on the website needs to include exactly one< title> element inside the <head> section.
In case it is missing the browser will represent the filename of the page you are viewing. You need to look at the HTML files of all the pages and make sure that <title> element is available for each which means that you have to simply open the page in the browser and check what appears in the tab bar.
The most effective approach is to put the most significant text at the beginning of the page. This is because such a part won’t be eliminated by the browse tab.
Keyboard Controls and Focus
A large number of people use the mouse to navigate websites. However, not everyone interacts with the browser in such a manner.
Several users don’t prefer to use the mouse due to visual impairment, or any other limitations. People with disabilities prefer to navigate websites by using the keyboard, refreshable Braille display, or other input devices.
To accommodate users with disabilities, you must ensure that every page on your website can be used by keyboard alone. The visitors or website needs to be engaged with any interactive part of the website without touching the mouse. This will apply to all buttons, links, menus, forms, and media controls.
When a user uses a keyboard they typically navigate the site with arrow, tab, shift, and return keys. This helps to move the focus from element to element on the web page. Focus is the state of selection that indicates when an element is in focus. It can then be managed or controlled by the keyboard.
How to check keyboard control and focus?
If you are testing keyboard accessibility, open the page and use the tab key and arrow keys to navigate. It is recommended to choose every interactive element available on the page with the use of a keyboard only.
Anything which is been clicked with the mouse needs to be reachable and the visual focus needs to be apparent. Some elements are particularly complex to access with a keyboard. Common culprits are forms, sliders, interactive media, drop-down menus, and pop-ups.
While testing keyboard accessibility, make sure to pay attention to the main menu to navigate a site. If website is not navigable or screen reader-friendly, customers cannot enter the site.
When you tab through a page, make sure that the progression via page elements is logical and predictable. The general left-to-right and top-to-bottom movements are the most intuitive.
Image Alt Text
Alt text or Alternative text is defined as a brief text description of the image available on the web page. Alt text will appear in place of the image when the page is accessed with the help of assistive technology. A screen reader will read the alt text aloud to offer context for users who cannot view the image itself. Alt text shows if an image fails to load on the web page.
Decorative images do not need Alt text because they only add style to the page without including any other information. However, such an image should still use an empty Alt attribute. This informs the screen reader that the image is decorative.
How to check image alt text?
Web accessibility checkers are very helpful as they can recognize which images incorporate Alt text and which images lack it. Accessibility checker can detect whether Alt text is available or not, but cannot demonstrate a well-written alt text.
Captions and Transcripts
The caption seems to be a significant accessibility feature you must look for. Captions provide text alternative to speech and audio in a video. They also appear in sync with the video as it plays. All videos available on your website with sound need captions to be accessible. They are essential for people having hearing impairment to understand the video content. Moreover, they are helpful for people who require translation, videos with sound off, and those who prefer captions with content.
How to check captions and transcripts?
There is a need to conduct an audit of your videos and listenable media available on the website. You need to view each video and check the media control for the closed captions button.
If captions are available, make sure to check that spoken dialogue and other important sounds are incorporated into them. If it is missing, make a caption that syncs properly with the audio. Auto-generated captions are not enough as they are often inaccurate.
Color Contrast
When the designer is not careful with the color choices, the background obscures the text because of insufficient color contrast. If you ever tried to read light-colored text on a white background, you can understand how annoying the experience is.
Color contrast is defined as the difference in brightness between the foreground and background color. If the contrast between the text and background color is too low, people will face difficulties. WCAG requires contrast ratio of at least 4:5:1 with the background for normal text. Large text has to include a contrast ratio of at least 3:1.
How to check color contrast?
If a website includes several combinations of text color and background color, it is significant to check each contrast ratio. The accessibility checking tool will detect some instances of insufficient contrast. You can use the A11y Color Contrast Accessibility Validator. Enter the URL of the page and you will be provided with a list of errors to be fixed.
Animations and Flashes
Animations help to make pages more interactive and engaging. However, they also introduce accessibility issues for users, particularly for people with low vision. The rapid flashing content can trigger seizures in users with photosensitive epilepsy.
How to check animations and flashes?
You do not have to neglect moving elements on the website altogether. However, provide users with an option to pause the movement in case if animation starts automatically. This will apply to image carousels, videos, gifs, scrolling text, and animated infographics.
WCAG states that an element should not flash more than three times per second. If the message is urgent, flashes can be eliminated in favor of large text and colors such as yellow or red.
Text Resizing and Zoom
To view the page content more easily, visitors generally zoom in on the web page and increase the text size. The modern browser will facilitate a user to perform both tasks. It is your responsibility to make sure that your website still looks good when the pages are resized.
WCAG requires pages to be zoomed in 200 per cent and remain usable without assistive technologies. The text should be resized to 200% without using the assistive technologies.
How to check text resizing and zoom?
The first thing you need to do is to open a web page in the browser and zoom in. In case the items look overlapping, jumbled, or hidden it needs to be addressed. You must attempt completing some basic tasks with both mouse and keyboard and understand if they are still easy.
After testing, you can resize text up to 200 per cent of its original size. You must ensure that you can still read and interact with all elements of the page, like in default mode.
Conclusion
Running a website accessibility is an important step towards making it inclusive and usable for people with disabilities. There are various tools and techniques available to assess the accessibility of a website. This includes manual testing, automated testing, and web accessibility evaluation tools. Implementing web accessibility guidelines and conducting regular accessibility checks can ensure that your website is usable for everyone, regardless of ability.
