- Patrick Scully
When you're designing a website, you need to keep in mind many factors. You'll want to think about your page layouts, color scheme, how menus and linking are handled, and how fast your load speed is. But one of the most important things you'll need to consider is whether your site is accessible for all your users.
Many sites don't have designs that are workable for people with disabilities. Read on to learn more about WordPress accessibility and how you can make sure your site is usable for all your visitors.
Importance of Accessibility
Before we dive into all the features that can make WordPress more accessible, let's talk about the importance of wp accessibility. Accessibility guidelines, accessibility standards, and accessibility tools are the practice of making space, service, or piece of media usable for people with a variety of different disabilities. These accessibility features and accessibility widgets could include vision or hearing loss, cognitive impairments, restricted range of motion, and much, much more.
Some people think of accessibility as a niche issue that only impacts a tiny percentage of their user base. But you might be surprised to learn that about one in four American adults lives with some disability. Most of us will deal with some form of disability or limitation as we get older, so ensuring physical and digital spaces are accessible benefits us all.
Theme Directory Searches
When making a WordPress website accessible, one of the first things you need to do is refine your theme directory searches. This could be done with theme developers or a theme author. WordPress has a series of criteria (which we'll discuss more later) that determine if a theme is accessible or not. You can narrow your search to only include themes that will be accessible for a variety of users.
When you visit the WordPress theme directory on WordPress.org, click on the “Feature Filter” button at the top. It will drop down a list of different features you can sort by, including “Grid Layout,” “Custom Colors,” “Ecommerce,” and more. Select “Accessibility Ready,” hit “Apply Filters,” and find a theme that works for you.
Alt Text for Images
One of the first things you'll need to do to make sure your site is accessible is to ensure all images have alt text. Alt-text is the little text box that pops up when you mouse over an image on a desktop or click on it on mobile. For abled users, this may seem like an unnecessary description of an image they can clearly see.
But for blind and vision-impaired users, alt text can let them know what's going on in an image they can't see. This is most important for images that give context for whatever content you have on the page. Background images and other decorative images should be added so that screen reader users can ignore them.
Keyboard Accessible Links and Menus
When you visit a web page, you should access all features and buttons on the page from a keyboard. People with motor function impairment may not be able to click on a specific spot on a screen, especially in a mobile setting. A keyboard can be easier to use, so your website needs to be set up for keyboard navigation.
Ensure every button, link, menu, and the submenu is accessible by tabbing through the page. When a user hits the tab button, your site should take them to the next link or menu item so that when they hit “Return” or “Enter,” they can navigate to that page. Don't forget to include form fields and any other interactive element of your page with this setup.
While being able to navigate your site through the Tab button is important, users need to tell which menu or link they'll be navigating to. Most of the time, accessible sites will have some visual indicator to let users know which item they have selected. These are called focus indicators, and they will often include underlining the selected element, highlighting it in a different color, or placing a box around it.
Make sure your site has focus indicators for all the interactive elements you just made the keyboard accessible. You can change these indicators on your Style CSS pages. Make sure, however, that your focus indicators also meet color contrast guidelines, which we'll discuss more in a moment.
When you're designing your website, you need to make sure it's not only beautiful but also functional for all your users. While a low-contrast site may look great from an aesthetic perspective, it can be tough for vision-impaired users to read. You need to make sure your site has a strong enough contrast that you could read it in bright sunlight on a dim screen.
If you plan to use a dark background on your site, opt for bold, light-colored text. The reverse is also true: if you want a lighter, softer background, make sure your text is dark enough to stand out from the background. And when you're picking your focus indicators, make sure they stand out enough that a vision-impaired person can see which element they have selected.
Screen Reader Text for “Read More”
Many times, when you're setting up a blog page, you may have blog posts cut off after a few sentences and add a “Read More” link. This helps make your blog page easier to navigate since your users won't have to scroll past every post's full length. But oftentimes, screen readers may not be able to recognize and correctly process the coding behind that “Read More” link.
You need to make sure your “Read More” links are handled so that screen reader users will be able to communicate what's happening on the page. You'll need to add an extra line of code into your CSS specifying what a screen reader should do when encountering these links. The WP accessibility-ready themes will have this code already built-in.
No Autoplaying Media
On the surface of it, auto-playing media may seem like a great addition to your website. As soon as a visitor enters your site, they can see your products' slideshow, a video of your team hard at work, or the option of a dynamic background image. But not only can these features slow down your website, but they can also cause problems for some of your users.
People with cognitive impairments may have a hard time using a website with auto-playing media features. If they can't control when these features start playing, they can become confused or distressed. It's fine to have a slideshow or video but make sure the user has control over when it starts moving.
Clear Form Labels
With many websites accessible themes, forms and demos don't come with clear labels for each field. Instead, the field will have greyed-out text indicating what information needs to go in that box. But many times, screen readers cannot process this text, and people with vision impairments or users with disabilities may have a hard time reading the lighter text.
You need to make sure all your forms on your website have clear labels outside of the sample text in the field. If there are character limits for a message field, be sure to include that information, too. And ensure that your forms are all navigable from the keyboard, as with the other interactive elements of your site.
When you're designing a website, one of the first things you'll need to choose is which fonts you want to use. There are thousands of fonts out there for you to pick from, and at first glance, some of the fancier ones might appeal to you. Why pick boring old Garamond when you could have a gorgeous curly script or a font that looks like Disney letters?
But these fonts can be complicated to read, especially for people with visual or cognitive impairments. Even abled people may have difficulty making out what your web page says with these more ornate fonts. Stick to classic, clear fonts that are easy to read and don't distract from your overall website design.
Learn More About WordPress Accessibility
WordPress can be a powerful platform to build a beautiful, functional website. But you have to make sure your site is functional for everyone, including people who may be living with some impairment. Picking a theme that keeps WordPress accessibility and SEO practice in mind can help make this process much smoother and ensure everything is handled properly.
If you'd like to learn more about WordPress accessibility, check out the rest of our site at Possible Web. We can help you get a no-stress WordPress experience, caring for your website like it's our own. Learn more about our services today and start getting more traffic to your site with organic marketing services.