Øredev 2023: Under-Engineered Patterns

Download a 2.6MB tagged PDF of my slides or try the embedded view if your browser displays PDF inline.

I was invited Malmö, Sweden to present two talks at Øredev. Well, they asked me to do one but then suggested that hey, since I’m already there and stuff, how about another.

Most of the text in the slides is set in Atkinson Hyperlegible, but the headings use Rubik Glitch to match the Øredev site. The slide backgrounds are also lifted from the Øredev site. For, um, consistency. Not at all because I’m lazy.

I use an iframe to embed the slides, but only after the user clicks to do so. Some users have their browser configured to download the slides, so this approach prevents them being pushed a 5MB file just from opening the page. If this is broken or problematic for you, then you should track me down at Øredev and let me know. Maybe not during my talk, though.

I do not make the PowerPoint file available because my slides have been taken and used by others before, and I believe they should have to exert at least some modicum of effort to steal from me.

This post holds the slides during my talk and the videos I didn’t embed in the PDF. Along with links, of course.

References

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.

Update: Video of My Talk

As of 22 January 2024, the video of my session has been posted to the Øredev 2023 playlist. My other session was recorded, but due to an issue with the audio will not be posted.