There's more to performance than meets the eye: transcripts

Léonie Watson

There's more to performance than meets the eye

A11yClub, Berlin November 2018

Léonie Watson

Screen reader demo: text

Screen reader:
"Heading Level 1. using the aria-current attribute.
Posted in, Link, Code things.
On January 14th 2017.
It is common on the web for the current thing in a collection to be highlighted visually, but providing an alternative for screen reader users has often involved something of a hack. The aria-current attribute is intended to solve this problem."

Screen reader demo: language

Screen reader [English accent]:
"l'eau monte au fur et à measure de la fonte des neiges."

Screen reader [French accent]:
"l'eau monte au fur et à measure de la fonte des neiges."

Screen reader demo: headings

Screen reader:
"Tink. Heading level 1.
Regaining sight. Headling level 2. Link.
Playing with the Accessibility Object Model (AOM). Heading level 2. Link.
Accessible SVG line gaphs. Heading level 2. Link."

Screen reader demo: buttons

Screen reader:
"Categories. Button. Collapsed.
Tags. Button. Collapsed.
Other blogs. Button. Collapsed.
Conferences. Button. Collapsed."

Screen reader demo: details & summary elements

Screen reader:
"Tequila... Button, collapsed.
Enter.
Tequila... Button, expanded.
Makes me happy!"

Chrome: screen reader TTI

Screen reader:
"Enter.
Accessible Rich Internet Applications (ARIA) 1.1.
[4 second pause]
2 regions.
288 headings.
4949 links."

Screen reader demo: selecting content

Screen reader:
"Selected. Heading level 2. Link. Regaining sight?
Selected. Space.
Selected. Posted in.
Selected. Real life.
Selected. ONOCTOBER 12TH 2017.
Selected. Space.
Selected. People often assume I would jump at the chance to be able to see again..."

Screen reader demo: select using placeholders

Screen reader:
"Temporary place marker set. Regaining sight article.
Regaining sight article end.
Space.
Selecting between marked place and current position."

Screen reader demo: searching with UIA

Screen reader:
"Jaws find dialogue.
Find what? Edit combo.
'Right here'. Alt plus w.
Enter.
Example Microsoft Edge.
Screen find result. Dialogue.
Search string not found.
OK. Button."

Screen reader demo: Because human performance

Screen reader [Approx. 600 WPM]:
"Heading Level 1. using the aria-current attribute.
Posted in, Link, Code things.
On January 14th 2017.
It is common on the web for the current thing in a collection to be highlighted visually, but providing an alternative for screen reader users has often involved something of a hack. The aria-current attribute is intended to solve this problem."