Part of good web design is informed decision-making for WordPress accessibility. Focusing on accessibility will enhance your website’s user experience, improve your site’s search engine optimization, and keep your company from facing costly lawsuits.
But before you make accessibility a priority in your web design process, you have to understand what it is and what it entails.
Understanding WordPress Accessibility
WordPress, at its core, was created with accessibility in mind. As open-source software, it’s available to anyone. WordPress is committed to inclusivity and wants users, no matter their ability or how they access the internet, to be able to create and maintain a website built with their software.
In a nutshell, accessibility is the practice of creating websites that are usable by the largest number of people. These people include users with disabilities like vision impairment or limited mobility. It also includes users with different intellectual abilities or varying means of accessing the internet.
WordPress strives to make the dashboard and any themes they create compliant with recognized accessibility guidelines. But because WordPress is open source, anyone can develop themes and plugins for the platform. This ability means that all themes and plugins available may not be accessible, but the themes and plugins created by WordPress are.
Key Decision-Making Areas for WordPress Accessibility
When designing a WordPress site, there are many things to consider to make it accessible. While each website will require specific considerations, this list is a good starting point for designing your WordPress site with accessibility in mind.
Choosing a Theme
WordPress and third-party developers create themes regularly, which means there are a lot of them to choose from. Sticking with themes created by WordPress is a good idea because it’s dedicated to accessibility. This differentiation doesn’t mean that other developers aren’t. But before you choose a theme from a developer, do some research into the theme itself and see if they’ve made considerations for accessibility.
For a theme to be accessible, the menus must be accessible from the keyboard for users who use the keyboard rather than a mouse. The color contrast for the theme needs to meet standards for users with vision impairment, and the HTML structure needs to use semantically correct code for users who access websites using screen readers.
These considerations may seem small, but they can make a website accessible for many users who may otherwise be excluded.
Controlling Color Contrast
The wrong color contrast on a website can make a site unreadable for some users. Ideally, the color contrast between the content of the site and the background should be enough for good readability. Still, it shouldn’t be so bright that it causes issues for users with sensitive eyes or cognitive problems. There are no criteria for defining excessively high contrast, and it’s recommended that you use high contrast selectively.
Additionally, color shouldn’t be the only way you indicate control of content. For example, if a line of text is a link, color shouldn’t be the only indicator that it’s a link. Not all users can perceive every color and would lose navigational abilities if color were the only indicator. You can use underlining to make the link more clear.
Determining Font Sizes
Modern browsers can resize text regardless of how the web creator defines it. But it’s still a good idea to be aware of the requirements for accessibility. When decision-making for WordPress accessibility, people should be able to enlarge text without it becoming unreadable or hidden on the page. Generally speaking, a font size of 16 pixels is good for content. When experimenting with line heights, test how your content looks with different browsers and different screen widths.
Using Multimedia Content
While many users can view videos and photos or hear audio files, not all users will. So, when using multimedia elements, alt tags, transcripts, and proper headings can help users who rely on accessibility tools to access your content.
For example, users with impaired vision won’t be able to see the images you put on your site. But a screen reader can pick up the information you put in an image’s alt tag and describe it to the user.
While someone with impaired hearing can see a video you put on your website, they won’t be able to hear the audio. Providing a transcript or using closed captions allows that user to understand what’s said in the video.
This accessibility doesn’t just apply to video, images, or audio. Downloadable PDFs and other documents should be accessible as well. And one crucial element of creating accessible PDFs and documents is using the correct header hierarchy and properly formatted lists and tables. That will enable screen readers to share the information with users.
Forms rely on HTML code to function. For a form to be accessible, the HTML code must be semantically correct. That means each field on the form is correctly labeled so screen readers can tell the user what the field is for.
Providing instructions is also essential. These instructions should help the user understand how to complete the form. When there is an error or a success, users should be notified in an accessible way, not just a sound or an animation with no alt tags.
Tables are perfect for displaying data with relationships between the values horizontally and vertically. If you need to show the relationship between sales data over a few years, for example, then a table might be a good way to show it.
To make tables accessible, you must code them correctly. Screen readers will pick up on the data relationship the table is conveying and share that with the user. But, if you code the table incorrectly, it won’t make sense to the user. Incorrectly coding a table can make the data more challenging to understand overall.
When adding links to your content, make sure the anchor text for the link explains what the link is. For example, the anchor text for a product link should be the product’s name and not something vague like “click here.” This rule is so users with screen readers can get a better idea of what the link is.
When using links, open them in the same tab. Opening the link in a new tab or window could disorient the user, meaning they can’t use the back button to return to the original page.
Selecting accessible plugins is essential for many reasons. First, accessible plugins are usable by people with disabilities. Second, many countries and organizations require accessibility to commercial sites.
Many plugins are created with accessibility in mind. Before installing a plugin on your site, read the information provided by the developers. If a plugin is accessible, it will be noted.
Best Practices for Decision-Making in WordPress Accessibility
Accessibility may seem like a buzzword to some, but it’s a crucial element of WordPress design. Not only is accessibility the right thing to do — the law requires it. The Americans with Disabilities Act requires places of business to be accessible to those with disabilities, including e-commerce websites.
Some consider accessibility a constraint to making a good website. They envision boring government websites and assume they must create something similar. But the reality is that government websites rarely have the budget or intent to update websites as a business site does. So instead of thinking of accessibility as a constraint, think of it as a parameter necessary for a good website.
It may look different from the non-accessible design you originally had in mind, but that doesn’t mean you can’t make a great website.
And when it comes to getting your whole organization behind WordPress accessibility, there are some things you can do to get your team on board.
Give Authority to Prioritize Accessibility
Accessibility isn’t just a concern for the design or development teams. While no one at your organization needs to be a certified expert, everyone should understand the basics. This approach will allow your company to create with accessibility in mind.
The marketing team can create accessible marketing materials. The developers can create accessible WordPress sites. The designers can create new and innovative ways to comply with accessibility guidelines.
Giving everyone in your organization the authority to prioritize accessibility means everyone creates something for the greatest possible number of users. And when the executive staff understands accessibility, they can help lead the company in that direction.
Understand the Guidelines
There are multiple organizations devoted to accessibility and creating certifications for accessibility. While your team doesn’t need certification, understanding accessibility guidelines is important.
Consider adding accessibility training to your professional development agenda or hire accessibility speakers to come to talk at your company. The more information your team is exposed to, the better. There are also professional organizations you can join that will help you access resources regarding accessibility. A Post Status membership is perfect for those who want to learn more about decision-making for WordPress accessibility and other WordPress news.
Test Your Decisions for Accessibility Compliance
Once you’ve put your accessibility decisions into action, it’s time to check them. There are several free and paid tools online to check how accessible a website is. Sites like Accessibility Checker are a great place to start. Siteimprove is fabulous if you want to go more in-depth.
Beyond that, consider accessing your site the way someone with disabilities would. Try navigating the home page with a keyboard. Try using a screen reader to access a blog post. Newer Apple devices have easy-to-use accessibility settings and are a simple way for your team to see how your accessibility efforts are going.
Use Alternative Text for Images and Multimedia
Alternative text is descriptive text that explains the content of images and videos. For users with vision impairments, a screen reader reads alt text, and the text serves as a means for them to understand the content of the images or multimedia elements.
But alt text is also helpful when an image doesn’t load properly. Not all internet users have access to the same high-speed connection, and in some cases, a photo may not load properly if a user can only access the internet via dial-up. When an image doesn’t load, the alt text gives the user information about the image.
Structure Content Properly
By now, you likely know that headings are essential for search engine optimization. They’re also crucial for good accessibility.
Generally, headings organize your content and make it easier to understand. Headings outline the content and make specific information easier to find when used correctly. But for those headings to be accessible, you have to use the correct formatting.
Instead of making headings bold and in a slightly larger font, use the headings in the content editor. Those actually code the headings to be visually and structurally marked as headings. This approach allows screen readers to understand the headings are there, which bold text doesn’t.
Provide Accessible Navigation
Navigation is how users make their way through your website. While many users use a mouse, some use a keyboard to jump to different points on your website’s menu. Links on your site should be tab-able, meaning users should be able to hop to the next link using the tab key.
For users who require screen readers, you must code the links on your website correctly. That way, a screen reader can find and convey them to the user.
Keep Accessibility in Mind for All Updates and Changes
Accessibility isn’t something you can do once and never think about again. As technology and how people access the internet change, you’ll need to update your site to ensure it’s accessible.
Creating a plan for a regular website audit is a great way to ensure you’re always keeping accessibility in mind. It will also help you find any issues before they become problems. Regularly checking your website’s accessibility is the best way to make sure as many people as possible can use your site.
Align Resources to Support Decisions
Accessibility is important. Your team can’t make accessibility a priority if they don’t have the time, money, or resources to do so.
Paying for research resources or accessibility tools your team will use can help them create a more accessible website. Encouraging your team members to take classes or seek out certifications will help your accessibility efforts in the long run.
Tools for Making Accessible Decisions in WordPress
Accessibility tools can tell you if you’re hitting your accessibility goals or missing the mark. There are tools for different aspects of accessibility and various departments within your organization.
Accessibility tools to consider include:
- Accessibility Checker. Accessibility Checker will tell you if your website is accessibility compliant or not.
- WebAIM Color Contrast Checker. Not sure if your color contrast is right? WebAIM Color Contrast Checker allows you to input different hex codes to check their contrast ratio.
- ARIA Authoring Practices. ARIA Authoring Practices will help you learn about creating semantically correct HTML code for accessibility.
- Wave Accessibility Tool. Wave Accessibility Tool helps content creators make their content more accessible.
- WP Accessibility. If there are accessibility issues in your WordPress theme, WP Accessibility can fix them.
- Ax Dev Tools. Ax Dev Tools helps developers find and fix accessibility issues during development.
This list isn’t comprehensive, and new tools become available often. If you want to know more about new technology and how it can help you as a WordPress professional, check out these WordPress tech posts.
Addressing Common Accessibility Challenges in WordPress
It’s easy to design with accessibility in mind when building a website from scratch. But when you already have a website you’ve spent time and money creating, you’ll need to create a plan to help the site meet accessibility guidelines. While every site is different, there are some common issues to consider.
- Non-Compliant Themes. Making themes accessible takes significant effort and testing, and developers who did that would note it in the theme’s documentation if they had. Instead of trying to fix an inaccessible theme, switch to an accessible option.
- Insufficient Color Contrast. Find the hex codes for your colors and test them in the WebAIM Color Contrast Checker. If the ratio isn’t at least 4:5:1, then change the colors you’re using.
- Inaccessible Multimedia Content. According to accessibility guidelines, content must be perceivable with at least two senses. Adding alt tags and correct formatting that screen readers can read makes visible content audible content.
- Improper Use of Headings. Use headings to show the structure of the information you share using the headings function in the content editor. Don’t just make the text bold or bigger.
- Inaccessible Forms. Make sure forms have clear instructions and give accessible feedback to indicate success or errors. Create all forms using syntactically correct HTML.
- Non-Descriptive Links. Buttons or anchor text should indicate the content of the link. Update non-descriptive links so it’s clear what the link is.
- Insufficient Keyboard Accessibility. Update your site’s navigation so people can use the tab button to move to menu elements.
- Inaccessible Menus and Navigation. If your menu only functions on mouse hover or mobile, your site isn’t accessible with keyboard or gesture navigation. Updating this feature will make your site accessible to a larger audience.
Demonstrating the Impact of Accessible Decision-Making in WordPress
A focus on decision-making for WordPress accessibility will benefit your company in many ways. First, it will improve the user experience for all users and open your website to an audience that previously couldn’t use it, increasing your potential customer pool.
That increase in potential customers is significant. The Centers for Disease Control in the United States estimates that about 25% of all adults have a permanent or temporary disability that requires an accommodation. By making your website accessible, you could increase your audience reach by 25%. That’s a huge difference.
Accessibility also improves search engine optimization, helping people find your site through search engines. Alt tags and headings are necessary for good SEO, and using them correctly impacts how you appear in search results and your overall accessibility. A push toward creating a more accessible site could lead to a more substantial web presence overall.
And finally, accessibility is legally required. If your site isn’t accessible, you risk being sued. Updating your site to meet accessibility guidelines will keep you from dealing with a costly lawsuit.
Training and Education for WordPress Accessibility Decision Making
A focus on accessibility is a mindset shift for many people. Once you start to think about it, you can see how you can optimize for accessibility more easily. Training and education make this mindset shift much more manageable. There are many online trainings and conferences that focus on accessibility. Providing funding for your team members to take advantage of these trainings will help them better put accessibility practices into play at your company.
Educational accessibility resources for WordPress professionals:
- WordPress Accessibility Handbook
- W3C Web Accessibility Initiative
- A11y Project
- Deque Self-Paced online learning
Adding Accessibility to Your Decision-Making Process
Accessibility is crucial in the website design process. It’s also the law. Creating a focus on accessibility will improve your company’s reach and brand reputation. Creating accessible WordPress websites doesn’t have to be difficult when you have the necessary tools and resources to guide your decisions.
This article was published at Post Status — the community for WordPress professionals.