You need to test access to the site navigation using only your keyboard and screen readers. You can perform such checks either using special software or manually, or using free developer tools built into the browser. The Audit tab in the Chrome DevTools is truly the easiest way to determine if web page content meets accessibility criteria. Launching this special function will allow you to automatically identify problems on the page at high speed, and also tell you how to fix them. These checks mainly look for missing elements and errors in the HTML code.
1. Check the accessibility of the site's web page elements.
You need to test access to the site navigation using only your keyboard and screen readers. You can perform such checks either using special software or manually, or using free developer tools built into the browser. The Audit tab in the Chrome DevTools is truly the easiest way to determine if web page content meets accessibility criteria. Launching this special function will allow you to automatically identify problems on the page at high speed, and also tell you how to fix them. These checks mainly look for missing elements and errors in the HTML code.
2. Make sure all important elements of the website are getting focus.
Manual check using only the keyboard is great for catching navigation problems. If so, you might even find unexpected links that the focus indicator hits and can be navigated to. When running through all the links on the page (you need to press the Tab or Shift + Tab keys to move in the opposite order), you should pay attention that the active link is in focus. Then you need to press the Enter key and make the transition.
Often, sites have pop-up windows to display advertising or confidential information. Therefore, it is often also very important to check the ability to move through the form elements of such a pop-up window, fill it in and close it if necessary.
3. Conduct an analysis of the contrast of the content of the site.
The analysis of contrast is quite an important aspect for people with impaired vision and people with color perception deficiencies. These disadvantages include difficulties associated with the ability to distinguish between shades of red, yellow and green. By improving the contrast parameters, you can significantly increase the level of perception of information for all categories of users and thus reduce the cognitive load. There are many resources and free browser extensions for checking the contrast of text and background images. Also, do not forget about checking for this criterion the form elements intended for filling.
4. Use the correct code structure when developing your website.
Properly used HTML markup language in conjunction with the Accessible Rich Internet Application (ARIA) allows people with disabilities to make full use of Internet resources. This application associates certain elements of a web page with some content.
ARIA adds a so-called "role" attribute in the code, in which it semantically indicates the belonging of certain blocks of the site (for example, "banner" (banner), “navigation”, “main”).
This simple method greatly facilitates the work of a screen reader - a program designed to read from the screen of a computer or smartphone.
5. Add a link to navigate to the main content of a web page.
Using keyboard navigation to cycle through links in the header and navigation pane before navigating to the content of the page may cause the user to experience some inconvenience.
So, when switching to a new page of the site, the user needs to repeat the repeated presses of the Tab key until he reaches the desired element of the web page. For example, a “go to main content” link makes things easier and quicker to navigate. Moreover, as a common practice, such a link is hidden and only appears when it is really needed.