Category: Remediation

• Insert Site Language and text direction if missing.
• Remove redundant title attributes from page lists, category lists, and archive menus.
• Remove the target attribute from links.
• Force a search page error when a search is made with an empty text string.
• Remove tabindex from elements that are focusable.
• Add tabindex to elements that are defined as controls but not focusable.
• Strip title attributes if elements have other, preferred accessible names.
• Add post titles to “read more” links.
• Force underlines on links
• Force outlines on focus

Many themes do not provide a design for the view of links or other focusable fields when a keyboard user brings focus to that element. This makes it very difficult for visual users who are keyboard dependent to keep track of where they are.

A common pattern for this is to change the appearance of the element on keyboard focus; and this item adds an outline. Outline is rarely defined in most designs, so that ensures that the definition by this plug-in will almost always work and be visible; the same can’t be said for text decorations like underline, since that may be the default state for links, and therefore would not be a change indicator.

Further reading about keyboard focus.

A common pattern for WordPress in many views is to show an excerpt of your post with a link to read the entire post. By default, this link is just plain text “more” or “continue reading” or an equivalent. This is problematic for accessibility because it means that there are many links on the same page with the same link text.

For accessibility, all links should make sense without requiring context, to grant screen readers the ability to scan the page and have information. This plug-in adds the title of the post into this pattern, so that instead of hearing “Continue Reading. Continue Reading. Continue Reading.”, the user will hear something like “Continue Reading About The Storm. Continue Reading The Storm Aftermath. Continue Reading Cleaning Up”, and be able to pick the article they actually want to read from that set of links.

In classic themes, any existing read more is adjusted to add this text. In block themes, the read more link is appended to the excerpt and the excerpt block’s ‘read more’ links are hidden using CSS.

Further reading about identifying link purpose.

Screen readers use the site’s declared language to figure out what pronunciation rules to use when reading the content. If no language is declared, then the screen reader will generally use the screen reader user’s installation’s language or try to guess: e.g., if a French user of a screen reader visits your page, and no HTML language is declared, it will either read as if the text was written in French, or attempt to guess the actual language and pronunciation. Declaring the default language greatly improves comprehension of the text.

As problems go, this is relatively rare as a problem in a theme: what is actually a bigger problem is sections of text that are not in the primary language of the site. This plug-in doesn’t currently handle changing languages in the middle of content. Further reading about document language.

WP Accessibility looks for any div or span with role="button" that does not already have a tabindex value, as well as any a element with role="button" that has neither a tabindex attribute nor an href attribute. (An anchor without a hyperlink reference is not a link, and is not natively focusable.)

Adding the role of button very strongly suggests that these elements are being used as controls, but the lack of tabindex or href attributes means that they cannot be visited from the keyboard.

This does not guarantee that these fake buttons will be usable – if they only have mouse or touch events attached, then the keyboard may still not be able to activate them. However, the most common attached event is the click event, and that accepts both mouse and keyboard actions.

There are two meta attributes that can prevent a user from scaling your website when viewing it on a mobile device: user-scalable="no" and maximum-scale="1".

WP Accessibility replaces user-scalable="no" with user-scalable="yes" and adjusts any maximum scale value below 2.0 with a maximum scale of at least 5.0. This allows users to increase their view of portions of your site to see it better, which is significant particularly to low-vision visitors.

Many mobile devices already override these settings, but not all, and they frequently depend on settings within the device.

The default WordPress behavior when a search is submitted with an empty search field is to simply return the main index with no notice at all. This is disorienting and confusing. The plug-in will change this so that the submission of an empty search field will return the same as a search with no results, which makes a great deal more sense in terms of user feedback. Further reading on form feedback.

Some themes define link styles that are nearly or completely indistinguishable from the surrounding text. This can be readily be improved by underlining links.

WP Accessibility will ignore any link contained inside a nav region. nav regions are standard containers for navigation menus, and WP Accessibility assumes that these links are generally going to be intentionally designed to look interactive.

Examples of nav regions will usually include a site’s main menu, previous or next post navigation, and frequently footer navigation menus.

Many (primarily older) themes had tabindex defined for comment input fields, in particular. Tab indices were part of an early concept for an accessibility feature in HTML, but was quickly demonstrated to cause more problems than it solved.

What tabindex does is force keyboard navigation to follow a particular sequence according to the values defined in tabindex attributes. Removing those attributes usually makes keyboard navigation much more linear and predictable. The intention behind tabindex was to create a logical tab sequence when it would otherwise have been unnatural; but in practice, that required a radical degree of maintenance to use in real-life.

This option removes the attribute from standard focusable elements: links and form fields. It does not remove it from other fields, because a common technique to grant keyboard focusability to normally non-focusable elements is to define a negative tabindex: this places the element into the focus sequence but does not force it into a particular place in that sequence.

Further reading about focus order. Further reading about tabindex.

Links opened in new windows can break web site flow (creating a change of context) and disorient users who don’t realize they’ve moved to a new window. Also, it takes away the option of opening in the same window/tab: all browsers have an option to open links in a new tab, few have an option to open in the same tab.

WP Accessibility will leave the attribute intact if you add the class .wpa-allow-target to your link.

Further reading about changes of context

Until version 3.5, WordPress automatically added a title attribute to all inserted images. While this hasn’t been part of core since 2011, there’s still a lot of older content that’s never been updated.

In addition to that, many plugins and themes still use the title attribute in numerous inappropriate contexts: input fields, images, links, and buttons among others.

Because the title attribute is part of the accessible name calculations for assistive technology, WP Accessibility uses some moderately complex scripting to handle them.

Images

For images, WP Accessibility checks whether there is an alt attribute or not. If there is an alt attribute, then the title attribute is removed. If there is no alt attribute, the title is assigned as the alt attribute.

Links & Buttons

For links and buttons, WP Accessibility checks for an aria label or any contained element that has valid text, including images with alt attributes or text nodes. If any contained link text is found, then the title attribute is removed and no further action is taken. If no contained text is found, the title attribute is assigned as the aria-label.

Input Fields

For input fields, WP Accessibility checks for any valid label first: an aria-label, a field related using aria-labelledby, an explicitly associated label, or a wrapping label element. If any of those are found and have valid text, then the title attribute is removed with no further action. If no label is found, then the title will be set as aria-label for the input.