Accessible Sites OneClick

One Click Accessibility Plugin

There have been many WordPress accessibility plugins and other HTML based methods to add on-screen accessibility to web pages. Elementor introduced their own Plugin to work on Elementor Websites regardless of any Theme or Template you choose.

You will see the blue accessibility icon on all Dynamiser pages

Clicking on icon will allow the visually impaired to manually select accessibility changes to the current page to aid with reading the content. The toolbar allows…

Increase/Decrease text
Change pages to grey-scale
Change contrast
Lighten the background
Underline links
Change to a readable font

Let’s see some examples using the Dickie’s Cafe Inspirational mock-up. To being with we have the initial landing page.

But if Increase Text and readable Font are selected from the tool bar then we see the page change; the text increases and changes to a readable font. Note the “dickie’s cafe” heading does not change as it is a heading, it decreases in size to allow the text elements to increase in size.

In the next example we have the home pages main content. The “Finest” and “Tastiest” lettering are text elements this time and not headings so the Readable Font setting will take effect

This time the font set to readable again as well as the whole page changed to grey-scale. To show the effect, as these are reduced screenshots, the text is easier to see after changes than before you can see how a visually impaired visitor would benefit from use of the tool.

Next we can see the effect of changing to a light background and applying link underlines, again with a change to Readable Font. Before the changes the page looks like so

Now the titles and buttons can be seen a lot easier and the relevant button clicked.

Finally let’s see the impact of contrast changes. This time we will change the Meet the Team page

When High Contrast is applied then colours are selected to be as far apart as possible in the spectrum so the text is highlighted against a dark background (replacing the image)

But this time we will use the negative contrast along with an increase in font size and change to Readable Font.

One Click on Mobile and Tablets

The toolbar will work perfectly on other devices. In fact it is even more important for visually impaired to be able to read from smaller screens. Examples below.

One Click Settings

The look and feel of the toolbar along with other settings can be changed. For the toolbar itself, the options we see listed in the drop down (such as Increase Text) can be enabled/disabled and the wording changed if required. Dynamiser advises that the defaults are all kept (unless you expect readers to use a non-English language).

The following Settings can be changed.

Outline Focus: By default this is turned off but can be turned on to provide a visible outline to current place on a page (see the Visible Outline Focus section of the main accessibility page)
Skip to Content Link: As discussed in the main accessibility page. It is recommended that the One Click toolbar is used and this option turned on. The toolbar takes priority over any manual skip links added to a page so with a manual skip the user will still have to tab through all accessibility options before being able to select skip, which does negate the reason for adding in the first place. With the settings there is no way to change the default wording but the default is good enough for all Screen Readers.
Remove Target Attributes: As seen in the main accessibility page, it is recommended that all new pages, accessed by any link, are contained in the same tab and this option allows this to be done by default regardless of any setting on the links themselves. Sounds good but with the plugin active it means able sighted visitors can be impacted and you may consider the use of separate tabs or windows still preferable.
Enable Landmarks: This refers to another Aria setting not previously discussed. We have seen what an Aria label is but this setting allows the addition of another Aria setting called a role. In this case the role is Link. In the main accessibility page we discussed the preferable use of buttons instead of having links within any text. This is because a Screen Reader will not know there is a link and not read this out. This setting will add the Link Role to all such text-based links so that the Screen Reader will now know there is a link and announce this to the user. We still have to make sure the text states exactly what the link is; so adding “click here for more information on Dynamiser pricing” to the end of a line is better that just this link being associated with the word “pricing” in the body of the preceding text.
Remember settings: Allows settings to be remembered across the whole site and for how long (in hours). Dynamiser recommends these are left as the default; on for 12 hours.

Customise

The Icon, Colours and position of the toolbar can be customised to suit your website. But remember that colour changes can affect certain website visitors such as contrast for the visually impaired or colour combinations for colour blindness.

The colour and thickness of the visible focus outline can also be changed, again consideration to the colours should be made. The default is red so if your site has a lot of green colours then a change from the default red is recommended.

Popups and Popboxes

You may have seen these in other Dynamiser Inspiration pages. These are a great tool for marketing, adding value to a topic without adding more text/images to a page and help to avoid creating multiple pages. But the toolbar is unavailable when a popup is in view. So the popup content should have all the usual manual accessibility added (such as use of REM and not Pixel text sizes and using buttons with Aria labels)

Plugin or Manual accessibility support?

By “Manual”, we mean all the recommended support discussed in the Accessibility main page, in accordance with the W3C guidelines for the visually impaired along with other considerations such as Colour Blindness and Dyslexia.

So what should you choose to adopt especially as we have seen a lot of the plugin features add the support for you? The point to always remember is that your website should provide accessibility for all, the plugin works well for your visitors that have a degree of visibility, however impaired. But not everything to help those using Screen Readers or in a lot of cases users who are able to use both the Screen Reader and Toolbar together.

So Dynamiser recommends that the plugin is always installed. The benefits:

It is free
Removes a lot of compromise you may have to make to the aesthetics of your site.
Some settings such as Skip links are default across all pages.
Saves development time.
The toolbar gives a good impression of you and your business even for non-impaired site visitors.

And then, per page, other features should be added manually by Dynamiser to make your site fully compliant for Screen Readers.

Alt Text
Title Attributes
Aria Labels
Captions
Abbreviation texts
Buttons instead of text based links (even with Aria Landmarks being available and link underline in the toolbar)
Video captions/transcripts
Good PDF formats