How to improve Accessibility on your WordPress Website?
Are you planning to make an accessible WordPress website? Congratulations, your site will be open to the widest possible audience!
It’s essential to recognise the fact that not all of your potential visitors are the same. Many of us take simple capabilities for granted. When designing any website, designers and developers must understand that there can be users who cannot see web pages or use the mouse or keyboard as we can.
WordPress developers spend much of their time speculating about site optimisation. Often the main concern is whether the site is fast enough or if the layout is intuitive? They also check if the images are in the right size and resolution or whether the content engaging?
Undoubtedly, as all of this is important, but not enough attention is given to site accessibility. How many times have developers asked whether or not everyone can gain access to your site quickly? Think to visit this website and to have a challenging time navigating through the content. It is not for the browser you used or the code implemented, but because of a particular medical, cognitive or physical limitation.
Based on how your WordPress website was created, chances are you are blocking a significant portion of your audience from experiencing your content. However, thanks to the accessibility features on the new WordPress themes, you can now improve your website’s reach.
Quality tips, tricks, and hacks to have improved accessibility on WordPress site
- Consider the colour – Approximately 2.7 million are colour blind people in the world, which is close to 4.5% of the population! So, when choosing colours for your website, designers need to be meticulous about the colour ratios and contrast. High contrast colour options, such as black and white has been studied to be more comfortable for users to see and read the web content. However, designers should not rely solely on colours to separate the material, buttons, and links on the website.
- Using descriptive links – Individuals with vision impairments or limitations use voice command technology or screen readers to interact with the website content. This means the links must be contextual and also be able to provide users with a proper explanation as to where that link will bring them.
For instance, instead of having a button that says “Learn More,” let the button or link say “click this link here to learn more about the services.”
- Underlining the links – Lately, it has become a course to remove the underlines from the web links. The reasons for this are to make the content look aesthetically pleasing. However, by dropping the stresses, you are making it difficult for users to distinguish which bit of your content is hyperlinked.
If you’re strictly opposed to using underlines, designers should find another way to distinguish the link from the regular text, for instance, bolding the copy.
- Choosing the right font – Did it ever happen to you where you needed to scroll to access a website on your smartphone or laptop because the font was too small? When creating your website, designers should be very mindful of the font size. This is necessary not only for those with vision impairments but also for those who use small screen sizes on their handheld devices.
- Adding the main content links – Screen readers often start voicing the content right from the top of a webpage. Usually, depending on the coding of a website, this means the user has to listen to the menu, navigation, and other unessential content before getting to the point or primary material of a webpage.
To improve a user’s experience on the website, adding a “skip to main content link” in the first column of the HTML can help. This will allow those with screen readers to avoid the extraneous content on your page.
- Image Alt Text – Images cannot be explained to a user with the screen reader unless there is the use of Alt Text. However, there is still a bit of confusion enclosing the website functionality.
Image Alt Text was first introduced for addressing the accessibility purposes. However, it later came into use for the SEO strategies as well, and marketers started using this field to implement some specific keywords. Naturally, this does not offer a convenient or enjoyable experience for those using screen readers or voice commands.
Thus, instead of filling this space with keywords, designers should describe the image presented. For even better user experience, make sure that the image Alt Text flows placidly with the context of the page content.
- Using CAPTCHA – CAPTCHA is a method which is commonly used for protecting the website and information against any form of spam. It is not surprising for users to have been asked: “I Am Not a Robot” or to identify some random strings of characters or some gamification content.
While those with hearing impairments do not face any trouble using visual CAPTCHAs and those with vision restrictions can opt for the audio CAPTCHAs, it becomes difficult for those who are both blind and deaf. Often, when using a CAPTCHA, individuals with both hearing and vision limitations cannot accomplish this action.
Although CAPTCHA is a useful tool, developers need to consider looking for a different spam alternative for the website.
- Text Alternatives – To enhance the accessibility of the content on your website, developers should always consider adding a text alternatively. For instance, if your website applies videos to tell a story, use subtitles or captions to allow those with hearing impairments to understand the video and its context. Again, if you publish podcasts or audiobooks to your website, a text transcript can work for those who are challenged with heading functions. Offering a text alternative to your visual and audio content warrants all can consume the content and automatically widens your consumer database.
- Form Field Label Placement – When you are making forms for your website, designers may be enticed to put the field labels inside the field solely for visual aesthetics. However, some screen readers do not have access to this text it is placed inside the form field. Instead, place form labels and content above or to the side of the respective fields.
- Include Access Key Capabilities – Similar to tab indexing, the access keys also assign some particular content to various keys on a keyboard. Designers also refer to these as shortcuts.
For instance, when coded correctly, a user can hit the key “1” to be taken to the homepage, “2” for the Service page, and so on, as defined.
Share This Story, Choose Your Platform!
about the author
WordPress and Accessibility Lover. I realize that a Website or an Application is a constantly developing project and requires long-term assistance to make it perfect. Let me blend my accessibility skill with seamless design and development integration using WordPress to make a perfect website for you. I can be your team or become part of your team or let me help when you have a tricky design or development issue and need support. Whatever it is, I will be there to make your things beautiful, accessible, and functional.