tech support 8

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Friday, 31 August 2012

Alt Text on the Picture Element?

Posted on 13:30 by Unknown


HTML5 logo — I am the 'alt,' not the 'title'
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.

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Posted in accessibility, ARIA, html, standards, W3C | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • Browser Performance Chart
    Jacob Gube has posted a handy chart over at Six Revisions titled " Performance Comparison of Major Web Browsers ." He tests the c...
  • Google Dashboard: What Google Knows about You
    Google announced a new service/feature today, Google Dashboard . Given all the services Google offers and all the ways you can interact with...
  • Facebook, HTML5, and Mis-Reporting
    My Twitter stream and the headlines of sites across the web yesterday lit up with Facebook's CEO blaming its stock price (failure to mee...
  • App Store Meta Tags
    Why yes, Dominos, I'd love to tap again to get your real home page to order a pizza when I could have done it right here, below your ove...
  • Speaking at Mom 2.0 in Houston, TX
    I will be in Houston this week to speak at the Mom 2.0 Summit (Feb. 18-20, 2010, Houston, TX). To make it a little easier to describe, here...
  • 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 shar...
  • History of Eye-Tracking as Research Tool
    If you've ever wondered what eye-tracking is and where it came from, there is a historical breakdown in the article A Brief History of E...
  • Opera: Presto! It's now WebKit
    Opera is replacing its Presto rendering engine with WebKit (Chromium, really, when you factor in the V8 JavaScript rendering engine). Big n...
  • The Science of Trust in Social Media
    I am one of those people who always needs to see proof of some assertion, evidence to back up a claim. While I can accept anecdotal evidence...
  • Developer Discusses Dyslexia and Dyscalculia
    Sabrina Dent , a web designer hailing from Ireland, has blogged about her struggle with dyslexia and dyscalculia and web applications today...

Categories

  • accessibility
  • Adobe
  • analytics
  • Apple
  • apps
  • ARIA
  • Bing
  • Blink
  • Brightkite
  • browser
  • Buzz
  • Chrome
  • clients
  • css
  • design
  • Facebook
  • Firefox
  • Flash
  • fonts
  • food
  • Foursquare
  • g11n
  • geolocation
  • globalization
  • Google
  • Gowalla
  • html
  • i18n
  • ICANN
  • infographic
  • Instagram
  • internationalization
  • internet
  • Internet Explorer
  • JavaScript
  • JAWS
  • Klout
  • L10n
  • law
  • localization
  • Lynx
  • Mapquest
  • Microsoft
  • mobile
  • Netscape
  • ning
  • Opera
  • patents
  • picplz
  • Plus
  • print
  • privacy
  • project management
  • QR
  • rant
  • RSS
  • Safari
  • SCVNGR
  • search
  • SEM
  • SEO
  • social media
  • Sony
  • speaking
  • standards
  • SVG
  • touch
  • translation
  • Twitter
  • typefaces
  • usability
  • UX
  • Verizon
  • video
  • W3C
  • WAI
  • WCAG
  • WebKit
  • whatwg
  • Wired
  • WOFF
  • xhtml
  • Yahoo
  • YouTube

Blog Archive

  • ►  2013 (39)
    • ►  December (1)
    • ►  November (7)
    • ►  September (4)
    • ►  July (3)
    • ►  June (2)
    • ►  May (5)
    • ►  April (3)
    • ►  March (6)
    • ►  February (2)
    • ►  January (6)
  • ▼  2012 (63)
    • ►  December (2)
    • ►  November (4)
    • ►  October (5)
    • ►  September (5)
    • ▼  August (4)
      • Alt Text on the Picture Element?
      • CSS Background Images & High Contrast Mode
      • CSS-only Radial Menu Experiments
      • Age, Treachery Bests Youth, Skill
    • ►  July (6)
    • ►  June (7)
    • ►  May (7)
    • ►  April (8)
    • ►  March (5)
    • ►  February (3)
    • ►  January (7)
  • ►  2011 (67)
    • ►  December (5)
    • ►  November (7)
    • ►  October (5)
    • ►  September (4)
    • ►  August (8)
    • ►  July (3)
    • ►  June (8)
    • ►  May (3)
    • ►  April (1)
    • ►  March (6)
    • ►  February (6)
    • ►  January (11)
  • ►  2010 (100)
    • ►  December (8)
    • ►  November (7)
    • ►  October (5)
    • ►  September (10)
    • ►  August (7)
    • ►  July (11)
    • ►  June (12)
    • ►  May (6)
    • ►  April (8)
    • ►  March (10)
    • ►  February (5)
    • ►  January (11)
  • ►  2009 (51)
    • ►  December (9)
    • ►  November (6)
    • ►  October (21)
    • ►  September (13)
    • ►  August (2)
  • ►  2003 (3)
    • ►  October (1)
    • ►  January (2)
  • ►  2002 (9)
    • ►  December (1)
    • ►  June (3)
    • ►  April (1)
    • ►  March (3)
    • ►  January (1)
  • ►  2001 (1)
    • ►  February (1)
  • ►  2000 (4)
    • ►  October (1)
    • ►  July (1)
    • ►  June (1)
    • ►  January (1)
  • ►  1999 (7)
    • ►  November (1)
    • ►  September (2)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
Powered by Blogger.

About Me

Unknown
View my complete profile