My notes from Environments for Humans A11y Summit 4. http://environmentsforhumans.com/2013/accessibility-summit/

01 A11y Prioritization.md

2013-09-10 10:00EDT - A11y Prioritization

"What should I fix first?"

Glenda Sims @goodwitch Slides at http://is.gd/mWBQ3G

Define the finish line

• What is your standard?
  • Best practice
  • WCAG2 AA
  • etc…
• E.g.: WCAG2
  • Main points = Normative = absolutely required for conformance ("success criteria")
  • Techniques = informative (non-normative) = not required for conformance ("best practices")
• Once you have chosen a standard, you know the finish line

Strategic A11y prioritization

• Layer 1: Matrix of user impact vs. litigation risk
  • User impact:
    • Core = unavailability is unacceptable
    • Important = unavailability is very frustrating
    • Useful = unavailability is frustrating
    • Fluff = unavailability is annoying
  • Litigation risk: (Glenda's weighting from experience)
    • Laws = Doing business in a country with specific laws on web a11y (60%)
    • Critical service = If service was unavailable on web for all users, it would be unacceptable; therefore, unacceptable for service to be inaccessible to people w/disabilities (30%)
    • Audience / Exposure = NUmber of people who have access to the service (10%)
  • Consider: What if you had to explain your prioritization to a judge? Would you feel embarrassed?
  • Consider: How would you feel if you didn't have access?
• Layer 2: Matrix of Life cycle and Effort
  • Product life cycle:
    • Introduction
    • Growth
    • Maturity
    • Decline
  • Effort to remediate:
    • $ = Low cost
    • $$ = Medium
    • $$$ = High
    • $$$$ = Very high

Site-wide a11y tactics

1. Fix a11y problems in your templates
2. Fix a11y problems in your components (widgets)
3. Critical pages:
   • Key entry points
   • Key user paths
   • Highest traffic pages
   • The obvious:
     • Feedback forms
     • A11y policy page

How?

• Do I have to fix every issue on every page?
  • You should. It might take some time, which is why we made our strategic plan.
• Should I attack this page by page, or issue-category by issue-category?
  • Do what feels right, but Glenda is inspired by thinking about the people with disabilities first, and the volume by which it's occurring.
• Should I fix every issue on the page I'm working on now?
  • I can't make the deadline if I do!
  • Non-coders want you to fix everything. Coders often can't do it.
  • You may have to prioritize, even within that page.
• Fix everything possible
• Remove / archive the rest

Tools

• WorldSpace Sync scan.
  • Helps to sort issues.

Priorities

• Critical = brick wall. Until this is fixed, there are significant barriers for a person with a disability
• Serious = very important error. It would be very frustrating to encounter, and might prevent people from using the page
• Moderate = error. Would be frustrating to encounter, but would not prevent people from using the page (might, however, make them decide to no-longer use your site or service)
• Minor = technically an error, but unlikely to cause problems. Should be resolved to fully comply with standard.

Practice laps

• Select developer team, pair with a11y expert
• Plan - select 1-3 pages to make accessible
• Train - focussed developer a11y training
• Equip - give them a11y testing tools
• Initial assessment - provide expert assessment and remediation recommendations report to team. Team should review and interpret results with assistance as needed from a11y expert
• Remediate - pilot team prioritizes a11y issues, fixes issues and retests. Assistance as needed from a11y expert.

02 A11y is a design problem.md

2013-09-10 11:00 EDT - A11y is a design problem

Whitney Quesenbery @whitneyq Slides: http://is.gd/Ow0Yni

WHO definition of disability (International Classification of Functioning)

The outcome of the interaction between a person with an impairment and the environment and attitudinal barriers she/he may face.

People first

Example people:

• Carol - needs large print, large buttons
• Jacob - blind
• Lea - fatigue (uses headset + mic to reduce eye, hand movement)
• Emily - wheelchair, service dog
• Steven - deaf
• Maria - bilingual
• Trevor - autism, but needs fewer distractions
• Vishnu - glaucoma, needs large print, zoom text

Clear purpose

Well-defined goals.

"Design for mobile first because mobile forces you to focus"

Design for diversity in interaction styles - think outside the mouse!

Solid structure

Built to standards

Easy interaction

Everything works

• E.g.: Amtrack kiosk.
  • Plug for headsets
  • Tactile keypad

Helpful way-finding

Guides users.

• E.g.: Mapping programs have two modes of displaying information: text directions and map.

• Identify the areas of a page visually and in code.

  • If you can't identify which portions of a page are for what, you're doing it wrong.
  • Even complex pages work with good signposting
    • E.g.: not great solution but one that works was a large number of skip links

Clean presentation

Supports meaning

• E.g.: drug bottles - colours of bottles differ by patient; drug name, patient's name in big letters

• Learn to recognize good contrast so it becomes part of your design palette

Plain language

Creates a conversation

• E.g.: screening test for colon cancer

  • Clear summary
  • States risk in text and visually
  • Invites action with 3 tips to lower your risk and praising you for what you're doing already.

• People read with different levels of literacy

  • In the US, about:
    • 14% (30 million) = below basic literacy
    • 29% (63 million) = basic
    • 44% (95 million) = intermediate
    • 13% (28 million) = proficient

• Support different reading styles and perceptions

  • Good title
  • Clear summary
  • Visual information (graph)
  • Data in a table

Accessible media

• e.g.: stop signs: in pretty much every country they're a red octagon with white text.
• Meaningful alternatives for visual information
  • What's the right alt text for a picture
    • Depends on the content… e.g.:
      • Fox
      • Red fox (contrasting to a grey fox in another picture)
      • Red fox standing on a pile of rocks looking back at the camera (geological article)
      • Red fox at sachets point national wildlife refuge (wildlife article)

Universal usability

Create flow and delight

• E.g.: simple.com - entire process was designed to be easy to do at one time

Ideas

• Include people with disabilities in your design process
• Have a new perspective
  • Why can't all voting systems be accessible?
  • Why can't artificial legs be part of fashion?

Misc

• Centre for plain language

03 Accessible DOM Scripting.md

Accessible DOM scripting with ARIA

Leonie Watson @leoniewatson Slides at: http://is.gd/aapBVW

Anatomy of a RIA

• Controls and widgets
  • Control = single point of interaction (button, input field) ("widget" in ARIA documentation)
  • Widget = composite of multiple controls (slider, accordion, modal dialog) ("composite widget" in ARIA documentation)
• Application
  • Web application that shares characteristics with desktop apps

First principles

• Perceivable = know that it's there
  • Dynamic changes must be communicated to assistive technologies
• Operable = be possible to interact with it
  • Keyboard-accessible deserves the most consideration for a11y
• Understandable = user must understand what it is they're dealing with
  • Properly labelled and described elements
• Robust
  • Backwards and forwards compatibility

Web A11y Stack

Layers:

1. Assistive technology (e.g.: VoiceOver, may interact with DOM)
2. A11y API
3. ARIA (way for authors to extend information available in DOM)
4. DOM (representation of objects in page)

Understanding the stack

poor example:

<img onclick="doSomething()" onkeypress="doSomething()" src="button.gif" alt="accept" />

… it's pretty obvious to coders that this is a button, but a screenreader would just see an image.

good example:

<img role="button" src="button.gif" alt="accept" onclick="doSomething()" onkeypress="doSomething()" tabindex="0" />

Best practices

• Use native HTML elements when they exist, but don't override native semantics
• Make controls and widgets focus sable (use tabindex)
  • Elements with tabindex=0 are part of the natural tab sequence.
  • Elements with tabindex=-1 are not part of the natural tab sequence, but are focusable with scripting.
  • Elements with tabindex=>0 are never a good idea!
• Make the control/widget in focus visible

Providing keyboard a11y

• Use appropriate event handlers (use onclick and onkeypress together)
• Don't cause keyboard traps!
  • Don't call focus back to the field if the data is incorrect
  • Don't like the keyboard focus indicator
  • Don't change context (redirect page, etc) on focus
• Handling (composite) widget focus
  • Give widgets a single tab stop, and other keys are used to interact with the widget itself
  • Scripting should provide additional focus
  • e.g.: tab widget; once tabbed to, arrow keys change between tabs
  • use Javascript to handle child focus
    • Set tab index of child elements to -1
    • as user moves to another child, update tab index for previous and current children accordingly
    • use element.focus()
  • use ARIA to handle child focus
    • set the tab index of the parent element to 0 and it's aria-activedescendant property to the ID of the currently active child
    • As the user moves to another child, update the aria-activedescendant property accordingly
    • put key handler on parent
  • Put the key handler not he parent element
    • captures the keystrokes, determines which element takes focus next, updates the aria-activedescendant property
• Use the scrollintoview() command
• Provide keyboard shortcuts
  • Don't enable shortcuts by default
    • Many assistive technologies are controlled with native shortcuts
    • Let people with assistive technologies turn them on and off
    • Custom shortcuts should be clearly defined.
      • Question mark is convention for talking about keyboard shortcuts
  • Cancel or swallow keyboard events - prevent the key from executing an action outside of the widget or web application unless focus is on a form field

Dynamically updating content

• Use CSS when the content makes sense as part of the page, not when it's dependent on a certain action
• Injecting content into the DOM = use innerHTML
• Expandable content = use aria-expanded
• Live region updates = use aria-live and aria-atomic
  • aria-live = region where changes to DOM is monitored (off = default, polite = wait until done to notify of change, assertive = immediately announce change)
  • aria-atomic = when any part of the inner DOM changes, read all of it.

(got kicked out of room; missed a bunch of stuff; please see slides)

04 Usability and A11y CSS Gotchas.md

2013-09-10 14:00EDT - Usability and A11y CSS Gotchas

Dennis Lembree @dennisl Slides at: http://is.gd/CKg75Y

Link outline

(e.g.: outline: 0;)

• Link outline indicates a visually-focussed element
• Don't remove the outline!
  • Crucial for sighted users to navigate
  • Why is problem so widespread? CSS Resets

Hiding content

(e.g.: display: none;)

• Goal of hiding content visually but provide to screen reader users
• Do not use display: none as it will hide content for all users.
• CSS clip method is usually the best method to hide content visually
• Use discretion when hiding content for screen-reader users.
  • Labelling a form element that has meaning conveyed visually (e.g.: search). Alternative is aria-label attribute.
  • Hiding skip-to links when not focussed
• Methods for hiding content visually (but keeping it available to screen readers):
  • Position it offscreen (left: -9999em; position: absolute;)
  • Clip it (clip: rect(1px, 1px, 1px, 1px); position: absolute;)

Hiding content with transitions

• CSS transitions and animations which hide content - be careful
• Using a height of 0 alone doesn't hide content to screen-reader users.
• The solution is to add visibility: hidden;.
• Also use aria-expanded.
• Or, add display: none when the animation ends.

CSS-generated content

(e.g.: h1:before { content: "Chapter: "; } )

• Be very cautious when creating content with CSS
• Content from :before and :after pseudo-elements are not accessible with some screen readers and IE < 8
• Latest VoiceOver and NVDA+Firefox supports :before and :after, but no assistive technology supports CSS counters (as far as Dennis knows)!
• Besides A11y,
  • Bad for progressive enhancement / separation of content from presentation
  • Not translatable
  • Could be maintenance issue.
• Don't use with counters!
• Quotes and colons are okay
• Clearfix and CSS shapes is okay

Using sprites

• Be careful!
  • When images are disabled, the sprite is not displayed!
  • When Windows is in high contrast mode, the sprit is not displayed!
  • There is a Javascript Polyfill
  • Certain sprite generators don't provide textual content!
    • So just clip the content or move it away

Text size / readability

(e.g; font-size: 10px; line-height: 11px;)

• Small text is bad
  • Recommend minimum font size of 14px
  • Recommend body copy of 16px or more (anything less is a costly mistake)
  • Many users don't know how to page zoom or resize text
  • IE still doesn't resize text set in fixed value
• Readability design tips:
  • Medium weight font
  • Ample line height (1.2-1.5)
  • Medium line length (50-65 characters)
  • Ample white space and margins
  • Avoid centering blocks of text
  • Avoid justified text
  • Sufficient color contrast
• Readability content tips:
  • Use headings and lists
  • Supplement with images
  • Clear and simple language

Text links

(e.g.: #main a { text-decoration: none })

• User must be able to visually determine linked from regular text.
• Underline is the convention (don’t make me think).
• Strongly recommend not removing the link underline in main copy.
• Conversely, do not underline text that isn’t a link.
• Other options:
  • Custom underline
  • Dotted underline
  • Colour + bold
• Just be careful that it doesn't look like a heading

05 Implementing usable keyboard shortcuts.md

2013-09-10 15:00EDT - Implementing usable keyboard shortcuts

Jared Smith @jared_w_smith Slides at: http://is.gd/iAJN9s

• Keyboard user != Screen-reader user
• Screen-reader user (usually) == keyboard user

Keyboard a11y testing

• Pretty easy to do!
  • Tab -> forwards!
  • Shift-tab -> backwards!
  • Enter = activate!

Keyboard A11y is different when a screenreader is running

• They intercept most keyboard keys by default!
• Source-code order == Navigation order (and screen-reader reading order too)
• Navigation order:
  • Use CSS (float, position, etc.) to control position
  • Navigation order should follow visual flow
  • Be careful with "Content first" approach!
  • Design reading / navigation order early!
• Screen readers can navigate by:
  • Links and form controls
  • Headings
  • Landmarks
  • Lists
  • Forms
  • Buttons

Other tips

• Rather than a:hover, use a:hover, a:focus.
• "Skip" links
  • They're kinda hacky
• Use CSS3 transitions to enhance visibility
• ARIA landmark roles
  • Allow us to define major page areas
  • The end of skip links? But browser keyboard a11y still sucks
  • e.g.: <div role="navigation" aria-label="Main navigation">
  • e.g.: <div role="main">
  • e.g.: <form role="search">
  • You can add aria-label to differentiate multiple landmarks of the same type
  • Note that HTML5's new elements correspond with ARIA landmarks… But ARIA Support > HTML5 support, so use both for now. (e.g.: <main role="main">) Or, you can add a Javascript shim.
    • <main> = role="main"
    • <article> = role="article"
    • <footer> = role="contentinfo"
    • <header> = role="banner"
    • <nav> = role="navigation"
    • <aside> = role="complementary"
• Ensure interactive elements are links or form controls, or make non-focusable elements focusable with tabindex
• Be very careful with tabindex!
  • Make sure you know what you're doing.
  • If the default tab order is not logical, fix your source code order.
    • tabindex=">1" defines an explicit order. Avoid this.
    • tabindex="0" allows things besides links and form elements to receive keyboard focus
    • tabindex="-1" allows things besides links and form elements to receive programmatic focus (by scripting, links, etc.)
      • Necessary for focusing dialog boxes, error messages, etc.
      • Just be aware that it removes the element from the default tab order.
• Combine mouse (e.g. onmouseover) and keyboard (e.g.: onkeypress) event handlers
  • Click events don't always trigger via keyboard for things other than links or form controls, even with tabindex="0"
  • Attach an onkeyup event and then check for Enter (13) and Space (32) key presses.
• "Freak out mode" = when the currently-focused element disappears or is significantly modified
  • Avoid or address "freak out mode" with focus(); - put focus back onto the element that popped up the dialog.
• Carousels
  • Automated carousels violate WCAG 2.0 Success Criteria 2.2.2 (Level A) - pause, stop, hide
  • Distracting and confusing
  • Difficult interaction model
    • No relationship between controls and content
  • "Freak out mode" when carousel changes
  • Allow poor content decision
  • If you absolutely have to use one:
    • Avoid auto-playing (optimal) or include a visible paste button before the carousel
    • Pause carousel on mouse hover and keyboard focus
    • Provide context for control
      • Descriptive text
      • ARIA tab panel?
    • Ensure accessible content
    • Ensure focused or activated items do not disappear or set focus when they do
• Roving tabindex
  • Basically set tabindex=0 on currently-active item; tabindex=-1 on all other items; as the user navigates, change the tabindex attributes - e.g.: http://hanshillen.github.io/jqtest/#goto_tabs
  • http://hanshillen.github.io/jqtest/#goto_tabsdemo-1
    • Lets developers focus on semantics and let CSS do the heavy lifting
• Follow the ARIA design patterns for widget interaction.

06 You're doing it wrong.md

2013-09-10 16:00EDT — You're doing it wrong

Matt May @mattmay Slides at: http://is.gd/vYDqM8

• We (as a11y advocates) have an image problem
  • Our reputation (earned or not):
    • we demand too much
    • we offer too little
    • we underestimate the work involved
    • we make idle threats
  • When we say "x is not accessible", let's try to say,
    • To whom?
    • For what?
    • With what hardware / software?
    • What's the impact?
  • When we say "x is not accessible"…
    • … it's a judgement statement against someone …
    • … and possibly a claim that they have violated policy, law, civil rights.
    • This can ruin an advocacy opportunity!
• Advocacy is not combative!
  • About creating a positive method
  • About converting people to your cause.

07 A11y in Android 4.2.md

2013-09-11 10:03EDT A11y in Android 4.2+

Paul J Adam @pauljadam Slides at: http://pauljadam.com/androida11y

• Android has improved a number of things

Talkback

• "Talkback" is Android's voiceover.
  • It's got a lot of iOS features.
• "Explore by touch" is the Talkback user guide.
  • Recommend you go through this tutorial to learn to use it.

Magnification

• You can temporarily magnify, unlike iOS

Keyboards

• Unlike iOS, you can install different keyboard on Android. Some are good for limited-mobility needs.

Browser and Web View App A11y

• Follow WCAG 2 to make your apps accessible on Android.

Videos and captions

• Captions are not supported in the default video player of Android 4, but other video players are available.

Native app a11y

• Some features similar to iOS, but names are different…
  • android:contentDescription for ImageButton, ImageView, CheckBox and other UI controls
  • android:hint for EditText
  • You can also associate an android:hint with any icons used by controls that provide feedback to the user.
• But, there's a lot of stuff missing… in Paul's opinion, Android is lightyears behind iOS/VoiceOver.

Accessible browsers in iOS

Most accessible browsers…

1. Winner = Firefox!
2. Default browser
3. Chrome and Dolphin (buggy)

Device fragmentation

• Get your phone directly from Google if you want the latest system updates.

Talkback vs. Voiceover

• None of the default apps for Android are currently accessible!

08 Accesibility on a Budget.md

2013-09-11 11:00EDT Accessibility on a Budget

Sharron Rush @sharrush Slides at: http://is.gd/LG3GNZ

Accessible

• Our goal is to make it so that people with disabilities can…
  • Acquire the same information
  • Participate in the same activities
  • Be active producers as well as consumers

Steps to IT a11y

1. Listen to your stakeholders
2. Enlist an executive sponsor
   • If an executive officer understands how important a11y is, then they can make things a lot easier.
3. Where are we going?
   1. Choose / define the standard we want to meet.
      • This creates a shared understanding between everyone working on the project.
      • Four principles of accessibility (POUR):
        1. Content is Perceivable
        2. Content is Operable
        3. Content is Understandable
        4. Content is Robust
   2. Accept explicit policy.
      • Policy development:
        • Know who the policy is developed for and why
        • Identify stakeholders and their needs
        • Define scope - what will the policy apply to?
        • Choose an existing guideline or standard
        • Make the conformance level explicit.
        • Involve stakeholders to every extent possible.
      • Policy implementation:
        • Set milestones
        • Provide training
        • Create enforcement mechanisms
        • Include in specs, requirements
        • Define monitoring, conformance claims, follow-up process
        • Provide for integration (e.g.: within purchasing process)
        • Create policy review dates and procedure for revisions.
4. Where are we now?
   • Baseline assessment… figure out how far to our goal we are.
   • Enterprise testing tools can help prioritize.
5. Build and integrate teams.
   • We know where we're going and where we are, now how do we get there?
   • Find and empower champions
   • Build a game plan.
   • Suggest reading Accessibility Responsibility Breakdown.
6. Train to win.
   • Role-specific training is helpful
   • Maintain training resources
7. Integrate support structures
   • Establish coordination and communication plan
   • Get someone to track new developments in a11y practice
   • Sharron suggests publishing the policy widely.
8. Test, measure, report
   • Create a testing template
   • Create a reporting template
   • Frequent manual reviews help a lot.
9. Inclusive practice becomes integral.

09 The Mindfulness of Accessibility.md

2013-09-11 12:00EDT The Mindfulness of Accessibility

Elle Waters @Nethermind Slides at http://is.gd/DM3MgE

Matt note: This is an Excellent Presentation.

Rule 11

• Once Elle thinks something is accessible, she does it 11 more times…
  • Based on an experience with her father trying to enter 10 drugs into a healthcare application after a stroke

Age-related disabilities

• Visual
  • Glaucoma
  • Cataracts
  • Macular degeneration
  • Myopia
  • Hyperopia
  • Blindness
• Mobility
  • Arthritis
  • Muscular weakening
  • Bone frailty
  • Slower reflexes
  • Tremors
  • Fatigue
• Auditory
  • Partial hearing loss
  • Ringing in the ears
  • Inability to distinguish high-pitched noises
  • Inability to distinguish specific phonemes
  • Deafness
• Cognitive
  • Problem-solving
  • Attention
  • Confusion
  • Memory
  • Math comprehension
  • Visual comprehension
  • Reading, linguistic and verbal comprehension

Silver tsunami

• Baby-boomers are reaching retirement age
  • 1-in-5 Americans!
  • Baby boomers are more familiar with technology and less likely to blame themselves for bad UX
• Add global context to that mix

There are cultural impacts on a11y!

References: * Cross-Cultural Considerations for User Interface Design * See references in slides.

• Power distance
  • Authoritarian societies have a high power distance - prefer a restricted access to information.
    • e.g.: no forum, etc.
  • Low power distance
    • Austria
    • United States
  • High power distance
    • Saudi Arabia
• Collectivism vs. individualism
  • Degree to which individuals are integrated into groups
  • Low-individualism:
    • Ecuador
    • China
  • High-individuality:
    • United states
• Gender roles
  • Some activities are perceived more "masculine" / "feminine"
  • High gender role gap:
    • Japan
• Uncertainty avoidance
  • Tolerance for ambiguity and uncertainty
  • Low - don't go out of way to create strict rules; symbolic messages that can be interpreted in multiple ways
  • High - information hierarchy very tightly controlled
  • High uncertainty avoidance:
    • Belgium
• Term orientation
  • Long term = persistence, shame in culture, thinks in idealistic,
  • Short term = respect and tradition but reciprocity
  • Low long-term orientation
    • Phillipines
    • Taiwan
    • (Eastern philosophy)
• High context versus low context web design (see slides)

Culture impacts user expectations!

Example: McDonalds websites in different countries

• Top-left: India
  • Never lost - it's a really clear funnel
• Top-right: Pakistan
  • Clear menu structure
• Bottom-left: Germany
  • Short menu
  • See more content as you scroll
• Bottom-right: United states
  • "Scroll to explore"

How important is this for a11y?

• Internet growth in Africa, Middle East, Asia exceeded 1030%, 1176% and 363% respectively
• Also, the number of people with dementia is expected to reach nearly 120 million people in 2050, mostly in low and middle income countries.

What do I do?

1. Accept impermanence
   • People seldom transition suddenly into disabilities
   • We're never going to be able to say something is finished.
2. Break down the echo chamber
   • We miss out on a lot of opportunities if we don't take other people's cultures into account.
3. Integrate, don't decorate
4. Beware the seduction of certainty
   • When we put a stamp on something and say it's done, we end the conversation.
   • We should always be searching for the most-accessible interface, even if we've met the standard we want.
5. Practice design "wu"
   • Wu = "emptiness" = vessel that has yet to be filled
   • Is the definition of accessibility that everyone can use it? (i.e.: not that it meets a standard)

10 We know we need an A11y program but we have NO budget.md

2013-09-11 14:00EDT We know we need an A11y program but we have NO budget!

Sharron Rush @sharrush Slides at: http://is.gd/09E32S

• Remember, it's People First!

People

• Find out about how people with disabilities use the web:
  • Web A11y Initiative of the W3C (WAI)
  • University of Washington has do-IT program videos
  • Assistive tech demos on Youtube videos
  • AccessWorks

Policy

• It's important to develop a policy. You can:
  • WAI has resources on developing organizational policies
  • See policies made by universities (CSU), governments (Ontario), and companies (Southern California Edison)
  • Internal policy review by staff or retained legal counsel

Planning

• Resources:
  • WAI Implementation plan
  • WebAIM: The importance of planning for a11y, http://webaim.org/articles/implementation/plan
  • Hire a strategic planner
  • Book: "Strategic Accessibility, Enabling the Organization" by Jeff Kline.
• Integrate a11y into strategic planning process
  • The key is to get buy-in from all levels and roles

Process

• Resources:
  • WAI Training Resource Suite
  • WebAIM tutorials: they have lots of resources, including infographics
  • A11y camps
  • A11y internet rally (AIR) - annual accessible web design contest
  • In-person training:
    • AccessU
    • WebAIM does training
  • There are free procurement guides (PALM Initiative)
  • Test it!
  • Before and after demo: http://www.w3.org/WAI/demos/bad/

11 Accessible Video in the Enterprise.md

2013-09-11 15:00EDT Accessible Video in the Enterprise

Slides at: http://is.gd/Q5JuEH

Considerations

• Users start to give up on streaming video if it takes more than 2 seconds to load

1. Streaming
   • HTTP
     • asynchronous (really?)
   • RTSP
     • synchronous
     • Requires closed-source streaming media server
   • Adaptive Bit-rate - HTTP Live Streaming, Smooth Streaming, HTTP Dynamic Streaming
     • Bit rate, resolution can increase or decrease in real time to best possible quality given the network
   • Check out the media source extensions - allows JS to generate the media streams
2. Encoding
   • H.264
     • Considered to be the front-runner / industry standard
     • Licensed codec via MPEG LA - Royalty status remains vague
   • WebM
     • "Free" codec developed by Google
     • Royalty free for everyone
   • Ogg Theora
     • Open-source codec
     • Considered dated and support diminishing in favour of WebM
   • You pretty much have to encode things with both H.264 and WebM
3. Security
   • Script injections - many video controls and captions use some form of scripting
   • HTTP vs. HTTPS - video and all related assets (captions, etc.) are separate streams; all have to be delivered with same level of security.
4. A11y
   • W3C has produced a detailed list of all requirements various user groups would need for fill and complete access to videos: http://w3.org/WAI/PF/media-a11y-reqs/
   • At minimum, require accessible media controls, time-synchronzed captions, descriptive audio and full transcripts - WCAG 1.2.1 (A)!
     • Alternatives for prerecorded video
     • Captions
     • Audio description or media alternative

Definitions

• Captioning:
  • Closed captions = can be toggled
  • Open captions = remain on-screen for allurers
  • Captions capture onscreen dialog and basic sound effects (<<clapping>>, <<music>>, <<laughter>>)
    • Really useful resource for writing captions: Captioning Key
  • Caption formats:
    • TTML (Timed Text Markup Language)
      • XML based
    • WebVTT (Web Video Timed Text Format)
      • Text-based
      • Favoured by browser vendors
• Transcripts
  • Loosely defined
  • Generally are more complete than captions - include descriptions of charts or other video assets for example
  • Traditionally offered as a compelementary piece to the media asset (unlike captions which are delivered with the media)
  • Usually don't have timestamps
• Descriptive audio:
  • Supplemental audio track, provided on demand, which describes on-screen actions to the non-sighted
  • Specified as a WCAG requirement
  • Delivery technologies remain rudimentary, little practical support.

Conforming to WCAG 1.2.5 Audio Description

• At this time, delivering this AA requirement is very difficult; many entities are choosing to exclude this from success criteria (e.g.: Governments of Canada, Ontario and Quebec)

Production requirements

• Most-labour-intensive aspect is generating the text that represents the audio
• Support for closed captioning on mobile devices is practically non-existent.
  • We should provide open captions or transcripts of some kind.

Developments to watch

• A11yMetadata project - seeks to extend schema.org to address the a11y and discoverability of resources on the web
• Descriptive Video Exchange project - focuses on crowd-sourced techniques for describing DVD media
• Using HTML5 and JavaScript to Deliver Accessible Supplemental Materials - aims to demonstrate the inclusion of enhancements in ways that are both visual and non-visual, all of which are screen-reader accessible and delivered using HTML5, JS,the Popcorn.js HTML5 Media Framework.

12 Change is not a four-letter word.md

Change is not a four-letter word

Kimberly Blessing @obiwankimberly Slides at: http://is.gd/xBpRPV

Socio-dynamic theory: the theory of how and why new ideas and new technologies spread through culture.

Kimberly thinks that a11y as a concept is only really known by about 25% of the web professional population.

Change is often good!

We shouldn't be afraid of change, because we're good at adapting.