Fieldset legend, aria-describedby, and radiogroup role

The HTML specifications for forms suggests using a <fieldset> with <legend> to define similar items within a form. Normally this is used to combine the forms into large chunks, for instance the billing address, credit card information, and personal information. It’s also useful for combining radio and checkbox sets.

Typically, we associate a form input with a label. The label is announced as the screen reader places focus on the input. This works very well for letting the user know what the checkbox or radio button represents, but it doesn’t give the user context for how it is applied. For instance, the following radio button would be announced as “radio button Yes”. But what is the user saying yes to?
Continue Reading Fieldset legend, aria-describedby, and radiogroup role

Force the screen reader to announce digits

There are times when we want the screen reader to announce individual letters in a string. This is sometimes up to the interpretation of the screen reader with an acronym, such as NASA. There are other times when we need to force the digits, for instance in a confirmation code IXbib. This page will test options for making a screen reader announce this confirmation code: IXbib
Continue Reading Force the screen reader to announce digits

Neutered Links: A.K.A removing the href attribute

There’s an old programming saying: Garbage in, Garbage out. This helps people explain why all sorts of things don’t work. Concentrate on using the best content possible if you want a successful product, web page, mobile app, or chocolate covered cream puff. I’ve seen a new inaccessibility pattern appear with links that are not keyboard accessible. This article will explain the problem, solution, and provides a helpful bookmarklet for finding these neutered links on your page.

The Basics

HTML, at its most basic, is a markup language that allows linking; within a document and to an external document. These links use the <a> tag. The early HTML standards defined two functions for this tag.

Placing an href attribute into the tag converts it to a link, which can take the user to new content. This also places the link into the normal tab flow and makes it clickable.

Continue Reading Neutered Links: A.K.A removing the href attribute

Common Accessibility Mistakes with HTML and CSS

Here’s an older video of a presentation I gave at one of Yahoo’s Front End Engineering Summits. I discussed some of the common issues we still find in web sites, from the alt attribute to forms. You can find more videos like this on the Yahoo! Accessibility Lab’s YouTube Channel.

Continue Reading Common Accessibility Mistakes with HTML and CSS