Articles for the ‘Technical How-To’ Category

Figure and figcaption – extended alternate text for screen readers?

The usual way of making images accessible for people who can’t see them is to provide alternative text using the alt attribute of the element. However, in many websites, images are presented with caption text to explain to sighted users what the image is showing. This is effectively an alternative text for the image, but there’s no ‘programmatic’ linkage for screen readers to pick up. HTML5 introduced the <figure> element as a container that could be used for images, and <figcaption> for their alternative text. So could this be used as a good way of handling images with captions, for everyone?

Tags: , , ,

Common pitfalls and misunderstandings in accessibility auditing

At Hassell Inclusion we deliver a huge amount of accessibility training to organisations all over the world. Our Head of Training, Jon Gooday, has had the honour of training over 70 accessibility auditors over the last five years. In this blog, he gives an overview of some of the most common mistakes and pitfalls that auditors tend to get wrong that impact the quality of their findings…

Tags: ,

Is input type=”date” ready for use in accessible websites?

One of the ‘new’ HTML5 elements – input type=”date” – was intended to simplify the collection of dates on websites, and to reduce user errors whilst doing so. So is it well supported? And does using it help make forms more accessible? We took date inputs for a test drive with different browsers and assistive technologies to see how usable the control is now. Here are the results…

Tags: , , , , , , , , , , ,

Accessible accordions part 2 – using <details> and <summary>

After a comment on my previous blog post about accessible accordion patterns, I decided to do some investigation on the details and summary HTML elements. They could be the best way of doing accordions natively in browsers, but how well is the pattern supported? And will they work with assistive technologies?

Tags: , , ,

Using Gherkin To Write Accessibility Tests

Numerous accessibility automation tools, libraries and APIs are already available (including aXe, Pa11y, Google Accessibility Tools) which can be used to check whether code has been marked up to meet accessibility standards. But these don’t cover many of the tests you’d wish to make against WCAG success criteria, which aren’t about code, but about the how the page should respond to the user’s behaviour, such as tabbing. This blog discusses how the popular Gherkin language, which is often used for defining user acceptance test scenarios, and integrates easily with many automation frameworks including Ruby/Cucumber, PHP/Behat and .NET/SpecFlow (amongst others), can be used to write acceptance tests for these user behaviour tests…

Tags: , , ,

Thinking of adding festive cheer to your site? Will everyone appreciate your Christmas plugin?

Christmas is coming fast. So how does Santa relate to accessibility? The Christmasify WordPress plugin allows web sites to add a selection of Christmassy items: snowfall, Santa on his sledge moving across the screen, some Christmassy tunes playing, festive decorations for images, and a Christmassy font for the headings. A bit of seasonable fun? Yes. But adding this plugin (and others like it) can cause serious accessibility issues for significant numbers of your site visitors. So can the plugin’s accessibility (and Christmas) be saved?

Tags: , ,

WCAG 2.1 is here – what’s in it for you?

WCAG 2.1 has now been published. Many people are talking about what’s in it. But the more important question is: what’s in it for you? Here’s a background to why we needed a new accessibility standard, what we recommend organisations should do about moving to it, and some hints and tips from our experience of helping our clients use it so far…

Tags: , , , ,

Browser Extensions can Deliver Landmark Navigation for All Keyboard Users

Landmark navigation is really useful for screen reader users. They can jump around pages from landmark to landmark, and heading to heading. However, lack of native browser support for landmark navigation prevents sighted keyboard users, for whom browsing busy pages can be a bit of a slog, from getting this help. In this article we’ll look at two browser extensions that can make this functionality available to all keyboard users…

Tags: , , , ,