Presenter: Derek Featherstone from Simply Accessible Inc., @feather | #a11yCSS | Derek’s slides on slideshare
This is the first presentation I attended on Thursday, March 5 at the #CSUN15 conference. I’ve attended a few of Derek’s presentations in the past and am looking forward to this one. I hope he covers some of the more advanced CSS topics that have come to the forefront of web design in the last couple years. I’m nursing a nasty headache I woke up with, so I hope my notes are up-to-snuff! Bear with me, please.
Started with a photo of a shower tap at a British hotel he stayed in. Both knobs are red. There was a text description showing that the left tap operates the shower, right tap operates the bath (six feet away). LESSON: group closely related items; the “principle of proximity.”
Principle of proximity has a huge impact on people with disabilities
- Accessibility does not just mean “screen reader,” although many people think this
- Multi-column layouts make using an interface very challenging for someone with low vision.
- Demonstration of a TSA web page through a “virtual straw.” The audience was invited to close one eye, and hold one hand in front of their open eye to approximate low vision. The page was very difficult to read – it had to be scanned. AND YET, the page meets every WCAG success criteria for a screen reader.
- A redesigned single-column version of this same page was significantly easier to view and was also much better for mobile.
- All of this is made possible via CSS. While HTML is critical to everything we do with accessibility, the impact of CSS is equally profound.
- SOLUTION: use the straw test to find layout and design challenges for people with low vision. It will change the way you view design.
- We need to design for a whole range of accessibility use cases: blind, low-vision, hearing, mobility/dexterity (fine motor control, low-strength, single-handedness), cognitive (attention, memory-related, literacy, routines/predictability), vestibular issues (animated navigation elements can make some people dizzy, like the room spinning when you’re laying on your bed drunk), speech
3 Types of Relationships
- sateach.es/3-rel – all the detail is in this article
- Explicit: example – tying labels to form fields programmatically
- Implicit: example – text labels next to or below form fields
- Content-based relationships: example – form entry error messages that appear at the top of a page
Screen Reader Compatible Does NOT Equal Accessible
As a developer, I started
Background images over-used and abused
- Example: flip cards (duplicate call to action links – i.e. “flip”)
- Solution: changed the link details, which made it easier for screen reader users, but NOT voice recognition software.
- Two primary mantras in voice recognition software are: Dictation, Command-and-Control
- Recommended changing to “Flip to see details for xyz product”
Call to action alt-text is critical…
- …especially when using CSS sprites. Start using SVG instead of sprites.
- Alt text that reflects the call to action. Image and text alternative in the same layer. USE SVG
- Background images: Best Buy web site, switched to “high contrast mode,” background images disappear
- Bing maps example: search icon in search field disappears
- JQuery drop-down menu example
- When CSS background images are off, what content functionality or affordances are missing?
- New feature in IE11 for targeting high-contrast mode
