Block level links and screen reader support

Daniel Göransson introduced VoiceOver’s contradictory support for block level links on a mailing list for Apple accessibility. Specifically, Safari + VoiceOver on OSX allows the link to be announced as a single object, whereas on iOS, the link is announced as individual elements.

Prior to HTML5, the link tag was an inline element and was not meant to contain block level elements, such as headers. This led engineers to create multiple links as designs included teasers and id card modules. These may include a thumbnail photo, header, abstract, and read more link. Bruce Lawson describes this code simplicity: Block level links in HTML5.

Göransson describes the desktop vs. phone behavior:

In Mac Safari and VoiceOver using tab key all items get announced and works perfectly. But in iOS Safari and VO using swipe to next item or touch exploring, each item get announced separately.

This is actually the intended behavior, as Chris Fleizach explains:

iOS is much flatter than MacOS, so we want to give individual access to each element within a link. Whereas, on the Mac, you can navigate inside of that link group if you so desire.

So how could we trigger mobile users to hear the content as a single chunk instead of individual elements? The following code snippets are inspired by Göransson’s emails. He deserves credit for the ideas, I can accept blame for mis-representation.

Please Note: you may find it easier to view these examples outside the WordPress framework. Visit the block level example page.

Base code snippet

This example has a header, paragraph, and image. I’ve placed alt=”” on the image, as the surrounding text provides adequate description.

<a href="https://www.flickr.com/">
  <h4>The Deësis mosaic</h4>
  <p>
    <img src="..." alt="">
    The Deësis mosaic ... </p>
  <p class="more">See the larger image on Flickr<p>
</a>

The Deësis mosaic

The Deësis mosaic (Δέησις, “Entreaty”) probably dates from 1261. It was commissioned to mark the end of 57 years of Roman Catholic use and the return to the Orthodox faith. It is the third panel situated in the imperial enclosure of the upper galleries. It is widely considered the finest in Hagia Sophia, because of the softness of the features, the humane expressions and the tones of the mosaic.

See the larger image on Flickr

Using ARIA to make the experience consistent

ARIA roles allow developers to define the purpose of content. Ideally, you should use the correct tag before even considering ARIA attributes. Use the role when HTML doesn’t provide an adequate tag (tabs), or the HTML equivalent is not as well supported by accessibility APIs (nav). Secondarily, roles are used to restore the semantics of code when the correct tag is not used (div based buttons).

This example is correctly using the link tag, as the user will be taken to a new source of content, such as a web site. I had initially suggested using role=”button”, as that would flatten the experience and should announce the entire content, regardless of platform.

<a href="https://www.flickr.com/" role="button">
  <h4>The Deësis mosaic</h4>
  <p>
    <img src="..." alt="">
    The Deësis mosaic ... </p>
  <p class="more">See the larger image on Flickr<p>
</a>

The Deësis mosaic

The Deësis mosaic …

Using role=”button.

This would change the user’s expectation, as it announces this as a button instead of a link. It implies clicking on the object would trigger an action. But what is the action? Buttons should have a clear and concise call to action (“print”, “share”, “close”). This also means the link would appear within the quick menu for forms, rather than links.

Combining with aria-hidden

Göransson also noticed an unusual problem when placing aria-hidden=”true” on the image. This removed the image’s area from the touchable region.

Also when using anything with aria-hidden=”true” inside that <a>, the area where hidden item is located will become untouchable even if it’s still inside a <a>. For example, if I float an icon/image with aria-hidden to the left — that part of the <a> will be subtracted from the hitbox.

<a href="https://www.flickr.com/" role="button">
  <h4>The Deësis mosaic</h4>
  <p>
    <img src="..." aria-hidden="true" alt="">
    The Deësis mosaic ... </p>
  <p class="more">See the larger image on Flickr<p>
</a>

The Deësis mosaic

The Deësis mosaic …

Added aria-hidden=”true” to the image.

Victor Tsaran re-iterated Chris Fleizach’s suggestion of using role=”text” to allow the block to be announced as a single unit.

I am not sure you can achieve this in Mobile Safari without perhaps having to resort to the role=text. The Voice Over navigation of the DOM is much flatter on iOS than on Mac OS and you are inserting a bunch of block elements into an inline one.

<a href="https://www.flickr.com/" role="text">
  <h4>The Deësis mosaic</h4>
  <p>
    <img src="..." aria-hidden="true" alt="">
    The Deësis mosaic ... </p>
  <p class="more">See the larger image on Flickr<p>
</a>

The Deësis mosaic

The Deësis mosaic …

Using role=”text” on the link

But this changes the semantics of the link to a text node, removing it from the link menu.

Göransson’s next attempt wraps the link’s content in a div with role=”text”. This keeps the link’s semantics and the entire content is announced. However, this also removes the semantics of the h4, removing it from the header menu.

<a href="https://www.flickr.com/">
  <div role="text">
    <h4>The Deësis mosaic</h4>
    <p>
      <img src="..." aria-hidden="true" alt="">
      The Deësis mosaic ... </p>
    <p class="more">See the larger image on Flickr<p>
  </div>
</a>

The Deësis mosaic

The Deësis mosaic …

Wrapping the content within a div that has role=”text”

What is the answer?

This exploration could be summed up by Sina Barham’s tweet about trying to change the expected gestures.

While we could solve the issue of making a block level link work consistently across mobile and desktop browsers, that may not be the ideal solution. The user’s expectations are context dependent, this is especially true with navigation.

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

Create a tabbed search form with YUI

Yahoo! makes it easy to create an accessible, handsome tabbed interface. I used their Tab View library to create the tabbed search form for V3GGIE.com. While Tab View can create the tabbed content dynamically, I’m using it to hide/show hard-coded individual forms.

Update: I’ve removed the tabbed interface from V3GGIE.com. This particular use of the tabbed module seemed to have created some confusion in users. The approach is still valid, just not the way I originally implemented it. See the tabbed search form on V3GGIE.com

Step 1. Create the basic HTML code.

The tabbed code is a simple pattern:

  1. Start with a parent div and give it an id and class=”yui-navset”.

  2. Create an unordered list inside this div with class=”yui-nav”.
  3. Each list includes a deep link to a corresponding div that is also a child of the parent div. The link text in an em tag.

  4. V3GGIE Search
  5. Create a div with class=”yui-content” and create a set of content containing divs. Each div has an id.

    ...
    ...
    ...

  6. Insert the Tabview CSS at the top of the page, the Tab View JS at the bottom of the page, create a small js that instantiates the tab-view module.
  7. For easier styling, use the sam_skin CSS package and add class=”yui-skin-sam” to the body.

Step 2. Use PHP to make it more interesting

Each page calls this chunk of code to insert the tabbed form, it also sets a variable ($selected), determining which tab is selected on page load. I’m also inserting the last search query into the text input to make it easier on the user. This is easily done by grabbing the query from the Request object.

The finished code:




Try "San Francisco Pho", "Paris Fromage", or "92104 tofu"


Try "corn chowder" or "vegan pizza"


Try "Vegetarian Chinese Olympics"


Try a subject: "PETA", "Tempeh", or "Paris -Hilton Vegetarian"

View the source as a text file

The Final Product

We now have a tabbed module that allows the user to find recipes, news, blogs, and local restaurants from any page. This is an easy introduction to the YUI libraries. However, I came across the following surprises:

  • The order of the tabs must match the order of the target divs. I moved my tabs around and discovered they were toggling the wrong forms.
  • The links that generate the tabs need to have em tags surrounding the text
  • You’ll need to download the entire YUI package to gain access to the CSS and sprites needed for the library. The examples on the YUI site assume relative links to files, you will either need to duplicate that file structure or upload the skin’s sprite and change the CSS accordingly.

Adding style to your rel attributes with CSS

View the finished example: Adding style to your rel link.

There’s a little attribute in HTML links that is starting to get a bit of attention lately. The “rel” attribute is a sparsely defined attribute that applies some meta information about a link’s relationship to other documents. Unfortunately, this information is usually hidden from your users. Let’s take a light-hearted stab at turning it into a visual element.

Rel attribute usage

While the W3C originally considered the rel attribute to describe the relationship of pages to each other, i.e. next, previous, directory, and start. The attribute has been adopted by the Microformat community for its inherit usefulness. The rel attribute is now used for tags, to define your relationship to someone, and even to tell search engines not to bother following a link.

The opportunities to use the rel attribute are seemingly endless. There are more proposals to define people you don’t like and links for voting.

But all of this flexibility comes at a small price. To remain valid, you need to tell the browser what these new rel values may actually mean. This is handled by linking to appropriate profiles. Just simply insert the profiles into your head tag. Multiple profiles may throw a validation error, but it’s ok. You don’t need to do this for the standard rel values.



We will be using the CSS3 attribute selector functionality to look at the value of the rel attribute and apply some style accordingly. First we’ll add some padding and a background image to any link that has a rel attribute. We’ll then use background positioning to display an icon that is appropriate for the link. It’s a fairly simple hack.

For more information on using attribute selectors, check out my previous posts:

Sample HTML Code

  • This link is ignored by search engines (rel="no-follow")
  • (rel="tag")
  • 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

    Progressive enhancement of links using the CSS attribute selector

    Attribute Selector Test Page

    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.