How accessible are WebMan Design themes?

WebMan Design accessibility ready WordPress themes are built according to WordPress accessibility guidelines. This means that every theme that passes the guidelines receives an accessibility-ready tag and you are able to create a WCAG 2.2 level AA compliant websites with it. You can read more on theme accessibility in the theme documentation.

You can check how the theme complies by testing its demo website with an accessibility evaluation testing tool (see below).

Watch out for false positives

Any automated tool might report issues. You can actually read about this also in WordPress accessibility hand book.

With theme demo websites the issues are related to demo content and you should modify those on your own live website anyway. You should double check the reported issues personally as your tool might not evaluate those accurately. Issues/alerts are not accessibility errors.

The automated tools are handy for beginners to learn and understand web accessibility standards rather than to determine if a page is really compliant.

Also, you might get “false positives” with certain evaluation tools. Such as AChecker.ca continually reports missing label on WordPress native search form. This is because in WordPress search form a label is associated implicitly (wrapped around the search input field) instead of preferred explicit way. This is not an issue related to any theme. But surely, this may indeed affect some assistive technologies. If you want to fix this, I’ve built a free plugin for you (or for custom solutions use filter hook to modify the WordPress’ HTML).

You can also read A warning about automated accessibility “warnings” article explaining similar situations.

Basic accessibility testing

You can test a website for accessibility with various tools. WordPress recommends such tools at accessibility handbook page. You can read more information about some of those tools below.

Online tools

Easiest way to test accessibility is to run an online evaluation tool. One of the best (and WordPress.org recommended) ones is WebAIM WAVE (https://wave.webaim.org, video on how to use it). Just insert your website URL and go through the evaluation report.

Browser extensions

Accessibility evaluation tools are also available in the form of browser extensions. For usage instructions please check the linked pages below.

Here is a list of some useful browser extensions for you:

Chrome DevTools Audits panel
If you are using Google Chrome web browser, you can simply run inbuilt accessibility audit.
Deque aXe
The Accessibility Engine (aXe) is maybe a bit more complicated to use for beginners because it requires to open up your browser’s developer tools panel. You can follow step by step instructions on how to use aXe and just start using it.
More at https://www.deque.com/products/axe/
Headings structure
Your website should be well structured with proper headings. To test this accessibility requirement you can use a WebAIM WAVE (clicking on the “Outline” icon in the left column of report) or a dedicated Google Chrome or Mozilla Firefox web browser extension.

Use keyboard

Your keyboard is one of the best tools you can use for accessibility testing. Pressing the Tab key, you can navigate through all the focusable elements in a web page. Pressing Shift + Tab you can navigate in the opposite direction. As a beginner, you can check for two basic requirements:

Can you see where you are while navigating with the Tab key?
Controls you navigate to with the Tab key receive focus, and there should always be a clear indication of where the focus is.
Can you perform all the available actions on your website using only the keyboard?
Any feature should be operable with keyboard only, from navigating to a new page or submitting a form, to the most complex ones.

Color contrast

In some cases your accessibility evaluation tool of choice may report color contrast errors/issues for certain content elements. These may be false positives, though.

The automated accessibility evaluation tools can not determine the contrast of text displayed over an image reliably. You need to determine such contrast personally, with human testing.

If you want to rise the text contrast in those sections, you can change the background image, change the image overlay colro and/or opacity, and change the text color, for example.

In case you would like to pass your accessibility evaluation tool color contrast checks, try using a custom CSS to prevent the issue from being risen.
For example, a common issue is being reported for WordPress Clover block, which can be fixed by applying this custom CSS:

.wp-block-cover {
	background: black;
	color: white;
}

IMPORTANT: Please always test such custom CSS thoroughly, as it might interfere with your website design and usecase.

Bottom line

When building an accessible website, you will need to make your website content accessible too, as the content is the main part of any website. Having an accessibility ready theme is just a first step. But once you make your content accessible and you are using an accessibility ready WordPress theme, your website should be accessible according to WCAG 2.1 level AA and Section 508 requirements.

(Check out your theme documentation for tips and info about accessibility of your content.)

Please understand that a theme demo website is really just a demo, and thus it may display some alerts with automated accessibility tests. But even with these demo websites, there are no accessibility errors.