Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites by people with disabilities or impairments. Here’s how you can test your webpage for accessibility issues.
Navigating through the Accessibility Section of the Issues Tool
The ‘Issues’ tool on the webpage is a fantastic feature that allows you to identify when and where there might be accessibility issues. Press the [Shift] button and use the Command Menu to view ‘issues’. By clicking on ‘Show Issues’ and pressing ‘Enter’, you can start your initial evaluation of the webpage.
You can use the Issues counter to see how many unresolved issues are currently detected on your page. Remember to consistently check the ‘Issues’ counter and correct any issues presented.
Checking Input Fields for Labels
One aspect of web accessibility is ensuring that all input fields have appropriate labels. This can be verified by inspecting the page with ‘F12’ and checking the ‘Issues’ counter.
Inside the ‘Issues’ Drawer, the ‘Accessibility’ section will notify you if any form element doesn’t have labels. If labels are missing, there will be a warning such as: Form elements must have labels: Element has no title attribute Element has no placeholder attribute.
You correct this by connecting the ‘label’ tag to the corresponding ‘input’ tag using the ‘for’ attribute in the ‘label’ tag, and the ‘id’ attribute in the ‘input’ tag;
<label for="searchId">Search</label>
<input type="search" id="searchId">
Ensuring Images have ‘Alt’ Text
Next, we need to verify that all images have alternative text or ‘alt text’. This can be done by again inspecting the page and checking the ‘Issues’ drawer. If an image lacks ‘alt’ text, you might witness a warning like: Images must have alternate text: Element has no title attribute.
Ensure every ‘img’ tag has an ‘alt’ attribute that describes the image, as such:
<img src="image.jpg" alt="depiction of image">
Testing Text Color Contrast
Lastly, we must ensure the contrast between the text color and its background is high enough to be legibly read by anyone.
Warnings like Users may have difficulties reading text content due to insufficient color contrast or underlines in the DOM tree ensue when the text does not meet the contrast ratio.
With these steps, you should now be able to manually correct and test for accessibility issues on your webpage, ensuring that your website is inclusive to all users.
Happy Testing!
Tags:
#WebAccessibility #Testing #ContrastCheck #AltText
[Reference Link](!https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/test-issues-tool)