Uncharted Territory

Using aXe to Forge a Path

Madalyn Parker

0: The Wanderer

Madalyn Parker

Why Accessibility?

@madalynrose

Laws

Statistics

$$$

Code Quality

 

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

<

@madalynrose

@madalynrose

10 of Bows: Responsibility

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

✨RULES✨

@madalynrose

✨RULES✨

@madalynrose

Page of Stones: Lynx

7: The Archer

@madalynrose

🌾 Resources ⛏

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

@madalynrose

📌 Scoping 📏

Which part of your application do you start with?

Start Small

What could benefit the most?

What has the furthest reach?

 

@madalynrose

17: The Pole Star

@madalynrose

Deque Systems

@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

15: The Guardian

@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

2: The Seer

@madalynrose

Pruning

What can go?

@madalynrose

New Trails

@madalynrose

Adjusting Focus

@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

@madalynrose

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 🌈

@madalynrose

🌈 USABILITY 🌈

@madalynrose

21: The World Tree

Thanks

@madalynrose

Resources

@madalynrose

Made with Slides.com