As a practical matter, aside from what Section 508 states about web documents being readable without relying on an external stylesheet, do vision-impaired users really try to browse the web with css completely disabled? If so, is there a particular browser or add-on that would typically be used?
Most of the tools I've used to disable css in Chrome and IE either disregard css that is dynamically injected, or have to be reapplied on each page load, or both. I can't find a native way in these browsers to disable all css, and using they types of add-on tools I've just described to try and browse the web with css disabled seems both unreliable and painful.
In Firefox you can disable all css via a menu option, but this also turns off support for the html5 "hidden" attribute. Again, this does not seem like a practical way to browse the web.
We have customers who are using IE + the Web Accessibility Toolbar from The Paciello Group to test our apps for 508 compliance. One of the requirements is that all of our pages be usable with css disabled, and we have gotten dinged for having things like modal dialog content and field validation messages show up when css is disabled. Most of our pages are not documents but complex data displays and forms. We have our markup structured fairly well so that the content is grouped nicely with proper headings, we have aria landmarks on the nav and main content areas, etc., and the content itself is pretty readable without css. And then... we also have 3rd-party widgets like the jQuery UI date picker and select2, and the internal components mentioned above like modal dialogs and validators, which are highly dependent upon css in order to make any sense at all.
This article, also from the Paciello Group, clearly suggests using css to hide things because that method enjoys the widest support: http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
So the group that suggests using display:none to hide content for greatest support also produces a tool that prompts testers to object to the use of display:none. Which leads me to ask... does anyone anywhere really try to use the modern web with css disabled, or is it much more practical to make sure our app doesn't break if people zoom the window or use their browser options to change font sizes and colors?
Answer
Wow. I can't even reply to comments to my own response until I get 50 rep points? Talk about usability...
@aames, all good questions.
I fully understand the situation with your code base. Having worked at Salesforce in both a UX and Dev capacity, particularly around accessibility, I know what it's like dealing with legacy code and developers who don't know a SPAN from a TD. The only time they started to get caught up with 508 compliance was when they created a new framework and started rebuilding everything with that. That's the team I was on when I ended up leaving for another job. But, yes, you take what you can get.
The "best" screen reader is Jaws. If you had to focus on appeasing one screen reader it would be that one. It's certainly the most popular though NVDA has made leaps in the past few years. At Salesforce we focused Jaws/IE and VoiceOver/Safari for Mac. They don't share the same set of accessibility APIs though they do overlap so a solution for one won't always work for the other. Usually they do though.
jQuery UI has gotten a lot better around accessibility. I'm very impressed with it in that respect and happy to see it evolve. Their tooltip is a wonderful example of good accessibility and I wouldn't hesitate to use that technique. It is 508 compliant and if someone is telling you different I don't think they're fully aware of how the spec works. The only thing I'd do differently is insert the HTML for the tooltip immediately after the DOM element that is triggering it so that it flows more naturally with the content it is relevant to. That's not necessary but it is a little "nicer".
Also keep in mind, 508 is also painfully outdated. WCAG is a much better standard to work towards and is the basis for the revised 508 specifications. But again, the CSS turned off angle is really meant as a guide to make sure the structure and order of content makes sense on its own. If you have a footer don't put it first in the DOM and use CSS to make it look last. That sort of thing. Well, also things like using heading tags not styled DIVs, actual anchors instead of spans styled to look blue/underlined with onClick for navigating somewhere (I've seen it done) etc.
No comments:
Post a Comment