#8559 closed defect (fixed)
[patch] [ccla] No text equivalents for dnd feedback icons which makes it inaccessible to low vision users
| Reported by: | Becky Gibson | Owned by: | Eugene Lazutkin |
|---|---|---|---|
| Priority: | high | Milestone: | 1.4 |
| Component: | DnD | Version: | 1.2.3 |
| Keywords: | a11y | Cc: | Becky Gibson |
| Blocked By: | Blocking: |
Description
The dnd feedback uses background icons but there is no text equivalent. When in Windows high contrast mode the background icons are not visible and thus the user has no feedback.
This is related to #8557 which uses just a color change to give feedback. These tickets should be addressed together.
Attachments (2)
Change History (12)
comment:1 Changed 10 years ago by
| Owner: | changed from Eugene Lazutkin to Becky Gibson |
|---|
comment:2 Changed 10 years ago by
| Owner: | changed from Becky Gibson to Eugene Lazutkin |
|---|
I don't see how this can be solved with CSS classes. You can't add text with a CSS class, right? (Except maybe in CSS3 but that's not portable across browsers.)
Doesn't it require a change to the the (default) avatar "template" to have a text node, or probably two text nodes, like an X and a checkmark, only one of which is visible at any time?
comment:3 Changed 10 years ago by
I have a point. What nodes exactly and where should I add to the avatar?
comment:5 Changed 10 years ago by
Yes, I gathered that's what you meant :-)
That's more a question for Becky, but probably something like:
Where: right after the icon node
What: Either
- add one <span style="display:none" class=dojoDndIconChar> and use javascript to change the contents between maybe checkmark and an X (or a circle backslash if we can find a font where it shows up)
- add two spans, a <span style="display:none" class="dojoDndYesIconChar"> and a <span style="display:none" class="dojoDndNoIconChar">, containing (respectively) the icons specified above.
In either case there should be CSS rules so that when dijit_a11y is on <body>, those text nodes show up (via display: inline !important).
As to what happens in normal (non high contrast mode), we want to continue showing the icon rather than the text, but that could be done by either:
- make the text appear by default, and then it's the theme's job to hide the text and replace it by the icon
- hide the text by default
comment:6 Changed 10 years ago by
| Status: | new → assigned |
|---|
comment:7 Changed 10 years ago by
I've attached a proof of concept patch for review. Test with dojo/tests/dnd/test_dnd.html in Windows high contrast mode. I had to include dijit/_base/wai.js to get the a11y mode check. You can also get an idea of the change by removing the include of wai.js from the test file and adding class="dijit_a11y" onto the body element. Some of the classes added to dnd.css will not be required in the final since setting windows high contrast mode automatically turns off all background images. If this makes sense as the way to implement I will clean up the code and submit for a final review.
comment:8 Changed 10 years ago by
| Summary: | No text equivalents for dnd feedback icons which makes it inaccessible to low vision users → [patch] [ccla] No text equivalents for dnd feedback icons which makes it inaccessible to low vision users |
|---|
cleaned this up and is ready to go if you want to perform another code review. I'll plan on checking in during the week of April 13, 2009.
comment:9 Changed 10 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | assigned → closed |
comment:10 Changed 10 years ago by
| Milestone: | future → 1.4 |
|---|
See #8557 for more details. All CSS classes and their meaning are detailed in the official documentation: http://docs.dojocampus.org/dojo/dnd#summary-of-css-classes