Category: Features

• Generate custom skip links with user-defined targets.
• Add language and text direction attributes to your HTML attribute
• Add a :focus outline to focusable elements.
• Toggle for high-contrast and large font stylesheets
• Add support for the longdesc attribute
• Add a toggle for users to view alt attribute values in content
• Provide field to add and insert content summaries.

WP Accessibility inserts a log out link as a top-level item in the WordPress admin bar. This makes it easier for speech recognition and mobile users to log out, as the profile dropdown log out link can be difficult to reach.

WP Accessibility contains a number of ways to help enforce the use of alt attributes in post content.

In the classic editor, images with alt text that is either suspicious or missing will be shown with a label indicating that the image is missing alt text. If the ‘decorative image’ toggle is checked, this rule will be ignored.

Block Editor

In the block editor, the decorative image label doesn’t have an effect, although it will still be saved as a marker in your media library. All images without alt text will be indicated in the block editor.

Browser Support

The attribute labeling here depends on the :has selector in CSS, which is not supported in IE11 at this time. In Firefox, it is available but depends on enabling the layout.css.has-selector.enabled feature flag. In unsupported browsers, only the outline will be visible, and not the text label.

WP Accessibility adds a column to the media library list view to identify images with missing or inadequate alt attributes. The tests include:

• Checking for common invalid values, such as "", '', &nbsp, empty spaces, or hyphens.
• Identify images with no alternative text
• Identify images with unusually long alternate text. (Default check is 140 characters, but can be changed with a filter.)
• Identify images with suspicious alternate text. Suspicious alternate text values include the words ‘logo’, ‘image’, ‘picture’, ‘alt text’ or ‘alternative text’, or the strings ‘DSC’ or ‘IMG’ in all caps.

In April 2022, Twitter launched a tool that makes it easy for all users to see when an image has alt text. This has significantly increased overall societal awareness of alt text and how it’s used. It has also resulted in some significant misuse of alternative text for marketing or humor, but the overall impact is a significant increase in images with useful alternative text.

WP Accessibility allows you to enable a toggle to show off the alternative text on your own content images.

WP Accessibility is fairly selective about which images to choose, to avoid picking up on images where this isn’t really beneficial.

First, the plugin looks for images inside a container with the class .hentry or .comment-content. In most cases, that will identify post or comment content. This avoids picking up images in headers, footers, or social media navigation, for example.

It only looks for images that have an alt attribute that is not empty, so decorative images will be ignored.

Finally, it checks the size of the image. If the image is smaller than 150px by 300px, it will be skipped. This will avoid picking up images where making room for the alt text controls will cover too much of the image.

Skip links are a means to help users of screen readers jump from the beginning of a page to another section of the page. Visual users can scan a page quickly to identify the larger sections and skip over large blocks of text or links, but users of screen readers can’t easily do that.

Skip links provide a means to leap from the very top of a page to an alternate section of that page — one principle use being to leap over the main navigation to the main page content. Further reading about skip links.

Setting up Skip Links

WP Accessibility includes settings for two skip links. In most cases, you will only need a Skip to Content link; but in certain rare cases you may need a Skip to Navigation link instead or as well.

The only case where you would need a Skip to Navigation link is if you have a significant quantity of repeated content above your main navigation that’s duplicated on all pages. If you have just a few items – a site logo, a search bar, and a couple of links, then the extra skip link is not necessary.

Do you already have a skip link?

If you already have a skip link, then you should not turn this feature on. You may have a skip link and not know it – the majority of sites default to skip links that are hidden by default.

To find your skip link, you place your cursor in the address bar of your site, then use the tab key to navigate forward until it becomes visible. You should reach the skip to content link before any other part of your site.

You can test this in the WordPress admin. After a few tabs, you should see this:

If you do the same thing on the public site, you should discover whether you have a skip link.

Finding Link Targets

Assuming you don’t have a skip link, you’ll need to identify what the target of your skip link will be. It needs to be an ID attribute that will be present on every page.

For the Skip to Content link, the ID attribute should be the first that appears after your main navigation.

It isn’t critical that it’s the first ID attribute; what matters is that there shouldn’t be any other content between the navigation and the target ID. Any of these ID attributes would be effective in this case.

What if my page doesn’t have ID attributes?

At the moment, your only option is to edit your theme to add ID attributes. And, honestly, once you’re editing your theme, you should probably also add your skip link directly to the source code.

After all, the point of WP Accessibility’s remediation tools is to give you a stop gap until you can fix the accessibility of your site.

The longdesc attribute provides a description field for images that are more information-rich than can be conveyed in an alt attribute, such as in graphs or infographics. This uses the WordPress media library’s “Description” field to generate a page linked to from the longdesc attribute which can describe that image.

The description field supports HTML, so you can add structure to the content in this field to help users understand the content.

WP Accessibility has a couple of options for how the information will be presented: either as a link that follows the image or as a button that displays the information as an overlay on top of the image.

Read more about longdesc in WP Accessibility

While not a solution in itself, if your theme has low contrast issues or small fonts, using this custom control to toggle high-contrast or large font modes can be useful.

All styles can be customized or extended within your theme directory, since default states for these tools may not be suitable for your site. The accessibility toolbar is based on the original written by Chris Rodriguez.

To customize high contrast styles, place a stylesheet called a11y-contrast in your theme’s home directory. With a custom stylesheet, you are responsible for defining all styles used for high contrast. You can make a copy of the stylesheet from wp-accessibility/toolbar/css/a11y-contrast.css for a starting place.

The large font styles add the class .fontsize to your site’s body element when active. Any styles you define in your theme or in the WordPress customizer at Appearance > Customize > Additional Styles that use this class will take effect when activated. For example:

.fontsize h2 {
    font-size: 4rem;
}

The above would simply set a size of 4rem for h2 headings when the fontsize toggle is activated.

The toolbar also supports a grayscale option for testing, but grayscale has no real-life application for users, and is not enabled for users.

As with alt attributes, WP Accessibility will show a label in the editor for any uploaded video that has no captions or subtitles. This does not apply to video embeds, such as those coming from YouTube or Vimeo.

While WP Accessibility only shows this notice if neither captions nor subtitles are available, I consider it important to mention that subtitles and captions are not equivalent, and do not serve the same purpose. Be sure that you’re using the most appropriate choice or choices for your videos.