Categories
event presentations

a11yBos Presentation

Web Axe author Dennis Lembree presented (virtually via Skype) at the Boston Accessibility (Un)Conference, September 15, 2012. He presented a session titled “How To Build An Accessible Web Application” which is packed with great accessibility tips for web developers and web designers. Examples from the web-accessible Easy Chirp application are included. Special thanks to John Rochford (@ClearHelper), Char James-Tanny (@CharJTF) and Ben Amankwata for organizing and logistics.

How To Build An Accessible Web Application – a11yBos from Web Axe

Next month, Dennis will be speaking at Accessibility Camp LA.

More:

Categories
book html5 longdesc review video

Book Review: Pro HTML5 Accessibility

Recently I finally made time to read the book Pro HTML5 Accessibility by Joshue O Connor (@joshueoconnor), released in late March 2012 by Apress. Let’s take a look at each chapter.

book cover

Chapter 1, Introduction to HTML5 Accessibility, covers exactly that. First, the differences between HTML5, HTML4, and XHTML are explained. Then the basics of web accessibility and theory are discussed including the four principles of WCAG 2.0 (POUR). Legislation is also discussed including Section 504/508 and ADA (US) and PAS78 and DDA (UK).

Accessibility should enhance your design—not destroy it.

Chapter 2, Understanding Disability and Assistive Technology, describes different types of disability, and goes into more detail about visual impairments. Assistive technology (AT) is explained such as screen readers, screen magnifiers, and switches; the most popular screen readers JAWS, VoiceOver, NVDA are discussed in more detail.

Chapter 3 is about JavaScript and ARIA, and sure covers a lot. Nice to see progressive enhancement (PE) explained first; along with semantic markup, PE is a grounding technique which still many developers do not practice, unfortunately. The chapter then discusses event handler best practices, use of tabindex and no script, and references WCAG2 scripting techniques and failures. The DOJO, jQuery UI, and FLUID JavaScript libraries are mentioned, but surprisingly not YUI.

The next section in this chapter provides great information on ARIA (Accessible Rich Internet Applications) including the explanation of the following important attributes: live region, label/describedby, menu, and landmark roles. An ARIA state and role reference is also included.

Accessible drag-and-drop is mentioned briefly at the end of the chapter, but would have liked to see more on this topic. I guess everything can’t be included! For more on this topic, start with Accessibility & Native Drag and Drop by the HTML5 Doctor.

Chapter 4, API and DOM, is a shorter and a bit dryer chapter, but definitely contains interesting and necessary information. The off-screen model (OSM) and accessibility APIs are defined, and how they work with browsers and AT. Accessibility APIs discussed include MSAA (the “older brother”); IAccessible 2; and the Apple, Webkit, and Linux versions.

Chapter 5 gives explanation and references to new HTML5 semantic elements and attributes. A lengthy list of event handler attributes is provided. The chapter also includes an interesting mapping of new elements against the implied ARIA role. In addition, I like that the importance of headings is explained; this is a very basic and vital practice that if often overlooked. The hgroup element is discussed a fair amount, but the rumor is that it is being dropped from the HTML5 specification.

Chapter 6 is titled Images, Rich Media, Audio, and Video in HTML5. The first half of the chapter alone (about 21 pages) discusses alternative text for images. This lengthy section is great because even though this is a basic requirement, implementing alt text can be quite tricky depending on the how an image is used (or not used) and is often done incorrectly if at all.

It’s great that the author is a supporter of the longdesc attribute which is now made obsolete in HTML5. I also advocate the longdesc attribute which points to an off-page resource; this behavior cannot be replicated with ARIA. Longdesc is not only used much in academia as the book states, but also for government websites and comics. A good example of alt text using describedby is given, but no solution for an external long description. Read more about this in my two-part article Longdesc & Other Long Image Description Solutions.

Although ARIA is great and HTML5 has made advances in many areas, neither currently provides a fully-functional replacement for @longdesc

I would have liked to read more on sprites as this is a popular design technique which causes many accessibility problems. For more on this topic, check out Notes on accessible CSS image sprites by Steve Faulkner.

The second part of Chapter 6 covers HTML5 audio and video. Issues with Flash for video are presented, and then the HTML5 media elements and attributes are covered. I’d like to point out that the autoplay attribute is bad for accessibility and usability as it automatically starts the media on page load and therefore removes control from the user.

A solid video code example is provided for embedding media and creating custom controls. I noticed that the fallback example was not what I expected as it didn’t include Flash nor a simple file download link. For more on this topic, start with Creating Your Own Accessible HTML5 Media Player by Terrill Thompson.

It’s great to see the Track element explained as it’s great for captions, audio description, etc. Although it’s not supported quite yet, many of us are in great anticipation and is definitely worth learning now.

Lastly, Chapter 6 suggests some great media encoding tools and explains the media types and supporting browsers.

Chapter 7, HTML5 and Accessible Data Tables, provides a great explanation and many code examples of basic and complex data tables, including the headers attribute technique. The author disagrees with deprecation of summary attribute, but I do not so much. The summary attribute is often not implemented correctly and is difficult to maintain; the content can be in the table caption or main content; screen readers can give the same information about a table that the summary attribute is originally intended for (an overview of the structure of the data table). But a great alternative method to summary is provided, using aria-describedby, which I do advocate.

In Chapter 8, HTML5 and Accessible Forms, a thorough explanation is given of the basics and complexities of accessible web forms. For form element labels, three techniques are described. I agree with the author in that explicit labeling (for/id) should be used over the implicit (wrapped) method. Or over any other method (such as title or placeholder) for that matter. Also discussed are many of the new HTML5 form elements (output, progress) and input types (tel, email, date, time) including a few details on browser support, or lack thereof.

However, in terms of making your forms more bulletproof and working with older legacy AT, I recommend sticking with the for/id method for now.

Useful tidbits are included such as the inconsistent screen reader support of optgroup element; how to style placeholder attribute for Webkit and Mozilla; and suggests to help the accessibility of the autofocus attribute. Speaking of placeholder, although the book points out that the placeholder attribute “represents a hint”, I had hoped it would more directly state that the placeholder attribute is not a replacement for the label element, as it’s often misused.

Error recovery and form validation is also discussed. The jQuery form validation plugin is mentioned; for details check out Paul Adam’s related article.

In Chapter 9, HTML5, Usability, and User-Centered Design, great information is given, but I wonder a little of how this content fits into the scope of the book. The chapter mostly discusses user testing and the 7 principles of universal design: equitable use; flexibility in use; simple and intuitive; perceptible information; tolerance for error; low physical effort; and size and space for approach and use. In addition to details from the book, you can also check out my article from last year on this topic, Popular Mistakes in Universal Web Design.

Chapter 10 discusses numerous tools and tips for accessibility testing, or “Assessing Your Accessible HTML5 Project”. Some popular tools are mentioned including WAT-C, WAVE, and Colour Contrast Analyser. Other notable tools not mentioned are aViewer, Accessibility Evaluation Toolbar, and Worldspace FireEyes.

In summary, Pro HTML5 Accessibility is a comprehensive and important book for any web developer and web designer. The read was excellent and contains many references and appropriate code examples. I highly recommend it. And now that you’ve read my review, you’re ready to buy the book!

Categories
articles review

Reponse to Journey to Universal Accessibility–Part 1

I got an error when trying to comment, so here’s my response to the recent article Journey to Universal Accessibility–Part 1 by @Pathbrite. In general, the article is pretty good, but several of the techniques given are outdated.

  • For #3, I say don’t use tabindex; it’s no longer considered good practice as content can be same in code order as visual order. The CSS part is a must (adding focus in addition to hover state). 
  • For #4, it’s important to clarify that page titles (and H1) should be unique for each page.
  • For #5, it’s even better to use the scope attribute on TH elements. Also, the summary attribute is good but hardly ever used correctly; it’s also being made obsolete in HTML5.
  • For #7, I like title attributes, but unfortunately titles aren’t very accessible to all; browsers don’t support the rendering with keyboard use, most screen readers have it off by default,  nor does it help on mobile devices.
  • Lastly, I suggest increasing the text size on your site for better readability/accessibility.
Categories
event

Fall Accessibility Camps

Coming up soon is the heart of the 2012 Accessibility Camp season. Here’s a great list of the events this fall. Please try to make an event as they are very fun as well as informative. I (Dennis) will most likely be at the LA event.

A “camp” is also known as an unconference or barcamp. Last year, master @Jennison wrote a guest blog all about the accessibility barcamp movement, IT Accessibility Goes To Camp.

Categories
business

5 Reasons Businesses Should Take Web Accessibility Seriously

Editorial guest blog by Philip J Reed, on behalf of Westwood College.

Too many businesses make the mistake of dismissing web accessibility as irrelevant, but the assumption that accessibility issues concern only a small segment of would-be customers is a potentially profit-damaging misstep.

Taking web accessibility seriously can save your business from major problems, some that possibly haven’t even occurred to you. What’s more, it can save you time and money, two things any business owner could always use more of. After all, by designing an adequately accessible website, you will not have to make a special effort to provide materials to disabled clients or customers in different formats, such as in physical large-print, or Braille.

Additionally, accessible websites make it easier for those clients or customers to place their order with you.  While you may have been happy to provide those individuals with special service, the fact may be that they don’t ask you for that opportunity; they may simply find your interface unusable, and begin to look elsewhere. You don’t want that to happen, and here are five additional reasons your business should take web accessibility seriously.

  1. Customer Loyalty. If any user, disabled or not, finds your site slow, confusing or hard to navigate, you’ve just lost a potential customer. Web users have millions of sites to choose from, and they aren’t willing to find out if yours is worth the wait while your high-bandwidth images struggle to load. Even worse, if your site only functions well on one browser, you may have just lost a large share of web users, consumers who will make the switch to a competitor rather than deal with an inferior experience.
  2. Credibility. By ensuring your site accommodates and satisfies users of all levels of ability and access you’ll establish and build the one currency that means the most in the business world— credibility. If a consumer knows they can come to your site and easily navigate pages, forms and links, they’re much more likely to return, refer others, and speak well of your brand in general.
  3. Staying Ahead. In the digital world, being even one step behind current technology makes you a dinosaur. Working to create the most accessible site will ensure that you stay at the forefront of your industry, and empower your consumer to feel in control of their web experience. If re-coding your forms or updating your graphics seems daunting, remember that programs at local or online IT schools  can easily get you up to speed on any tech tricks necessary to avoid accessibility issues and revamp an  outdated site format.
  4. Progress. Web accessibility can be a moving target, but the consistent self-evaluation necessary to keep your site accessible for any user will benefit your business as a whole. Business awareness and accommodation of individual needs and desires was the top concern for 83% of consumers in a 2010 Experian poll, and you’ll be a go-to guy for these customers if you keep accessibility at the top of the list of priorities.
  5. Lawsuits. Web accessibility traditionally refers to site accommodation of users with visual, cognitive, auditory or physical disabilities. Sites that fail to feature alternative descriptions for images, transcription for videos, and the appropriate HTML code that makes the site usable by keyboard-only, screen reader and other users of adaptive technology, set themselves up to not only alienate disabled consumers, but also to invoke lawsuits for failure to comply with accessibility standards. Check state and national law and policy to avoid leaving your site exposed to legal action. In the U.S., if your website is even partially federally funded, it must comply with Section 508, so make sure you’re well familiar with it, and in full compliance.

As time goes on, web accessibility will only become more of an urgent issue. If you build accessibility into your plan from the beginning, you won’t always have to be playing catch up. And if you’re playing catch up, well, make sure you get to work!

For further reading and information, please see this overview assembled by W3C.