Uncharted Territory

Using aXe to Forge a Path

Madalyn Parker

@madalynrose

Why Accessibility?

@madalynrose

Laws

Statistics

$$$

Code Quality

 

Everyone should be able to use the web☝🏿☝🏻☝🏼☝🏾☝🏽

@madalynrose

<

What is Web Accessibility About?

@madalynrose

Before: following the map

  • Meeting Standards (WCAG 2.0)
    • dichotomy: either it's compliant or it isn't
  • WAI-ARIA (W3C)
  • Tab indexes
  • Working with every screen reader/OS/browser

@madalynrose

✨RULES✨

Packing for the Journey

@madalynrose

📌 Scoping 📏

Which part of your application do you start with?

Start Small

What could benefit the most?

What has the furthest reach?

 

@madalynrose

🌾 Resources ⛏

  • me
  • 1 month
  • browser audit tools
  • consultants
  • web a11y community
  • node modules
    • axe-core
    • react-a11y

@madalynrose

@madalynrose

Deque Systems

⚽️ Game Plan 📋

  • Get axe-core working with testing stack
  • Run test audits on all frontend components
  • Address audit results
  • Manual testing
  • Address results

@madalynrose

Clearing the Brush

@madalynrose

Running Tests With aXe

using axe.run

  • arguments
    • context (section of the DOM we are testing)
    • options
      • rules
      • selectors
    • callback
  • results
    • arrays of what passed and what didn't

@madalynrose

A11yHelper Setup/Cleanup

  //mount component properly
  mountForA11yTest: (component) =>
    dom = new DOMContext()
    doc = dom.getDocument()
    div = doc.createElement('div')
    doc.body.appendChild(div)

    wrapper = mount(component, { attachTo: div })

    return { wrapper: wrapper, div: div, dom: dom }

  //clean up after ourselves
  cleanUpA11yMount: (div, dom) =>
    dom.getDocument().body.removeChild(div)
    dom.destroy()

@madalynrose

A11yHelper Audit

  runAudit: (node, config) =>
    oldNode = global.Node
    global.Node = node.ownerDocument.defaultView.Node

    return new Promise((resolve, reject) =>
      axeCore.run(node, config, (err, results) =>
        global.Node = oldNode
        if err
          reject(err)
        else
          try
            assert.equal AxeCoreResults.hasViolations(results), false 
            assert.equal AxeCoreResults.getViolationsList(results).length, 0
            resolve()
          catch e
            reject(e)
      )
    )

@madalynrose

Testing Flow

/*
ImageComponent = ({ url, altText }) ->
    <img src={url} alt={altText} />
*/

describe '<ImageComponent />', =>
  it 'should have no accessibility errors', ->
    url = 'https://mywebsite.com/some/path/to/an/image.jpg'
    //return passesA11yTest(<ImageComponent url={url} altText={""}/>

@madalynrose

Success!

tests caught a lot of surface-level problems

@madalynrose

Logs and Boulders

@madalynrose

@madalynrose

What does the user need?

  • They need to know the chat box is there.

  • They need to know whether a person is available to chat or not.

  • They need to see the call to action text.

  • They need to know which messages in the chat belong to whom.

  • They need to know when messages come in and what they say.

  • They need to be able to end the chat.

  • They need to be able to request a transcript of the chat.

  • They need to be able to leave feedback about their chat.

  • They need to be able to upload files.

  • They need to know if there are errors and what those errors are.

@madalynrose

Accessibility Gaps

  • Superfluous elements
  • Navigation
  • JS hidden elements
  • Live areas

@madalynrose

Building Something New

@madalynrose

Pruning

What can go?

@madalynrose

New Trails

Adjusting Focus

Turn-by-turn Directions

@madalynrose

@madalynrose

  <div
    aria-live="assertive"
    aria-atomic="true"
    role="alert"
    id={id}
    style={defaultStyles}>
    <p>{text}</p>
  </div>
  defaultStyles = {
    position: 'absolute',
    visibility: 'visible',
    overflow: 'hidden',
    display: 'block',
    width: '1px',
    height: '1px',
    margin: '-1px',
    border: '0',
    padding: '0',
    clip: 'rect(0px, 0px, 0px, 0px)',
    clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
    whiteSpace: 'nowrap'
  }

Olark's Announcer

Olark's Announcer

control region changes in state based on chat box focus

if(chat box is focused)

    add event to list of announcements

    join list of announcements with periods

    dump list of announcements into announcer

else

    # chat box will already play a notification
    # sound if it is not focused

    add event to list of announcements

@madalynrose

What is Web Accessibility About?

@madalynrose

📒RULES📒

@madalynrose

🌈USABILITY🌈

Thanks

Resources

Made with Slides.com