Categories
Accessibility Technology

Choosing an Accessible UI Framework

Presenter:  Gerard Cohen from Wells Fargo, Kevin Kalahiki

@gerardkcohen | Slide deck at SlideShare.net

This was my first session at the CSUN conference on Friday, March 6.  I’m getting off to a good start, definitely feeling better than last night.  My headache yesterday made me go up to my room about 4:00 PM, and I ended up sleeping until 10:00 PM, completely missing the reception.  D’oh!  I’ve got another full day of sessions, so let the coverage begin.  Every year, there seem to be more great sessions scheduled on the last day of the conference.

Choosing a framework is a serious decision, it’s something you’ll have to live with for at least a few years.  Ease of use, popularity, opinionated, customization, size, and of course accessibility are all considerations.  How do you know which one is accessible?

Frameworks that will be covered here

  • Angular.js
  • Bootstrap
  • Foundation Zurb
  • JQuery Mobile Framework

Other Topics Covered

  • Documentation
  • Forms
  • Tabs
  • Dialogs

Criteria

  • Proper Labels / Descriptions
  • Keyboard Navigation / Focus indication
  • Color Contrast
  • ARIA (is it being used properly?)

Documentation

  • Angular 1.4 developer guide, ngAria; has accessibility patterns documented
  • Bootstrap has a good accessibility page; skip to content, nested headings, etc.
  • Foundation has an accessibility page, but it’s a little slim.  It’s pretty much copy/pasted from Bootstrap, with links to some other resources.
  • JQuery Mobile does NOT have a specific accessibility page, but does have an “accessibly hidden labels” section.

Forms

  • Easy to get right – and wrong.
  • Error validation is typically customized because HTML5 validation (support) is lacking
  • Proper labels / Grouping, Focus indication, Color contrast, Error validation
  • Angular has a bad rap for accessibility documentation on forms.  Labels are not included on input fields by default.  However, a lot of work is being done with Angular Material Design.  Fields are not grouped together properly by default.  Required fields automatically show a color indication onFocus, but colors do not meet color contrast.
  • Bootstrap:  error validation needs to be handled, does require some weird markup, color contrast issues
  • JQuery Mobile:  their forms pass pretty much every check Gerard was looking for.

Tabs

  • Criteria:  Keyboard interaction, focus indication, color contrast, ARIA
  • Tab key focuses active tab
  • Left/up for previous tab
  • Right/down for next tab
  • Arrow keys should cycle
  • Roles;  tabpanel, tablist, tab
  • States:  aria-selected
  • Properties:  aria-controls
  • Bootstrap (core) tabs:  arrow keys don’t work.  ARIA roles are done right, tabpanel is there, list of tabs is there,   Color contrast is also missing.
  • Angular.js:  doesn’t come with any built-in widgets, you rely on material design.  Documentation isn’t there.  Arrow navigation works, but it doesn’t cycle around.  Does not activate tab when selected.
  • JQuery Mobile:  was perfect…nailed it!
  • Foundation:  has NO focus indications, but basic keyboard interaction is there (a little pointless if you can’t see where you are.  Also, you need to press enter to activate tab.

Dialogs

  • Keyboard interaction, focus indication, color contrast, ARIA roles
  • Tabs should remain within the dialog itself, esc is expected to dismiss dialog, enter should submit the form.
  • Roles:  dialog, alertdialog
  • Properties:  aria-label, aria-labelledby
  • Foundation:  has a big note at the bottom that it is not accessible.  No roles assigned, tabbing doesn’t make it into the dialog.

Solutions

  • Forms:  explicitly associate labels with inputs, group related fields with fieldset/legend, convey error state and description (each framework has classes to handle this)
  • Tabs:  use PayPal accessibility plug-in
  • Dialogs:  this is where I had to do the most work.  Cycle focus within dialog, focus should return to trigger
  • Body content should also wrap

 Future of Frameworks

  • None of the material design widgets will be released unless they are fully accessible
  • Foundation is starting from scratch, specifically for accessibility v 6 should be available in June
  • Next version of bootstrap is being refactored (Patrick Lauke from TPG is reworking this personally.)
  • Anything you can do to help is greatly appreciated!

 

Categories
Accessibility Technology

Revised Maturity Model: Case Study of the CIA

Presenter:  Benjamin Wilson from the CIA

This was my sixth session at the CSUN conference on Thursday, March 5.  I don’t think I’ve heard about a maturity model in the accessibility arena yet (they’re fairly common in IT), so I expect this presentation to be educational.  Frankly, I’m a little surprised there are so few people in this session.

Comes to this from a project management, change management and IT perspective.

Why is the CIA Here?

  • Primary goal of the agency is to provide as objective a perspective of the world as we can.  We try to avoid groupthink as much as possible.
  • Goal:  we want to be the Employer of Choice in the Intelligence Community for People with Disabilities
  • Goal:  employees with Disabilities have Independent Access to the information and data needed to accomplish their mission.

It takes 10 years to make culture change, and you should always consider that you’re in year 5

What is a Maturity Model?

Change Management

  • Management:  is there managerial buy-in and commitment to accessibility?
  • Pervasiveness:  how thorough is accessibility being applied in the organization?
  • Competency:  is workforce seeking competency in accessibility and disability awareness?
  • Adoption:  is the workforce actively adopting common tools and solutions?
  • Socialization:  is there employee buy-in and commitment to accessibility?

Capacity Levels in CMM

  • Incomplete > Performed > Managed > Defined

Business Drivers to Change Management

  • Senior commitment
  • Understanding
  • Awareness
  • Stakeholder engagement

2014 Accomplishments

  • CIA Accessibility program chartered
  • New accessibility policy
  • Leadership outreach (CIO annual conference, vendor’s quarterly, DAAC 2014)
  • Piloting processes
  • Communication

Standards & Guidance

  • Organization Process Definition
  • Organizational Training:  AT demos, disability awareness, developer training, IT support training
  • CIA Accessibility Standards:  WCAG 2.0 AA
  • Risk management for remediation:  scoring of applications on a Likert scale of 1-5; a 4.4 indicates a functional level of accessibility.

Programmatics – Key Process Areas

  • Organizational Process Performance
  • Organizational Performance Management
  • Risk Management
  • Acquisition:  vendor self-assess, agency audit contenders
  • Development:  self-assess, report, selective audit
  • Service Delivery
  • Annual report to executive director
  • Business process studies:  2013 accessibility, 2014 improvement of RAS

Acquisition/Development/Service Delivery

  • Objectively evaluate processes and work products
  • Provide Objective Insight

 

 

 

Categories
Accessibility Technology

Accessibility in an Agile World

Presenters:  Jesse Hausler and Cordelia McGee-Tubb from Salesforce.com @jessehausler@cordeliadillon

This was my fifth session at the CSUN conference on Thursday, March 5.   Interested in this session because of my home institution’s use of Oracle/PeopleSoft, and I expect this session may provide an interesting counterpoint to that platform.

How Agile Fails Accessibility

  • Decentralized product ownership
  • Teams control their own backlog
  • Balance: bugs/accessibility
  • Balance:  feature enhancement / Enhancements
  • Separate accessibility features; mountain of accessibility debt
  • Unless a proper system is put in place, accessibility – under agile – will always take a back seat to the creation of new features

Executive Support

  • “The email” is not the solution.  It can’t do the work that needs to be done.
  • Executives remove blockers and help us build an environment in which accessibility can thrive

Building the Environment – Culture

  • Gain allies and raise awareness.
  • Build the base of passionate people.
  • Spread knowledge about accessibility
  • Build empathy through examples
  • Frame accessibility through your company’s core mission
  • Make it contagious (get other people talking about it)
  • Embed on a scrum team:  teach how to ship accessible features, learn at a micro level how agile works at your company.
  • Knowledge of your company’s brand of agile
  • Success building an accessible feature
  • Prove to the team that it’s not a big hurdle
  • Allies in UX, scrum leadership, development, and quality
  • Path to embed on another, larger, more influential team
  • Create an award that recognizes excellence; publicize winners, generate incentive to build accessible

Tools

  • Create reusable components:  use your contacts to join the appropriate scrum team, guide them toward the development of accessible components
  • 3rd party components:  know which ones are used, gauge level of accessibility, catalogue functionally equivalent alternatives for inaccessible ones, work with stakeholders to enlist accessible alternatives
  • Grassroots marketing campaign:  dropdown / throwdown poster was a classic (lots of great comics in this preso)
  • Take advantage of redesigns:  product redesigns are common, be prepared with a set of accessible, reusable components, beware of redesigns (they could pull out good stuff)
  • Testing Framework
  • Quality Engineering does not normally include accessibility as a traditional part of quality testing.
  • Automation is key to accessibility; build test automation that is specific to your environment.  Opt everyone in, automatically issue test failures where possible, test for patterns that indicate accessibility bugs, perform manual spot checks, track everything.
  • DOM test the simple things (WAVE-testable stuff)

Process

  • How does your company implement a new process?
  • Develop a plan:  problem statement, teams/groups impacted, proposal detail, tracking / success metrics, exception policy, release sign-off process, communication plan
  • Get an executive sponsor:  their main job is to believe in your idea.
  • Example meta process:  define problem > ID impacted parties > engage forum (present proposal, gather feedback) > go/no-go > re-socialize revised proposal, get alignment, final buy-in > go/no-go > visibility to executives > communication and rollout

Summary

  • Cultivate Support
  • Provide Good components
  • Leverage your test framework
  • Institute process change
  • Keep it going

 

Categories
Accessibility Technology

Web Compliance Evaluation Strategies – All In One

Presenters:  Susan Cullen, Alen Davoodian, and Duc Ta from CSUN

This was my third presentation at the CSUN conference on Thursday, March 5.  I happen to work with these fine folks every day at CSUN, so I have a pretty good idea of what they’re going to talk about.  OK, I’ll admit that I’m a bit of a cheerleader 🙂

The CSUN Universal Design Center

  • Based at the CSUN conference, works for the entire California State University system
  • Technology should be usable to everyone regardless of their ability.
  • Build cultural support across the campus
  • Integrates accessibility knowledge into the expected skill set of staff; accessibility is a shared campus responsibility
  • Technology should require the lease amount of effort for users.  Don’t assume they will all engage technology in the same way.

Developing Sound Strategies for Evaluation Methods can be Challenging

  • Scope of work – client eval services cycle:  goals of page or apps defined > Cases functional goals defined > Time analysis and management > resource allocation > define deficiencies > evaluation report delivery > provide coding solutions or training as needed
  • Working with people of different responsibilities and abilities to deliver the most usable solution we can offer

Tools We Use

  • Firebug, WAVE toolbar, color contrast analyzer, Juicy Studio, Grayscale, Web Dev extensions, compliance sheriff, accessibility evaluation toolbar
  • The way you deploy an enterprise tool like Compliance Sheriff is very important

Evaluation Protocols for Compliance & Usability Testing

  • Level 1:  VPAT review, consider campus or system-wide impact of the product, share VPAT back to vendor
  • Level 2:  Limited criteria validation, web form app review, basic web page semantics, run CS scan on some checkpoints, provide recommendations
  • Level 3:  the “deep dive,” criteria validation based on CSU ATI requirements and full UDC testing, comprehensive testing, apps have coding that requires additional research and iterative testing, provide actual coding or workarounds for end users.
  • In short:  VPAT Checking > Spot Checking > Special Element Testing > Comprehensive
  • We categorized evaluation categories

High Impact Errors We See Frequently

  • Web forms
  • Drop-down nav
  • User interface, flow of navigation and error message handling
  • Misaligned tab order based on page function
  • Tables for layout that do not linearize
  • Lack of proper data tables markup
  • Lack of alt description of meaningful images
  • Drop-down “mega menu” and accordion controls within the Drupal CMS that CSUN uses
  • Inconsistent error handling

Executive Level Support

  • You have to have high-level institutional support
  • Band together with other campuses if you’re lucky enough to be a part of a state system and share your resources!

Compliance Sheriff Planning and Training

  1. CS campus management and distribution
  2. Campus periodic scans and reports
  3. Campus training procedure (beginner, intermediate, advanced)
  4. Campus web accessibility training procedure overview
  5. Deputy overview and announcement
  6. Departmental designees

Design Accessibility and Usability into your business processes

 

Categories
Accessibility Technology

Scaling Web Accessibility from Specialist Niche to Business-as-Usual

Presenter:  Jonathan Hassell from Hassell Inclusion

@jonhassell

This was my second session at the CSUN conference on Thursday, March 5.  Jonathan spent some time talking about himself and his many awards and accomplishments, notably the UK accessibility standards, BS8878.  People in attendance received a copy of the first chapter of his new book, which is on sale for $50 here at the conference.  http://openinclusion.com/book

The Good News:  You’re in Demand

  • Large companies are taking accessibility seriously and are having trouble finding the right people to hire
  • Companies are looking for people “with the right skill sets”

What are the right skill sets?  What to do?

  • Technologies of course (WCAG 2.0, WAI-ARIA, etc.)
  • But the bad news is that nobody makes it on their own
  • You spent time learning good stuff, brought value to the organization, but maybe you’re not having the impact you want to have.  What to do?
  • Engage everybody in your organization.  You have to build the internal ecosystem.
  • Doing it all yourself will burn you out, which is bad for you and your organization
  • Know how to make collaboration successful
  • Prepare for your exit – the organization must be able to succeed without you

Expand

  • What is it that YOU want?
  • Who needs to be motivated for you to get what you want?
  • How will you convince them to spend time on accessibility rather than something else?
  • Convert the guy at the top, or everyone
  • Winning is good
  • Choose your emphasis depending on what your organization does
  • Work out what to say to who

Embed

  • Do staff and policies facilitate or inhibit accessibility?
  • You need strategy people batting for you, and they need to be effective delegators
  • Who is responsible for accessibility?
  • Split responsibilities up by job roles
  • Train people for their responsibilities, not everyone else’s
  • Train for things that don’t change, outsource advice on edge cases
  • Keep QA in-house, use external auditors
  • Don’t get too dependent on externals
  • Organizational web accessibility policy should be part-and-parcel of key policies (not it’s own standalone document – which nobody will read anyway)
  • Start with what is most strategically valuable
  • Governance needs to apply to all channels that you’re using
  • Categorize what’s most important to you and your users; how easy will it be to make them accessible.  Concentrate on enablers and pillars.
  • Be relaxed with innovators
  • Benchmark:  where you are, where you want to be, costs/benefits of getting there.  Where will you get the most value for money

Enable

  • Fix problems in your process; compliance is not sustainable!
  • Process needs to allow you to efficiently deliver product; also needs to be flexible, cost efficient
  • Effort and testing are often overlooked/underestimated in planning

Effect

  • Keep things going by capturing ROI
  • Leave a legacy by proving the worth of the work
  • Difficult to prove the value of the premium until you file a claim
  • Get good press coverage, it’s worth a LOT
  • Ability to recruit a diverse work force
  • Minimize customer complaints (make evangelists, not complainants)
  • Start counting:  analytics matters!

 

 

%d bloggers like this: