Large, diverse group of people clapping and looking up to the camera

Meetup Build an Accessible Post

Introduction

This WordPress blog post is being created in a live presentation to demo just some of the many considerations for creating accessible content.

Please check out our previous accessibility meetup presentation: Getting Started with WordPress Accessibility at a11ywp.com.

Assumptions for This Presentation

  • We are using an accessible theme
    • In the repository, you can filter by accessibility, however – many excellent accessible themes do not have this tag
    • Beware of Google searches for things like “best wordpress themes for accessibility” 
    • Be sure to test your theme
  • We have selected colors that work well together
    • Color contrast meets accessibility guidelines
    • There are a variety of contrast checking tools, including the WebAIM Contrast Checker.

For testing a full palette and how the colors work together, try the Color Contrast Grid.

Defining Website Accessibility

An accessible website is one that all people can use. This includes people with a wide range of abilities and disabilities, who might use a variety of devices and assistive technologies to use the Web.

Websites must be Perceivable, Operable, Understandable, and Robust (POUR) for all visitors.

Key Considerations for Accessibility

Cute little yellow Waapu mascot holding a blue ball with an accessibility icon

Here are some of the most important things to consider when making a WordPress website accessible:

  1. Content structure: Ensure that the content is organized in a logical and hierarchical manner using headings, lists, and proper use of HTML elements.
  2. Alternative text for images: Add descriptive alternative text for images to make the content accessible to users with visual impairments.
  3. Keyboard navigation: Ensure that users can navigate and interact with the website using only the keyboard.
  4. Color contrast: Use sufficient color contrast between the text and background to make the content readable for users with visual impairments.
  5. Form labeling: Properly label form elements, including input fields and buttons, to ensure that they are understandable and usable by all users.
  6. ARIA (Accessible Rich Internet Applications) roles: Use ARIA roles to help screen readers understand the purpose and function of different elements on the page.
  7. Responsiveness: Ensure that the website is responsive and usable on different devices and screen sizes.
  8. Testing: Regularly test the website using accessibility testing tools and consider feedback from users with disabilities.

These are just some of the most important considerations for making a WordPress website accessible. Adhering to web accessibility guidelines and standards, such as the Web Content Accessibility Guidelines (WCAG), is a good way to ensure that a website is accessible for the most number of users.

The Importance of Keyboard Navigation

Close up of black keyboard with backlit keys

If there was one top thing to consider for website accessibility, it would be that all users can navigate and use the website with only the keyboard. Keyboard navigation is a critical aspect of accessibility as it enables users who are unable to use a mouse, or who prefer to use keyboard commands, to access and interact with the website’s content and functionality. 

Ensuring that all interactive elements, such as menus, buttons, links, and form inputs, are properly labeled and can be reached and activated using only the keyboard is vital. This also includes providing clear focus indications for keyboard users to easily understand where they are on the page.

Properly Ordering and Nesting Headings

Using properly nested headings in web page content makes sure the outline of the document is clear. This is all about keeping headings group and ordered properly. H3s should always be nested under H2s, and so on. It is crucial for accessibility for the following reasons:

  1. Structure and Navigation: Properly nested headings provide a clear structure to the content, facilitating easier navigation for all users, including those using screen readers. It helps in delineating sections and indicating the hierarchy of content.
  2. SEO Benefits: Aside from accessibility, using structured headings is also beneficial for SEO (Search Engine Optimization) as it helps search engines to understand the content structure, potentially improving the page’s ranking in search results.
  3. Usability: Proper nesting of headings improves the usability of a website by visually separating sections and highlighting the main points, thus aiding users in quickly finding the information they are looking for.
  4. Consistency: Maintaining a consistent heading structure throughout the website ensures a predictable and coherent user experience, which is particularly beneficial for people with cognitive disabilities.
  5. Support for Assistive Technologies: Proper heading structure supports assistive technologies, such as screen readers, which use headings to provide navigation commands that allow users to jump from one section to another efficiently.
  6. Compliance with Legal Requirements: In many jurisdictions, web accessibility, including the proper use of headings, is a legal requirement to ensure inclusivity for people with disabilities.

Using properly nested headings is not just a good practice for web accessibility but also enhances the overall user experience and effectiveness of a website.

Plugins

Recommended Plugins

Recommended plugins to help with accessibility on your WordPress website:

PluginTitle / LinkInstallsRatingPurpose
Accessibility CheckerEqualize Digital Accessibility Checker – Audit Your Website for WCAG, ADA, and Section 508 Accessibility Errors2,000+5Accessibility Checker automatically scans your content each time you save a draft or hit publish, giving you real-time feedback on your post’s or page’s accessibility
WP AccessibilityWP Accessibility40,000+4.8This plug-in helps with a variety of common accessibility problems in WordPress themes.
Accessibility New Window WarningsAccessibility New Window Warnings300+4.9This plugin helps websites become more accessible and better meet WCAG guidelines for predictability by providing advanced warning if a link is going to open a new window or tab before the user clicks or activates it.
Screen Reader Text FormatScreen Reader Text Format100+5Screen Reader Text Format adds a screen reader only text format control to the block editor. This allows content creators to correctly markup certain types of text content.
WP Accessibility ToolsWP Accessibility Tools & Missing Alt Text Finder5,000+4.9Includes missing Alt Text finder, contrast ratio checker, compliance checklist, accessibility audit, and other resources.
Note: This table was generated with proper column and row headings using a CSV file created in Google Sheets and importing it into the HTML Table Generator.

Plugins to Avoid

There are several plugins, both in the repository and available commercially, that are not recommended for accessibility. These plugins offer instant accessibility compliance and protection from legal action. In fact, they do not.

Generally these fall under the category of “overlays” and add code to offer a variety of tools on the site. The problem is that these tools often make sites less accessible because they interfere with the way people with assistive technology use websites.

For more information on overlays, please visit the Overlay Fact Sheet.

No matter what plugins you decide to use on your site, be sure to check that they do not introduce any accessibility problems.

Creating an Accessibility Statement

The following YouTube video is titled “The Future of Accessibility Statement” and was presented November 3, 2022, during the WordPress Accessibility Day 2022.

Transcript of Video

HOST:
We have Peteris Jurcenko, CEO, UX designer and accessibility expert at SIA Turn Digital. He’s giving us a presentation on the future of accessibility sorry, the future of accessibility statement. And that will be the last lightning round talk we have for the WordPress Accessibility Day. All right Peter, let’s bring it home for us.

PETERIS JURCENKO:
Hello, my name is Peteris and four years ago [speaking foreign language]we created an initiative [speaking foreign language]which means accessibility dot LV in Latvian. We do research and training on accessibility but we have also create practical tools. For example, schoolofvp.com [?]is a platform based on WordPress for school to create accessible websites and field days.

We have also created accessibility statement generation plug in. And I will tell you in more details about this plug-in. But for beginning, what is accessibility statement? I will describe it as a page on the website that tells you what is accessible and what is not accessible on this website. And who to contact in case of problems.

Usually, the link on this page is in the footer somewhere next the privacy policy. Here you can see examples and links on the European Parliament go UK and the US presidents page. Why provide an accessibility statement? In some situation, you may be required to provide an accessibility statement such as public institution in countries that implement the [unintelligible 02:37]web accessibility directed.

The main reasons are to show users that you care about accessibility and about them. Provide information which content on your page is accessible and which is not and how to deal with it. Publish information about accessibility information and contact information if users need help with contact accessibility. Demonstrate commitment to accessibility and to social responsibility. What to include in an accessibility statement? It depends on the country and regulation. Some countries have templates.

Some examples include the results of web assimilation. Web accessibility initiative recommends include: commitment to accessibility, which accessibility standards such as WCAG 2. 1and which level A to AAA is applied, conduct information and response time in case users encounter problems. It’s also good practice to provide information about any known limitation in your website to avoid frustration of your users.

For example, old videos do not have subtitles. Measures taken by your organization to ensure accessibility. For example, websites assimilation and user methodology. Technical prerequisites such as supported web browsers. Environments in which the content has been tested to work and also references to apply national and local laws and policies.

Is accessibility statement acquired? It depends, on which country or website operates in which sector your organization operates. For example, In Latin, our government implements European government directive which is mandatory in the public institutions in the publicly owned companies but it is not mandatory to private companies yet. On the website, web accessibility initiative you can see regulations in every country but this information is mostly from 2018and they plan to start publishing the updates in this November.

Here you can see example of Nordic insurance company. This is a private company that operates in seven countries with different regulation. You can see the link related to accessibility is only free on their websites. It is interesting that Apple defines accessibility as Apple value, but this is not translated in every language.

For example, in Latin websites only privacy was mentioned as a value. So, if you are planning to include accessibility statement on your website is there a tool or generator which can help you generate and accessibility statement. First dimension is web accessibility initiative accessibility statement generator. You can fill in a simple form and generate a plain HTML file. All fields are fill in examples.

Another publicly available tool and accessibility and ability statement generator from Portugal’s government system. It requires more detailed information including useability test for people with disabilities. As a result, you get an HTML file which you can copy and paste to your website. There is a similar tool of Belgian government. And a very nice tool is from [unintelligible]. All tools provide form to be filled in and generated at HTML file.

There are some issues with this approach. Information is either too general for the needs of different countries or to specific if the tool is designed for specific country. It would be nice to adapt this tool for different countries but it’s not possible as they are not plug-ins. Some of the generation provide source code but you need to run and the host this tool somewhere. As they do not have central plug-in and installation.

All generators provided result as HTML block or file. Which means it is hard to update next year and problems to copy paste in machine readable format. And yes, this is not the WordPress way. We tried to solve previously mentioned issues in the WordPress way and one of them is a WordPress plug-in and I will demonstrate it later.

Another approach is create and publish accessibility statement for each country as a pattern. Which pattern will not solve all the problems with machine readable format. For example, if you have a planned update syntax or ID you can do it only for new content not for previously published. The plug-in update you can improve machine readable afterwards. What to expect from WordPress plug-in. Provide information and links to local regulation website, provide tax examples, description, edit not create, fill some custom fields, result work in any theme, provide only semantic content not style, result in machine readable format, content can be easily updated like normal page, ability to customize template content from WordPress admin not only from code.

Let’s see how it works. When you activate accessibility statement plug-in, it will create a page. Accessibility statement because this plug-in is in Latvian [unintelligible ]when you edit this page, and use ACF if you have it to use your home. If you’re not have it to use in ACF which was available open source previously. Here you can fill in the form. You have a link to local guidelines where you can get information out to check and what to include in this accessibility statement. And it works like normal WordPress page.

You can update, you can preview changes. And for example, here it creates semantic HTML inside the WordPress and if you change theme it works with any theme if you change it works with another team as well because it’s only HTML without style. What we get in this HTML? We get machine readable text as well.

And if you want to change this template, to change this machine readable you can do it from WordPress illustration as well go to the settings accessibility statement settings and here is text and the classes are specific text for creation. What I think about future of WordPress accessibility statement actually it’s two ways. We like plug-in one or many plug-ins and new patterned library. I think pattern library is easy way but you cannot update some things after you publish this statement. In plug-in way it’s possible to update the machine readable text and information with plug-in updates afterwards. And yeah, if some content change plug-ins more better way to use in WordPress. Thank you, that’s all for me.

Wrap Up

If you start with a good foundation for accessibility, including theme, colors, and fonts, creating consistently accessible content is not too difficult. It just becomes a new habit.

Please consider joining me and many others at WordPress Accessibility Day 2023. I will be expanding on this topic, including covering some page-specific elements like call-to-action (CTA) sections and

WordPress Accessibility Day 2023

Also remember to check out our previous accessibility meetup presentation: Getting Started with WordPress Accessibility which includes lists of resources.