Showing posts with label ARIA. Show all posts
Showing posts with label ARIA. Show all posts

Wednesday, May 20, 2015

Slides from Global Accessibility Awareness Day 2015

The Paciello Group is holding a full day of free webinars on Global Accessibility Awareness Day. That's 24 straight hours of talks, which started at midnight (GMT) on Wednesday, May 20 through through midnight (still GMT) on Thursday, May 21. I was fortunate enough to participate as a speaker and had the third slot in the queue.

As promised, I posted my slides. All the links I referenced are embedded within.

Tweets!

I'm pleased to see there was tweet activity during (and about) my talk. I've captured many of them below.

Tuesday, May 19, 2015

Speaking at Inclusive Design 24 for Global Accessibility Awareness Day

The headline really captures it all.

The Paciello Group will be holding a full day of free webinars on Global Accessibility Awareness Day. That's 24 straight hours of talks, starting at midnight (GMT) on Wednesday, May 20 through through midnight (still GMT) on Thursday, May 21.

I'll be giving my world-renowned (not really, but at least it's world-traveled) talk Selfish Accessibility at 2:00AM GMT (10:00PM EDT on the night of Wednesday, May 20). I'm third in the queue and will already be following two great speakers. The abstract is posted on the Inclusive Design 24 site.

If you are struggling with your local time for each of the talks, you can use this handy reference that shows the start time for your current city, or this countdown to the start of the event (which has no bearing on your time zone).

If you are new to Global Accessibility Awareness Day, here is an interview with Jennison Asuncion, one of its creators:

Monday, March 16, 2015

ACE! Conference Slides: Selfish Accessibility

ACE! Conference on Lean and Agile Best Practices

In addition to the slides, I've embedded video of my talk and way too many tweets after that.

Video

Impressing everyone on the internet, Paul Klipp has already gotten videos from ACE! posted less than 24 hours after the event ended. That's impressive. I understand his tactic is to upload lower resolution videos immediately and then slowly replace them with higher resolution videos. Depending on when you see this, it may still be the low-res video.

Tweets

Tweets from ACE! that satisfy my ego, show me in a photo, or might be funny.

Feedback (Added 26 March 2015)

I've received the audience feedback from my talk and overall was pleased. 17 people responded (out of what I estimate was ~40+ in the room) with the following rankings:

  • Loved it! 10
  • Liked it: 2
  • Meh: 4
  • Didn't like it: 0
  • Hated it! 1

Of those 17, 10 left comments (which I greatly appreciate!). Sadly, the one Hate it vote did not leave any comments.

  • Liked it: Too basic for me, but nice examples of disabilities.
  • Loved it! I loved the idea how to easily test your apps.
  • Loved it! Great that this topic emerged.
  • Loved it! Great approach to creating sites/apps friendly for impaired.
  • Loved it! Full of very practical suggestions. Thanks for including it.
  • Loved it! Content that usually doesn't get a forum.
  • Meh: Interesting, however I won't get a chance to use what I learned.
  • Loved it! Interesting point of view. I did not consider accessibility during software design. I should start.
  • Liked it: Most important is to think about problem, not about product/project.
  • Meh: Nicely said, but too short.

The two Meh comments are mostly out of my control. I was given a 30 minute slot, which I agree is too short for all that can be said on the topic. As for the commenter who claims he/she won't be able to use it, I feel that the testing parts of my talk at the very least are in everyone's reach, so I think it comes down to deciding to use it. Even if only to troll the Virgin America site.

Tuesday, February 10, 2015

Speaking at ACE! Conference in Krakow

ACE! Conference on Lean and Agile Best Practices

I'll be spending much of March bringing my shining personality to Europe, partially in the form of speaking engagements. The first one I can announce is the sixth annual ACE! Conference in Krakow Poland on March 16 and 17. Somewhere within that two day conference I'll be talking about accessibility.

There is a growing list of great speakers, and I'm pleased to be included among them. At least until they discover I'm a fraud.

If you are familiar with ACE!, then it's worth noting this year a separate track has been added focused on building better software. If you are unfamiliar with ACE!, then I will let the organizers speak for themselves:

ACE! is the largest regional conference of its kind in Central Europe, attracting people from all over the region. We're really excited about ACE! 2015 which combines two one-track conferences into one. The Building Software Better track includes the traditional ACE! content such as agile, lean, Scrum, Kanban, and other tools and methods for improving the software development process. This year we're adding a Building Better Software track that features Lean Startup, LeanUX, Design Thinking, and Customer Development topics. We're also adding a workshop track so that attendees can apply new skills and experiment with new ideas. It's going to be the best ACE! yet!

You can stay abreast of new speaker announcements and other news from the conference by following @aceconf on Twitter.

As the conference site gets updated with this year's logo and the abstract from my talk, I plan to post it here.

I've never been to Poland, and I am hearing nothing but good things about Krakow (not just from its tourism board), so I am really looking forward to visiting.

The conference will be held about 5km from the city center, so if you're nearby you can pretty much include my talk in your tourism walk for the day. I've embedded a map for my own benefit:

Saturday, January 24, 2015

CSS Bookmarklets for Testing and Fixing

Animated image showing the Pinterest site and its infuriating blocking overlay, which is removed with the bookmarklet below.

I regularly have to test sites in development, review some third-party site, or just use a site in my day-to-day time wasting (and banking) rituals. I've relied on viewing the page's source or popping into my browser's dev tools to find a missing element, copy un-transformed text, check for inline styles, and so on. Typically I am relying on CSS and not JavaScript, as that is where I excel.

I got a little annoyed doing that all the time, and this morning I had reason to visit Pinterest and mostly lost my marbles at its login overlay and refusal to scroll. So I channeled that rage and taught myself to build a bookmarklet to dump that Pinterest overlay crap. I have created a few more that include my standard styles for testing, styles that perhaps you (dear reader) will find useful.

I'll have basic instructions below showing you how you can build your own and/or modify the ones I've provided.

Bookmarklets You May Steal

Note that I say may steal. That's me giving you permission. Note that I call them bookmarklets. That's me not giving into the term favelets or whatever HotJava called them (was it hot links?).

Restore Link Underlines

You know what's cool? Removing link underlines and providing terrible link color contrast. It's so cool, in fact, that I want to make those sites less cool. As well as usable. Read my rant on this.

This bookmarklet restores link underlines across the board. Every link. After all, if you want the link underlines, you probably don't care that the designer would freak out at the noise it adds to the page.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('a[href]{text-decoration:underline !important}',0);})()

Restore Focus Outlines (or Fix Virgin America)

Just as cool as removing link underlines is removing the outline on elements that get focus as you tab through a page. After all, if you've hidden the links, why not hide when the links are selected. Virgin America tends to agree.

This bookmarklet not only restores the outline (in the form of the two-pixel dotted blue line), but also adds a drop shadow for those cases where the blue is lost against the surrounding colors.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('*:focus{outline:2px dotted #00f !important;box-shadow: 0 0 2em rgba(0,0,0,.75) !important;}',0);})()

Find Inline Styles

Over at Algonquin Studios we have worked in the content management space for, well, since the dawn of content management systems. One of the risks of using a CMS is that your authors may accidentally (or intentionally) embed styles whether by pasting rich-text from elsewhere or by features built into the WYSIWYG editor within the tool. This is most common with text styles.

Sometimes it is faster to just find the elements that have a style attribute on them, as that's the first clue that there may be a conflict that needs to be corrected. This option will find any of those elements and give them a yellow background along with a two-pixel dotted red border (like the Windows "hot dog" theme from the previous century).

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('*[style]{border:2px dotted #f00 !important;background-color:#ff0 !important;}',0);})()

Find Duplicate ARIA Roles

In ARIA, there are a few instances of roles that should only appear once on a page. These landmark roles are banner, contentinfo, and main. In addition, the W3C HTML5.1 specification notes that there must be only one main element per page.

This bookmarklet will identify any additional instances of any of the once-per-page items above. If you know enough about coding ARIA, then you probably know enough about finding which of the roles/elements is on repeat. Offending items will have a two-pixel dotted red border and red background.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('*[role=main]:nth-of-type(n+2),*[role=banner]:nth-of-type(n+2),*[role=contentinfo]:nth-of-type(n+2),main:nth-of-type(n+2){border:2px dotted #f00 !important;background-color:#f00;}',0);})()

Find Missing Alt Attributes

An image without an alt attribute can be anything from an annoyance to a barrier to those using assistive technologies. Being able to quickly identify those images on a page can save time when figuring where to focus your efforts.

This bookmarklet will find those images and give them a two-pixel dotted red border. Note that it only looks for images with a missing alt, as a blank alt attribute is often perfectly valid.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('img:not([alt]){border:2px dotted #f00 !important;background-color:#f00;}',0);})()

Reset Text Size (Added January 30)

Sadly, it is not uncommon for sites to reset the default size of the text on the page. Too often that is done to satisfy a design change. One site where I find the text too small to read comfortably, or at all, is Daring Fireball. I know I am not the only one to feel this way.

This bookmarklet will resize the text on the body element to 100%, ideally conforming to whatever your default browser preferences are. It works great on Daring Fireball, but could easily be overridden on sites that set the text size in other ways and/or on other elements.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('body{font-size:100% !important;}',0);})()

Find Empty Elements (Added May 6)

It is not uncommon for a WYSIWYG editor in a CMS or on a comment site to throw extra empty p elements into the content. While I once wrote a style into my development CSS to highlight these issues, I was reminded of the potential utility by a Happy Cog post on pseudo classes.

This bookmarklet will find elements that are empty — no content, no whitepsace. It will not highlight images (by excluding elements with a src attribute) nor form inputs (by excluding elements with a type element), two common self-terminating elements that will otheriwse trigger this. It isn't perfect, but you are welcome to make it your own.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('*:not([src]):not([type]):empty{border:2px dotted #00f !important;background-color:#00f;}',0);})()

Fix Pinterest

When you visit Pinterest without a Pinterest account, or without being logged in, you are prompted to sign up/in by a terrible overlay. In addition, the page won't scroll past a certain point. This annoys me. So I made a bookmarklet to remove the two overlays and re-enable scrolling. You can test it on my abandoned Pinterest page.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('.Modal, .UnauthBanner {display: none !important;}',0);b.insertRule('.hasFooter.Grid.Module{overflow-y:visible !important;}',0);b.insertRule('.noScroll{overflow:auto !important;}',0);})()

Make/Modify Your Own Bookmarklet

The Virgin America site is made usable for those who navigate with a keyboard by restoring link underlines and adding focus styles to elements.

If you look at the code chunks above, you'll see I am doing the same thing over and over. I am using the JavaScript CSSStyleSheet.insertRule() method to insert a new style rule into the page's stylesheet. Not only does the Mozilla Developer Network have a great overview with sample code, but David Walsh shows similar code with some minor tweaks.

This approach allows me to leverage my CSS skills to write selectors to find and style elements on the page. Since CSS has so many powerful selectors, I find this easier to quickly repurpose. In addition to adding a new style, I always include !important with each so that it will override any inline styles.

If you are writing a function from scratch, make sure you minify it to take up less space (you may bump into character limits for a bookmarklet). Pre-pend javascript: and make it the href value of a link and you are done.

Here is a sample block of code you can use with the styles rendered in bold so you can replace them with your favorite selector. In this example I have two style rules so you can see how to add additional selectors.

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule("a[href]{text-decoration:underline !important}",0);b.insertRule("*[style]{border:2px dotted #f00 !important;background-color:#f00;}",0);})()

And with that you should be off to the races.

Related

Links to my posts referenced above:

Update: February 14, 2015

It's hard to use bookmarklets on mobile devices, but I have a solution.

Sunday, November 30, 2014

Blue Beanie Day

Image as seen with three forms of colorblindndess
Image showing the pixel-art image of Jeffrey Zeldman in his iconic blue beanie (top left) simulating (clockwise) protanopia, deuteranopia, and tritanopia.

Blue Beanie Day, or for about 0.05% of the population with tritanopia/tritanomaly, Teal Beanie Day!

On Sunday, November 30, web designers and developers across the globe will celebrate Blue Beanie Day 2014, wearing a blue beanie to show their support for web standards. Join in!

[…] [S]porting a blue chapeau is a reminder that web standards—standards like semantic markup, neatly separated styles, and DOM scripting—are responsible for much of the work we do today.

This quote lifted from Blue Beanie Day 14: Toque ’em if You’ve Got ’em at A List Apart.

I'm a big fan of standards intended to support accessibility as well, such as WAI-ARIA and WCAG (which includes the success criterion addressing use of color).

No, I'm not taking a shot at Blue Beanie Day nor the intent behind it. My goal is to remind people that accessibility is core to the standards, and ignoring it is tantamount to ignoring the standards this day is intended to promote.

Images using CVSimulator app.

By the way, 0.05% of the United States population is 158,500 people. Small percentages of very large numbers are still large numbers.

Related

Saturday, November 15, 2014

WordCamp Toronto Slides: Selfish Accessibility

WordCamp Toronto 2014 logo.

As promised, slides from my talk this morning at WordCamp Toronto:

Ego-Building Tweets

I like audience feedback, moreso when it's positive. I've also added some general tweets about the accessibility track.

Other Talks

I spent Saturday in the accessibility track (I missed one talk, sadly). There was some overlap on general themes, which I think was good. Overall, anyone who visited one talk still got a common baseline, while those who stayed for the day had the core accessibility information reinforced across speakers.

I was thrilled I got to present in the same track as Billy Gregory and Karl Groves, also known as The Viking and The Lumberjack. These guys know their stuff.

Saturday, September 27, 2014

Accessibility Camp Toronto Slides: Selfish Accessibility

I've updated this post to include the video from the live stream, some links, and a few photos.

Video

There was a live stream throughout the day, which was broken into a morning video and afternoon video. I've embedded the morning stream because it includes my talk. I don't feel this was one of my better performances, but I also have not watched the video yet. You are welcome to do so and wince on my behalf. If the embed doesn't start at the right place for you, you can either fast forward to 2:01:00, or you can view it set to start at that point on YouTube.

Surprisingly Flattering Tweets

I'm pleased to sat that if you only watched Twitter, it looks like I did a good job getting my point across.

Some Pics

I snapped some photos, but I'm going to lead with this awesome sketchnote (I've never had a sketchnote of one of my talks, so this is pretty exciting for me):

Sketchnote
Sketchnote from Andrea O Pietkiewicz. View the original tweet or on her site.
Sporting an AODA hat & Kirk tie, @DavidLepofsky fits into #a11yTO pretty well.
A sneak preview of The Viking & the Lumberjack at #a11yTO. That will never air.
Whose responsibility is #a11y? @dboudreau addresses in his talk for #a11yTO.
Food-oriented, with reluctant hero, hockey. @karlgroves wins the hand with Strange Brew. @FYCGame

Related Links

Update, December 6, 2014: AMI Event Recap

AMI Inside banner at the start of the video.

Toronto's Accessible Media Inc (AMI) interviewed me in its coverage of the event, which is now live on the AMI site (season 1, episode 1, as this link will show the current AMI Inside episode not this specific episode over time). The abstract:

AMI Inside provides an all access pass to Accessibility Camp, Toronto. D.J. Demers takes us to OCAD University to learn about some of the most relevant digital accessibility topics. Find out what’s new in technology and hear firsthand from some of the attendees as well as Accessibility Specialist and camp co-organizer, George Zamfir.

Saturday, September 13, 2014

WordCamp Buffalo Slides: Selfish Accessibility

Photo of Buffalo WordCamp t-shirt.
The Buffalo WordCamp shirt was again printed by You and Who (whose logo is visible where the tag would be), which means that 1,600 meals were donated (one for each shirt) to those in need. I think every WordCamp should do this. (related tweet)

Buffalo WordCamp has just wrapped up and folks are hopefully going to take new ideas back to their own projects. There were many great talks and even panel discussions that turned into more of a WordPress support group for the audience and panelists alike. A first for Buffalo WordCamp that I hope they repeat. Also a plus, 48% of the attendees and 35% of the speakers were female, better ratios than I've seen at many other conferences.

My Slides

If you just come for my slides, then you are at the right spot. I've embedded them here, or you can go see them at SlideShare. In addition to questions and feedback from the audience, I've already gotten some feedback from the Twitterverse. In particular my use of the word "continuum" on slide 77. I am open to suggestions for a better word, so feel free to share.

Photos

I grabbed some photos from the event as well, captioned below (originally posted on my Tumblr, where they are larger).

Panoramic view of Canisius College Science Hall
This year the event was held in the new Science Hall at Canisius College. This is the atrium where lunch was served and announcements were announced (shot taken shortly after the lunch crush).
The crowd at the start of the event.
Some of the announcements being announced by announcers and co-organizers Ben Dunkle and Andy Staple.
The breakfast table.
A nice spread of pastries to get the day going. I am amazed I only ate one.
Attendees for my talk.
Accessibility talks never net a huge crowd, but at least those who did show up wanted to learn more, had good questions, and challenged me.
My shirt.
After a quick Twitter poll, I broke from my normal pattern of wearing more professional attire and went with the Montgomery Ward mechanic's shirt with the fur collar.
My badge and the schedule
The badge had the day's schedule printed on the back (handy), and they also provided a printed schedule (also handy).
Cemetery
View of the cemetery from one of the talks.
Buffalo skyline.
A view from the after-party at Western New York Book Arts Center.
Type bits.
Some sample type at Western New York Book Arts Center. If you've never been and you are at all interested in type, you should visit.

Wednesday, August 27, 2014

Speaking at UX Singapore 2014

By far the farthest-from-home of my speaking engagements to date, I'm thrilled to be speaking at UXSG (User Experience Singapore). Having attended its sister event, UX Hong Kong (UXHK), last year I can say that I am excited not just to speak but to hear from all the other great speakers who will be imparting wisdom, knowledge, and perhaps a few local dining suggestions.

For those not familiar with it, UXSG is a three day event intended to onnect UX professionals across disciplines and cultures. As one of the founders of evolt.org (way back in 1998), this statement from the conference organizers resonates with me: It is a platform made for and by UX professionals to foster stronger professional collaborations and personal friendships. Given that I made some great connections as an attendee at UXHK, I don't doubt I'll have a similar experience here.

I will be giving a lightning talk on the third day of the conference, Friday, October 3, at 11:00am Singapore time. I'll be updating my "Selfish Accessiblity" talk for the UX audience. The abstract of my talk:

We can all pretend that we're helping others by making web sites and software accessible, but we are really making the experience better for our future selves. Learn some fundamentals of web and software accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive, but more of an overall primer for those who aren't sure where to start nor how it helps them.

Insights include:

  • Broader context for how all users are or will be disabled, whether temporarily or permanently.
  • Basic tests and best practices that can be integrated into development team workflows to make interfaces accessible.
  • Introduction to standards and tools already available.

I've been to Singapore once before, but only for a day. This time I am looking forward to spending a little more time there and, in particular, experiencing the venue for the event, the relatively new Star Performing Arts Centre. I've embedded a map, but if you aren't attending then the map isn't very useful since it shows the building as it was during construction (depending on which view you choose):

Tuesday, August 26, 2014

Speaking at Accessibility Camp Toronto 2014

Accessibility Camp Toronto logo

I am excited to say that I will be speaking at Accessibility Camp Toronto in late September. It probably goes without saying that I'll be speaking on accessibility. Given Toronto's proximity to my home town of Buffalo, and the fact that I used to wander up to Toronto about once a month, it will be nice to visit a city I've neglected for a couple years now.

Instead of re-stating what Accessibility Camp Toronto is all about, I am going to cheat and quote the site directly:

Focusing on users with different disabilities, sessions can cover digital accessibility topics from the web (technical to tactical), desktop software, mobile apps, eLearning, online gaming, open source innovations, and everything in between. Watch this brief video from the first Accessibility Camp Toronto to get a feel for what to expect during the day. Also, video recordings from the 2013 camp are available.

Regardless of your level of knowledge, this event is for you. It will be a great opportunity for members of the design/development, usability, accessibility, other IT and end-users with disabilities communities to interact and learn from each other. We recommend you browse the Frequently Asked Questions, especially if you have never attended a participant-driven BarCamp/unconference before.

Please support the event with a $5 suggested donation at the door. Your donation will help cover the costs for miscellaneous expenses - event materials, food, etc.

Please follow event updates on Twitter via @a11yto.

Make sure you register as it is my understanding that the event is three quarters full. If you don't follow @a11yto for updates, at least check in on the #a11yto hashtag.

The nitty gritty: the event is held from 9:00am until 4:00pm on Saturday, September 27, 2014. It is being held at OCAD University, 100 McCaul Street, Toronto, ON M5T 1W1. As a courtesy and way to fill space on this post I have embedded the map:

Monday, August 25, 2014

Speaking at WordCamp Buffalo 2014

On Saturday, September 13, I will have the pleasure of speaking at WordCamp Buffalo for its (and my) third year. Based on the speaker line-up there will be plenty of great topics, so I look forward to being an attendee as well.

If you are new to WordCamp Buffalo, a quick overview:

WordCamp Buffalo is a one day conference held in Buffalo, NY focusing on WordPress. Our goal is to increase knowledge about WordPress for people who already are working with it, and show some benefits of using it for anyone who may be interested, but aren’t currently working with WordPress.

I will be presenting on accessibility. The abstract from my session:

We can all pretend that we're helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.

Tickets are available now, so you have plenty of time to prepare for heckling me. This year the event is being held at the new Science Hall on the Canisius College campus. A map is embedded below, and information on metro stops, hotels, and parking is available on the WordCamp Buffalo site.

Thursday, May 22, 2014

HTML5 Developer Conference Slides: Selfish Accessibility

2014 HTML5 Developer Conference

Today I had the pleasure of speaking at the HTML5 Developer Conference in lovely San Francisco. I presented on accessibility and how it relates to you as a current and future user with my presentation Selfish Accessibility. The full abstract:

We can all pretend that we're helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.

After submitting a couple drafts, and then some furious last-minute editing as some of the specs I referenced were tweaked a bit, I managed to squeeze out 89 slides in ~50 minutes. The slides are embedded below. There will likely be a video of the talk coming on the official site later, though I think they started the camera late.

Quick links to two items I referenced in Q&A after my talk:

If you attended, thanks! Whether or not you did, make sure to grab the links throughout as well as on the references slides scattered throughout (though mostly at the end).

Update: August 6, 2014

Good news everybody! The video for my talk was just posted at the HTML5 Developer Conference channel on YouTube. For your convenience, I have also embedded it below.

Sunday, November 24, 2013

Image alt Exception Change Re-Re-Re-Requested

HTML5 logo — I am the 'alt,' not the 'title' This post is an unexpected follow-up to my post Image alt Exception Change Re-Re-Requested (note one fewer “re-”) from June 2012. Back then, some had called into question the need for alt attributes to be required and ubiquitous on all img tags.

Well, guess what — alt is back under review.

The Web Content Accessibility Guidelines (WCAG) working group is reviewing (and soliciting feedback on) changes to determine how a page may fail WCAG Guideline 1.1 Text Alternatives, which outlines how a page uses the alt attribute for images. This also means changing the techniques authors may use to pass Level A validation for WCAG SC 1.1.1.

To simplify, the discussion is centered on allowing authors to omit alt if the author uses aria-label, aria-labelledby, or title attributes. For example, the following three examples would all be valid:

<img src="fox.png" title="Photo of a fox reading aloud from a book.">
<img src="fox.png" aria-label="Photo of a fox reading aloud from a book.">
<img src="fox.png" aria-labelledby="FoxPic">
     <p id="FoxPic">Photo of a fox reading aloud from a book.</p>

David MacDonald has already captured the arguments for and against that are already being bandied about, which I reproduce here:

Arguments for the Change

  • These alternatives on the img element work in assistive technology;
  • The ARIA spec says these attributes should get an accessible name in the API;
  • They say it's easy to teach beginner programmers to just always use an aria-label on everything, rather than requiring a label on form fields and alt on images;
  • They feel that F65 is overly strong since it can fail the entire page for a single missing alt (regardless of the validity of the rest of the page), and they would like to soften it to allow those other valid elements to carry the page;
  • HTML5 allows a figure/legend combination instead of alt, so they feel WCAG will have to change F65 regardless in order to allow a figure with a legend, and that helps open the door to this discussion.

Arguments against the Change

  • aria-label, aria-labelledby, and title, are not really suitable attributes for img alternative text because they imply a label or title, rather than alternate text, so they are not semantic equivalents;
  • title is not well supported;
  • Some feel that the ARIA spec is not in any way suggesting these as replacements to alt;
  • ARIA instructs authors to use native HTML where possible, and they could not come up with viable use cases for omitting alt text;
  • There are hundreds of millions of dollars invested in current evaluation tools and methodologies, and this would represent a major departure from one of the most basic accessibility conventions, one that is almost as old as the web and is the “rock star” of accessibility;
  • It could cost a lot of money to change guidance to developers and muddy the waters on a very efficient current evaluation mechanism;
  • When the figure/legend combination is supported by assistive technology we can amend F65, but that is a different issue and the semantics of this construct are OK for text alternatives, rather than the aria-label, aria-labelledby, and title options;
  • It may cause some confidence problems to WCAG legislation because it represents a strong loosening to a fundamental Success Criteria, an unnecessary change that doesn't help the cause of accessibility, but just complicates things;
  • alt is better supported;
  • The alt text appears when images are turned off;
  • Initial twitter feedback from the community is strongly against changing this failure.

Where You Come In

You don't have to be a part of any standards body to weigh in with your opinion. You can leave comments here and I will happily carry them back to those discussing this (even if I don't agree). You can also let me know on Twitter or you can let Steve Faulkner know, as he is one of the HTML editors.

My Opinion

It is my understanding that ARIA was intended to cover the gaps where HTML didn't already have elements or features to enable accessibility. Moving to supplant an accessibility feature that is widely understood and broadly supported with one that most web developers don't understand seems like a step backward, especially when that specification should fall away in time.

There is also the case to be made for the current status of WYSIWYG editors and code generating features of CMSes. It's taken more than a decade, but for the most part they have support for alt. It seems unlikely that these tools will implement logic to exclude alt when there are valid aria- or title attributes, so they will probably still include alt regardless.

Revisiting HTML elements and attributes is warranted and should be part of the process. We've removed oddities such as hgroup and re-instated valuable bits like time. However, I am not sure why alt seems to get an annual review when it has clear history and use cases.

My very quick responses to the arguments outlined above:

Alternatives to img work in assitive technology

I am not an AT user, so I cannot address this other than to say that it is my understanding that the alternatives work inconsistently across AT whereas alt has a far more consistent experience.

ARIA says these attributes should get an accessible name

That may very well be the case, but should itself doesn't require it.

Easier to teach aria-label on everything, rather than requiring a label on form fields and alt on images

I think there is a false dichotomy here. In modern development shops, the team making forms isn't necessarily the one placing images. Labels have a clear functional association that mirrors desktop software experiences. Alternative text for an image is not a label, though sometimes it may be considered such. This also implies the label element itself may be replaced with aria-label, which isn't the point of ARIA.

Missing alt can fail an entire page

As far as I am concerned, if your entire page fails accessibility validation because of a missing alt, then that is a valid failure. It stands to reason that some items should fail regardless of how perfect the rest of the code may be. Softening the failing power of alt can be a separate discussion, but allowing it to be bypassed seems like a blanket solution. I can't imagine an entire new building is considered accessible even though there is no ramp to bypass the front steps.

Since HTML5 allows a figure/legend combination to bypass alt…

This goes back to my original resistance to allowing any exceptions for alt. I worried that any exceptions would be used as a wedge to ultimately tearing down alt. As such, I don't consider this a valid argument. If anything, it should be used as an argument to re-examine the value of making exceptions for alt and perhaps rolling them back (counter-suit!).

Related (on this blog)

Update: November 27, 2013

It is possible for W3C non-members to post their opinions/thoughts to the Accessibility Task Force list (one of the lists where this being discussed). Source:

All the info you need to respond (reproduced here):

Update: March 11, 2014

Today the W3C posted to its blog WCAG Techniques for image text alternatives, which reviews some of what's above. To distill it down:

The result of these two changes is that the Working Group is recognising that authors need and want to use ARIA attributes. Given the evolving level of accessibility support the group then decided to:

  • Allow the responsible use of ARIA attributes for images when accessibility supported (by no longer failing images using aria attributes even if they do not use alt also).
  • Stop short of fully recommending only the use of ARIA attributes on images (by not including a sufficient technique that would encourage this practice).

Update: April 8, 2014

The SSB Bart Group asks the question, Is the Alt Attribute Dead?, and ultimately suggests that no, it is not. As developers, we should keep on using it as it's a simple aid that we don't need to complicate with the latest changes. However, SSB Bart does remind us of the following order in which the HTML Accessibility API exposes alternative content:

  1. Use aria-labelledby
  2. Otherwise use aria-label
  3. Otherwise use alt attribute
  4. Otherwise use title attribute
  5. If none of the above yield a usable text string there is no accessible name

Update: April 15, 2014

Steve Faulkner outlines the divergent requirements between WCAG 2.0 and HTML 5 in the post Short note on alt in HTML.