Problem/Motivation
The Drupal accessibility team is in the process of gradually auditing all the contrib projects contained in Drupal CMS. The following meta summarizes all accessibility related issues found so far, concerning the Gin theme.
It has to be noted that the list of remaining tasks has to be extended after axecore tests will be available for core and contrib projects. Otherwise it would be impossible with that high number of possible combinations of focus and accent colors to ensure a regression will slip back in the future. Currently a11y tests are being solidified for core in #2857808: Automate Accessibility Checks for Core and #3338664: Migrate Nightwatch Axe tests to PHPUnit, enabling them for projects in contrib would be the next step. In regard to automated tests it has to be pointed out that semi-transparent colors can’t be tested for color contrast.
Remaining tasks
List of issues in Gin Admin Theme tagged with 'Accessibility'
Major Priority
- #3506307: [PP-1] Improve the accessibility of focus outlines
- #3506316: [PP-1] Ensure that primary and secondary buttons have a high enough color contrast
- #3539420: Links and buttons in toolbar missing accessible name
Normal Priority
Color contrast
- #3506305: [PP-1] Improve the “Skip to main content”-link
- #3506318: [PP-1] Increase color contrast for the chip component
- #3506320: [PP-1] Increase the color contrast of the navigation block title
- #3506322: [PP-1] Increase the color contrast for components like appearance switch, select elements, checkboxes, radio buttons, text fields, text areas, and date fields
- #3506323: Add color contrast checks to custom focus and accent color dialogs
- #3506326: [PP-1] Increase the color contrast of the bulk action bar
- #3506327: [PP-1] Increase the color contrast of the iconography on the status report page
- #3506329: [PP-1] Styling and contrast issues in the toolbar configuration fieldset for a text format
- #3506330: [PP-1] Improve the styling for vertical tabs
- #3506331: [PP-1] Increase the perceptibility of the drop buttons
- #3506345: [PP-1] Focus outlines of form elements on media grid images have a too low color contrast
- #3534760: [PP-1] The design is broken on the navigation layout page in dark mode
- #3534770: [PP-1] The add block button in the edit mode on the navigation layout page has a too low color contrast
- #3566817: [PP-1] Color contrast issues on the field listings page
- #3506311: [PP-1] Increase the visibility of the active primary tab (also forced-colors)
- #3506312: [PP-1] Increase the color contrast for Gin switches (also forced-colors)
- #3506319: [PP-1] Improve the color contrast for the menu item of the current page (also forced-colors)
- #3506333: [PP-1] Improve the perceptibility of contextual link buttons (also forced-colors)
Forced colors
- #3506347: [PP-1] The output in Forced Colors mode is different depending on if the light or dark mode is active
- #3506348: [PP-1] Fully support system color keywords in Forced Colors mode
- #3506349: [PP-1] Icons look chopped in the navigation sidebar in Forced Colors mode
- #3506350: [PP-1] Several icons and images are invisible in Forced Colors mode
- #3506351: [PP-1] Select elements show two carets in Forced Colors mode
- #3506352: [PP-1] Vertical tabs are displayed incorrectly in Forced Colors mode
- #3506353: [PP-1] Gin settings visually broken in Forced Colors mode
Other
- #3500065: Invalid ARIA attribute values
- #3506336: Keyboard navigation issues on node edit forms
- #3506338: Tabbing order in the table header is off
- #3506340: [PP-1] Breadcrumb separators are focusable
- #3506342: Disabled elements are hard to distinguish
- #3541719: Adjust the top bar to the landmark used with the navigation module
- #3566851: [PP-1] Avoid announcing the star for required fields in the aural interface
- #3570087: Page Title Ellipsis Accessibility Issue
Completed
- #3506341: Respect operating system settings for reduced motion
- #3506321: Increase the color contrast of the toggle button border
Related but not Gin
- #3506324: Redundant aural interface and the general interaction with CKEditor toolbar configuration
- #3506343: Visual field type presentation is misleading in regard of the keyboard interaction
- #3506339: Selecting a column in a table header by keyboard drops the focus
- #3506334: Increase the target sizes to meet the minimum requirement
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | issue-3506302-13-dropdowns-broken-without-javascript.png | 144.26 KB | kentr |
Comments
Comment #2
rkollerComment #3
mgiffordThanks so much @rkoller for this epic accessibility review. Many of the issues here will improve usability of Drupal CMS as well as of course accessibility. Gin is more complex than many other themes. It is important here that we give users good defaults, while striving to keep the flexibility which is built into this great theme. I look forward to engaging to find ways we can incorporate these improvements into Drupal sites moving forward.
Comment #4
saschaeggi@rkoller thank you for putting this together 👏
It will take a while to get through them so I appreciate you added a meta as well 🤝
Comment #5
chrisac commentedComment #6
rkollerComment #7
rkollerComment #8
rkollerComment #9
kentr commentedAdded #3539420: Links and buttons in toolbar missing accessible name to IS.
Comment #10
joachim commentedThis is an issue on Claro - could someone check whether it's the same on Gin? #3497077: dropdown buttons are broken with Javascript disabled
Comment #11
rkollerComment #12
rkollerComment #13
kentr commentedRE #10 (dropdowns broken without javascript):
Yes, Gin is also affected by this.
Comment #14
rkollerchanged the parent to the route to stable meta from core
Comment #15
quietone commentedComment #16
quietone commentedAdd link to all issues tagged Accessibility and just moved the 'Major' ones to their own list.
Comment #17
mgiffordRemoving #3506324: Redundant aural interface and the general interaction with CKEditor toolbar configuration
Redundant aural interface and the general interaction with CKEditor toolbar configuration — This is a CKEditor issue.
Comment #18
mgiffordRemoving #3506343: Visual field type presentation is misleading in regard of the keyboard interaction as it identified as a field system issue in Core.
Comment #19
mgiffordRemoving #3506339: Selecting a column in a table header by keyboard drops the focus as a it is a forms system issue in Core.
Comment #20
mgiffordRemoving #3506334: Increase the target sizes to meet the minimum requirement as it is identified as an ajax system issue in Core
Comment #21
mgiffordComment #22
mgiffordComment #23
mgiffordComment #24
mgiffordComment #25
kentr commentedGrouped some issues.
Comment #26
kentr commentedGrouped some issues.