Advanced CSS Design Resources – last-child.com

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?

The aria-label attribute is tempting to use 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.

Base configuration

• basic link
  <a href="/" aria-label="this basic link has an aria label attribute" >basic link</a>
• basic span
  <span aria-label="this basic span has an aria label attribute">basic span</span>
• basic bold
  <b aria-label="this basic b has an aria label attribute">basic bold</b>

Give <span> and <b> tabindex="0" to place into tab flow

Span and b tags are not in the native tab flow. I added tabindex="0" to see if that was the problem. Now that we can give them focus, the aria-label is still ignored.

• basic span
  <span aria-label="this basic span has an aria label attribute" tabindex="0">basic span</span>
• basic bold
  <b aria-label="this basic b has an aria label attribute" tabindex="0">basic bold</b>

What’s going wrong

ARIA is a tool to make our web sites more accessible. It’s meant to restore semantic structure and act as a bridge between dynamic web sites and assistive technology. ARIA roles, states, and values allow the web developer to give directions to assistive technology to explain how an element should be treated. This is especially true when the element is expected to work in a non-standard method. For instance, Flickr uses divs with background images as images to improve animation on mobile devices.

The aria-label attribute allows us to place a label on these elements that have been re-purposed via JavaScript. It’s not meant to replace the title attribute on generic tags.

Convert elements with aria

The following elements now have ARIA roles: button, img, and slider. These ARIA roles announce the new purpose of these elements. Their aria-label attributes are announced, as they are adding information to these faux-elements.

• basic link
  <a href="/" aria-label="this link is now a button" role="button">basic link</a>
• basic span
  <span aria-label="this span is now treated as an image." role="img" class="fakeimg" tabindex="0">basic span</span>
• basic bold
  <b aria-label="this b is now treated as a radio button" role="radio" tabindex="0">basic bold</b>

Back to the original problem

In the forecast example, the original idea was to put aria-label on the span that included the text “Sat”, “Sun”, or “Mon”. The aria-label described the weather illustrated in the icon. After realizing this was not working, we realized it was being over-thought. The icons were background images, we just needed to add the desired text to the background image container.

ARIA is a great way to solve problems. However, it wasn’t meant to replace basic HTML. Here’s a proposed solution sans ARIA:

<th scope="row" title="Saturday">Sat</th>
<td class="cloudy"><span class="visuallyhidden">Cloudy</span></td>

Resources

• ARIA Text Alternative Computation
• Spec for aria-label
• Clip your hidden content for better accessibility
• Create Dynamic Form Labels with ARIA

Ruth Ellison created this presentation about cognitive disabilities. It’s difficult to design for these users due to the wide spectrum of disability impact and what helps one person may cause problems for another. However, there are some solid suggestions in this presentation that will help you create a more accessible web site.

It helps to view this on slideshare to view the presenter’s notes on each slide.

I haven’t been posting much to this blog for the past year. But that’s not because I’ve been lazy. I’ve been writing a lot of tutorials about creating more accessible web sites on the Yahoo! Accessibility Lab’s Code Library.

You’ll find some great resources for using CSS, basic HTML, JavaScript, and ARIA.

WordPress makes it easy to add features by installing plugins. While most of these are well designed, they often use WordPress defaults that are not the greatest for accessibility or performance. One of the key elements of making your site load faster is to put the JavaScript at the bottom of the page, just before closing the body tag.

Put Scripts at the Bottom

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.
Best Practices for Speeding Up Your Web Site – Yahoo! Developer Network

Good WordPress plugins will use the wp_enqueue_script function to bundle their js and insert it into the page. The default setting is to place the JavaScript into the head. It’s easy to modify your individual plugins to switch to the bottom of the page.

You’ll need to add a true value to the in_footer variable.

$in_footer

(boolean) (optional) Normally scripts are placed in the <head> section. If this parameter is true the script is placed at the bottom of the <body>. This requires the theme to have the wp_footer() hook in the appropriate place. Note that you have to enqueue your script before wp_head is run, even if it will be placed in the footer. (New in WordPress 2.8)
Function Reference/wp enqueue script – WordPress Codec

Let’s look at a sample module: Tweet Blender. If you’ve got this module installed, open tweet-blender.php in your editor. Here’s the original code for inserting the main JavaScript.

// load main JS code
wp_enqueue_script('tb-main', '/' . PLUGINDIR . '/tweet-blender/js/main.js', $dependencies);


This line is creating a link to the needed JavaScript and passing an array of the dependencies to the wp_enqueue_script function. We want to add a couple variables to this. The final set will be (script, dependencies, version, in_footer). The default value for version is false, so that is what I’m adding.


// load main JS code
wp_enqueue_script('tb-main', '/' . PLUGINDIR . '/tweet-blender/js/main.js', $dependencies,false,true);


Try this with your module, refresh the page and make sure it doesn’t break the functionality. If it does, consult the WordPress documentation for setting up the correct stacking order for your scripts. This change was all I needed to make the Tweet Blender place the scripts in the footer.

Check your site’s performance

How many plugins are inserting javascript into the head of your blog? Use the Yslow plugin to do a performance evaluation. It’s now available for multiple browsers and even mobile devices. Click on the “Put JavaScript at the bottom” link to see which ones are still in the head. It’ll take a bit of time to track down the correct file in your plugins directory, but your site will be faster and your visitors will appreciate the performance boost.

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.

First off, I’m going to use the excellent Colorzilla gradient creator to establish the colors.

div#gradientbg { /*the following rules are from colorzilla*/
background: #e6f0a3; /* old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#FFFFFF); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=1 ); /* ie */
}


This works great for applying a background to the entire page. But we want to limit this to just the header. We’ll need two declarations. First a browser-specific rule (background-size). This, however could cause a series of gradient bands to tile across the screen. so simply add the no-repeat as well.

-moz-background-size:100% 100px;
...
background:no-repeat;


Final CSS


div#gradientbg {
display:block; width:500px; height:400px; border:1px solid #ccc;
/*the following rules are from colorzilla*/

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
}


View the example page