HTML5 Accessibility Support

Presenters

  • Leonie Watson – Nomensa – @LeonieWatson
  • Steve Faulkner – The Paciello Group – @stevefaulkner

See more here:  HTML5accessibility.com (link repeated below)

 

HTML 5 Accessibility:  Where’s it at?

  • Humor:  You laugh now, wait till you join the HTML working group (!)
  • Steve talked about getting people to join the working group.

 

Where’s all the excitement?

  • Probably the mobile space.
  • HTML is being used heavily in that area.
  • BUT…all the work is still being done on PCs and workstations.
  • …and, the best level of support is still on desktop browsers

 

HTML5 Spec is BIG

  • As a developer though, you don’t need to know everything in the spec.
  • A ton of it is for User Agent and browser implementations.
  • Leonie:  if you read it front-to-back, you’ll go crazy
  • Stuff in spec now is either in the process of being implemented, or HAS been implemented by at least one browser manufacturer.
  • A great deal of stuff is stable (like the venerable <p></p> tag), but much of it is now.
  • ARIA live regions (assertive) drove JAWS users nuts, so it was pulled from the spec.

 

WEB TECHNOLOGY STACKED

Stack includes a ton of technologies, and all these things are married / integrated together.  However, it’s a pretty messy integration and a difficult step for technologists.

 

HTML5 MAKES USING STUFF EASIER (taken directly from slide)

  • Audio
  • Video
  • SVG
  • ARIA
  • New semantic structures (header, footer, article, etc.)
  • New UI controls (as opposed to HTML4’s limited controls, which encouraged custom widget and plug-in development)
  • MathML

Leonie commented on the challenges to people with disabilities needing to use custom widgets and elements.

 

NEW UI CONTROLS = POTENTIAL ACCESSIBILITY IMPROVEMENTS

  • Date and Time input
  • Local Date and Time Input
  • E-mail input
  • Month input
  • Number input
  • Range input
  • datalist
  • details
  • menu
  • meter
  • progress

Leonie:  support for these new elements is spotty.  IE9 has best support among the various screen readers (NVDA has very good support, JAWS is pretty good too)

  • Browsers need to implement the new controls.
  • Browsers need to implement accessibility suppor for the new controls.
  • …and really, the 2 should not be separate, but they are..

Many of the controls you see in desktop OSes will be gotten “for free” with the new browser controls like sliders, progress bars, etc.  That’s why it’s important that the browsers implement them quickly.

 

ACCESSIBILITY APIs

  • MSAA
  • Iaccessible2
  • AX
  • STK
  • + input device support
  • roles, states, properties, interaction

Browser has to provide accessibility to the AT in a robust way.  There’s a mistaken view that AT is holding up web development…this is false.  It’s the browser implementations that are.

Steve reviewed a good slide showing how the API looks, using mechanical typewriter and old telco switchboard.  This was actually a very apt visual description of the state of the browser / AT interaction environment.

 

BROWSER IMPLEMENTATION

  • Screen shot of the “can I use” web site:  http://caniuse.com/
  • A good snapshot of what elements each browser supports.  (PAUL NOTE:  if you haven’t already, I highly recommend you check it out.)
When will browsers implement HTML5 UI features in a way that developers will want to user them?
  • …or, more accurately, when will the CSS hooks be implemented to allow flexible, atomic styling of control and their sub-elements?
  • Eventually the controls will have all the semantic elements “built in,” which will make developers’ lives much easier.
  • Browsers are implementing these controls, but developers can’t use them the way they want to use them.

 

Slide showing examples of audio and video elements (widget controls).  These will really catch on when AT can use the embedded controls.

 

Slide showing new structural elements in HTML5

  • JAWS and NVDA are neck-and-neck in their support of the new structural elements
  • Navigation with landmarks is now akin to “taking in the page at a glance”

 

MATCHING FEATURES TO SEMANTICS

  • Example:  <figure></figure> element allows definition of an image or any piece of content.
  • JAWS and Firefox is the only AT/Browser combo that implements the <figure></figure> tag well
  • This stuff doesn’t just “happen out of the box,” they need to be implemented appropriately.

 

Slide showing Accessibility API Mapping

  • HTML4, HTML5, WAI-ARIA, MSAA, MSAA+UIA Express, UIA, IAccessible2, etc.

See more here:  HTML5accessibility.com

 

Accessibility as Innovation

Presenters

Elle Waters @Nethermind (worked at Humana)

What it takes to create an accessibility program at a large organization

Susan Moon was the one who was going to make that decision:

  • Head of digital experience program at Humana
  • SUSAN’S QUOTABLE QUOTE:  “Accessibility is the OXO of web design”
  • This quote unlocked the possibility of doing accessibility in the enterprise.

OXO:  products are geared toward the user.

  • Triggers innovation; is a catalyst for new ideas
  • Prioritizes value for the user first
  • Demands best efforts
  • Yields extensible benefits to all users

 

Showed NASA project plan guide:  85 pages of instruction in how to write a project plan

 

What does it take to truly innovate?

Hierarchy of web accessibility project needs (in reverse order)

  1. a web page
  2. a responsive, personalized experience
  3. a world class user experience
  4. a universally accessible experience
FLIP THE PYRAMID

 

QUICK:  What makes the Bugatti Veyron worth 2 million bucks?

  • It’s not the body, it’s the engine
  • The things you don’t see are the things that count the most

Showed form error messaging detail

  • Most fundamental business interaction
  • Reviewed boilerplate form error messaging
  • Error messaging appears at top, only showing those fields that needed to be remedied.  This helps dissipate “tab stop hell”

 

Inaccessible Map State Selector

  • Thought about image map – NO, not forward-looking
  • What about SVG?  Not quite there yet
  • Drop-down menu (in alpha order) with submit button
  • What about tab order in the map itself?  Tab-able by west coast to east coast.

 

Skip to Main Content

  • Not used much because it’s not consistent
  • If there are lots of repetitive links, could we use a numeric threshold to determine where the skip link would land?
  • What if we put a Table of Contents (list of headings) at the top?

 

CONCLUSION

  • Close your eyes
  • Put down your mouse
  • Imagine a well-designed web page
  • Once you’ve cleared the paths, where do you want to go next?

WAI-ARIA / HTML5 Accessibility Testing Toolbar

I have to admit that I had no idea what the hell a favelet was, so I Googled it.  Smashing Magazine had this to say, it seemed relevant, so I shamelessly stole it from http://www.smashingmagazine.com/2007/01/24/bookmarklets-favelets-and-snippets/  Hopefully the copyright gods won’t strike me down:

If you’ve used them once you’ll never be able to work without them. Bookmarklets (or Favelets) are tiny Javascript-Snippets, which are stored within a bookmark and add particular functionalities to the browser you’re using. It doesn’t matter whether you browse, bookmark, look up, search, design or program – depending on your interests, bookmarklets can significantly enhance your efficiency and productivity.

Ok, got it…now this session might make some sense to me.  WARNING FROM THE FUTURE:  unfortunately, I was a little lost in this session until I understood that the presenters were showcasing favelets they built and use to look at and test ARIA and HTML5 elements in the browser.  I must have been in the minority in this audience, ’cause pretty much everyone else seemed to know what the presenters were talking about.

Speakers

  • Jim Thatcher
  • Suzanne Taylor (works for Pearson)

Favelets:  http://jimthatcher.com/favelets

  • His favelets were inspired by web accessibility Toolbar
  • Make things go faster and be more thorough
  • In IE, they’re saved as bookmarklets
  • Started with images
  • Wanted to provide alerts and alert counts
  • Text size favelets
  • Skip links favelet checks for skip links and whether they will “work” or not in IE6-8
  • Form labels favelet
  • Presented a slide with a large list of favelets, which I won’t transcribe here
Suzanne
  • DOM reader for HTML5 canvas objects
  • Simple example:  simple drawings – short text alternatives
  • Fallback content is supposed to be sent to Assistive Technologies; AT tries to read whatever is displayed.
  • Conditional drawings – dynamically generated text alternatives:  JS draws on canvas, Writes parallel content to the DOM

 

OPEN ISSUES AND NEW APIS

  • Tracking focus for:  Magnifiers
  • scrolling with text to speech
  • scrolling with voice control
  • support for keyboard access
Landmark favelet demonstrated on Jim’s web site.  Highlights all the landmarks…groovy.  Had a slide which showed which listed all the WAI-ARIA and HTML5 landmarks, another one which listed warnings.
ARIA favelet displays
  • All role attributes
  • All aria 1-* attributes
  • Shows all of these, whether they are coded correctly or not
  • Tabindex=”-1″ (with WAI-ARIA developer coes keyboard access; developer must code any changes in focus)
  • Referenced elements
  • Referencing based on IDs
Slider / Range Favelet and Spin Button / Number Favelet
  • Make choosing numbers more user-friendly
Progress Bar and Scrollbar Favelets
QUESTIONS
  • If there’s interactivity on the canvas, is that passed via API to the AT?  No, you pass it to the DOM, which then passes it to the AT.
  • Is it valid HTML to put any tag into Canvas?  Yes
  • Are favelets screen reader accessible?  Long answer that eventually got to “yes”
  • Which browsers show ARIA?  All show some, but they’re not consistent.

 

 

Panel: Inclusive Mobile for Everyone – Challenges

This was a panel discussion with several panelists.  Please accept my apologies in advance for spotty / crappy coverage 🙂

Captioning was provided, host asked that people didn’t “company bash”  haha nice touch

Panelists Government and Industry Leaders

  • Holly Nielsen – host
  • Brian Cragun – moderator
  • Bruce Bailey – Access Board of US
  • Peter Korn – Oracle Accessibility guy (missed his title)
  • Rich Schwerdtfeger – CTO of Accessibility at IBM
  • Pirthipal Singh – Team leader of Web Standards office in treasury board of Canada (similar to OMB in the US)
  • Madeleine Rothberg of WGBH
  • Andrew Arch – Assistant Director of government management office within dept of finance of the Australian government

Pirthipal – students want to do everything from a mobile device.  Companies need to understand where their next gen of customers is coming from.  Daisy and Bookshare; eBooks.  Seeing a ton of media consumption and “second screen usage” on mobile devices.

Peter – 3 years at Oracle.  Focused on how big they are.  140,000 empoyees, 390,000 customers, more big numbers.  Have Java tech (ME and embedded via Sun) which is used pretty much everywhere.  Been to CSUN developers.  Co-developed outspoken SR, worked on Java, GNOME, etc.  Worked on 508 refresh group.  We make a lot of enterprise applications, customers want to run them on mobile, so we’re interested in it.

Bruce (on phone) – US Access Board.  Working to harmonize standards with the rest of the world.  Been involved with AT for 20 years.  Moving “up the chain” has removed him from the down-and-dirty of AT, which is a bittersweet thing for him.  Mobile devices are the poster child for why the current standards are unworkable int their current form; hard to apply the standard to them.  508 has a large loophole for commercial nonavailability (tell me about it), we want mainstream tech to have it built in.

Pirth – what we’ve learned from doing accessibility on the web can be applied to mobile.  Developing standards wasn’t enough…we have 106 departments and agencies…need to come together.  Their project is up on github…search for “WET” and you’ll find it.  PAUL – I think this is the repo “Web Experience Toolkit”  https://github.com/wet-boew/wet-boew.

Andrew – Australia was one of the first countries to adopt WCAG 1.  Have 4 year trategy for implementing WCAG2.  Had tremendous uptake.  Been working with the web since the early 90s and accessibility for about 15 years.  BYOD is very seriously on the agenda of the Austrailian govt right now.  Some say mobile isn’t web site, so those standards don’t necessarily apply.

Rich – over 20 years in the business.  Development community is excited about working with AT now and implementing it in mainstream devices.  There’s a lot of challenges out there now, how do we educate communities.  Not everything is fully baked, particularly with the web.  For example, iOS doesn’t have a keyboard unless you’re in an input field or content editable area.  Working on projects like IndieUI that can help standardize things like zoom, open, close, without worrying what generated the command.  Many apps are a combination of web and native platforms.  Lots of innovation, but also a lot of challenges.

Andrew – What do you see as the biggest obstacles to business / govt integration of mobile into their infrastructure.

Brian – Security

Richard – yes.  Siri is a great technology, but your requests go off to Apple and that’s a potential security issue.

Pirth – tech is changing so rapidly, some devices have good security, some don’t.  Biggest challenge is not being able to identify, say, the 3 – 5 platforms or devices to support.

Bruce – too much attention is paid to “sexy” tech like Google Glass.  How about just delivering plain old cross-platform services?  (word up, yo – Paul aside)

Richard – mobile browsers have not done all the performance enhancements that you have on the mobile device.  Some things like Dojo are slow when put on mobile (Paul:  dojo is pretty fat, mobile networks are carrying fatter and fatter web sites and apps that seem to assume a desktop browser with a broadband connection).

Madeleine – we don’t know yet what makes for a great mobile interface.  We have to relearn how we interact with our devices.  Need to go back and do a LOT more usability testing.

Peter – we’re tightly connected with 508 and CVAA and anything we adopt is:  what does it mean to require that a mobile device be accessible?  For example:  big screen for people with mobility issues.  Some choices that are good for one device will not be appropriate for others.  There’s a disconnect between the structure of the regulations and the structure of the enabling law.  How do you regulate it?

Andrew – having multiple devices makes the layering of security on top of them a pretty sticky issue.  How many layers do we need to have to keep govt information / citizen’s info safe and secure?

Brian – what are the conflicts we see in the enterprise with BYOD and how do we address those?

Peter – focusing on accessibility component – who buys the accommodation?  do we assume the employee pays out of pocket?  That’s at odds with our idea of what the ADA stands for.  Then there’s the training component.  What if the built-in AT doesn’t meet my needs?  If we stuff a desktop OS into a device (like Microsoft, that may be an option.  But for the most part, that’s an issue right now.

Madeleine – multiplicity of formats is an issue.  Need to be able to push training out to people when they need it.  There are many players, video formats, captioning availability, etc will be an ongoing issue.

Richard – our CIO wants to promote this – move as much toward we-based technology and components that are already accessible on mobile devices.  Example:  Notes mail, put an Exchange server as a front end to notes mail.  We also need to address the functional performance criteria.  Permutations are a challenge.

Audience question – mobile device management – what about policies assigned to specific applications…how do we make use of accessibility as a policy?  For example, certain applications may not provide access (like logins).

Brian – MDM policies need to ba able to be pushed out to the end points.

Peter – a variant of the general problem tied to BYOD.  Certain features may be turned off in certain environment for certain reasons, which can be a problem for some users.  accessibility often requires more

Audience question – is there overlap between what’s being done here and what might be expected within the school systems within the next 10 years?  Obliquely referred to digital divide (who pays)

Madeleine – there is a lot of overlap between the environments (students at school, employees at a corporation).  Some policies in schools are designed to keep kids safe.  Where it differs is the mandatory nature of the funding.  Mandates are in different places.

Bruce – a big challenge is where school systems and govts are selecting / endorsing devices that are or don’t have good accessibility.  What happens when that selection differs from personal user preferences.

Peter – trend toward built-in accessibility doesn’t always meet every need, but that also makes it more affordable for everyone.  If every phone is $100 – $200 and it comes with a built-in SR, that’s really going to make things more affordable and somewhat easier for everyone.

Brian paraphrasing audience question – what are the thoughts on equivalent facilitation that might allow us leapfrog to new kinds of technologies or interfaces?

Richard – The do indirectly.  It’s almost taken equivalent facilitation and putting it on steroids.  We hae equivalent facilitation, and then we have functional performance criteria. Context awareness and adaptation, this is how you meet accessibility on mobile devices (like an iPhone user taking a pic with instagram).  What we are dealing with now is a complex visualization technology.  Our solutions in some cases may not be rich enough to meet every need.

Pirth – Canadian govt is def meeting WCAG2.  Our web apps are optimized for mobile devices, using responsive design, HTML5, WAI-ARIA, etc.  That gets us a long way toward meeting this goal.  The same info services should be widely available.

Peter – equivalent facilitation cannot be emphasized enough (508f) – textual info shall be provided using the OS mechanisms for displaying text.  Java couldn’t do that, and what about UNIX?  There is none.  This is why accessiblity API was developed.  This is how we prefer to do everything.

Bruce – equivalent facilitation comes out of ADA and then was used in current 508. That concept is not going away  Equivalent facilitation is here to stay.

Andrew – IndieUI is fantastic but now here yeat.  Still being worked out, still to be standardized, how to operate.  Devs are asking what do we do, what is our responsibility, where does the repsonsibility of the users start and stop.

Madeleine – 21st century communications video and accessibility act.  Hardware manufacturers are required to make their devices accessible.  If devices come pre-loaded with apps, those tools need to be accessible too (video chat).  3rd party apps are other people’s responsibility.

 

 

 

Managing Website Accessibility Conformance

Shadi Abou-Zahra, W3C/WAI
Shadi had tons of great content in this presentation, I had a hard time keeping up with it!  The good news is that this presentation is available with a list of the resources discussed at:  http://tinyurl.com/Shadi-CSUN2013
AGENDA
  • W3C WCAG conformance guidance
  • Accessibility support database
  • Guidance for tool developers
  • Other resources for evaluation of site conformance

 

ACHIEVING CONFORMANCE

  • Awareness raising and buy-in up and down the chain is critical
  • Accessibility must be “built-in” and occur throughout the development process

 

MAINTAINING CONFORMANCE

  • Awareness raising and buy-in up and down the chain is critical

 

CONFORMANCE EVALUATION

  • Evaluate to improve
  • Verifies conformance statements
  • Regular monitoring progress from year-to-year (is your approach working?)

WCAG-EM (Evaluation Model)

  • Is currently a working draft
  • This is process-oriented guidance.
  • Web site definition: “coherent collection of pages that together provide common use or functionality”

 

5 EVALUATION STEPS OF WCAG-EM

  1. Define evaluation scope (what is target we’re aiming at, what kind of report do we want – simple “thumbs up / thumbs down,” a list, etc.).  Need this for common expectations.
  2. Explore the target website.  Ideally, this happens with the help of the site owner and / or web developer.  Do we do this “white box style” or “black box style”  Can the developer tell you where the templates are, etc.
  3. Select representative sample
  4. Audit the selected sample
  5. Report evaluation findings

 

HIGHLIGHTS

Types of reports

  • Basic (yes / no)
  • Detailed (points out examples)
  • In-depth report analyzes issues (details about the issue, how to fix, etc.)
Sampling approaches
  • Targeted sampling
  • Random sampling
  • Sample adjustment

Performance score (so-called)

  • Coarse and potentially misleading
  • Misses context and can defer focus
  • …but powerful for communication

 

COMMENTS FROM AUDIENCE

CSUSB has a scoring system devised by a Math student (does yes / no analysis and uses a Likert scale of severity).  Reports are provided to management, which creates a kind of “naming and shaming” mechanism.  This system has engendered competition among divisions and has increased accessibility across the board – at least according to their system.

Some agencies have a scoreboard…is this a good thing?  It can be challenging due to the apples versus oranges nature of differences between sites.  This approach gamifies the system, which can be good or bad.  It’s probably best to compare yourself against yourself.

 

CROWD SOURCING DATA COLLECTION AND ANALYSIS

  • How can you collect the sheer amount of info?
  • Scope: not all info is really equally interesting
  • Attempt to collect partially existing info
  • Become a “hero” contributor!
  • There are a lot of future research projects
  • Browsers and AT vendors have a ton of information

VERY COOL:  Shadi demonstrated prototype testing tool (I think it’s called “Easy Checks”) that collects data into a central database (URL for tool is in slide deck, which is at top of this post)

 

GUIDANCE FOR EVALUATION TOOL DEVELOPERS

  • Most claim to support WCAG2.0
  • Most also claim to be the best tool…
  • …yet there are many variances
  • Need support for WCAG2 to be more consistent among tools

Current idea is to provide a framework that describes:

  1. Features that tools can provide
  2. Profiles of different types of tools
  3. Can export results into bug-tracking systems (great idea)
Purpose
  • Contribute to more consistent support for WCAG2
  • Selection of features to guide tool developers
  • Selection of features to inform tool users

How does WCAG-EM work for you?  Input regarding scoring is being asked of the community, please send comments by 22 march 2013 to public-wcag-em-comments@w3.org

SCHEDULE

  • Current draft is out for review
  • Summer 2013:  final draft
  • December 2013:  first Note

 

 

 

Continuing Adventures in Higher Ed & Technology

%d bloggers like this: