Personal Story:
The past few years I’ve felt lucky to learn from accessibility consultants hired by past clients, and seen and heard over Zoom how a blind user navigates elements on a page using a keyboard and screen reader technology.
Quite different from experiencing a visual design that relies on various techniques such as size, placement, color, contrast, font weights, bold/italics to create emphasis, contrast, depth, and connections and hierarchy, reading and navigating for assistive technology users who cannot see the design is a text-based, top-down approach with unique shortcuts and key commands that enable users to jump around in and skim through text the way a sighted reader might skim a designed page by darting their eyes around the page.
This experience is unique to users of this technology and uniquely suited to the world of web design in particular, since code and computers already rely on order, elements, and tags to make sense of content. Instead of through visual design, emphasis, connections, and hierarchy must be conveyed through the correct use of HTML elements, nesting, and other best practices.
Now grasping how text placed inside the wrong HTML elements or in a confusing structural hierarchy creates difficulty for someone navigating via computer, I’ve tried to bring that knowledge to this site and provide a less frustrating user experience for those users.
Accessibility Essentials:
This site incorporates accessibility best practices known to me at the time of development. These include general design best practices as well as those specific to users of screen reader software:
- Using H tags and HTML text for page titles (not header images)
- Using H tags nested where text follows a logical nesting that needs to be understood
- Placing body text inside P tags (avoiding spans)
- Coding bullets as list items
- Emphasizing text with brackets or asterisks in addition to italics or bold
- Color contrast check (WCAG)
- Selecting web fonts with an x height appropriate for digital design
- Specifying body text in ems (which honors user’s browser preference for base font size, and all other sizes being relative to this)
- Alt text on images essential to understanding the text or to describe complicated layouts (ie: non-artifacts)
- ARIA attributes on external link icons
Tools Used:
Accessibility Checker – Color Contrast for WCAG: https://www.accessibilitychecker.org/color-contrast-checker
Equalize Digital Accessibility Checker Plugin: https://equalizedigital.com/accessibility-checker/
Feedback:
As technology and web standards evolve at a rapid pace, please contact me
- if a user of assistive technologies is experiencing any difficulties using the website,
- if you catch any mistakes, or
- with any advice or new best practices you feel should be considered.
I’m just one person and it takes a village. Thank you!