Hi All,
It's Really nice to have Chosen in our sites but ..
But we do have this issue with Accessibility to Chosen.
http://wave.webaim.org/report?url=http%3A%2F%2Fharvesthq.github.com%2Fch...
I think we need to find a way to add a aria-label to the Field label or Exposed internal Filters.. and External Blocks too.
Errors
Missing form label
What It Means
A form control does not have a corresponding label.
Why It Matters
If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.
How to Fix It
If a text label for a form control is visible, use the element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.
The Algorithm... in English
An (except types of image, submit, reset, button, or hidden),
, or does not have a properly associated label text. A properly associated label is:
a element with a for attribute value that is equal to the id of a unique form control
a element that surrounds the form control, does not surround any other form controls, and does not reference another element with its for attribute
a non-empty title attribute, or
a non-empty aria-labelledby attribute.
Thanks.
Comment | File | Size | Author |
---|---|---|---|
#3 | chosen-accessibility-options.png | 66.4 KB | Rajab Natshah |
WAVE Report of Chosen A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes.png | 187.96 KB | Rajab Natshah |
Comments
Comment #1
Rajab Natshah CreditAttribution: Rajab Natshah commentedComment #2
Rajab Natshah CreditAttribution: Rajab Natshah commentedhttp://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#ari...
aria-label (property)
Defines a string value that labels the current element. Also see aria-labelledby.
The purpose of aria-label is the same as that of aria-labelledby. It provides the user with a recognizable name of the object. The most common accessibility API mapping for a label is the accessible name property.
If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. There may be instances where the name of an element cannot be determined programmatically from the content of the element, and there are cases where providing a visible label is not the desired user experience. Most host languages provide an attribute that could be used to name the element (e.g. the title attribute in HTML [HTML]), yet this may present a browser tooltip. In the cases where a visible label or visible tooltip is undesirable, authors MAY set the accessible name of the element using aria-label. User agents give precedence to aria-labelledby over aria-label when computing the accessible name property.
Characteristics of aria-label
Characteristic Value
Related Concepts: A related concept is title in HTML [HTML].
Used in Roles: All elements of the base markup
Value: string
aria-labelledby (property)
Identifies the element (or elements) that labels the current element. Also see aria-label and aria-describedby.
The purpose of aria-labelledby is the same as that of aria-label. It provides the user with a recognizable name of the object. The most common accessibility API mapping for a label is the accessible name property.
If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen. User agents give precedence to aria-labelledby over aria-label when computing the accessible name property.
The aria-labelledby attribute is very similar to describing an object with aria-describedby, where a description is intended to provide additional information that some users might need.
Comment #3
Rajab Natshah CreditAttribution: Rajab Natshah commentedIf we try to have a Chosen Accessibility options
as in this code :
Then do more of this code :
But We still can not do that to the Custom input Chosen add .. as in this code
So We need a JavaScript Fix not a PHP fix. or this should come from the Library directly.
Thanks
Rewarding :)
Comment #4
Rajab Natshah CreditAttribution: Rajab Natshah commentedHi All,
The way I will go with in my project to do this for each Chosen Wrapper div or container.
In this Case Filters in exposed Filters:
Thanks.
Rewarding :)
Comment #5
Dave ReidI would think if at all possible, this should be fixed upstream in the Chosen library itself, unless there's some reason it has to be fixed here at the Drupal integration layer.
Comment #6
mgiffordAlways better to fix upstream if possible for sure.
Comment #7
Rajab Natshah CreditAttribution: Rajab Natshah commentedYes. That what should be as something as in the following code.
But We can use this code :
Thanks.
Rewarding :)
Comment #8
Rajab Natshah CreditAttribution: Rajab Natshah commentedComment #9
imperator_99 CreditAttribution: imperator_99 commented@RajabNatshah your JavaScript code was excellent, I was able to implement it in Drupal 8. I did have to wrap it in a
chosen:ready
event block, however, to make sure theinput
element was available:Cheers,
Jesse.
Comment #10
kaicyee CreditAttribution: kaicyee commentedHi, @imperator_99 and @RajabNatshah, I'm experiencing the same issue in regards to the exposed filters for Chosen on Drupal 8. Forgive me for being dense but where should you put in this fix? Is this a patch?
Thank you,
Kai
Comment #11
kaicyee CreditAttribution: kaicyee commentedOK, with the help of our JavaScript goddess Vijaya we got your code to work with some edits and additions. For the edification of other people who may be equally as confused, for Drupal 8, you need to put this in your-theme/assets/js/chosen_patch.js. You also need to update your-theme.libraries.yml and your-theme.info files.
Thank you very much for the original legwork!
Kai C. Yee
Drupal developer
Department of Commerce
Comment #12
joshua.boltz CreditAttribution: joshua.boltz commentedWhile this seems to help for field provides via the admin interface, in cases where you use the Chosen widget on a front-end theme, I found the patch in this issue solved the issue for those cases.
https://www.drupal.org/project/chosen/issues/2834096