You may have heard about web accessibility, but understanding and implementing the guidelines may seem out of reach. Finding resources to help you tackle accessibility issues can also be a barrier to your web projects.
Fortunately, WordPress has been making advancements in providing tools to assist with making websites more accessible. Additionally, there are many resources available online that can help guide you. Making your WordPress website accessible is not only good design practice, but it also ensures that everyone has equal access to web content and applications.
In this article, we’ll take a look at what accessibility means online. We’ll also dive into some of WordPress’ new additions that make accessible design easier. There’s a lot to cover, so let’s get started!
Create a Website for All
We make sure your website is fast and secure so you can focus on the important stuff.
What Web Accessibility Is and Why It Matters
In this context, “accessibility” means designing websites and web applications in a way that does not prohibit anyone from using them. This means that any visitor, regardless of disability or impairment, should be able to access and use your site.
This is important when you consider the fact that one in four adults in the United States has a disability of some kind. In other words, if you’re not building with accessibility in mind, up to a quarter of your website’s visitors may struggle to access your content.
Fortunately, there is a set of guidelines you can use to review your web design and functionality. The W3C standards outline several levels of accessibility. This includes a minimum threshold that’s considered acceptable. Of course, you’ll also want to make laws and regulations into account, since accessibility is a legal matter as well.
Building with accessibility in mind is not that different from following standard best practices for web design and optimization. In fact, many of the principles and techniques are the same. In particular terms, this means that accessible design isn’t out of reach for anyone — especially if you’re using WordPress.
Related: Leveling the Web: 12 Questions with Accessibility Expert Gian Wild
Exploring the Block Editor’s Accessibility Features
WordPress has endeavored to improve web accessibility in the codebase of its ever-evolving Content Management System (CMS). In fact, standards have been instituted to meet a minimum standard of accessibility on all new or updated code that’s released.
Additionally, WordPress developers have created an accessibility handbook that outlines how programmers should be creating products for the CMS. For example, all WordPress code must meet the Web Content Accessibility Guidelines (WCAG) 2.0 at level AA. This is considered the worldwide standard and is also used for government and public service websites.
If you take a look at the Block Editor, in particular, there are a couple of helpful built-in features that aid in creating accessible content. For instance, merely making your font larger and bold does not tell a screen reader that it represents the header of a section. The Block Editor makes it easy to use appropriate header markup by providing a Heading block.
This means your content will be automatically be structured using the proper headers. Not only does this help screen readers navigate your content appropriately, but it provides better information to search engines as well.
The Block Editor also includes a built-in Table of Contents feature, which enables you to quickly check your headers to make sure your content follows a logical hierarchy.
Of course, these aren’t the only options for designing accessible content. As it turns out, WordPress offers plenty of ways to ensure that all visitors can access and appreciate your content.
Be Awesome on the Internet
Join our monthly email newsletter for tips and tricks to build your dream website!
5 Ways to Make Your WordPress Blog More Accessible
As we mentioned earlier, meeting accessibility standards can benefit your overall web design and Search Engine Optimization (SEO) efforts. Plus, it helps you grow your audience and stay in compliance with critical regulations. With that in mind, here are five easy ways to improve your site’s accessibility.
1. Add Alt Tags to Images
Adding “alt tags” to your images is one of the easiest ways to make some of your content accessible. An alt tag enables screen reader software to “read” the image it’s connected to, and tell the user what it is and how it fits into the context of the page.
You can easily add alt text to your images in WordPress. Once you add an image to your post or page, enter a short phrase or sentence describing it into the Alt Text field on the right-hand side of the editor.
Underneath this field, you can also click to view helpful alt image guidelines.
2. Use Accessible Color Palettes
Another WCAG accessibility standard involves the color palettes you use. Some color palettes can cause trouble for visitors with color blindness, poor eyesight, and similar problems. In general terms, you’ll want to use colors with lots of contrast, so your text can be easily seen.
To help you get started, WordPress has a useful resource in its Web Developer Handbook regarding the appropriate use of color. Additionally, when you’re working in WordPress and decide to change the color of some of your text, you’ll receive a notice in the right-hand editing menu if your color choice may create issues.
Following these simple standards for color choice means your website’s users should have an easier time reading your text, regardless of whether they have visual impairments.
3. Organize Headings Hierarchically
As we mentioned earlier, the Block Editor makes using appropriate headings and header tags easy. Whenever you want to use a new heading level, you can select the Heading block from the Block Menu.
You’ll have several header levels to choose from. You might notice that H1 is not listed in the block options, however. This is because it’s best not to use H1s inside your post or page content, since it tends to confuse screen readers. H1s should be reserved for each page or post’s primary title, while you can use H2s and below to structure the rest of the content.
4. Make Sure Your Forms Are Accessible
Forms are a widely-used element on many websites. They can create interactivity, and help business owners collect information about their customers. However, they can also present a challenge to anyone using assistive technology.
Fortunately, you can create forms that have greater accessibility built right in. One option is to use a plugin like Formidable Forms.
This tool offers a form builder with WCAG 2.0 standard compliance as a key feature. This can be exceptionally helpful, especially given how much goes into making forms accessible.
For example, labeling your form’s fields helps users navigate them with and without assistive technology. Another common practice for form designers is to use placeholders — text that appears in the form field as an example. Both are useful for accessibility since labels tell users what to fill out while placeholders explain how to fill it out.
It’s also smart to include clear instructions to help users fill out forms. Many web users have what are called “invisible” disabilities. This means they may not use assistive technology such as a screen reader. Instead, they may have cognitive impairments, which clear instructions and other accessible form design practices can help with.
5. Make Your Site Keyboard-Friendly
For a WordPress website to be genuinely accessible to anyone, it has to be designed for navigation with only a keyboard. This ensures that blind and low-vision users, as well as anyone needing an alternative keyboard or keyboard emulator, will be able to use your website.
Typically, keyboard navigation on a website involves using the Tab key. This enables the user to jump from one item of linked content to another. These areas have focus indicators programmed in, which can be activated with the keyboard. A sighted user will be able to see a visual change (such as an outline, border, or background color) when the keyboard activates a specific area.
You can see this feature at work in the following example, where “web accessibility” has a visual indicator around it, signifying that the user has navigated to it with the keyboard.
Plugins such as WP Accessibility can help you develop better keyboard focus for your WordPress website, among other improvements.
In terms of on-screen navigation, a screen reader will make sense of your site’s content based on its source code. Therefore, your code must be written with logical page navigation in mind. There’s a lot to understand about designing a keyboard-friendly site. Fortunately, there are plenty of resources available to guide you!
Related: The Beginner’s Guide to WordPress Plugins
Empower All WordPress Users
Navigating the world of accessibility standards can be confusing. Fortunately, WordPress offers resources you can use to test your website for accessibility issues, and then make improvements.
Making sure you have the right tools can help you build more inclusive content. Here at DreamHost, we believe in the openness and availability of online resources for everyone. Plus, we offer top-notch support for accessible websites on our low-cost shared hosting plans!