Quiz
- How should we display content off-screen in a way that would still be accessible to screen readers?
Great question! This is a tough one, with answers that keep changing. Here's a useful reference: hidden content
Note that there are things we want visually hidden but not hidden from the screen reader, such as "skip to content" links.
There are also things we want hidden from both, such as templates, modals, dropdown menus, and the like.
- Could you explain more on what :focus does / what does it mean for a link to be in focus?
Another good question. Think about when you have two applications up and visible on your screen, say a browser and MS Word. If your typed content goes to MS Word, then MS Word is in focus. To switch focus, you typically have to click on the other app or control-tab to it.
Similarly in a web page, if there's a form with several inputs: name, address, city, state, and typed input goes to "address", then the "address" element is in focus.
Finally, if a hyperlink is "in focus", then (typically) hitting the "enter" or "return" key will be the same as clicking on that link. You can usually tab to the next hyperlink.