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

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

Yahoo! Accessibility Lab’s Code Library

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

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.

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

Yahoo just announced the GBS change we’ve all been waiting for. IE6 will be downgraded to a C-status browser in Q1, 2011. This means I can finally upgrade my own laptop to IE8! This means we can focus on building for the future and not the past. Excuse me as I hyperventilate over the joy.

Internet Explorer 6: We are forecasting the transition of Internet Explorer 6 from A-grade to C-grade in the next GBS update. The calculus here is simple: The proliferation of devices and browsers on the leading edge (including mobile) requires an increase in testing and attention. That testing and attention should come from shifting resources away from the trailing edge. By moving IE6 to the C-grade, we ensure a consistent baseline experience for those users while freeing up cycles to invest in richer experiences for millions of users coming to the internet today on modern, capable browsers. Note: This forecast should not be taken as an indication that IE6 users will see an abrupt change in their experience of Yahoo! websites in Q1 2011; the change in philosophy toward IE6 will be reflected in new development and products and applied in ways that make sense based on product needs.
Graded Browser Support Update: Q4 2010 – Eric Miraglia and Matt Sweeney, Yahoo! Developer Network

]]> http://www.last-child.com/yahoo-to-downgrade-ie6-in-2011/feed/ 0 http://www.last-child.com/best-practices-for-javascript/ http://www.last-child.com/best-practices-for-javascript/#comments Sun, 03 Oct 2010 22:02:47 +0000 Ted http://www.last-child.com/?p=254 I’m on a mission to relearn JavaScript. My limited skills are from trying to shoehorn scripts into pages without completely understanding the theory. Christian Heilmann, a developer evangelist for Yahoo!, is a great resource for not only learning how to code but also why you should use method A over B.

This presentation by Christian sheds a lot of light on how to create re-usable, maintainable scripts.

Maintainable Javascript carsonified

View more presentations from Christian Heilmann.

]]> http://www.last-child.com/best-practices-for-javascript/feed/ 0 http://www.last-child.com/include-copyright-symbol/ http://www.last-child.com/include-copyright-symbol/#comments Thu, 08 Jul 2010 16:59:14 +0000 Ted http://www.last-child.com/?p=248 I found this page today while trying to find the proper way to add a copyright symbol ( © ) with XSL. Copyright Symbol Webpage is simply a good reference to how and why to use the copyright symbol.

Here’s a snippet on how to use it in XSL

Unicode Copyright Symbol – Programmers, please NOTE:

Unicode is required by modern standards such as Java, XML, ECMAScript / JavaScript, CORBA, WML, LDAP etc.

Pretty much all of the questions about Copyright Symbols for standards that use Unicode will require the &#169; input. however, this may differ such as for XSL as listed below. We have tried to collate what we can for you – if you can’t work out the answer from here…keep on searching – and please write to us with any information that you think would be useful on this site.

Java Script / JSP Copyright Symbol

In Java use the unicode &#169; or &#xA9; to get the copyright symbol. One common mistake is typing the © into the code, which will not work.

XML Copyright Symbol

In XML use the unicode &#169; or &#xA9; to get the copyright symbol.

XSL Copyright Symbol

If you were to use the ‘&copy;‘ entity with XSL, you may well come across the complaint of “Reference to undefined entity ‘copy’.”

In XSL always use &#xA9;

Copyright Symbol Webpage

]]> http://www.last-child.com/include-copyright-symbol/feed/ 3 http://www.last-child.com/css3-sibling-with-video-tag/ http://www.last-child.com/css3-sibling-with-video-tag/#comments Tue, 15 Jun 2010 15:56:31 +0000 Ted http://www.last-child.com/?p=240 <video>...</video> <p>...</p> </li> I wanted the paragraph to appear when the video is [...]]]> 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.

]]> http://www.last-child.com/css3-sibling-with-video-tag/feed/ 1 http://www.last-child.com/cross-browser-html5-video/ http://www.last-child.com/cross-browser-html5-video/#comments Sun, 13 Jun 2010 17:00:44 +0000 Ted http://www.last-child.com/?p=235 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

• HTML5 video Libraries, Toolkits and Players – Specky Boy
• JW Player: Flash Video Player – a base flash movie to use as your fallback flash movie
• html5 video fallbacks with markup – Mozilla Hacks
• Fed Flix – Repository of US Government films in various formats. These are good for testing your video markup.

]]> http://www.last-child.com/cross-browser-html5-video/feed/ 0