Apply for the next session

Reading screens with VoiceOver

Last updated: April 20, 2023

OK! It’s time to start learning how to use a screen reader.

We’ll warn you that it can be very frustrating for some people. Take it slow. We’ll introduce a few features at a time.

If you haven't read / watched these yet

We suggest you do! TetraLogical are the experts and these resources are wonderful.

They keys we'll be using

And we’re specifically using a Mac and VoiceOver and Safari.

VoiceOver 101

Link to that page.

If you haven't gotten the code ...

That’s OK! Just try out the VoiceOver! There’s plenty of time to learn about HTML and CSS.

Styling things when they are in focus - or they contain things that are in focus

  1. HTML element

    element:focus {

}

  2. HTML element

    element:focus-within {

}

Live example

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Click on the CodePen viewport output and navigate the page with tab and shift+tab to see the focus styles.

Note that each browser implements these default styles differently, just like they handle visual form interfaces.
Apply for the next session