Imagine visiting this website and having a difficult time navigating it. Not because of the browser you used or the code implemented, but because of a medical, physical, or cognitive limitation. Website accessibility refers to the practice of making websites and content which offer a seamless experience for all users.
Based on how your WordPress website was created, you may be blocking a significant portion of your audience from experiencing your content, solely because your site lacks accessible features.
W3 also notes that website accessibility is not solely for those with permanent limitations. It is also beneficial for users with situations such as:
- Those using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.
- Elderly individuals with varying and changing abilities due to aging.
- People with “temporary disabilities” including a broken limb, lost glasses, or a medical condition.
- Users with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio, such as public transportation.
- Individuals with a slow Internet connection, or who have limited or expensive bandwidth due to their geographic location.
When you’re ready to improve your WordPress website’s accessibility, implement these 13 tactics.
1. Be Considerate of Colors
Did you know there are approximately 2.7 million color blind people in the world, which is about 4.5% of the population?
When choosing colors for your website, be meticulous about the color ratios and contrast. You should use high contrast color options, such as black and white, which makes it easier for users to see and read the website content. Ideally, use black text on a white background, as this is readable by all users without full vision limitations.
However, do not rely solely on color to differentiate the content, buttons, and links on your website.
2. Underline Links
Recently, it has become a trend to remove the underlines from web links. The argument for this is to make the content more aesthetically pleasing. However, by eliminating the underline, you are making it difficult for users to identify which bit of your content is hyperlinked.
If you’re strictly opposed to using underlines, find another way to distinguish the link from the regular text, such as bolding the copy.
3. Use Descriptive Links
Speaking of links, individuals with vision impairments or limitations use screen readers and voice command technology to interact with website content. This means your links must be contextual and provide users with insight as to where that link will bring them.
For instance, instead of having a button which says “Learn More,” your button or link could say “Click Here to Learn More About Our Services.”
4. Use an Appropriate Size Font
Have you ever accessed a website on your smartphone or laptop and needed to scroll in because the font was so small? When creating your website, be mindful of font size—not only for those with vision impairments, but also those using small screen sizes such as on a smartphone.
5. Add Main Content Links
Screen readers begin voicing content at the top of a page. Often, depending on the coding of a website, this means the user must listen to the menu, navigation, and other extraneous content before getting to the point or main content of a webpage.
To improve a user’s experience on your website, add a “Skip to Main Content Link” in the first column of your HTML. This will allow those with screen readers to avoid the unnecessary content on your page.
6. Image Alt Text
Images cannot be described to a user using a screen reader unless Alt Text is utilized. However, there is a bit of confusion surrounding this website functionality.
Image Alt Text was first introduced for accessibility purposes. However, it later became hijacked for SEO strategies and marketers began using this field to implement specific keywords. Naturally, this does not present an accessible or enjoyable experience for those using screen readers or voice commands.
Instead of filling this space with keywords, describe the image presented. For an even better user experience, make sure the image Alt Text flows smoothly with the context of the page content.
7. Use Content Headers
Did you know the Nielsen Norman Group reported 79% of website visitors scanned content, while a mere 16% read it word-for-word? In addition to aiding those who skim through content, headers break up large bits of text on a webpage. This helps those using screen readers determine the context of each section.
Additionally, certain screen readers enable users to skip to specific sections of the content. With this in mind, also write your headers so they are easily skimmable. Users should know exactly what a section is about within the first 4-5 words.
8. Be Weary of Using CAPTCHA
CAPTCHA is a method for protecting your website and information against spam. You’ve probably seen them used as:
•“I Am Not a Robot” buttons
•Random strings of characters
•Gamification content
While those with hearing impairments have no trouble using visual CAPTCHAs and those with visual limitations can use audio CAPTCHAs, what about those who are also blind and deaf? When you use a CAPTCHA, individuals with both hearing and vision limitations cannot complete this action.
Although CAPTCHA is a useful tool, consider finding a different spam alternative for your website.
9. Offer Text Alternatives to Visual and Audio Content
To improve the accessibility of the content on your website, add a text alternative. For instance, if your website uses videos to tell a story, use captions to allow those with hearing impairments to understand the context of the video. Or, if you publish podcasts or audiobooks to your website, offer a text transcript, as well. Offering a text alternative to your visual and audio content ensures the content can be consumed by all.
10. Consider Form Field Label Placement
When creating forms for your website, you may be enticed to put the field labels inside the field for visual aesthetics. However, some screen readers cannot access this text if inside the form field. Instead, place form labels and content above or to the side of the respective fields.
11. Enable Tab Indexing
Those with fine motor skills limitations may not be able to use a mouse or interact with your website using a trackpad. Instead, they rely on the Tab key on a keyboard to navigate through a website. With this in mind, make sure tab indexing is available on your WordPress website.
Tab indexing refers to the process of establishing the order of elements on a website. By doing this, you ensure that all users can access your website content in the order it was meant.
12. Include Access Key Capabilities
Similar to tab indexing, access keys assign specific content to various keys on a keyboard. Many also refer to this action as shortcuts.
For instance, if coded correctly, a user could hit the key “1” to be taken to the homepage, “2” for the Contact page, and so on, as defined.
Use this quick guide to implement access keys on your website.
13. Test Your Website for Accessibility
Not sure if your website is accessible for all? Test it! There are a variety of accessibility tools available online. The first step to a more accessible website is simply to evaluate its current state.
How have you made your WordPress website more accessible to users across the world? Share your thoughts and tips with us by commenting below and browse Bluehost’s WordPress hosting solutions.
4 Comments
Very nice post,amazing tips to improve sites accessibility specially Underline Links and Alt tags to catch users attention.
These Tips are really helpful for the Website accessibility and makes it user friendly
These tips are very useful in Creating a User friendly website
There are a lot of ways to drive traffic to your site, but Search Engine Optimization is one of the most effective. SEO is a collection of strategies and techniques aimed at helping your pages rank higher in search engines results. So informative article Machielle. Thank you.