The following guest post comes from Reina Grosvalet. Reina is a Web accessibility compliance specialist and the owner of Waldorf PC. This article is a little on the technical side, but I think it might offer a good overview of common issues to consider when building websites to ensure they are accessible to all visitors. You can check out Reina’s LinkedIn profile here:
Five Accessibility Problems Plaguing Websites
In our modern age, technology is everything. Because of this, most businesses are now conducting transactions online for added ease and convenience for customers and companies alike. With just a few clicks of a button, we can have groceries and food delivered to our homes, and we can purchase any goods or services that we want or need. These modern conveniences are not easy for everyone to enjoy, especially individuals with disabilities. Accessibility barriers can make even the simplest tasks laborious and frustrating. Sometimes, tasks can even be impossible to complete. If you want to make inclusion your mission and ensure that you reach the largest customer audience possible, it will be advantageous for you to work hard to avoid these top five web accessibility problems.
- Lack of Labeling
One most common problem as it concerns accessibility is lack of labeling. What this means is that links, form fields and buttons do not have programmatic text that provides a proper description of these elements. This presents a significant problem because those using screen readers will not know what to input into form fields, and they will not know the function that unlabeled buttons and links will serve. Individuals using Voice dictation software to compensate for a motor impairment will also not be able to interact with webpages where there are unlabeled form fields, buttons and links because the voice dictation software will not be able to make sense of these elements. In order to avoid this particular accessibility problem, it is essential that programmatic levels are associated with all form fields, buttons and links. Additionally, visual labels need to be positioned to the right of each form field so users with low vision will know which of these elements they are interacting with as well as where to input specific information
2. Images without Descriptions
Another accessibility problem that is frequently encountered are images that do not have descriptive text associated with them which will enable blind and low vision users to understand what these images are. Without descriptive text, blind and low vision users can miss out on the meaning of content , which may cause significant difficulty with making an informed decision. Since pictures enhance the written content on a webpage and help to tell part of the story, text descriptions need to be added to these pictures so that blind and low vision users will have full access to the same content. Descriptions can be added by providing a brief but concise explanation of images inside of the alt tag.
3. Keyboard Accessibility
Another common accessibility problem that is often encountered is lack of keyboard accessibility. What this means is that elements are programmed so that they can only be interacted with by using a mouse and not a keyboard. When keyboard accessibility is lacking, screen reader users and users with motor impairments cannot interact with these elements. What this means for these user groups is that they are automatically excluded from procuring your goods or services. To make sure this accessibility problem is not present on your website, it is critical to ensure that all elements are keyboard accessible. Whatever users can accomplish with a mouse, they must also be able to accomplish by using the keyboard.
4. Animation that cannot be turned off
While animation can sometimes enhance content on webpages by making it more appealing to viewers, it will also cause problems when there is no way to turn it off. Animation can interfere with how scream reader users navigate webpages because it could cause content to automatically scroll, randomly throwing these users in different places. Animated content that cannot be stopped will also cause problems for users who have seizures. Content that blinks at certain speeds has been known to cause seizures to occur. If you want to use animation on your webpages, make sure there is a control in place so that animation can be turned off easily. Position that control at the top of the page so users won’t have to search extensively for it.
5. Improper Semantic Structure
Finally, improper semantic structure is also a problem commonly found on websites. Rather than headings being tagged as actual headings, bold print is used instead. This is problematic because screen readers cannot decipher which print is bold and which is not. Lists are also either nonexistent or improperly structured. Sometimes, heading tags are used to make text stand out for emphasis. When one or all of these problems are present, this interferes with screen reader users ability to navigate pages. To ensure that screen reader users can navigate webpages without trouble, use actual heading tags for headings. Also, make sure to structure headings in the proper hierarchical order. The title of your page should be tagged using in h1 tag. Your section titles must be given h2 tags. Subsection titles must be given h3 tags, and so on. If you need to provide emphasis to various portions of content, do not use heading tags. Use CSS for styling instead. When a list is present, the list must be tagged properly. If the list has nested elements, they must also be nested properly. Furthermore, if there are paragraphs present on the page, they must be properly tagged as paragraphs.
Conclusion
Avoiding these five most common accessibility problems is a great start to ensuring that your website is inclusive to all audiences. To ensure that your website is fully accessible, it is vital that you learn all you can about accessibility. You must also hire disabled individuals to test your webpages to ensure they can actually be used in interacted with by individuals with disabilities.