WordPress is a household name in web accessibility, with statistics showing that it powers over 35% of all websites. Many reasons make WordPress a popular option, including no license fees, it can be used for simple websites, a reasonable learning curve, and numerous plugins and themes to make it more accessible. But what about WordPress accessibility?
WordPress allows even those people least experienced with the internet to get a website online. Despite this popularity, questions continue to arise about how accessible WordPress is out of the box and the steps one can take to make it more accessible. This article looks at a WordPress accessibility checklist and a list of plugins to make the platform more accessible.
What is web accessibility?
Web accessibility aims to make a website available and perceivable to any user regardless of device or ability. Ideally, digital accessibility is a human right of all people (including the disabled) worldwide.
Most people rely on the internet to find different information online every day.
This can include direction, finding a coffee shop nearby, or even looking for better product deals online. However, this can be challenging for people with disabilities, for instance, visual impairment or loss of limbs. These users might have limited accessibility or face different barriers when accessing the internet.
But like everyone else, people with disabilities have the right to access the internet from anywhere and from any device to find the information they need online.
This makes web accessibility a vital part of any site.
Designing for accessibility is the only way to remove the barriers people with disabilities face when accessing the web. Whether speech-based impairment, cognitive, physical, or neurological, digital designers are responsible for ensuring that websites and applications are accessible to people with disabilities and from any device.
In fact, accessibility benefits go beyond people with disabilities; people with small screens, difficulty reading small fonts, and those with slow internet connections can benefit from web accessibility.
Besides being an ethical practice, web accessibility is a requirement to meet many international standards to minimize legal risks. A good example is the Americans with Disabilities Act (ADA) which is against discrimination against disabled. That means failure to adhere to these guidelines can put you at risk of lawsuits.
The best approach is to familiarize yourself with accessibility guidelines in your industry to ensure your site is fully compliant.
But web accessibility is not just about ethics and avoiding a lawsuit; it also has a business side. Ideally, search engines like Google rank accessible websites higher in search results. Besides, an accessible website has a faster loading time, leading to a better user experience and more on-site time. So, having an accessible website is a great way to build your online brand presence and draw more visitors to your site.
Is WordPress accessible?
Under the WordPress Accessibility Coding Standards, the WordPress ecosystem, including the WordPress.org website, WordPress core, and official plugins, must conform to Web Content Accessibility Guidelines (WCAG).
WCAG is an international web accessibility standard developed by the W3C Web Accessibility Initiative (WAI), a project by the World Wide Web Consortium (W3C). The latest version of WCAG is WCAG 2.1.
WordPress expects themes and plugin developers to comply with WCAG 2.1. But does this mean that everything in WordPress meets the set accessibility guidelines? The answer is no.
For example, even if the theme is marked as Accessibility Ready, it doesn’t necessarily mean they are AA compliant. Ideally, Accessibility Ready doesn’t mean that the theme is WCAG AA-level compliant; it only means they have met the minimum standards set by the review team. You can get more information about WordPress accessibility by checking the WordPress.org handbook.
Dissecting the WCAG accessibility guidelines
When building a plugin or a website, developers should consider these questions:
Can users use all functionality? (operable)
Is the content available to everyone? (perceivable)
Can users access the application or website using any device? (robust)
Is the content easy to comprehend? (understandable)
Perceivable
No matter how much content or information is on a website, it will have little effect if most people cannot perceive it. Users rely on a sense of sight to read the text on a site and understand the layout, including the different colors used.
However, visitors with vision impairment cannot rely on sight to engage with a site.
In such a case, there should be alternative ways for users to access your application’s content. This is where assistive technologies come into play. For instance, screen readers can help convert text into audio to benefit users with vision impairment.
Operable
This principle aims to ensure that visitors can use all functionality. For example, some users want to interact with a site using a keyboard, mouse, or other physical devices, while others prefer other alternative methods.
Whichever the case, you’ll want to ensure that you can accommodate them and they can navigate your site hassle-free.
Key things that can help in this endeavor include site maps, site search, and skip-navigation links. Using semantic elements and spacing is also an excellent way to make your content structure easily perceivable.
Understandable
Here the goal is to ensure that visitors can comprehend all content on a site or application. For instance, you should use appropriate font sizes and color contrast to ensure your content is easily understandable.
It’s also best to use simple words when explaining the background of a piece of content.
After all, using complex words will only make your content hard to read and understand. Lastly, you need to make navigation as easy as possible and guide visitors to avoid and correct mistakes.
Robust
As technology evolves, so are the devices people use to access the internet, and so should your website or application. Nowadays, users are using different operating systems to access a site.
The best thing you can do is to ensure that your site works for everyone, including those who want to customize their technologies to enjoy certain experiences.
To achieve this robustness, consider using modern tools and techniques when building your site or application to ensure your content is interpretable regardless of what operating system or browser a user uses.
WordPress accessibility checklist
Now that we’ve checked the WordPress accessibility basics, let’s look at the checklist you can follow to optimize your site for accessibility.
Layout & navigation
The first thing on our WordPress accessibility checklist is your website layout and navigation. These are key things to look for if you want to create a site that’s easy to use and access. Ideally, having a clear navigation and layout helps create a better user experience.
You need a clear, simple, and easy-to-understand layout to achieve this. However, make it intuitive to allow people to know where to find something on your website easily. Ideally, a visitor should understand your site’s layout from the moment they step on your site.
Besides the layout, focus on improving your site’s menus. The menus should be easy to understand and easy to access. For example, creating a menu that requires visitors to hover over to show the details but cannot use the keyboard will result in a non-accessible design.
The best thing is to ensure that your menu is accessible to both keyboard and mouse users.
Also, you should include a search bar for easier navigation. Of course, you shouldn’t include unnecessary links and pages to avoid confusing your visitors. Instead, only include crucial buttons and pages to guide the visitors.
The best approach would be not to use menus that require hovering options since keyboard users won’t be able to access them. Also, while drop-down menus are good, sometimes they may not work for keyboard-only users.
Of course, this depends on the site’s theme, so choose one that supports a drop-down menu for keyboard users.
Unnecessary notifications and pop-ups can make it difficult for users to access content, so you should also avoid them. These pop-ups can be intrusive, leading to a bad user experience. Therefore, avoid pop-up ads that are intrusive and that diminish user experience.
Adding proper headers on every page is recommended; it is a way to organize your content on a page and helps users to understand what a page is all about. As such, ensure you have accurate headers on every page that clearly describe each section.
Theme
Another crucial thing on the WP accessibility checklist is the site’s theme. Themes have a great impact on your site and form the foundation of your WordPress site. Ideally, the theme’s quality will differentiate between a good and a great website.
The best approach is to choose a theme with accessibility features.
It is crucial to choose a theme with simple layouts and designs. Your theme should support all users regardless of their devices. Also, you should ensure that your theme is WCAG 2.0 compliant — choose accessibility-ready themes from the WordPress Themes repository.
Another thing to remember when choosing a theme is to select one compatible with all types of devices, languages, and plugins. For instance, AMP Support helps enhance support for mobile experiences, while Right-to-Left Languages ((RTL) support helps create a website available for almost all languages.
Lastly, your theme should be compatible with Elementor and other page builders. While this isn’t necessary, it makes designing your website much easier.
You’ll also need to consider support for extra customization. After all, having an accessible theme isn’t enough if it’s not optimized for performance.
Accessible code
Next, you need to ensure that your code is accessible. This is important even if you will not be doing coding yourself because configuring and setting actions in WordPress can make your code inaccessible.
This can have far-reaching effects on users who rely on screen readers when navigating the site to access the content.
Some things to make your code more accessible include:
Semantic HTML — This help people with visual impairments understand the types of elements they engage with
ARIA landmarks — This helps screen readers get around a page
Header tags — A hierarchical heading structure helps users understand the content
Language attribute — This feature helps screen readers understand a web page’s language. Language attribute ensures that users don’t turn to the operating system’s language by default, resulting in mispronunciations of the page’s content.
Image alt text — Users can rarely understand your images without descriptive alt text. Include alt text in your images to help users ‘see’ through your images.
Skip links — Users with assistive devices use skip links to navigate features like the search bar and menu
As you can see, some of the things above, like header tags and image alt text, can be done by content creators in the WordPress editor. However, others like skip links and ARIA landmarks need coding from a developer.
Contrasts
Regarding accessibility, you need to pay special attention to the use of contrast on your WP site. Ideally, you should use adequate contrast to allow people to understand your background and text.
A strong contrast is crucial because it accommodates people with different vision problems and those using different monitors.
When creating a link on your site, you want to ensure it stands out from other links or texts. That means you should go beyond changing colors when you create a link to differentiate it from the others. One way to achieve this is to use bold and italics on the links or texts you want to emphasize.
You may also want to use contrast between the background and button to make the buttons stand out.
Text
Besides the contrast, you should consider the text itself. First, you need to pick the right fonts for your site — sans or sans-serif will do better because they are most readable.
We also recommend avoiding cursive fonts except for logos.
Another crucial thing is the font size, which greatly impacts readability. Depending on your preference, a 16px font size would be ideal, although it’s advisable to use resizable fonts. Consider choosing a theme that allows text resizing without interfering with the layout.
Another thing to keep in mind when it comes to text is the use of abbreviations and acronyms. Limit their usage when creating content on your website, as this will only confuse the readers, especially if they don’t understand the terminology.
Shorthand notes can also create more problems for screen readers, so you should write with clarity.
Videos & animations
Video files, sounds, and animations are other things that can affect WordPress accessibility. You should include alt text in these files to make it easier for users to understand what they are about.
However, ensure these files don’t autoplay when the user views the page. Also, remember to include options for playing, pausing, and volume controls and add captions for your website videos.
Clear & informative feedback
Next, you must ensure users get clear feedback when interacting with your website. For instance, they need confirmation messages when they take key actions on your WP site, like when they subscribe to a service or make a payment.
Besides confirmations, alerts can notify users when they encounter an error in the system.
Notifications are an excellent way to provide information about a specific update. It doesn’t matter what the update is about, but it should be clear.
A combination of text, background colors, and icons will help make it easily identifiable. And don’t just focus on giving errors to users; provide instructions on how to recover from those errors.
Responsive design
A responsive website design is crucial to a website’s accessibility. It’s no longer an option but a necessity. Nowadays, people use different screens and devices, including mobile devices, to access the internet, and your website should be able to accommodate them.
One way to achieve this is to have a responsive website design that looks good on all devices.
You can also opt to build desktop and mobile versions of your site to allow visitors on any device to access your website. Of course, the latter option will cost you more during the development and maintenance stages.
The idea is to ensure that your text size and line height are easily readable on different screen types. For instance, you can use large text and single columns on smaller screens. Also, navigation options should stay hidden on smaller screens until they’re opened.
On the other hand, small text and multiple columns are ideal for larger displays, and the navigation options should not be hidden.
Extra tools & plugins
Having a good theme and taking most of the above steps is great but is not enough. To improve WordPress accessibility, you need to take advantage of accessibility plugins and other tools that can help optimize your website.
Plugins can help improve a website and make it more accessible.
For instance, you can use accessibility plugins to improve your WordPress accessibility features. Of course, there are numerous accessibility plugins available, but you only need the ones that can benefit your WP site.
You can find these plugins on the official WordPress page and choose them by Accessibility.
Here are some of the best WordPress accessibility plugins:
One Click Accessibility
This is another free WordPress plugin that helps enhance your site’s accessibility features. One notable feature is the accessibility toolbar that provides access to tools like grayscale, light background, font resizing, and negative and high contrast.
It also has a skip link feature for adding links to different parts of the page.
WP Accessibility
WP Accessibility is one of the plugins that can help solve common accessibility issues. It has a font size and color contract toolbar that make content easily readable. It also comes with a skip links feature, allowing the screen reader to skip irrelevant content on a page.
accessiBe
accessiBe is another popular plugin that thousands of websites use to improve WordPress accessibility. It is a comprehensive tool that uses AI programming to scan your website automatically to find and resolve accessibility issues, including ARIA attributes, icons, image alt texts, etc.
accessiBe continuously scans new content to find any mismatch between the old and new content. It also helps make page structure more keyboard-friendly.
Accessibility Widget
Accessibility Widget will come in handy if you’re looking for a quick way to add an accessibility panel on your WP website. This free tool allows users to modify the text size on the screen. The best part is that it works for both mobile and desktop screens.
Accessibility Checker
This plugin helps identify accessibility issues on WordPress sites and whether they comply with Web Content Accessibility Guidelines (WCAG).
With Accessibility Checker, you don’t need the external WAVE tool because it integrates similar functions into the WordPress dashboard. You don’t have to leave WordPress to check accessibility for individual content on the website.
The only downside with this plugin is that you need a paid version to perform entire site scans.
Closing thoughts on WordPress accessibility
No doubt, web accessibility is essential for modern websites. An accessible site helps draw more customers to your site and creates a better brand perception.
The best part is that it helps you avoid legal issues due to non-compliance to industry standards. We hope the above checklist helps improve WordPress accessibility for your site.
The post WordPress accessibility checklist with recommended plugins appeared first on GoDaddy Blog.
