Alt Text on the Picture Element?

This is one of those posts that might interest only a few people and even then only if you are interested in a very specific aspect of this ongoing standard development.

Yesterday I got into a conversation (just one of the messages) on the W3C Responsive Image Community Group mailing list about the alt attribute on the new picture element (see the W3C Editor's Draft). For those who don't know, this community group has been working on producing a method in HTML to allow web developers to specify multiple sources for an image in the same way that we use media queries to specify a particular set of CSS styles to apply to a page.

The discussion was focused on accessibility for the picture element. One suggestion was to use an ARIA role on the picture element to point back to the fallback img. The other suggestion was to just replicate the fallback img's alt text in an alt attribute on the picture itself.

In the end, Mathew Marquis, who is the group chair, proposed these two options:

1. Duplicating the alt attribute on both the picture element and its fallback img;
2. Only specify alt on the fallback img, using aria-labelledby on its parent picture to reference the ID of the fallback img.

Here's the problem—only three people from the community group have responded so far, me being one of them. More responses are needed on issues like this. The broad strokes are in place, but the details are what can kill a specification (or a project, or a patient, or a credit rating). If you are a part of the W3C Responsive Image Community Group (and are reading this and care about these issues) then now would be a good time to pop your head up so others can hear.

In case you are curious, here is my take (which a year from now I may find was an awful idea)…

I think alt on the fallback img should be required and explicitly spelled out as such.

To build on that, I feel that it will be easier for authors and toolmakers to just require the alt on the fallback img, but not on picture. Let picture rely on the fallback img's alt as a single place for fallback content (essentially dump alt from picture altogether).

Then there is no need to worry about duplicating alt to picture and we can lean on existing alt rules, expectations, and even tool implementations even as this new element gets traction.

The two other respondents have far more practical experience with the specifications and accessibility in general, so you should read what Laura Carlson and Bruce Lawson have to say on this. Steve Faulkner has also weighed in, indirectly, on the HTML Working Group mailing list.

And then you can weigh in with your own thoughts. I'd like to see a responsive image solution, whether this one that is proposed or another. Only pushing for something, either way, will make that happen.

Bear in mind, even if this spec doesn't make it and another solution comes forward (server-side or even image-format-based), these conversations help inform other options. This ultimately helps end users, so it's a good idea to get involved. Bruce Lawson helps put a little context around this whole discussion in a post from yesterday, On the publication of Editor’s draft of the picture element.

Almost Related

• Image alt Attributes Not Always Required in HTML5, April 19, 2011.
• More on Image alt Requirement in HTML5, May 2, 2011.
• Image alt Exception Change Re-Re-Requested, June 11, 2012.

CSS Background Images & High Contrast Mode

I try to stay up on accessibility gotchas and weird browser implementations, but I just discovered one that I suspect I should have already known.

In Steve Faulkner's post, Notes on accessible CSS image sprites, he tosses out a factoid that was new to me:

When high contrast mode is enabled in the Windows OS, the sprite is not displayed (CSS background images are not displayed in high contrast mode).

This statement is made in a larger discussion of how to create appropriate fall-backs for designs that rely on CSS image sprites. He provides some handy scripts and techniques within the article.

Separately from this I saw a post yesterday on one of the Microsoft blogs titled -ms-high-contrast media feature that discusses a media query for Windows 8 and IE10 that will detect if the viewer is using high contrast mode (and which flavor).

The code is pretty simple and uses an -ms prefix to do its work:

@media screen and (-ms-high-contrast: active) {/* All high contrast styling rules */}
@media screen and (-ms-high-contrast: black-on-white) {
    div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
    div { background-image: url('image-wb.png'); }
}

Clearly this isn't ready for prime time, and you'll still need to use techniques outlined in Faulkner's post, but it is a handy technique that I hope makes it into the spec and gets support from other operating systems and browsers.

Granted, web devs may still screw it up (as they have with accessibility and/or print styles for years now), but at least those worth their salt (and rates) will have another tool to better support users in various configurations.

Related

• Techniques for High-Contrast-Friendly Icons

Update: November 8, 2013

With coming support for the luminosity media query in CSS4, perhaps you can re-use some of your work for high contrast mode or vice versa: Responding to environmental lighting with CSS Media Queries Level 4

Update: October 14, 2014

In CSS Background Images and Accessibility by SSB Bart Group, the author makes the case that not relying on background images is the best approach for accessibility (offering alternative techniques to satisfy design requirements).

CSS-only Radial Menu Experiments

I have been working on a slow and plodding redesign of my personal site and am playing around with some navigation ideas.

I wanted to create a JavaScript-free and image-free radial menu, an idea I toyed with a couple years ago and abandoned due to the lack of CSS support to do what I wanted in current browsers at the time. I decided to give it another shot last weekend while recovering from being pleasant for two days.

If you aren't familiar with radial menus or are curious about why they are popping up as a topic lately, check out Josh Clark's Touch Means a Renaissance for Radial Menus. You can expect to see them more as Windows 8 is released in a couple months.

I threw together a simple five item navigation list, attached no classes or IDs, and decided to see how far I could get before it became untenable (or I got bored).

Single Level CSS-only Radial Menu

.html {
  background-color: #6D695C;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAA3RSTlMmDQBzGIDBAAAAG0lEQVR42uXIIQEAAADCMHj/0NdkQMws0HEeAqvwAUGJthrXAAAAAElFTkSuQmCC); }

body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  /*font-size: 2.5em;*/ }

nav {
  width: 5em;
  height: 8em;
  float: right;
  padding: 0;
  overflow: hidden; }

nav:hover {
  background-color: rgba(0, 0, 0, 0.4);
  width: 16em;
  height: 15em;
  border-radius: 0 0 0 15em; }

body {
  background-color: #eee; }

nav h1 {
  position: relative;
  top: -.75em;
  right: -.5em;
  margin: 0;
  background-color: #000;
  color: #000;
  z-index: 1;
  font-size: 2em;
  line-height: 100%;
  width: 1em;
  padding: 1em .5em 1.25em 1em;
  border-radius: 3.0em 0 0 3.0em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  overflow: hidden; }

nav h1::before {
  content: "\AB";/*« «*/
  /*content: "\21D0";*//*⇐ ⇐*/
  color: #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

nav:hover h1 {
  display: none; }

nav ol {
  margin: 0;
  padding: 0;
  list-style-type: none; }

a {
  display: block;
  position: absolute;
  top: -10em;
  right: 0em;
  border-radius: 4em;
  border: .15em solid #fff;
  padding: 1.5em 0;
  width: 4.5em;
  text-align: center;
  box-shadow: .45em 0 1.5em rgba(50, 50, 50, 0.75);
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }

nav:hover a {
  /*display: block;*/ }

a:link, a:hover, a:focus, a:active, a:visited {
  text-decoration: none;
  color: #ddd;
  background-color: #000; }

a:hover, a:focus, a:active {
  background-color: #222;
  color: #fff;
  text-shadow: 0em 0em 0.2em rgba(255, 255, 255, 0.8);}

nav:hover li:nth-child(1) a {
  right: 13.5em;
  top: .2em; }

nav:hover li:nth-child(2) a {
  right: 12em;
  top: 4.75em; }

nav:hover li:nth-child(3) a {
  right: 9.0em;
  top: 8.5em; }

nav:hover li:nth-child(4) a {
  right: 4.75em;
  top: 11em; }

nav:hover li:nth-child(5) a {
  right: 0;
  top: 12em; }Check out this Pen!

View this directly on the Codepen site.

Note the style for the body. If you uncomment the style /*font-size: 2.5em;*/, you will see that entire menu scales up. You can put any text size in there you want and the menu will scale up and down. All the sizing (text, borders, positioning, padding, etc.) is based off ems, which makes it easier to scale each part of the menu proportionally.

You may note that I put an onclick = "void(0);" on the h1. Without this, the menu just wouldn't work on iOS. Otherwise I am relying on my Android devices to read a touch as a hover.

You may also see that there is an image on the page. This is a striped background that made it easier for me to see where elements aligned. It is not used in the menu itself, but I do like how it looks so I kept it.

I opted for CSS positioning changes instead of CSS animations since the support is consistent. The menu works in IE9, though without animations. Since the menu uses HTML5 elements, and since it is an experiment, I am not testing older than IE9 (yet).

Then I was curious how hard it would be to add another level into the menu and how it would feel as a user…

Two Level CSS-only Radial Menu

<!-- Original pen (~July 2012) lost by CodePen, this is a recreation with their assistance to get the old code. -->
<nav role="navigation">
  <h1 onclick = "void(0);">Menu</h1>
  <ol>
    <li><a href="#">Bio</a>
      <ol onclick = "void(0);">
        <li><a href="#">Bio One</a></li>
        <li><a href="#">Bio Two</a></li>
        <li><a href="#">Bio 3</a></li>
      </ol>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Books</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Contact</a></li>
   </ol>
</nav>

<!--
The onclick attributes are to allow Safari on iOS to see these otherwise non-clickable elements as clickable so it can then apply the hover styles as if they were clicks.
-->
Check out this Pen!

View this directly on the Codepen site.

I forked the single-level menu and put another level under the first item ("Bio"). With only three items it was still time consuming to style the positioning of elements and get the animation look that I wanted.

I also had to put an onclick = "void(0);" into the nested ol in order for iOS to recognize it as a clickable element. Sadly, that means that "Bio 3" always gets the focus on touch devices because it's at the top of the stack when the focus is applied through a tap.

On desktop browsers however, it works well.

Wrap-up

Drawbacks for both of these menus are many. For example, using my positioning method it can be very hard to calculate where additional menus should appear, making this tedious to code into a CMS. The menu items also all rely on very short navigation text in order to fit into the almost-circular navigation items. The collective shadows from nested items make for an interesting shadow stack obscuring subsequent menu items.

However, given the real-life feedback I've gotten I figured there might be some ideas or code chunks others might find useful. Even better would be if someone gets inspired to take this to the next level and clean it up, fixing my own shorthand tricks and making it more robust.

Corrections, suggestions, feedback, and forking are all welcome.

Age, Treachery Bests Youth, Skill

Social Media seems to be wildly misunderstood by some folks, including those within the social media profession who have the ability to use its own tools to spread that misunderstanding like a telephone game.

Though my example is old news (by SM standards), I have seen it popping up for the past couple weeks pretty regularly. On July 20, Nextgen Journal published a piece called Why Every Social Media Manager Should Be Under 25.

I should qualify that when I heard the title I laughed and assumed it was parody. It wasn't. By the time I read her piece (two days after it was posted) a series of blog responses had popped up. I tweeted the absurdity from a conference (I was studying web intents, really):

Hah! "Why Every Social Media Manager Should Be Under 25" nextgenjournal.com/2012/07/why-ev… Response: experiencetheblog.com/2012/07/a-resp… via @blairboone cc @smcbuffalo

— Adrian Roselli (@aardrian) July 23, 2012

I could easily pull the article apart, but it's been done. The link in my tweet does a good job already. To the young author's credit (which may demonstrate that she does understand social media), she has avoided the Streisand effect by allowing the article to stand and the comments to roll in.

Instead of reading all the rebuttals, I like the meta conversations that have popped up about the concerns over ageism in the industry (which appear to be so far unfounded by the successful brands), or how we should all remember that once it's on the internet, it tends to stay (something older users may have been protected from in college, though I wasn't one of them). Some have even suggested the responses from the elder generation could have been more helpful and less brutal (even if I think some of the brutality was helpful).

Some folks saw an opportunity and just ran with it, like the guy who registered CathrynSloane.com, the name of the author of the original article:

I discovered Cathryn had decided not to secure her personal domain name for the past 10 years […] I spent a total of $11.00 USD and about an hour setting up free email & web hosting for this domain. Now all 2,267,233,742 (as of 12/31/11) Internet users can find and read the information presented here. No need to mess with Facebook, Twitter, etc., and I have full informational control over content/context and privacy.

I am over 25. Not by a little. I am also a member of the local chapter of Social Media Club, whose local membership spans a range of ages but does tend toward the younger (than me) side.

I have clients who have asked about finding someone to help them act as their face on assorted social media platforms. I tell them that factors to consider when evaluating a social media manager include experience, skill, understanding the brand message, and just having the emotional intelligence and savvy to present a brand on any social media outlet.

An intern at the copier may be a great use of an inexpensive resource, but an intern who acts as the voice of your organization in a particular form of media probably isn't. Knowing how to use a copier is a rote skill which does not make an intern qualified to produce the annual report or press releases. I feel you can swap Facebook, Twitter, etc. in place of the copier and the analogy stands.

I'd also like to point out that much of this is a rehash of conversations back at the dawn of the web, when the job title "webmaster" was coined and the younger someone was the more qualified he/she was. That also didn't pan out as true.

No matter how old you are, there is something to be learned from this entire story. Probably many somethings, but one that stuck out during a conversation today (which led to this post) was that knowing how to use a tool doesn't mean you won't cut yourself with it. I suspect Ms. Sloane has learned that now.

Related (Because I Said So)

1. Another Piece Claiming Social Media Makes You Dumber, August 9, 2011.
2. Twitter As Passive-Aggressive Enabler, January 4, 2011.
3. Humorous Social Media Infographics, October 6, 2010.
4. Don't Let Social Media Get You Robbed (or Stalked), March 2, 2010.
5. Lots of Twitter Followers Guarantees... Nothing, January 6, 2010.
6. Facebook Doesn't Make You Smarter, Rigorous Research Does, September 8, 2009.

My Print Styles Article in .net Magazine

The Summer 2012 (#231) issue of .net Magazine has my tutorial on making print styles for your site. Not only did I get four pages, the article got a mention on the front cover (small though it is) and my photo in the contributors section.

If you've spent much time here or following me on Twitter, then you know I have written plenty about the lack of print styles on modern sites, particularly those claiming to use responsive techniques. I figured it was about time I showed some techniques to make it happen and hopefully demonstrate how dreadfully simple print styles are to do.

While my article is clearly the stand-out piece in the magazine, and totally worth getting just for my work, there is some other stuff in this issue that might interest you:

Creating flexible layouts that will work on any device and any screen size is the next big challenge for CSS. In this month's issue Peter Gasston takes us on a tour of some well-implemented properties you can use now as well as the exciting proposed properties we could be using in the future.

There's also a guide to creating or updating your online portfolio from Gary Marshall, an interview with Elliot Jay Stocks and tutorials on HTML5's Drag and Drop API and building a basic responsive site with CSS. Here are some more highlights:

• Build smoother JavaScript apps
• Make your website printable
• Make your sites load faster
• The pro's guide to Adobe Edge
• Build an ecommerce store
• Using PHP Data Objects

By the way, in case you want to read up on some of my prior discussions about print styles, here's a handy list of links for you:

• Print Styles Forgotten by Responsive Web Developers, October 3, 2011.
• More Samples of Responsive Web Design ≠ Print, October 13, 2011.
• Test in Lynx and Print, It's Your Job, December 12, 2011.
• More Evidence of the Need for Print Styles, April 6, 2012.
• Announcing PrintShame.com, April 9, 2012.

Update, March 5, 2013

My print CSS article has appeared on the .net Magazine web site, though the web site excludes the sidebars on Print Shame and QR codes in print layouts.

Update, June 28, 2014

After Net Magazine was subsumed by Creative Bloq, all the addresses for old articles were broken (once the articles were finally added). I have fixed the links above to reflect the new addresses.

It's OK to Use Tables

Baby Boomerangutuang, one of the Tick's students.

If you cut your teeth building for the web in the 90s and even into the 00s, then you probably learned to lay out your HTML pages using tables. As CSS support and techniques have caught up, tabled layouts have mostly gone the way of the font element.

There seems to be such a strong backlash against tables, however, that many developers won't even use them when it is both semantically and structurally appropriate — such as marking up tabular data.

The W3C HTML5 draft specification has a pretty simple way to qualify if a table is appropriate:

The table element represents data with more than one dimension, in the form of a table.

To explain it another way, if you are representing columns and rows of data then you probably should be using a table. If you find you are using images or other elements, then you are likely doing it wrong.

In addition, representing tabular data using other elements means you may be preventing users of assistive software, who already have experience reading tables, from being able to access the information in the same way.

Examples of the two methods I see most frequently to incorrectly mark up tables follow.

Tables As Images

These screen shots show how each table appeared when viewed on an iPad and on an Android Evo using Opera. Click/tap for larger images.

In February .net Magazine posted an article, Deliver video seamlessly to desktop and mobile devices, which included two tables of browser and video codec support. These two tables were not marked up using a table, however.

Instead the tables were presented as images with no useful alt text. While the article used an HTML5 figure, there was nothing to present the contents of the tables as plain text.

The problem was exacerbated by the fact that when the page was viewed on mobile devices, the automatic down-sampling of the .net Magazine CMS (I am assuming here) for the mobile version of the article resulted in images that were completely illegible. A traditional HTML table would not have suffered from that problem.

I figured I was on to something when my tweet drew some comments, though I don't agree that it's just bad alt text:

@aardrian they could have easily made the same mistake without HTML5, and likely would have. That's just bad alt text :) /cc @rogerjohansson

— Derek Featherstone (@feather) February 10, 2012

To .net Magazine and the author's credit, the images were replaced on both the main site and the mobile site within about 18 days of me mentioning it (which you can follow in the comments).

Tables As Any Other Element

This screen shot shows the event schedule when viewed in a desktop browser. Click/tap for a larger image.

I suspect some tables are put together using other HTML elements just to show off that the developer can do it. After all, If developers were thinking about the structural and semantic meaning of the content, then they surely wouldn't use div and spans to mark up tabular data.

The web site for a two day responsive web design workshop, Build Responsively, includes a schedule on its Columbus event page. This schedule includes a column of times and a column of sessions. Each column has a heading and the rows have alternating background styles. In every visual sense, it's a table of data.

Semantically and structurally, however, that's not how it's coded (which I discovered when I attempted to print the page). It's a series of divs and spans inside an ordered list (I have also seen this done with definition lists). The first bullet even has the class "heading," which is probably a good clue that this entire list could be a table and that "heading" could be a th.

This code block shows the event schedule HTML for context:

      <ol>
        <li class="heading">
          <div class="time">Time</div>
          <div class="session">Session</div>
        </li>

        <li>
          <div class="time">
            <time datetime="2012-07-09 08:00">8:00AM</time> - <time datetime="2012-07-09 09:00">9:00AM</time>
          </div>
          <span class="session">Registration, Coffee</span>
        </li>

        <li>
          <div class="time">
            <time datetime="2012-07-09 09:00">9:00AM</time> - <time datetime="2012-07-09 09:40">9:40AM</time>
          </div>
          <span class="session">Responsive Web Design, 101</span>
        </li>

        <li>
          <div class="time">
            <time datetime="2012-07-09 09:45">9:45AM</time> - <time datetime="2012-07-09 11:15">11:15AM</time>
          </div>
          <span class="session">Responsive Planning &amp; Design</span>
        </li>

        <li>
          <div class="time">
            <time datetime="2012-07-09 11:30">11:30AM</time> - <time datetime="2012-07-09 12:00">Noon</time>
          </div>
          <span class="session">Getting a Good Start</span>
        </li>

        <li>
          <div class="time">
            <time datetime="2012-07-09 12:00">Noon</time> - <time datetime="2012-07-09 13:00">1:00PM</time>
          </div>
          <span class="session">Lunch (provided)</span>
        </li>

        <li>
          <div class="time">
            <time datetime="2012-07-09 13:15">1:15PM</time> - <time datetime="2012-07-09 17:00">5:00PM</time>
          </div>
          <span class="session">Afternoon Session, The Nitty Gritty</span>
        </li>

        <li>
          <div class="time">
            <time datetime="2012-07-09 17:30">5:30PM</time> - <time datetime="2012-07-09 22:00">?</time>
          </div>
          <span class="session">Opening Night Party, Sponsored by GitHub!</span>
        </li>
      </ol>

You can see this site featured on PrintShame.

What You Can Do

With all the push for hand-crafted HTML and CSS and the strong desire to show off what developers can do using HTML5 and assorted tricks, take a look at any grids you find yourself marking up. If you find you have columns of data, rows of data, headings for rows or columns, or are using any CSS table display properties, then you just might need to use a table instead.

Update: January 3, 2012

The article HTML5 caption element and headings explains that with HTML5's acceptance of headings in captions on tables, it's now possible for your data tables to fit into the heading navigation when accessed via a screen reader.

Update: April 12, 2013

Léonie Watson has put together a quick overview on how to make your data tables accessible over at .net Magazine.

Update: October 21, 2013

Another example of doing it wrong, found in the wild:

No! This is *NOT* the way to build a responsive table. Poor semantics, no accessibility: http://t.co/gpRgpEFMge

— Russ (@russmaxdesign) October 21, 2013

Codepen Has Handy Sharing Tools for Devs

There are plenty of online resources for playing around with code right in the browser, no server of your own needed, that you can then share with others. I have dabbled in them on and off but Codepen's recent entrance has a couple additional features that I have found handy.

Bookmarklet

Codepen has a bookmarklet which will find blocks of code on a page and, when clicked, queue them up to drop into a new project (or "pen"). In this example image you can see the code blocks on the page are highlighted and a box is anchored at the bottom of the viewport showing me what's been selected of what type (HTML, CSS, JS) and an option to jump right to the Codepen interface.

I tested this on my site (using The evolt.org Logo Using Only CSS2 and CSS3) and it recognized the HTML and CSS blocks of code for what they are. The HTML in my example has hidden characters inserted to prevent a bug from manifesting (thanks to a combination of how I coded the templates, the XML framework, XSLT transforms, and HTML rendering), so I had to manually clean that. The CSS came over just fine although for some reason it did not seem to apply properly until I manually pasted it in. Either way, I was able to start playing with the code almost immediately.

For all those tutorials on the web, this is a handy way to immediately grab and play with the code samples. Once I have sufficiently munged the code enough I can then share it using the URL Codepen provides or the embed feature I outline below.

Saving your project with a name and details is a little tricky and you'll want to be logged into Codepen beforehand (you can use your GitHub account for Codepen). Once you get past those two points you're pretty much good to go.

Codepen has a YouTube tutorial to walk you through the bookmarklet process:

Embed Code

Now that I've pulled code from a tutorial and messed around a bit (I didn't mess around with it, but let's say I did) I can write my own tutorial and embed the code directly into the page.

This is handy for people whose platform of choice makes it difficult to embed escaped code examples, who don't care to go through all the hassle of styling code for colors, or who just want readers to be able to interact with the code and mess around with it on their own.

The only real caveat is that it embeds on the HTML portion of your project. If the call to the Codepen JS file fails for some reason (which formats the display and creates the CSS and JavaScript boxes), users can at least see the HTML, but the CSS and JavaScript isn't included.

Using the Codepen project I created from my tutorial, I just pressed the "share" button and was presented with HTML to embed directly into my page. The results:

<p id="evolt">
<a href="http://evolt.org">evolt.org</a><br>
<a href="http://lists.evolt.org">lists.evolt.org</a><br>
<a href="http://browsers.evolt.org">browsers.evolt.org</a>
</p>

Related

• JSFiddle
• CSSDesk
• Dabblet
• JSLint
• JSBin
• jsdo.it
• The evolt.org Logo Using Only CSS2 and CSS3