Day 61: Identifying A11y Issues for Users Who Magnify Their Screen
Things I accomplishedPermalink for "Things I accomplished"
- Accessibility Help: Magnify Your Screen (SSA.gov)
- Web accessibility for screen magnifier users
- Visual Disabilities: Low Vision (WebAIM)
- Online Accessibility: Screen magnification (Harvard)
- Screen readers and screen magnification - Getting interested in technology (YouTube)
- Web Accessibility 101: Screen Magnification Design Challenges - Forms (YouTube)
- Web Accessibility 101: Screen Magnification & Reflow in Acrobat Reader (YouTube)
What I learned todayPermalink for "What I learned today"
Windows has a built-in magnifier, as does Apple, but it often isn't always strong enough or robust to help everyone with low vision. Alternative magnification software includes:
For mobile, I knew Apple phones and tablets had zoom built in, but Android devices have magnification built-in, too.
Apple Watch has a zoom feature (YouTube)!
Trying to learn all things accessibility, I'm constantly having to rediscover keyboard shortcuts:
- Windows Magnifier: Windows + +
- Apple Zoom: Option + Cmd + 8
Never assume that two low vision people are alike. Everyone with low vision has their underlying reasons of why they struggle with that disability. The point is to add flexibility for their particular experience with low vision and the strategies they use to access content and services on the web.
Challenges people who enable magnification may encounter on the web:
- text as images become blurry and pixelated when magnified
- unclearly marked sections/landmarks can make navigation slow when a user only see a small portion of the screen and they're trying to differentiate navigation from main content from a footer
- headings that look too much like paragraph text
- unclear link text
- scrolling, flashing, or moving objects (carousels, I'm glaring at you again)
- drawn out content that doesn't provide a quick intro or conclusion at the beginning
- horizontal scrolling
- page content referred to by it's position (e.g. "to the right")
- meaning is conveyed by color alone
- forms with fields and labels that are not close together or positioned on one line together
The general rule when designing for low vision is to make everything configurable. If the text is real text, users can enlarge it, change its color, and change the background color. If the layout is in percentages, the screen can be widened or narrowed to meet the user's needs. Configurability is the key.
WCAG supports people with low vision through it's perceivable principle. 15 reasons to consider designing to include low vision users who magnify their screen:
- 1.1.1 Non-text content (A)
- 1.3.1 Info and relationships (A)
- 1.3.3 Sensory characteristics (A)
- 1.3.4 Orientation (AA)
- 1.4.1 Use of color (A)
- 1.4.3 Contrast (minimal) (AA)
- 1.4.4 Resize text (AA)
- 1.4.5 Images of text (AA)
- 1.4.6 Contrast (enhanced) (AAA)
- 1.4.8 Visual presentation (AAA)
- 1.4.9 Images of text (no exception) (AAA)
- 1.4.10 Reflow (AA)
- 1.4.11 Non-text contrast (AA)
- 1.4.12 Text spacing (AA)
- 1.4.13 Content on hover or focus (AA)