Bookmarklets are small javascript links that let you perform tasks in your browser. I have collected a set of bookmarklets that allow easier accessibility testing. This collection will certainly grow. What is your favorite? Add it in the comments.
To use a bookmarklet, drag the link to your bookmark toolbar. Then click on it to trigger the action on your favorite page.
Continue Reading Accessibility Bookmarklets
Complex forms should use a fieldset and legend to group similar inputs. The legend is announced along with label text for each input. This is especially helpful when form inputs are repetitive, such as mailing, billing, and work address information.
This example fixes a form that included a form within a table. It uses the aria-describedby attribute to connect the individual form inputs with a header cell. It was inspired by DeQue’s recent article for using ARIA to replace fieldset/legend in a set of radio buttons: ARIA-Group: a viable alternative for Fieldset / Legend?.
Continue Reading Using aria-describedby to replicate fieldset and legend
Robert Bringhurst’s book ![The Elements of Typographic Style: Version 4.0: 20th Anniversary Edition [Paperback]](http://www.last-child.com/wp-content/uploads/2013/02/31ntuLN5mOL._SL500_AA300_-e1359825282979.jpg)
The Elements of Typographic Style is overwhelming me with typography details. Today I came across a description of using small caps for abbreviations, which inspired me to come up with this snippet for state abbreviations.
For abbreviations and acronyms in the midst of normal text, use spaced small caps
Many typographers prefer to use small caps for postal abbreviations (San Francisco, CA, 94119, and for geographical acronyms longer than two letters. Thus, the USA, or in Spanish, los EEUU, and Sydney, NSW.
The Elements of Typographic Style – Robert Bringhurst page 48
Continue Reading Typography and Microformats: adding small-caps to your state abbreviations
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.
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
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