Categories
Accessibility Technology

Using WAI-ARIA to Make Typical Pages Fabulous

Another IBM presentation:  “How to go beyond adding WAI-ARIA landmark regions to radically improve the accessibility of ordinary web pages by thinking of them as rich internet applications”

Presenters

  • Matthew King
  • Mary Jo Mueller
  • Bill Curtis-Davidson

HTML is good for documents and static forms, but not good for modern rich web sites.

1 – GET LANDMARKS RIGHT

Landmarks indicate what’s on the page and how it’s organized.  Only put inside of a region those things that belong in a region.  WAI-ARIA landmark roles are:

  • Banner (header)
  • Search (search tool)
  • Navigation (links)
  • Main (main content of page)
  • Form (collection of form elements)
  • Complementary (info related to main content)
  • Contentinfo (footnotes, copyrights, privacy statements, etc)
  • Region (content where no other role is applicable)
  • Application (software unit embedded on the page – not recommended)

Main region is the most important and needs to be created for every page (before and after screen shots of a page were shown)

Don’t create orphaned content – content that’s not included in any region, or relationship to other elements on the page are lost.

2 – DESIGN THE KEYBOARD EXPERIENCE

  • “Make keyboard navigation more like a desktop application experience”
  • Study the visual layout and group
  • With effective grouping, the tab ring of the page collapses dramatically
  • Support up and down arrows in vertical groups (showed a megamenu with categories of links within the menu – sort of like the CSUN home page)
  • QUESTION:  can you put other elements into a megamenu besides navigation elements?  Yes, you could put (for example) a search field in it.
  • Support left and right arrows in horizontal groups (i.e. – tabs, toolbars)
  • Blocks of elements that appear tabular may support all arrows
  • Don’t forget the visual focus indicator
  • Skip the “skip link” it just eats up one more tab stop; designs a “tab ring” so short that skip links do not add value.  The method for skipping large block of becomes tab itself.  Showed a slide with a horizontal group of tabs:  without horizontal grouping you have 9 tab stops, with horizontal grouping you have 3 tab stops.

3 – MAP THE KEYBOARD EXPERIENCE TO WIDGETS

  • Learn standard keyboard patterns for:  menubar with submenus, menu and menu button, tree, toolbar, grid, dialogs containing menus and other widgets
  • With appropriate widget choice:  perfectly map virtually any navigation scheme, equally efficient for all (keyboard or mouse, visual or non-visual)

QUOTABLE QUOTE:  “This is a designer’s job…interaction design is the magic”

Menubars with pulldown menus should work just like they do on the desktop.  A good example is www.FreedomScientific.com.  This was a powerful demonstration of how  much WAI-ARIA affects navigation within a page.

Since JAWS 12, opening a dialog allows you to easily navigate confined tab rings.

Even though they look like tabs, in most cases it is better not to use WAI-ARIA tablist and tab roles.  Site nav links that are styled to look like tabs usually don’t work like tabs

4 – LABELING AND DESCRIBING

After identifying elements with correct landmark or widget roles, ALL, with few exceptions, should be labeled and related to any describing elements.

  • Use aria-labelledby whenever possible
  • Re-use of strings simplifies maintenance, translation, etc
  • Brevity is key:  aim for 1 or 2 short words, 3 tops; do not use role names in labels i.e. “site navigation” for a navigation region; do not put instructions in labels “press enter to…”

A slide was shown with examples of labeling and describing elements, good and bad

Use labels on multiple regions of the same type; some powerful examples:

  • Composite labels
  • aria-labelledby multiple IDs
  • May self-reference by including ID of element being labeled
  • May have both aria-label and area-labelledby on same element
  • browser automatically concatenates in specified order

5 – COMPLETING THE DESIGN

Success is in the minutia; implement design patterns thoroughly

Implement WAI-ARIA prperties per design patterns:

COMMON MISTAKES

Lost visual focus = lost user

  • Is the new focus location logically what user would expect?
  • Telling non-visual user useful information?
  • Making the task efficient?

Pay attention to where focus moves

  • Elements need to be able to receive focus (menuitem, treeitem, button)
  • If a parent or child element has focus instead, it may not work correctly

Best practice is to have one role per element

“Code to the spec, not to the test tool or assistive technology”  GREAT ADVICE

  • WAI-ARIA spec clearly states intended use for each role
  • Purpose is to communicate the intent of UI element to assistive technology
  • Use role only to communicate WAI-ARIA specified intent
  • Do not re-purpose roles to “fix the issue” or manipulate AT behavior
  • If AT does not behave as desired or expected:  may be incorrect design or bug in your code, may be incorrect expectations, may be bug in browser, may be bug in AT

SUMMARY AND BENEFITS

WAI-ARIA can dramatically boost accessibility and be as desired by PwD as anyone else

Categories
Accessibility Technology

Making Mobile Both Accessible and Secure

IBM

URL for slides (you’re gonna need it, the slides have thousands of bullets and I couldn’t possibly capture all of it here):  http://bit.ly/csun-ibm-secure

  • Costs to business of incompatible mobile secrity and accessibility?
  • Weak links
  • There are security gaps to be checked for

SESSION AGENDA

  • BYOD
  • Examples of inaccessible security
  • Risks of inaccessible secirty
  • Risks of non-secure accessibility
  • Items to consider when implementing a secure accessibility
  • Challenges you’ll encounter

A whole slide of disclaimers:  how IBM is approaching this topic, conclusions are based on anecdotal experiences, etc.

Risks related to inaccessible security:  biggest risk is the human element

Some interesting stats on BYOD::  most enterprises have personal devices accessing corporate resources, 89% of IT departments support them, but 46% are unmanaged.

Accessibility and Security don’t always work together; we start from a foundation of risks (508 and other intl. legislation).  Showed a slide of big corporations that had litigation against them, Target, Netflix, Google, etc.  Yes, the “risk” is real, but of course we all know that corporations should do accessibility because it’s good for business AND it’s the right thing to do.  Presenter Talked about brand, what it’s worth to your company, that sort of thing.  Sadly, the presentations I’ve seen given to corporate audiences seem to be driven primarily by fear and pursuit of the bottom line.  This presentation (so far) is following that line.

PDFs recently had an issue where secured docs could be read with a screen reader.  Within IBM, Antivirus could not be used by blind employees, so they needed to use an alternate AV program.

QUOTABLE QUOTE:  “If a security test fails an individual’s capabilities, it fails as an implementation.  If a security test fails the situation, it fails as a solution.”

INCOMPATIBILITY RISKS

  1. AT do not function correctly in a secure env
  2. Unverified AT leave exposures to secrity
  3. Security is unusable
  4. Secure solutions may not be able to be retrofitted for accessibility

They had a complicated slide that showed “10-Steps to security”

Slide with a triangle containing:  Accessibility, Security, Enterprise

Embed standards into the enterprise (mandates, processes, guidance, metrics, education, documentation, tools)

WHY DOES EVERY IBM SLIDE HAVE TO HAVE 20 BULLETS AND SMALL FONTS?

Slide about platforms:  OS, Hardware, carrier, AT

Slide showing a pie chart of platforms, there were about 50 (completely unreadable, but did show the scale of the problem)

BRIDGE BETWEEN SECURITY AND ACCESSIBILITY (directly from slide)

  • AT (SR, Zoom, preconfigure, dev tools)
  • Security (platform settings, policy, partitioning)

THIS PART WAS INTERESTING

Siri is a problem because “we don’t know what happens to that spoken utterance, it doesn’t stay on the device, it goes to what we’re told is a secure server.”

QUESTION:  what about captioning and transcription services?  These fall into the same bucket.  Concern is the unknown about “who’s wearing the Siri face” right now.

Evaluate AT for security

  • Does it run correctly when the security is engaged?
  • Have artifacts that leave unprotected content (logs, buffers, off-device processing, transmission, secure processing, is encription adequate
  • Does it work in public / private situations?
  • Does it require a network connection?

Accessible Authentication

  • Pwd length, complexity, time-outs, alternatives
  • Biometrics:  consider cost, environmental considerations, alternatives
  • Graphical pwds (not suitable for device without a mouse or touch-screen access

Partitioning

  • MDM, Security, Enterprise Applications
  • Bare metal vs. Hosted (type 2 like VMWare)
  • Container virtualization (i.e. Enterproid Divide), similar to UNIX chroot solution
  • Have to assess these solutions for accessibility

Paul’s sidebar regarding the “model” of IBM presentations:  they provide lots of big-sounding questions and problems, present slides that are overloaded with gobs of information, focus on compliance (often injected with fear), but not a lot of practical information.  Ya gots ta pay for that stuff, buddy.

IBM uses “Worklight,” a tool that sounds similar to PhoneGap, but it comes with a lot more under-the-hood stuff for policies, server interaction, endpoint management and management of services, etc.

Enable, monitor, and enforce compliance

System settings, software inventory, software distribution, automation, monitoring, reporting, taking action

Slide:  Rapid transformation of change (loaded with literally a hundred items and completely unreadable.  Again, shows just how complicated things are)

Mobile standards are lagging growth

New hypervisors have been announced by VMware (type 2) and Redbend vLogix Mobile (type 1)

10 new MDM solutions reported May 2012

Retrofitting is expensive and may in fact not work at all

Categories
Accessibility Technology

Agile and Accessibility Case Study

Karl Groves @karlgroves simplyaccessible.com

Agile and Accessibility:  Theory and Reality

Ceiling Cat and the SDLC (he watches you as you do waterfall project management – Google this meme…not as good as Cat-Breading, but still funny)

The further you get down the path, the less likely you are to get accessibility into the plan (if it’s not part of the plan to begin with).

The agile manifesto:  “We are uncovering better ways of developing software by doing it and helping others do it.  Through this work we have come to value…”  Go here and read it yourself:  http://agilemanifesto.org/

How do agile and accessibility work together?

  • Definition of done:  do tests pass?  If yes, we’re done!
  • Inherently user focused (as a user x, I should be able to do y, so that I can accomplish z)
  • Inherently quality focused
  • Inherently collaborative (pigs and chickens story, referenced here: http://en.wikipedia.org/wiki/The_Chicken_and_the_Pig )
  • Tools and techniques (Test Driven Development)
  • Daily standups
  • Definition of done
THE STUDY
  • Fortune 100 Healthcare Company, 36.5 billion, 40,000 employees
  • SDUF (Some Design Up Front), some spec work done up front
  • 95 initial renderings
  • 9 page types
  • 10 sub-page layouts
  • Slicing up designs and assets into working HTML

TRADITIONAL SCRUM

  • A11y team members assigned to several scrum teams
  • Development and testing
  • We deviated from the process (triple quality constraint Cost, Scope, Time)
  • We underestimated the scope and resources, untrained resources
  • Executive staff unwilling to adjust to meet evolving needs
  • Agile fall?

LESSONS LEARNED

  • William James: A chain is no longer than its wekest link, and life is after all a chain
  • You need the knowledge and skills, or you can’t be effective
  • You CAN integrate accessibility into any process
  • Time spent up front building accessible components and patterns is good accessibility ROI (still expect to refactor); that is, the 95 initial renderings

COMMENTS AND QUESTIONS

  • One way to get accessibility win, create an accessible.css file that contains all the stuff you need
  • Develop a detailed User Interface Model up front, which helps to standardize the interaction model.
  • Ratio of accessibility members on a team:  at least one should be functioning as a SME.
  • Why can’t we standardize on a particular framework / approach?  Start contributing to those projects that have made the most progress.
  • Leonie talked briefly about the UK government’s success with their site rebuild

 

 

Categories
Accessibility Technology

Be the Fireman, Not the Cop

John Foliot @johnfoliot / http://john.foliot.ca

Laying the groundwork for online accessibility success in a large environment.  Boy, this is something I can relate to 🙂

QUOTABLE QUOTE:  “Close only counts with horseshoes and hand grenades.  Perhaps web accessibility compliance should be added to that old saw.”

CURRENT PROBLEMS

  • Lack of accessibility planning / pre-planning
  • Stakeholders already on the defensive
  • Tight deadlines
  • How much does it cost?  No budget allotted
  • Content being developed for the web was never designed with web accessibility in mind
  • Sum Total = Resistance

RESISTANCE TO CHANGE

How does it manifest?  Confrontation, rejection (doesn’t apply to my content), avoidance, insincerity.

FINDING CHAMPIONS

Takes a cultural shift, and requires good communication and communicators.  He read Malcolm Gladwell’s The Tipping Point.  From this, he realized that you need to find the “Connectors.”  They know everyone, have done everything, and have the institutional knowledge.  Also need to identify the “Mavens,” who in our case are the hard-core geeks who do the implementation; they’re the early adopters.  Also need “Salesmen” as well, provide boosters, promoters, persuader, helper (enthusiasm).

COMMUNICATION SKILLS (directly from slide)

  • Be likable, and stay positive
  • Connect – find mutual points of interest (be sincere)
  • Solve problems and build trust.  Teamwork starts with you.
  • Create positive experiences and make learning fun! (i.e. – things are challenges, not problems)
  • ID and work with the Connectors, Mavens, and Salesmen
ESTABLISHING THE SYSTEMS TO GET YOU THERE
  • Tackling technical challenges, such as using a publishing and tracking system like Drupal, CQ5, etc.
  • Select a tool to track bugs like Bugzilla, Mantis, Trak
  • Use frameworks like jQuery and Dojo
  • Consider custom tools (when necessary).  Example given was Stanford’s caption tool.
  • Look for ways to automate processes to make user’s lives easier
TACKLING TECHNICAL CHALLENGES
  • Evaluation tools (Deque Worldspace, SSB BartAMP, IBM Rational Checker, WAVE).  The reports these tools are kind of like a report card.
TACKLING CULTURAL CHALLENGES
  • Provide detailed expectations of outcomes, not process (don’t tell them HOW it’s going to be done).
  • Set realistic goals
  • Encourage creativity (your users will have some great ideas)
  • Lay out the efforts as challenges, not consequences (tell an engineer you can’t figure out a problem and then walk away)
  • Pursuit of quality:  don’t let perfect be the enemy of good
  • Set timelines and milestones
  • Celebrate successes!
  • Foster empathy and understanding (brown bag events – invite actual users with disabilities)
ADDRESSING FINANCIAL CHALLENGES (directly from slide)
  • It will cost money (you can pay me now, or you can pay me later.  Eventually, you have to pay me)
  • Be honest about what it’ll take
  • Scaled question – the longer you delay, the more it costs
  • Transition towards a team based approach (PM, tech team, Design and UX, Marketing / Content Department
  • Identify bottlenecks for each group independently
ESTABLISHING THE SYSTEMS TO GET YOU THERE (continued)
  • www.w3.org/community/wai-engage/wiki/Accessibiilty_Responsibility_Breakdown
  • Establish training and internal resources
  • Motivation (internal awards, recognition, etc.
  • Document knowledge internally with a wiki or Knowledge Base
  • Be consistent in your implementation
LEGISLATION, POLICY AND BEST PRACTICES
  • Accessibility is a governance issue and a shared responsibility
  • Appeal to pride versus fear (your efforts matter and reflect well on the institution, we’re the best, that sort of thing).  Audience members commented on tying accessibility to something that matters to the organization.  An example of this might be brand.
  • Get some policies in place:  work with existing standards; avoid re-inventing the wheel.  Again, there is no such thing as perfect.
  • Legal threat is heavy-handed and should only be used as a last resort
  • There was some discussion regarding the involvement of lawyers.  My own commentary (not voiced) is that people only hate the lawyers because they make the rules and know ’em well.
MEASURING SUCCESS
  • Avoid the checklist mentality
  • Avoid appearances of concessions and sacrifices
  • Avoid the brick!  (Giant report)
  • More than just a QA process, multiple rounds of accessibility testing
  • Work with milestones, test early, test often
  • Be specific in what you ask for, generous in what you accept
  • Celebrate successes and recognize efforts great and small (this does matter)

 

Categories
Accessibility Technology

WCAG Guidelines – What about the Users?

PRESENTERS

  • Birkir R. Gunnarsson, Blindrafelagid; The Icelandic Organization of the visually impaired @birkir_gun
  • Hinni Hreinsson, The Stockholm Low Vision Center @hm_hreinsson

BIOVI (Blindrafelagid, Icelandic organization of the visually impaired), similar to NFB in the US (details directly from slide)

  • Fights for independent and responsible living conditions for visually impaired people
  • Fights for their secured equal rights and opportunities to respnosible, active and recognized participation in all sectors of our community
  • Part of a public medical service of Stockholm County; 80 staff in 5 teams
  • Birkir does audits and makes development recommendations
  • Hinni trains users on AT
  • Discussions between Birkir and Hinni revealed that their best practices recommendations did not always make it to AT trainers and end users

WHY THIS PROJECT?

  • Delivering web content requires 4 players
  • Accessible web site
  • Browsers that render content and build DOM
  • (missed a bunch of items from this slide, sorry!)

To summarize (Paul’s description, so it’s probably butchered):  this is an outreach effort to get the word out about the roles of headings, landmarks, navigation hotkeys, etc.  Wanted to create a survey to help develop a vendor neutral guide to help explain how you can use a screen reader to effectively read web pages.  This would benefit users at various stages of screen reader competence.

WebAIM SCREEN READER SURVEY

  • 1,700 SR users
  • 2/3 of SR users consider themselves advanced Internet users, only 2% consider themselves beginners
  • Users keep their SR up to date
  • (missed details on this slide as well…will try to post link to WebAIM survey results)
  • UPDATE:  http://webaim.org/projects/screenreadersurvey4/

SR USAGE AND TRAINING

  • Many users run multiple screen readers
  • Most have one up-to-date enough to read landmarks
  • 20% received formal training
  • Close to 80% use their SR web page summary feature

FAMILIARITY WITH LANDMARKS, HEADINGS AND TABLE NAVIGATION

  • 60% are familiar with headings and use them for page navigation
  • 60% use navigation hotkeys to browse tables on web sites

NOTABLE RESULTS

  • Most users learn how to browse on their own, with little formalized training
  • Much of user base still relies on TAB and ARROW keys to navigate a web page.
  • Users also use the page description element of screen readers

SUGGESTED IMPROVEMENTS

  • Web developers:  use markup clearly and efficiently
  • W3C standards:  consider a set of more clear specified landmarks
  • SR Vendors:  include landmarks in web page summary features
  • AT instructors:  can we reach out to more users?
  • Make sure AT instructors teach effective browsing techniques

Create educational web resource that would be a simple online user manual on how to effectively navigate web pages.  This would include relevant navigation hotkeys for all screen readers.  Will be written first in English, then translated to Swedish and Icelandic.  Information would be updated as needed.  Possibly have WCAG certification or an associated accessibility statement that links to this resource.

Results will be released at an EASI webinar on May 2nd, at 2pm EST (US Eastern Standard Time).  Sign up at http://easi.cs

%d bloggers like this: