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
I recently helped do some testing on the new version Yahoo! Mail for iPads and was stumped by an aria-label not working as expected. It was one of those gotcha moments, when you realize a confusion with a fundamental process. Are you wondering why your aria-label is not being announced?
It’s tempting to use the aria-label attribute in situations where the visible text is not adequate. For instance, you may use a background image to represent a value and you’d like the user to know that value via an aria-label on the parent.
This basic test page will walk through the simple assumption and show how the aria-label is meant to be used.
Let’s assume you want to create a gradient background that starts at the top of the page and finishes at the bottom of your page header, i.e. is 100px tall. You can do this with a combination of CSS3 rules and avoid those ugly background images.
Continue Reading CSS3 Gradient Backgrounds and Controlling Their Height
I am working on a little widget that uses the html5 video tag on one of my test sites: Fyvr.net.
I wanted to display related information when the video is playing. The sibling selector makes this easy.
Here’s the basic markup
<li> <video>...</video> <p>...</p> </li>
I wanted the paragraph to appear when the video is selected. So here’s the simple CSS
section#videolist li {
position:relative;
}
section#videolist li p {
display:none;
position:absolute;
bottom:-100px;
left:0;
}
section#videolist li video:focus+p {
display:block;
}
The sibling selector (+) is telling the browser to display the paragraph as block when its video brother has focus. This is a rough test. There could be some accessibility issues and I’ll need to test this out. Obviously this will not work in Internet Explorer.
Apple’s lack of support for Flash
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
.htaccessfile to send the correct mime-types to browsers
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webmVideo for Everybody! – Kroc Camen