Theme colour switcher

Blog Topic: accessibility

I found a weird issue during a recent accessibility audit. I was testing a slideshow using the NVDA screen reader and keyboard navigation. The slideshow uses tab controls for the controls to switch the slides (incorrect IMO, but that's a different topic). The problem was that when my keyboard focus was on the currently selected tab/slideshow control, I couldn't use up and down arrow keys to…

Continue reading Buttons with the tab role prevent NVDA keyboard navigation

A standard part of accessibility testing is to check if a site conforms to WCAG 1.4.4 Resize Text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. "Without assistive technology" means that we should be able to use browser settings to resize text, without special accessibility tools. This…

Continue reading Differences between browser font size resizing and Firefox "zoom text only" setting: which can you use to test WCAG 1.4.4 Resize Text?

Removing borders from buttons is part of many CSS resets, including mine, till recently: button,input[type="submit"] {  border: none;} However, during an accessibility test with a tester who uses high-contrast mode, I realized the problem with this. High contrast mode is used by many people with low vision or photosensitivity. It replaces your carefully-chosen website colour…

Continue reading Accessibility: don't remove borders from buttons

Without fail, in my accessibility testing with blind users, links which open in new tabs (or windows, but that's less common these days) are a problem. Often, there's no notification in the link that it will open in a new tab, as is required by WCAG Success Criterion 3.2.2 On Input. Other times, it's there but presented in an inaccessible way, such as the <title> attribute on the link. (…

Continue reading Accessibility: Just don't open links in new tabs

The title of this post might seem a little odd, but it's inspired by a recent accessibility audit where I saw the HTML <nav> region being used in some unusual ways. The MDN HTML spec defines the <nav> element this way: The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.…

Continue reading Accessibility: What is a nav region?

One of my clients is a site which has extensive audio recordings. Their current site uses the default HTML5 audio player, but they want something that is more customizable to fit with their design and needs. One of their requests was to be able to set audio playback speed. One of my priorities was that the audio player be fully accessible. To display the audio player, they are using the Drupal…

Continue reading How I customized jPlayer for accessibility and added playback rate control, Drupal 9

A very common website pattern is a list of teasers for blog posts or articles, each with a heading, short text extract, maybe an image, and a link whose text label is something like "Read more" or "Learn more". Those "read more" links are very bad news for accessibility, mainly for blind users. Why? Blind users often hear links out of context. This may happen by tabbing through focusable elements…

Continue reading "Learn more" or "read more" links: bad news for accessibility

During lived user accessibility testing, one pattern I've repeatedly found to be a problem for blind users is multiple inputs for one piece of data. For example: A Canadian postal code with separate inputs for each character A driver's license number with three inputs, one for each set of five characters A credit card date with separate inputs for month and year Why is this done? Typically, it'…

Continue reading Multiple form inputs for one piece of data: bad news for accessibility

Recently I've been doing a lot of lived user accessibility testing, which involves observing people with disabilities using assistive technology to perform specific tasks on websites or apps. The goal is to identify the issues they encounter so the site owner can remedy them. One issue I've frequently observed, which was totally unexpected for me, is uncertainty and confusion on the part of blind…

Continue reading Accessible wording for form submit buttons

It's a nearly universal pattern in websites: the organization logo in the top left corner of the page, usually a link to the site homepage. But what text label should that link have? How the label is provided isn't what we're dealing with here (usually it's by alt text on the logo graphic), but its wording. Normally, I counsel developers and content editors to only include the visible text in an…

Continue reading Should a site's linked logo include the word "Home" in the label?