Interactive Content and Keyboard Accessibility
| Site: | IDWerkz Resources |
| Course: | Keyboard Navigation |
| Book: | Interactive Content and Keyboard Accessibility |
| Printed by: | Guest user |
| Date: | Monday, 29 September 2025, 4:13 AM |
Description
We are blessed with many different types of interactive content which can be keyboard accessible.
1. Links
Arguably one of the most commonly used interactive elements of HTML.
Link is the abbreviated form of "Hyperlink", an interactive anchor which loads a new context into the browser, typically a new HTML file, but not always...
A list of links:
- Link the First (Set an ID to "not myself")
- Link the second (see if a link to "self" will be self-referential or not...)
- Link the Third (set it to activate a div with message "You've touched me!")
- Link the Fourth - a real dud, it goes nowhere
- The imposter - styled to look like a link, but it isn't really. Just looks like one...
<an image of a chain>
<a div with the target ID for Link the Third - set focus for this style to include a background image if possible>
2. Menus
Menus make the world go around - the World Wide Web, that is!
3. Text Input Fields
One of our most useful form fields, the often overlooked and under-appreciated, but never, ever, forgotten element, the family of Text Input Fields.
4. Buttons
Seems like everybody loves a good button. I've been led to believe they are a standard for cuteness...
5. Checkboxes
If you have a long list of things to keep track of, Checkboxes are very useful. Make sure you can review the state of the checkbox without "checking" or "unchecking" it at the same time.
6. Radio Buttons
When you need a singular choice to be made from a group of options, Radio Buttons should be your go-to solution. Unlike a quantum experiment, you should be able to review the state of a Radio Button without affecting its state of being.
7. Dialogs & Modals
Who doesn't love a big pop-up window?
Most people.
Still they persist, and so we must deal with them...
8. Expandable Definition Lists
An under-utilized and under-understood element of HTML that is frankly pretty nifty...
9. Date Pickers
One of our favorite widgets, making appearances in all of our favorite browsers. Make sure your styling doesn't interfere with the default settings of your audience browsers...
10. Color Pickers
Have you ever heard that accessibility means boring and no color? That's a complete and total lie!
Pick all the wonderful colors you want, and be FABULOUS!
11. Range Sliders
OK, you probably call it a volume thingy, but it is technically called a range slider, as in it is a sliding widget that corresponds to a range represented by the extents of the sliding area.
How can such a simple idea be so damned complicated to explain?
SMH...
12. Image Hotspots
OK, I usually don't associate with people who use image hotspots (or accessibility overlays), but for the sake of completeness, we will cover them here...