Some context: this issue was initially created for the Entity Embed module, reporting two accessibility problems. It was then converted to a core issue, and retitled "Accessibility issues with modal dialogs". The first problem was dialog related, but already has an issue created and a patch awaiting review (at the time this IS is being written). #3020061: Ajax replace does not refocus element if inside a dialog
The second issue is not specific to dialogs, so the issue has been re-titled and IS updated to remove the blame from dialogs (they're having a difficult enough time as-is).
This is what was initially reported:
Within the “Embed content” window, instruction is not provided for the required field i.e., “Display as *” drop down marked with an asterisk. In this instance, a text description such as “Required fields are marked with an asterisk *” is expected to be provided within the page.
Expected result: A text description such as “Required fields are marked with an asterisk *” is expected to be provided for the fields marked with asterisks within the page.
Reference: Section 508, 3.3.2 Labels or Instructions and 1.3.1 – Information and Relationships.
For more information, visit:
http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html
http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-p...
Based on The W3 spec, forms that use an asterisk to indicate required fields should include a text description explaining what that asterisk means. This lack of asterisk-describing text is not specific to Entity Embed or dialogs. For example, this text is not present on node/add/page, a form that certainly has required fields indicated by an asterisk on their label. This criteria can also met with text describing the asterisk at the beginning of the form, or by adding "(required)" to the label. Deque also has a concise description of this criteria and how it can be met.
TLDR: A couple of issues with the entity embed button modal
1. Tabbing from the display as dropdown takes focus to close button, instead of radio buttons. (addressed in #3020061: Ajax replace does not refocus element if inside a dialog)
2. Text description is expected for required fields marked with an asterisk *.
Further details below:
1. Within the “Embed content” window, when the user selects a list element from the “display as *” drop down, the next Tab press navigates the user to the close button. Instead, the next Tab press is expected to navigate the user to the radio button.
Expected result: Focus order is expected to proceed in a logical manner and follow the flow of the elements as they appear. In this instance, the next Tab press is expected to navigate the close button.
Reference: Section 508, 2.4.3 – Focus Order.
Note: This is a medium severity defect because the user can navigate to the radio buttons using the Tab key.For more information, visit: http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-or... (addressed in #3020061: Ajax replace does not refocus element if inside a dialog)
2. Within the “Embed content” window, instruction is not provided for the required field i.e., “Display as *” drop down marked with an asterisk. In this instance, a text description such as “Required fields are marked with an asterisk *” is expected to be provided within the page.
Expected result: A text description such as “Required fields are marked with an asterisk *” is expected to be provided for the fields marked with asterisks within the page.
Reference: Section 508, 3.3.2 Labels or Instructions and 1.3.1 – Information and Relationships.For more information, visit: http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.htmlhttp://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-p...