Under-Engineered Patterns for #a11yTOconf

The slides for my talk are available as a tagged PDF (5.2MB). Unlike the slides from my a11yTOgaming talk, I am not posting the PowerPoint file as my slides have been taken and passed off as others’ work before.

References

A heavily stylized and mostly inaccurate painterly view of the Toronto skyline in grays, blues, and highlights of magenta, with only the CN Tower somewhat correct.
The background for my opening slide is generated from Midjourney. I used the seed phrase Downtown Toronto city skyline in the rain, cyberpunk, synthwave ‐‐ar 16:9.

Videos

Videos I used in my talk which are not represented in the PDF.

Slide 27

On Android, with or without TalkBack running, the down-then-left gesture will close a native <select> (it mimics Android’s back soft-button). The same gesture on the custom control makes your browser go to the previous page.

Slide 28

On iPadOS and iOS with VoiceOver, the two-finger right-left-right gesture will close a native <select>. The same gesture on the custom control makes your browser go to the previous page.

Slide 69

We start with a scrolling set of checkboxes with a skip link. Add JavaScript and the skip link goes away as the set converts to a disclosure widget that shows a count of how many are checked. And it dismisses on Esc.

Slide 79

This video shows me tabbing to the table wrapper, which gives it focus, and then scrolling left and right.

Slide 81

At 0:03 I put focus on the scrolling area by tabbing to it, then I use the arrow keys to scroll left and right.

Slide 82

I spend the first two seconds trying to tab to the scrolling area with no luck. At 0:04 I type in the text box so you can see the text cursor indicator with its big purple ends. At 0:09 I press F7 to activate caret browsing and spend the rest of the video using arrow keys to move the text cursor. Notice how the down arrow moves within and then among cells, and notice how the entire cell does not scroll into view just because the text cursor is in it (evident at 0:32).

Slide 83

I spend the first 13 seconds trying to tab to the scrolling area or scroll it using arrows with no luck. At 0:13 I press F7 to confirm there is no caret navigation. At 0:21 I activate Mouse Keys by pressing five times. Then I hold down K to move the mouse pointer into the table and press I at 0:32. Then I use the arrow keys to scroll left and right.

Tweets

Tweets related to my talk or my tweets related to the event.

No comments? Be the first!

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>