Jan 02

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

Nov 07

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

Oct 08

Mobile Accessibility

I gave this presentation at the Silicon Valley Code Camp about mobile accessibility. I tried to reach all audiences by showing what can be done with mobile technology for accessibility, how the operating systems stack up, and the common problems with solutions. I also included instructions on enabling the screen reader for iOS and Android.
Continue Reading Mobile Accessibility

Sep 07

Android Accessibility Testing and Fixing in 30 seconds

The Google Accessibility team recently invited Android developers from around the Bay Area to spend an afternoon learning how to make their applications accessible. The event showed these developers how easy it is to make their applications as accessible as possible. One of the tools featured was Android Lint. I was so impressed by the functionality that I made the following video: Android Accessibility Solution in 30 Seconds
Continue Reading Android Accessibility Testing and Fixing in 30 seconds

Jun 13

Cross-browser HTML5 video tag with fallback for Flash users

Apple’s lack of support for Flash on the iPhone and iPad has forced people to reconsider the value of HTML5 and its video tag. It’s no longer something to put off until the future. However, adding HTML5 video support to your site AND continue to provide a Flash option for older browsers (I.E.) is not as simple as you might expect.

While the video tag has been standardized, there is a lack of consensus for supporting the codecs used to package the videos for distribution and playback. Some browsers are supporting the OGV format, some support the more popular but licensed mp4 format. Others, such as Chrome, will support both. To make it even more exciting, there is a new version under development to make a truly open-sourced format: WebM.

This means your video tag needs to define multiple movie sources to make it playable on all browsers. It sounds complicated because it is. Luckily, Kroc Camen has written a great article and code pattern for adding a cross-browser video tag with fallback to Flash for the older browsers: Video for Everybody!.

The article is full of great advice from a programmer that has learned the stuff the hard way. Here’s an explanation of how you’ll need to adjust your htaccess file.

Ensure your server is using the correct mime-types. Firefox will not
play the OGG video if the mime-type is wrong. Place these lines in your
.htaccess

file to send the correct mime-types to browsers

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Video for Everybody! – Kroc Camen

Related Resources