{"id":147886,"date":"2015-10-28T11:00:56","date_gmt":"2015-10-28T15:00:56","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=147886"},"modified":"2015-10-28T09:06:59","modified_gmt":"2015-10-28T13:06:59","slug":"make-wordpress-accessible","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/make-wordpress-accessible\/","title":{"rendered":"How to Make Your Website More Accessible (and 10 WordPress Sites That Are Leading the Way)"},"content":{"rendered":"

When launching a new website, you’ll likely think about a number of different things when putting it together. But if you’re like many, accessibility isn’t at the top of that list.<\/h2>\n

What is accessibility? According to W3C<\/a>, web accessibility refers to how easily those with disabilities can use the Internet. Or, to be more specific, it means, “\u2026people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.”<\/p>\n

On top of that, I’d say it’s recognizing that people with all different types of disabilities access the Internet and want to have a pleasant experience. It means optimizing your site to be enjoyed by, truly, the largest number of people possible.<\/p>\n

With WordPress, designing for accessibility shouldn’t be all that difficult. You have all the tools you need at your disposal to make it happen. But you’d be surprised by how subtle things can make such a big difference for those using screen readers or other assistive devices.\u00a0<\/p>\n

Today we’re going to look at\u00a0what makes an accessible website, some of the top WordPress themes that employ the Web Content Accessibility Guidelines (WCAG) 2.0<\/a> standards, and WordPress\u00a0sites\u00a0that also abide by these standards.<\/p>\n

What Makes a Site Accessible?<\/h3>\n

While there are a lot of details that go into a fully accessible website, a few broad criteria must be met.<\/p>\n

The following are the key components that go into site accessibility:<\/p>\n

1. Using Good, Clean HTML<\/h4>\n

You should be doing this anyway, but solid HTML structures make websites more accessible. By using all the proper header tags, bulleted lists, alt tags, title tags, and meta descriptions, you’re telling visually impaired visitors what everything is and where everything is on the page. You’re also making it easier for screen readers to pick up the content and read it.<\/p>\n

2. Including Keyboard Support<\/h4>\n

This falls in line with good HTML. You also need to ensure your site is entirely accessible through the keyboard. A trackpad or mouse shouldn’t be required to access all navigation. Without keyboard navigation support, the visitor won’t be able to tab to the links they want to visit.<\/p>\n

3. Offering Text Alternatives for Everything<\/h4>\n

Part of this is good HTML, still, but it also has to do with understanding that not every visitor is going to be able to see your fancy graphics and videos. It’s fine to include multimedia items (it’s encouraged, in fact) but doing so without providing adequate descriptions and alternatives results alienating an entire group of potential visitors.<\/p>\n

4. Include a Style-Free Option<\/h4>\n

Another thing you should do is to provide a simplified version of your site that omits all or most CSS. The trick is to offer this without sacrificing any of the layout, content, or navigational elements. From a developmental standpoint, this can be accomplished by separating the site’s structure and the site’s content<\/a>.<\/p>\n

5. Include ARIA Landmarks<\/h4>\n

Short of Accessible Rich Internet Applications<\/a>, designing with ARIA in mind means you need to include landmarks without your HTML and content that tell assistive technologies what it’s reading, where the visitor is on the page, and what to do next. This is something that should be utilized in conjunction with clean HTML.<\/p>\n

<\/b>\n
\"The
The University of Mary Washington’s website lets users adjust the contrast.<\/figcaption><\/figure>\n

<\/div><\/b><\/p>\n

6. Providing Good Contrast<\/h4>\n

Another important thing to offer is a high contrast option. Well, actually you could just opt to provide a high contrast design in the first place that’s easier for those with visual impairments to view and process. Or, if you’re committed to a certain look, you can provide a high contrast option. The University of Mary Washington<\/a> does an excellent job of this by offering a button that toggles on and off high contrast mode.<\/p>\n

7. Avoid Seizure-Inducing Graphics<\/h4>\n

Flashing content is a big no-no when designing for accessibility as flashing lights and fast-moving images have been known to trigger seizures in those susceptible. If you simply must include something that flashes on your site, ensure it falls below the appropriate threshold<\/a>.<\/p>\n

8. Remove Time-Limits<\/h4>\n

Make sure any media you include on your site can be paused and replayed as often as the visitors needs. Also, provide alternatives for those with disabilities when encountering a time-sensitive portion of your site like a quiz or test.<\/p>\n

Current Top Accessible Themes<\/h3>\n

Building a great WordPress website that is accessible can be done manually. In fact, there are many tutorials for achieving just that. But I think it’s important to note that there are numerous themes available that can help you to accomplish this goal as well. They can be customized just like any other theme but offer a rock solid foundation of W3C validated code and accessible features that abide by the WCAG standards to get you started.<\/p>\n