Better indication of required fields

[Satya Minnekanti]

Labels for all required fields on our dialogs should have an astrisk(*) and instructions for identifying required fields should be clearly labeled at the beginning of the form.

This is a failure of Accessibility Checkpoint 1.3.1

This is clearly documented in Examples of Success Criterion for 1.3.1

See links here.. ​http://www.w3.org/TR/2012/NOTE-UNDERSTANDING-WCAG20-20120103/content-structure-separation-programmatic.html

​http://www.w3.org/TR/WCAG20-TECHS/H44.html

[Mike Gifford]

Where are the required fields in CKEditor? Again, looking to see if this is still an issue in the 4.x version.

[Teresa Monahan]

Examples of required fields are:

• The URL field on link, image, iframe, flash dialog
• Rows/Columns fields on table dialog
• Name field on anchor dialog

This is still an issue in 4.x

[Frederico Caldeira Knabben]

We have two solutions for this already in place:

• aria-required is applied to required fields, so they're actively identified as required.
• Labels are marked with the "cke_required" class, so they can be styled to have any kind of visual representation.

It looks like we have already all the necessary tools to properly satisfy the accessibility requirements for our target environments.

[Mike Gifford]

So, should this get closed for now? Is there an audit process?

[Jakub Ś]

So, should this get closed for now?

Definitely not because problem hasn’t been fixed yet. Keyword Discussion is used to ask CKSource devs and users interested in this feature opinion. You may for example have better idea or see potential bug in @fredck proposal.

[Teresa Monahan]

The aria-required attribute is sufficient for this for screen reader users. However the cke_required field does not address the full issue for sighted users. This class means styling can be used to identify required fields, however styles such as colors, background images etc will not be visible in High Contrast mode. Required fields should be denoted in some way e.g. adding an asterisk to the field label.

In addition, the dialogs should contain some descriptive text explaining that the asterisk (and any styling used to indicate required fields) means that the field is required. See an example in the attached image.

The solution for this needs to be flexible enough to adapt to different UI requirements e.g. providing config options for specifying how to denote required fields i.e. use a * or the word required etc, adding the marker at the start/end of the label, styling for descriptive text etc