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
Copy of Copy of Uncharted Territory
By Madalyn Parker
