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

Pagination guidelines

Here’s a sample of the Design Library’s ideas for search pagination.

• Display the navigation controls as a row of links.
• Present links in the following order: ‘Prev’, page links, ‘Next’.
• Display a left arrow after the label ‘Prev’.
• Display a right arrow before the label ‘Next’.
• Make the arrow(s) clickable.
• The page links should contain a maximum set of 10 page links. If fewer pages of results exist, only show page links for the available pages.
• When on pages 1-6, the page links should always start at ’1′.

Search Pagination

The rationale for these rules is also interesting:

• Displaying arrow graphics helps differentiate the links and provides larger click targets.
• Disabled controls add little value in this context since
  • These links often appear blow the fold.
  • The first page of results makes up the vast majority of pageviews. Displaying a disabled “previous” control on all of these is of little added value.
  • Although a “First” link has value, it competes with the functionality presented in the random-access links.
  • The “Last” link is of little value as the results are sorted by relevance. This is is also problematic since the total number of results (and therefore, the last result) may not be known.

Add this pagination style to your search engine

See the final result on V3GGIE.com: Vegetarian Enchiladas Recipes

Most PHP pagination tutorials assume you are pulling content from a database. Ascanio Colonna created a good tutorial on building pagination with PHP that is agnostic to the data source. I’ve taken his code and modified it to match the Yahoo Design Pattern. I’ve also added the suggested YUI Module markup to stay consistent with the YUI Grids and any future YUI javascript.

The pagination.php file includes a function that creates the module. You’ll need to call this function from your results page with a series of parameters. These are easy to populate from the BOSS interface. It’s worth noting that I am ignoring the BOSS next/last page nodes in the web service and prefer to build my own urls.

The Pagination Code

Lets’ start by looking at the code inside your results.php file. This will call the pagination function and pass the desired parameters.


if(!empty($searchQuery))
{
require '/include/pagination.php';
if(isset($_REQUEST['page'])) {
$page = $_REQUEST['page'];
} else {
$page = '1';
}
$limit = $count;
$targetpage = 'results.php';
$pagestring = '?page=';
$summary_name = 'articles';
$placement = 'summary';
// start pagination
echo getPaginationString($page, $totalhits, $limit, $targetpage, $pagestring, $summary_name, $placement);
}


Here’s what you are working with:

require ‘/include/pagination.php’

Where does the pagination file sit on your server

$page logic

First look to see if there is page=x in the url. If so, $page = x, if not, you are on page 1.

$limit

How many results will appear on the page

$targetpage

what is the name of your results page? index.php, results.php?

$pagestring

I tried to minimize this to ?p= but couldn’t track down why it didn’t work. I’ve left it at the default ?page=…

$summary_name

This is what appears in the text “xxx (summary_name) results. This is not used in the Yahoo Design Library

$placement

You’ll probably want to use summary. This function also allows “footer” for a simplified output

echo getPaginationString(…)

Send the information to the function and display the results in the page.

Important Update!

The original code I posted had a serious security flaw. You should never output user’s input directly into your page. I had something like this href=”?query=$_REQUEST['query']“. This allows all sorts of Cross Site Scripting attacks. You must urlencode any text that comes from a user. This is safe: urlencode($_REQUEST['query']).

I apologize if anyone has used this code, as I wrote it on their site. They should immediately update the logic. -Ted

The pagination function

I have streamlined the original code from Asconio, as he was tying into pre-existing facebook styles. This code is for your unique web site. It’s also worth noting I use rewrite rules to make my search result page urls more friendly, i.e. /corn.html instead of /result.php?q=corn

//text strings in strings.php

Sample CSS


a[rel] {padding-left:20px; background:url(rel-sprite.png) no-repeat 0 0; }
a[rel~="help"] {background-position: 0 -350px ;}
a[rel~="license"] {background-position: 0 -1347px ;}
a[rel~="no-follow"] {background-position: 0 -1200px ;}
a[rel~="tag"] {background-position: 0 -47px ;}


It’s all fun and games

I’ll be the first to admit this exercise has significant issues. I’m assuming the following elements are true:

1. All possible rel attribute values are accounted for in my CSS, if not there will be a blank space generated by the first rule
2. You can only have one relationship defined by XFN. Unfortunately, most people are defined by multiple values, i.e. rel=”met friend colleague”. This CSS does not account for multiple values.

So, the display of your rel attributes may be a bit off in the edge cases. Keep the spirit light and nobody will say anything… I hope. Have fun with your rel attributes. They’re just sitting there waiting to be used.

View the finished rel attribute style example.

Related Information

• Microformats Wiki: Profile URI’s
• Microformat: Rel Design Pattern
• Microformat: Tags
• Microformat: No Follow
• Microformat: Bookmark
• Microformat: XFN – Friends Network
• Microformat: XEN – Enemies Network
• W3C: Link Types
• Icon Buffet – The source of most icons used in this example

We have avoided using CSS3 rules for too long. It’s been difficult to justify using rules that won’t work for a significant portion of our audience, Internet Explorer 7 and below. However, Internet Explorer 8 is coming out soon and does work with the features we like.

I think it’s fairly safe to assume IE7 users will upgrade to IE8 within a short time. Those stuck with IE6 for one reason or another will slowly disappear as they are given new computers or their locked down environments are upgraded.

So, with the future of CSS3 functionality within reach, I’ve been energized to begin experimenting again. I’ll be writing a series of blog posts over the next few months that look at CSS3 functionality as a progressive enhancement. How can we continue to deliver a perfectly fine web site to IE6 and IE7 and mobile phones while enhancing the functionality of more modern browsers and devices?

Attribute Selectors

CSS attribute selectors are the golden ring on the web development merry-go-round. They can be daunting to learn, addictive to use, but then disappointing when you realize they are out of your grasp when you test in Internet Explorer. We can, however, begin using them to add additional functionality based on your pre-existing, semantic code. Attribute selectors give you power to write CSS that pinpoints the stuff you already code, without having to go back and add classes or ids. I’ve written previously about using attribute selectors to let your users know the language of a site they are about to visit. This trick relies on the rarely used hreflang attribute, which identifies the language of the site targeted in a link.

There are many other attributes in your HTML, from table headers, image src, link titles, and selected options. Think about all of those juicy attributes just waiting to be targeted. Also think about how you could actually do something useful with them.

Announce the file type of a link with CSS

I once worked for a company that had hundreds of thousands of static HTML pages in their intranet. With no content management system; it was impossible to make global changes. The only thing they shared was a common set of style sheets. Does this sound familiar? Follow along as we increase your site’s usability in a less than perfect, but efficient way.

First off, for accessibility, you need to let users know when a link will open a file, what type it is, and how large it is. This is best done by adding it to your HTML code:


Foo presentation (.pdf, 5kb)


That delivers the information to everyone, regardless of their browser. This, however takes time and is a daunting task for updating legacy code.

We can, however, use the atttribute selector to target the extension of the link to display the icon and insert the text describing the file type. Here’s the sample HTML code:

It’s a simple list of links for different types of files. We’ll be looking at the extensions: .zip, .pdf, .doc, .exe, .png, and .mp3. Feel free to extend this list to any extension you so desire. This would be especially helpful for a company that uses proprietary file types within their intranet.

Now, let’s look at the CSS:


a[href$="zip"],
a[href$="pdf"],
a[href$="doc"],
a[href$="exe"],
a[href$="png"],
a[href$="mp3"] {padding-left:20px; background:url(bg-file-icons.png) no-repeat 0 0;}
a[href$="png"]{background-position: 0 -48px;}
a[href$="pdf"] {background-position: 0 -99px;}
a[href$="mp3"]{background-position: 0 -145px;}
a[href$="doc"]{background-position: 0 -199px;}
a[href$="exe"]{background-position: 0 -250px;}

a[href$=".zip"]:after{content: "(.zip file)"; color:#999; margin-left:5px;}
a[href$=".pdf"]:after{content: "(.pdf file)"; color:#999; margin-left:5px;}
a[href$=".doc"]:after{content: "(.doc file)"; color:#999; margin-left:5px;}
a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}
a[href$=".mp3"]:after{content: "(.mp3 file)"; color:#999; margin-left:5px;}
a[href$=".png"]:after{content: "(.png file)"; color:#999; margin-left:5px;}
a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}


See the final test page.

Pattern matching in the attribute selector

We have some limited “regular expression” functionality in CSS3. We can search for an attribute’s presence and match a pattern within the attribute’s value.
Patrick Hunlon has a good summary of the pattern matching:

• [foo] — Has an attribute named “foo”
• [foo="bar"] — Has an attribute named “foo” with a value of “bar” (“bar”)
• [foo~="bar"] — Value has the word “bar” in it somewhere (“blue bar stools”)
• [foo^="bar"] — Value begins with “bar” (“barstool”)
• [foo$="bar"] — Value ends with “bar” (“I was at the bar”)
• [foo*="bar"] — Value has bar somewhere (“I was looking for barstools”)

Attach icons to anything with CSS

The CSS is simply looking to see if the desired extension is at the end of the link href. If so, apply the following styles.

Adding an icon to the link

First, we are match any of the desired file extensions. We then add a background image and some padding on the left side with a bulk rule. Then the background position on the sprite is adjust for each particular link type. Combining multiple icons into one background image reduces the number of files the user has to download, making your page faster. This will work with any browser that recognizes attribute selectors, including Internet Explorer 7. However, support for more obscure attributes may be spotty.

There’s another peculiarity with pattern matching. Some attributes are case sensitive while others are not. The href attribute is NOT case sensitive, so the above rules will also work if your image name was FOO.ZIP, foo.Zip, or foo.zip.

Adding the descriptive text

Now, we are going to add a bit of descriptive text to each link. We can’t describe the file size, but we can tell the user what type of file it is. This is using the :after(content:) functionality and is supported by Internet Explorer 8 (yeah!!!) but not Internet Explorer 7 and below (boo!!!).
We will also adjust the color and give it a bit of spacing.

A big step forward with a small chunk of work

There you have it. A small chunk of CSS coding has now added substantial usability to your legacy pages. While the CSS version is not as accessible as having the data in the actual link code, it’s a significant improvement over nothing at all. Further, there’s no harmful effect on browsers that do not understand the function. You’ve added information, but haven’t taken anything away. This is a win in my book. To save some time and effort, you could just download and use this package of CSS and icons from Alexander Kaiser.

This rather simple example of attribute selectors and pattern matching can open your eyes to many possibilities. There are a number of developers that have been expoloring this potential for the past few years. Take a look at some of these resources for more ideas and have some fun.

• CSS3 – Atribute Selectors Definition W3C
• CSS 3 Selectors Explained
• CSS: A Tribute to Selectors
• YUI: Selector Utility Use CSS3 selectors in JavaScript
• Dynamic File Type Notations
• Cool use for CSS attribute selectors – Hiding banner ads with CSS
• Showing Hyperlink Cues with CSS
• Showing Hyperlink Cues with CSS

Here’s an example of the information available on the Teaching with Technology site:

	Lowercase Vowels
à	à (225)
â	â (226)
ä	ä (228)
è	è (232)
é	é (233)
ê	ê (234)
ë	ë (235)
î	î (238)
ï	ï (239)
ô	ô (244)
œ	œ (156)
ù	ù (250)
û	û (251)
ü	ü (252)
ÿ	ÿ (255)

Teaching and Learning with Technology

2: Use a Content Delivery Network

Let’s say you have a small site that has a very local audience. Sally down the street doesn’t notice any problems with slow images. But what if your site is more global? Will the Sally equivalent in Europe, Asia, India, or the other side of the country have the same experience? Probably not. This is why large sites use the Akamai servers. They can cache images and files closer to the user.

The #2 rule by the exceptional performance team tells us to use one of these distributed asset servers.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen.

Some large Internet companies own their own CDN, but it’s cost-effective to use a CDN service provider, such as Akamai Technologies, Mirror Image Internet, or Limelight Networks. For start-up companies and private web sites, the cost of a CDN service can be prohibitive, but as your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. At Yahoo!, properties that moved static content off their application web servers to a CDN improved end-user response times by 20% or more. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site.
Best Practices for Speeding Up Your Web Site

Doing this cheaply with Amazon

Amazon’s Web Services give you this functionality for a very low cost. There S3 service costs most people less than $5/month. This gives you easy acces to your private database and storage. You pay by the size of your files and the total traffic.

You can further increase your site’s performance by taking advantage of the hosted Yahoo! YUI CSS and JavaScript libraries.

This problem was solved a few years ago by a series of layouts donated to the greater good by wonderful developers. This gave me the ability to ignore layouts and concentrate on semantic, structural markup and using CSS to turn this into a great set of modules on the page. This is the stuff that makes web development fun for me.

Over the years, new layouts came and went and cross-browser layouts developed to a science. It’s now even easier for you to build a web site layout that is predictable, flexible, and lightweight.

The YUI-Grid

Just because I work at Yahoo!, doesn’t mean I immediately jumped onto the YUI-Grid when it was released. I’ve built several sites without it since its launch. A developer becomes comfortable with a solution and change hurts. However, I recently began working on a very simple, small gallery site and gave this tool a try.

First, a bit of an explanation on some of the nomenclature. The YUI has laid down the law on some naming conventions, and while it may seem a bit bloated, the resulting hooks allow a site to easily incorporate the YUI JavaScript and CSS.

Each main container div has three children, class=”hd” for the header, class=”bd” for the body, and class=”ft” for the footer. You can delete the hd or ft if they are not needed, but you need to at least have the body element. The main portions of the page use the same naming conventions, although with id instead of class. The header has id=”hd”, the body container: id=”bd”, and finally the footer has id=”ft”.

YUI flexibility

Nate Koechley, the man behind the grids, has created a series of rules that let you change the width of your grid, the number of columns, position of columns, and how nested columns divide the avialable space by simply changing a few classes on the parent containers.

It’s a very powerful set of controls. Here’s an example of how the classes change the widths of nested divs.

The standard grid-unit interplay always divides space in two, evenly. To create layouts of more than two units (e.g., three), and to create layouts divided unevenly (e.g., 66% and 33% or 75% and 25%), we employ special grid holders. While “yui-g” tells the two children each take up half the space each, “yui-gc” tells the first unit to take up two-thirds of the space, and the other unit to take up one-third of the space. Everything else remains the same: units live within grids, and the first of a set must be indicated.
Nate Koechley – Yahoo! UI Library: Grids CSS

Help?

Now, if you are like me, your head has begun throbbing after reading the YUI Grid CSS page several times, making notes on how it works, and reading it a few more times before figuring out how to start. The package is complex and yet easy to work with once you dive in.

However, it’s easy to skip most of the headaches and begin building your site immediately. Dav Glass, also of the YUI team, created a great Grid Builder that makes it sinfully easy to build your complicated layout. Not only does it generate the HTML for your basic page, it also incorporates the full YUI CSS library.

This means you also get the YUI Base CSS, YUI Reset CSS, as well as the excellent YUI Fonts CSS. All of these are combined into one CSS file that has been akamized for faster downloads. This means your final site CSS can focus solely on the things that make it unique. You’ll be surprised how small your custom files will be when all of these issues have already been dealt with.

Take it one step further

I was prompted to write this post after seeing the latest extension of the Grid CSS from the outside. Christian Heilmann just published a simple javascript, Enhancing YUI grids with equal height columns, that builds on the established nomenclature of the Grid CSS. It’s a demonstration of the power afforded by a standardized class and id naming convention.

Christian’s javascript also utilizes the basic YUI Javascript library to take all of your nested divs and make them the same height. So, with the addition of one more js script, you now have complete control of your grid layout and your nested divs are all the same height.

Here’s how Christian describes the simplicity.

All you need to do is to add YAHOO, YAHOO Dom and YAHOO Event (easiest with the collated yahoo-dom-event package) and the script in the bottom of your document’s body. The script automatically equals all columns in nested grids. If you don’t want all of them to be equal, define only those that need fixing by adding a “columnfix”CSS class.
Christian Heilmann – Enhancing YUI grids with equal height columns

Future flexibility

This powerful package of YUI CSS and standardized nomenclature for establishing the building blocks and the YUI JavaScript library for building interactions will allow developers to spend more time creating the elements that make their site unique and reduce the cross-browser issues caused by individual mistakes. We’ll see more extensions from within and outside the YUI developers as the usage becomes more universal. They YUI libraries are not doing the work for me, they’re just making it a lot more fun and productive.

However, there are times when your UED provides a design that lacks visual hooks for your screen reader users. A good example may be the ever-popular search form. Most sites will have an input and a button that says “search”. The label for this input is nowhere to be found.

The average sighted user can figure out such a simple form but the screen reader needs a bit more help. Here’s a sound clip of a screen reader trying to use the search form on Yahoo! Kids (.mp3). This was further complicated by the missing alt attribute on the image-based submit button.

I’ve also had to work with table based forms that need some assistance. The table is marked up with appropriate table headers and scopes, but the individual inputs lack labels due to the UED.

The simple solution

There are many ways to hide content via CSS. You want to avoid visibility:hidden and display:none. These will also hide it from the screen reader. You could use text-indent:-1000 em. I prefer using position:absolute; top:0; left:-1000em;. This hides the label by pushing it off screen yet the screen reader is still able to use it.

Updated CSS (updated 4/24/2008)

Adding a top position to your hidden may cause the page to jump when the item is focused. Only use a negative left position and leave the top position out of the equation.

Samples

Let’s look at the complicated table with hidden inputs. The table is properly coded with summary and scope. However, the table would still be difficult for a screen reader without form labels.

Here’s a sample of the HTML code:

Here’s the CSS for the labels


.srinfo {position:absolute; top:0; left:-1000em;}


Extending the hidden screen reader concept

I’ve written earlier about how Yahoo! Tech used a hidden collection of links to replicate an inaccessible flash movie. In a nutshell: screen readers cannot see a flash movie that has wmode:transparent. To get around this, we duplicated the flash content and moved it off-screen for screen readers and search engines.

You could also use this technique for providing information specific to screen reader users, such as:

Hold the Presses, this isn’t perfect!

You can’t just throw anything off screen for the screen readers. The earlier Yahoo Tech example took about made 6 links invisible yet they were still accessible to keyboard users. So, remember, when you use the srinfo class to hide content for screen readers, keep in mind the impact on keyboard users.

Understanding the virtual buffer is essential for empowering screen reader users, particularly considering the number of Web 2.0 applications that depend on Ajax. Screen readers typically take a snapshot of a web page, and place the content in a virtual buffer to allow the user to interact with the content.
Gez Lemon and Steve Faulkner – http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php

Gez and Steve Faulkner have just released a set of javascript functions that refresh the virtual buffer by working with setAttribute. They discovered this function triggers JAWS 7.1+ screen readers to grab a new snapshot of the page.

The scripts are fairly simple. When the page loads, insert a hidden form input. When your AJAX application completes its duties, change the value of that hidden input with the setAttribute function. This setAttribute activity will refresh the buffer and the screen reader will announce the content that has been changed via an AJAX call.

The updateBuffer function presented here extends the limited improvements in JAWS 7.1 and later, by providing a mechanism to update the virtual buffer for other interface elements, that works regardless of input device. This means that users of JAWS 7.1 and later do not need to explicitly update the virtual buffer in order to interact with Ajax applications.
Gez Lemon and Steve Faulkner

As I also predicted, I believe the YUI Connection Manager will incorporate this type of functionality. This will give enhanced accessibility to thousands of web sites instantaneously.