In this day and age, it's imperative web professionals like designers and developers ensure the websites they create are accessible.
For the uninitiated, this basically means doing everything within your power to ensure the broadest spectrum of global internet users can enjoy whatever your client’s website has to offer.
Many of us have the luck and privilege of never needing to consider the accessibility of the websites we browse. We just fire up our laptops or smartphones, head to Google, and plug in our search. But you would be amazed at the vast array of hurdles that thousands of people all around the world have to overcome to surf the web.
Most notably:
- Disabilities
- Poor health
- Old age
- Poverty
- A lack of access to a fast internet connection
This is why you, as a website manager for your own site or clients, should take it upon yourself to combat issues surrounding website accessibility. When you consider that WordPress powers as much as 37% of the net, it makes sense that getting to grips with accessibility for WordPress websites will help you open up a wide spectrum of the web to those who need it.
That being said, more goes into creating an accessible site than just compliance. So, in light of that, we're going to explore what WordPress accessibility actually is, why it's important, and what you can do to boost the accessibility of the sites you develop.
There’s a lot to cover, so let's jump straight in!
Manage all your client’s WordPress websites in one place with The Hub by GoDaddy Pro
Making your clients’ sites accessible is easier with The Hub by GoDaddy Pro. It allows you to house and manage all of your web design projects in one place. You’ll receive 24/7 prioritized support from expert Guides, and it features tools like website performance monitoring, bulk updates and invoicing. It’s one of the best benefits of being a Pro user.
What's WordPress accessibility? Why is it so important?
As we just hinted, web accessibility is all about creating websites and platforms that everyone can use — whatever their location, disability, economic status, etc. The more people who can use your website or your client’s website to the fullest, the better its accessibility.
For many, the heart of web accessibility is about ensuring websites are entirely accessible for those with disabilities, most notably the:
- 285 million people around the globe living with visual impairments who may need to use screen readers to surf the web
- 466 million people living with disabling hearing loss who won’t hear audio or video content
- Those living with conditions limiting their motor skills, – including cerebral palsy, muscular dystrophy, multiple sclerosis, and spina bifida (to name a few), – who may have to use voice commands or other non-standard methods to navigate their way around websites
- The 5% to 10% of the global population living with dyslexia, and others who struggle to read specific fonts and smaller-sized text
All in all, it’s predicted that 15% of the world’s population, — some 1 billion people — live with a disability. By making websites accessible, you’ll have a positive impact on the lives of a massive number of people.
If you're building or managing websites for clients and want to stay ahead of the curve, accessibility needs to be at the forefront to ensure you're creating something truly inclusive.
Are WordPress websites ADA compliant?
The Americans with Disabilities Act Standards for Accessible Design ensures that disabled individuals have equal opportunity to access and use information available on computers and smart devices. As a web designer or developer, you must make sure that the websites you design are accessible to those with disabilities in ways that work for them.
So, how can you make sure the WordPress websites you design are ADA-compliant? The good news is that there’s a WordPress ADA compliance team dedicated to improving accessibility with each update. Their goal is to meet and exceed accessibility standards set forth by Section 508 and WCAG (Web Content Accessibility Guidelines).
While the WordPress ADA compliance team enhances accessibility, the design and features you include on websites will need to be accessible, too. There are over 100 accessibility-ready WordPress themes available, and plugins like WP ADA Compliance Check Basic scan the sites you build for potential accessibility problems. Creating highly accessible websites could set you and your clients apart from competitors.
Types of accessibility
Accessibility is a multi-faceted term. Below, we break down some of its major WordPress accessibility aspects to help inform your website creation process.
- Auditory: Soundbites and narrated videos won’t be accessible to those with hearing disabilities. For videos, ensure users can use captions or subtitles. For soundbites, provide an exact transcription of the speech directly below or beside the sound clip. All sound should have volume control, and all transcriptions or captions should allow users to change the text size and color.
- Visual: Those with visual impairments, like color blindness, may struggle to read text or view images. Use high-contrast themes to make text more legible, and make interactive content visually distinguishable, such as using PDF icons and highlighting and underlining links. Include alt text for images, use headers and put text outside of response boxes when creating online forms, making the content accessible to screen readers.
- Motor/mobility: Conditions like Parkinson’s disease or paralysis affect users’ ability to use a standard mouse and keyboard. Allow third-party voice navigation systems to interact with your site, and design code that works with other navigation systems, including eye-movement navigation, voice-activation navigation and specialty keyboards.
- Cognitive impairments: Those with cognitive impairments, like dementia or Down Syndrome, have WordPress accessibility needs, too. Use a simple website design with icons and text labels, and use the same layout for all pages, with each linking back to the homepage. Content should be easy to read, not above the sixth-grade reading level and broken into small sections, so it’s not overwhelming. If you have time-limited content, allow users to request more time. Forms should be split into short, multi-step processes, and the site should offer prompts and feedback to guide users.
- Economic status: Many people around the world aren’t able to access the web on brand new or high-powered devices, so you’ll want to create a version of your client’s site that relies on simplified code. It might not be as sophisticated as the main website, but it should have all the same content. Plus, keep in mind that websites with custom CSS and/or sophisticated plugins and widgets often don’t function as well on older web browsers like Lynx and Opera.
- Multi-device: Multi-device accessibility refers to the fact that websites should look and perform the same no matter the device the visitors use. These days, most WordPress themes incorporate responsive design, – so this shouldn’t be too much of a problem. It’s always worth conducting an audit to ensure your client’s website works consistently across different devices.
Usability vs. accessibility
Before we dig any further into this overview, it's worth noting that there are two aspects to usability that play an equally important role in how accessible a website is:
- The accessibility of the website WordPress theme, i.e., how the site looks
- The plugins and custom coding, i.e., what the site does
Accessibility regarding how a site looks pertains to aspects like poor color contrast or fonts that are tricky to read. This is different from accessibility concerning how the site functions. For example, specific plugins or widgets might not be compatible with keyboard-only use, voice input, and so on, but we’ll cover WordPress accessibility plugins shortly.
To offer visitors a truly accessible experience, it's worth considering and fulfilling both aspects of website usability and accessibility.
Accessibility guidelines for WordPress websites
Section 508 compliance
Regulations for website accessibility vary. However, US government websites have to adhere to Section 508 Accessibility Guidelines, which states that websites must:
- Offer built-in accessibility support like keyboard navigation
- Support screen readers and other assistive technologies
- Work with hearing aids and other assistive listening devices
- Ensure videos, images, or any other multimedia files include captions and audio descriptions
Web Content Accessibility Guidelines (WCAG) compliance
WCAG is another crucial component of WordPress ADA Compliance. WCAG 2.1 provides the online compliance standards used by the ADA, and it describes four principles of accessibility, also known as POUR:
- Perceivable: All content must be presented in ways users can understand – it can’t be undetectable by all of their senses. Accessibility options include captions, audio descriptions and sign language translations.
- Operable: All users must be able to interact with and operate the website. Examples of compliance include limiting flashing images or videos, allowing users to extend time limits for content and using headings and sitemaps to maintain organization.
- Understandable: Content must be understandable to all users. Compliant aspects include using language that’s compatible with varying assistive technologies, composing content that doesn’t exceed the lower secondary education level (or having alternative content at a lower level available) and identifying input errors and offering corrections, where available.
- Robust: Content must be compatible with a broad spectrum of current and future users, including assistive technologies. Status messages and interface components must be programmatically determinable, and elements must be able to be parsed into a data structure that assistive technologies can utilize.
Website content must comply with each accessibility principle, or users may not be able to use the site.
Benefits of creating an accessible WordPress site
Accessible websites mean that a wide array of those living with a disability are far more likely to enjoy a website and everything it has to offer. Accessible websites are also (usually) quicker to load, offer a better user experience, and are adequately optimized for SEO. With that in mind, here are some of the human-related and SEO benefits to boosting a website’s accessibility:
Extend reach
As previously established, a vast proportion of the global population experiences some accessibility issue or another. Building an inaccessible client site could cause the client to miss out on an entire section of society that their brand could easily engage with otherwise.
Catering to specialized needs isn't just an act of generosity; it's also good for your and your client's bottom line.
Improve the website's usability
As you make the site more accessible, you’ll likely find that you enhance its general usability, which works wonders for improving the user experience.
This will most likely include:
- Simplifying overly complicated code (which should boost the speed of the website's load time)
- Creating a clean and easy-to-use navigation menu (if on eCommerce, this should encourage shoppers to browse through the products and actually purchase something)
- Adding image alt text to all the photos (which isn't just great for assisting the visually impaired, but it's also fabulous for the website's SEO)
Which leads us nicely onto our next point...
Appear higher in search engine rankings
Providing searchers with the most relevant and user-friendly experience is Google's priority. Its algorithm is increasingly focusing on website accessibility. Consequently, it's rewarding accessible websites by ranking them higher in its search results.
This is one reason why all new and updated WordPress code must conform to the WordPress Accessibility Coding Standards.
While we're on the topic of SEO, it's worth highlighting that certain ranking factors undoubtedly overlap with accessibility, for example, adding transcripts and image alt tags. Not only are these adjustments crucial for enhancing the overall accessibility of the website, but they're also an excellent opportunity to insert the keyword the website is trying to rank for.
Lead by example
It’s easy to become cynical about web accessibility and view it as just another hoop you have to jump through to enhance your website’s SEO. However, the heart of any website accessibility strategy should be offering the best possible experience for each and every user.
By doing this, you’re showing that your web design/management company wants to impact the world positively. Accessible content is more than SEO — it’s about leveling the playing field for everybody.
For those living with disabilities, internet shopping could be the easiest way for them to interact with your or your client’s brand. When you consider this, the need for an accessible website is all the starker.
The potential risks of creating a poorly accessible website
Not providing an accessible site isn't just a failure to produce an inclusive consumer experience; it could also (potentially) break the law.
It's not unheard of for website owners to face lawsuits after failing to abide by the guidelines published in the Americans with Disabilities Act (ADA). The number of cases of this nature is skyrocketing!
Accessing online information should be a right enjoyed by everyone. By focusing your attention on accessibility requirements, you do your small bit for transforming this ideal into a reality.
Take Domino's, for example. The international pizza giant had a case brought by Guillermo Robles, a man who lives with blindness. After he wasn’t able to place an order on either their website or mobile app - despite using screen-reading software - he sued the company in a case that made it all the way to the Supreme court.
The Court rejected Dominos appeal and sided with the 9th US Circuit Court of Appeals, which stated that ,“...alleged inaccessibility of Domino’s website and app impedes access to the goods and services of its physical pizza franchises — which are places of public accommodation.”
How to improve WordPress site accessibility
If you’ve never considered web accessibility before, it may feel like a daunting task lies ahead of you. But there’s a core set of features to keep in mind when determining how to make your client’s WordPress site accessible, and if you stick to these, you shouldn’t go too far wrong:
Choose an accessible theme
As mentioned briefly above, there is a growing list of WordPress accessibility-ready themes you can find with a simple search. These themes are designed with accessibility in mind, from their layout to their design. One of the most critical components of an accessible website theme is the navigation menu, which impacts assistive technologies like screen readers and keyboard navigation. If the navigation menu isn’t accessible, users won’t be able to explore the site.
The navigation menu should utilize ARIA labels and roles to improve accessibility, and it should have a ‘Skip Nav’ option before the menu, allowing screen reader users to skip straight to the page’s content.
Even when using accessibility-ready themes on WordPress, you must test them. Not all of them are perfect, and testing will highlight issues that need tweaking. Even if you use a tested and accessible theme, you’ll still need to be mindful of how you design and build the site. Using inaccessible plugins will damage the site’s accessibility.
Utilize accessibility-friendly plugins
Plugins are part of what makes WordPress so fantastic. They add new features and functionality to the websites you build, including forms, e-commerce functions, photo galleries and more. However, they’re rarely accessibility-friendly, as they manipulate the code of the website. Plugins that have interactive elements like carousels, calendars, page builders, animations, sliders, pop-ups, tabs, forms and dropdowns are often rife with accessibility issues, as assistive technology may be unable to describe and interact with them appropriately.
On the other hand, there are almost 100 WordPress accessibility plugins that claim to improve or monitor accessibility, or even correct inaccessible plugins. Take these promises with a grain of salt, however. Whether you use plugins that claim to be accessible or not, always conduct thorough testing before cementing their place in a website build. It’s the only way to determine how a plugin will impact the site’s accessibility.
Include alt text for images
As previously mentioned, visually impaired internet users often utilize screen readers. These read aloud the alt text assigned to the images on the website to provide the user with context. In light of that, any website imagery (unless it's purely decorative) should be given alt text that describes the image.
Use acronyms with caution
Unfortunately, screen readers can struggle with these, which can (sometimes) result in incorrect interpretations.
Communicate the meaning of these acronyms and any necessary subtext for the website visitor to understand the abbreviation properly.
Clearly label contact forms
If the contact forms on the site don’t have clearly labeled form fields, consider changing this. Otherwise, again, screen readers can struggle to provide an accurate interpretation. When this occurs, it almost goes without saying that it's harder for the user to insert the correct info into each field.
Write descriptive anchor text for internal links
Screen readers empower users to flick between web pages using hyperlinked text.
But if the anchor text for a hyperlink or skip link is ‘click here,’ that doesn’t explain where the link takes the user. Instead, try to write more descriptive anchor texts that enable easier user navigation. You could use ARIA labels or screen-reader-only text.
Keep fonts simple
Unusual fonts may look good, but fancy fonts can be challenging for many users (especially for visitors just wanting to scan through the content).
It's usually best to opt for serif or sans serif fonts and avoid cursive fonts. You also want to steer clear of fonts that overly lean on the uppercase or alternating case and write in at least a 16px font size.
Avoid poor color contrast
Users who have vision loss or are colorblind won’t be able to read content or distinguish between website elements without a strong color contrast. WCAG recommends using a minimum contrast ratio of 4.5:1 for body text and 3:1 for large (bold 18px or standard 24px and up), user-interface or header text for optimal accessibility. Simple black and white contrast is suitable for these requirements. Remember that contrast doesn’t only refer to text. Any important images, icons or interactive elements must have sufficient contrast between all adjacent colors.
Including an accessibility statement on your client’s WordPress site
In some cases, you may have to publish an accessibility statement on your client’s website. Usually, this is something that explains the site is compliant with all relevant local regulations surrounding accessibility.
This will depend on the jurisdiction you fall under. Do some research to double-check that you or your client aren’t inadvertently breaking the law by not having an accessibility statement.
If an accessibility statement is needed to make the WordPress site ADA compliant, it should emphasize the site’s commitment to accessibility, provide a list of known areas where accessibility should be improved, note what’s being done to improve it and describe how the site was tested to determine its compliance. You should also include contact information so those with accessibility-related concerns, questions or suggestions can reach out. W3C offers more information on what the statement should include and a free tool to generate one.
How to test your client's WordPress site accessibility
If you’re new to testing the accessibility of a website, don’t fret. There are several approaches to WP ADA compliance checks:
- Automated tests: There are online tools that conduct automatic compliance checks, and they’re an excellent place to start. They identify problems like poor contrast, missing alt text for images and organizational concerns, giving you a targeted list of areas to improve. Available tools include:
- Self-assessments: Since no online tool is foolproof, you’ll want to conduct a manual or self-assessment, too. This involves putting yourself in the shoes of different users and trying to interact with your site as they would. You should:
- Use only your keyboard. Disconnect your mouse, and make sure you can navigate the site with only keyboard commands, including switching pages, following links and accessing the navigation menu.
- Use a screen reader. Utilize a screen reader tool from your phone or computer to get a sense for how the content sounds, ensuring it makes sense when read aloud and no information is left out.
- Access it from different networks. View your site while using a slow or poor-quality internet connection, such as at a public library or restaurant, and see how your site loads. If it takes longer than several seconds – or some aspects don’t load at all – then it’s inaccessible to users who don’t have access to high-speed internet.
- Nail the details. Check that all of your images have alt text (right-click on them and select ‘Inspect’ or ‘Inspect Element’) and that interactive elements are brightly outlined or highlighted. Consider how the page would function if decorative design elements were removed – is all of the information still accessible? Test the zoom function, too, to ensure no elements are cut off or unusable at 200x zoom.
Another suggestion for testing your website is to provide an area or form for users to provide feedback, which will give you insight into their experience and areas where improvements are needed.
Are you ready to start getting WordPress accessibility right for your clients?
Unfortunately, designing a fully accessible website isn't always a walk in the park.
This is especially when you consider the incredible freedom WordPress gives you to download whatever plugins you want, not to mention the sheer breadth of coding that you can write to make your site your own.
In light of that, it's near-on inevitable that you'll end up veering away from the framework showcased in your accessible theme.
Although a bit of effort might be required to ensure everyone, no matter their disability, economic status, or the device they're using, can enjoy a website — it's worth it.
Don't just leave it to chance that coding, design, and plugins are accessible. You'll need to double-check to make sure everything’s compliant. With the right accessibility tool you can take a load off your shoulders and ensure websites are always accessibility-ready.
Meet the 27-hour day
We built The Hub by GoDaddy Pro to save you time. Lots of time. Our members report saving an average three hours each month for every client website they maintain. Are you adding that kind of time to your day?
