Category: review

Open Web Camp 6 – a brief review

Recently I attended Open Web Camp 6 (@OpenWebCamp) at the beautiful PayPal headquarters in sunny San Jose, California. Like every year, the event is coordinated by @JohnFoliot. If you want to review the Twitter feed, the hash tag is #OWC6.

Like last year, the cost of the event was only $10, and attendees get a nice lunch, a t-shirt, and some other swag. The networking was good and the energy was great!

Featherstone standing in front of a projected slide
Derek Featherstone presenting at OWC6

There was a variety of topics but accessibility was the most prominent. Here are the highlights:

  • Derek Featherstone (@feather) presented Accessible Design: Which “everyone” do you mean? where he discussed accessibility challenges for users of assistive technology such as voice recognition and screen magnifiers.
  • Dylan Wilbanks (@dylanw) presented a thought-provoking session Meditations on making fire-proof, failure-proof, future-proof things.
  • Dirk @Ginader presented Teach your Browser new tricks where he discusses longdesc and browser extensions.
  • @KarlGroves spoke about accessibility testing and his app Tenon.
  • The Twitter talk “Connecting to the pulse of the planet” was disappointing. It was much more of a 25-minute sales pitch than a tech talk.

All in all, it was another successful web event. Hoping for an OWC7!

Factoid: I’ve attended every OWC event since its inception at the first Open Web Camp at Stanford, and spoke about the then newly created @EasyChirp (then called Accessible Twitter).

CSUN14 Review

Another CSUN conference has come and gone, and they only get better each year. Of course I’m referring to the CSUN (California State University, Northridge) Annual International Technology and Persons with Disabilities Conference which happens at the incredible Manchester Grand Hyatt Hotel in downtown San Diego, California.

The conference was officially kicked off Tuesday evening with a keynote speech by Tommy Edison (starts at 9:45) who is also well known as the @BlindFilmCritic.

Tommy Edison
Tommy Edison, standing at the podium, presents the keynote address at CSUN14.

Events & Happenings

Besides the plethora of sessions to attend, many events (official and unofficial) and fun things were going on:

Highlighted Sessions

There are too many great sessions to note, but here’s are several to get you started:

Summary Next Year’s 30th

Next year is the 30th CSUN and promises to be even bigger and better than ever. Seriously, there are tremendous plans for CSUN15 are already under way. Hope to see you there!

More Resources

Web Axe 2012 Year in Review

It was another great year for Web Axe and its creator Dennis Lembree.

Early in 2012, we published the Podcast 94: Women of CSUN12 featuring six female presenters (one of my favorite podcasts); then a quick review of the conference.

May was the month of Global Accessibility Awareness Day (GAAD). Here’s the GAAD podcast and Reflecting on GAAD by guest author Jennison.

To address the most bothersome trend of the year, we wrote Placeholder Attribute Is Not A Label!

Mid-year, Dennis was fortunate enough to attend Google IO12; here’s the blog, Google IO12 Review and Accessibility.

In September, we published a extensive book review on Pro HTML5 Accessibility. Then, Dennis presented How To Build An Accessible Web Application virtually at the Boston Accessibility (Un)Conference.

In October, a huge change came to the New Web Axe Website! We moved from Blogger to WordPress. The RSS feed has also changed. Please update your links.

In November came Accessibility Camp LA and a podcast featuring great improvements in WordPress accessibility.

Lastly, here are some blog responses and website reviews over the year:

Looking forward to another big year in 2013!

Response to MSDN Article “Designing Accessibility with HTML5″

This blog is a review/response to the recent MSDN article Designing Accessibility with HTML5 by Rajesh Lal (@irajlal). The article is quite extensive and covers an intro to accessibility and disability, progressive enhancement, ARIA, forms, tables, and more.

I had actually reviewed an early version of this article, but it seems some of my feedback was not incorporated, and there is also some new content in the article. So let’s discuss some of those items and more.

The introduction does an adequate job of covering the four main types of disabilities: hearing, mobility, cognitive, and visual. For reference, here’s the link to the WCAG 2.0 POUR model (perceivable, operable, understandable, robust) as mentioned.

Progressive Enhancement

I was happy that Progressive Enhancement (PE) was mentioned next, early in the article. I firmly believe that semantic markup and PE are essential to a robust and accessible webpage. PE was described fairly well, but then I was disappointed to see example code further down the page which does not use PE. In Figure 9, the form example is missing a URL in the action attribute and contains the following line to submit:

<div><a href="#" onclick="submit()">Send Your Message!</a></div>

This line does not represent proper semantic markup, progressive enhancement, nor the non-JavaScript use case. A better example would be to add a dummy URL in the action attribute, and for the submit button, do this:

<input type="submit" value="Send Your Message!" />

Headings

In Figures 6 and 7, home page sample code, the document outline is broken. The heading order jumps from H2 to H4 so is missing the H3. It also appears that the H4 elements in the aside element are correlated to the last H2, which in incorrect; they are separate topics. To solve, I would insert an H2 heading in the aside element and change the H4 elements to H3. In addition, there is no H1 element.

Figure 11, Markup for a FAQ Page, does indeed provide an ideal heading structure.

A perfect heading structure is not essential, but certainly helps. Especially when the code is an example for other developers.

And for the record, in Figures 6 and 7, the image element for the logo is missing alt text.

JavaScript Insertion

It’s good that the author recommends placing the external JavaScript files at the end of the body (at end of home page section), but remember that you may need to put certain JavaScript at the top, mostly scripts for feature detection such as Modernizr. (This isn’t really accessibility but thought I’d include anyway.)

Fieldset/Legend

In the Contact Form section, I really like that the sample code is using the placeholder attribute correctly. But there’s one issue; the fieldset element is being used but the legend is missing. The spec oddly says legend is optional, but it’s definitely best practice to use it. Otherwise, there’s no reason to use fieldset in the first place as far as I know.

Data Table

In the data table, use of a caption element is great, but I’m perplexed as to why there is a details and summary element within the caption. And I wouldn’t recommend using a strong element with the caption text; use CSS instead. Also, the TH elements should have a scope attribute; it may not be necessary with newer assistive technologies, but makes the code more robust and semantic.

Links, titles, and abbreviations

Towards the end of the article, there’s a section on links and images. I really advocate this advice: Use a CSS background image if your design requires an icon such as “>”.

Just before that, I have issues with the sample text link. Avoid “click here” is good, but then the title attribute contains “click for”. This somewhat of a moot point as the title isn’t needed at all. Traditionally, the title attribute is only needed for additional supplementary information (not required for user). The mighty Steve Faulker, in his article Using HTML title attribute, suggests that title only be used in a couple rare cases.

For images, I would not recommend the title attribute here either (due to lack of support). For even more on that, check out this recent article about title attributes on the RNIB site.

About the link underline, of course I agree that text links (in main content especially) should be underlined. The sample CSS adds the underline, but it’s much better to do this by not removing it in the first place. The underline does not have to be added; it should already be there by default.

The abbreviation example is simple and solid, but there’s more to it than that. Because of poor support, the title attribute doesn’t work typically with the keyboard and some assistive technologies (see links above). Therefore, I strongly suggest that the full text of the acronym or abbreviation is written out when it first appears on each page.

Final Thoughts

I don’t have much to say about the audio/video section; I’m just wondering where the keyboard shortcuts listed for the HTML5 media controls comes from.

It’s great to see that Visual Studio 2012 has ARIA support. I know it’s still a popular application, but I don’t have much experience with it myself.

The MSDN article Designing Accessibility with HTML5 has a lot of good information and tips. But many times, especially with accessibility, the devil is in the details. It is quite a tricky topic and there are many nuances and gray areas. I hope this response has cleared up some of those.

Open Letter to Slideshare

Dear Slideshare,

I have been a user of your service for a few years now. I enjoying sharing slide presentations, following other authors, and having the option to add audio. And last year, your move to HTML5 from Flash was great. But there are some behaviors which are quite poor and have needed improvement for some time now, as outlined below. Note that my experiences are mostly with PowerPoint files.

1. The slide notes are not rendered whatsoever. The notes can often times be very valuable. Here’s a related tweet from Sarah Bourne.

2. In my latest upload, images and text on several slides did not show up. I even edited and re-uploaded the file in an attempt to fix the issue. To resolve the matter, I resorted to posting the slides to Google Drive/Docs, and promoted that URL instead.

3. The auto-generated text transcript is very poor. The transcript is very important, particularly for accessibility. Specific items which can be improvement:

3.1 The owner is unable to edit or delete the generated transcript. Even with a Pro account it is not possible, as tweeted by Derek Featherstone.

3.2 The outline rendering is non-existent. Even when slides have proper bullet and number outlines, the transcript generates no structure, just one big text blurb.

3.3 Alternative text of images not present in transcript. For images in my PPT files, I add alternative text in the appropriate field. That text doesn’t appear in the transcript.

3.4 In the transcript, the footer text in the slide master is output at the end of the content for every single slide! This reduces legibility.

Please improve your application, Slideshare. There are many other slide sharing services people can use (such as SlideSnack and SlideBoom), and the improvements above will surely set you apart from the competition, as well as win over many of us in the accessibility community.

Sincerely,

Dennis E. Lembree
Web Axe author