[Meta] Improve the accessibility of the Gin theme (#3506302) · Issues · project / gin

[Meta] Improve the accessibility of the Gin theme

>>> [!note] Migrated issue   Reported by: [rkoller](https://www.drupal.org/user/3217695) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> 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 <a href="https://www.drupal.org/project/drupal/issues/2857808" title="Status: Active">#2857808: Automate Accessibility Checks for Core</a> and <a href="https://www.drupal.org/project/drupal/issues/3338664" title="Status: Needs work">#3338664: Migrate Nightwatch Axe tests to PHPUnit</a>, 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. <h3 id="summary-remaining-tasks">Remaining tasks</h3> <a href="https://www.drupal.org/project/issues/search?projects=Gin+Admin+Theme&project_issue_followers=&status%5B%5D=Open&issue_tags_op=%3D&issue_tags=Accessibility">List of issues in Gin Admin Theme tagged with 'Accessibility'</a> <h4>Major Priority</h4> <ul> <li><a href="https://www.drupal.org/project/gin/issues/3506307" title="Status: Postponed">#3506307: [PP-1] Improve the accessibility of focus outlines</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506316" title="Status: Postponed">#3506316: [PP-1] Ensure that primary and secondary buttons have a high enough color contrast</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3539420" title="Status: Needs work">#3539420: Links and buttons in toolbar missing accessible name</a></li> </ul> <h4>Normal Priority</h4> <h5>Color contrast</h5> <ul> <li><a href="https://www.drupal.org/project/gin/issues/3506305" title="Status: Postponed">#3506305: [PP-1] Improve the “Skip to main content”-link</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506318" title="Status: Postponed">#3506318: [PP-1] Increase color contrast for the chip component</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506320" title="Status: Postponed">#3506320: [PP-1] Increase the color contrast of the navigation block title</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506322" title="Status: Postponed">#3506322: [PP-1] Increase the color contrast for components like appearance switch, select elements, checkboxes, radio buttons, text fields, text areas, and date fields</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506323" title="Status: Active">#3506323: Add color contrast checks to custom focus and accent color dialogs</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506326" title="Status: Postponed">#3506326: [PP-1] Increase the color contrast of the bulk action bar</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506327" title="Status: Postponed">#3506327: [PP-1] Increase the color contrast of the iconography on the status report page</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506329" title="Status: Postponed">#3506329: [PP-1] Styling and contrast issues in the toolbar configuration fieldset for a text format</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506330" title="Status: Postponed">#3506330: [PP-1] Improve the styling for vertical tabs</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506331" title="Status: Postponed">#3506331: [PP-1] Increase the perceptibility of the drop buttons</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506345" title="Status: Postponed">#3506345: [PP-1] Focus outlines of form elements on media grid images have a too low color contrast</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3534760" title="Status: Postponed">#3534760: [PP-1] The design is broken on the navigation layout page in dark mode</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3534770" title="Status: Postponed">#3534770: [PP-1] The add block button in the edit mode on the navigation layout page has a too low color contrast</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3566817" title="Status: Postponed">#3566817: [PP-1] Color contrast issues on the field listings page</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506311" title="Status: Postponed">#3506311: [PP-1] Increase the visibility of the active primary tab</a> (also forced-colors)</li> <li><a href="https://www.drupal.org/project/gin/issues/3506312" title="Status: Postponed">#3506312: [PP-1] Increase the color contrast for Gin switches</a> (also forced-colors)</li> <li><a href="https://www.drupal.org/project/gin/issues/3506319" title="Status: Postponed">#3506319: [PP-1] Improve the color contrast for the menu item of the current page</a> (also forced-colors)</li> <li><a href="https://www.drupal.org/project/drupal/issues/3506333" title="Status: Postponed">#3506333: [PP-1] Improve the perceptibility of contextual link buttons</a> (also forced-colors)</li> </ul> <h5>Forced colors</h5> <ul> <li><a href="https://www.drupal.org/project/gin/issues/3506347" title="Status: Postponed">#3506347: [PP-1] The output in Forced Colors mode is different depending on if the light or dark mode is active</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506348" title="Status: Postponed">#3506348: [PP-1] Fully support system color keywords in Forced Colors mode</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506349" title="Status: Postponed">#3506349: [PP-1] Icons look chopped in the navigation sidebar in Forced Colors mode</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506350" title="Status: Postponed">#3506350: [PP-1] Several icons and images are invisible in Forced Colors mode</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506351" title="Status: Postponed">#3506351: [PP-1] Select elements show two carets in Forced Colors mode</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506352" title="Status: Postponed">#3506352: [PP-1] Vertical tabs are displayed incorrectly in Forced Colors mode</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506353" title="Status: Postponed">#3506353: [PP-1] Gin settings visually broken in Forced Colors mode</a></li> </ul> <h5>Other</h5> <ul> <li><a href="https://git.drupalcode.org/project/gin/-/work_items/3500065" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/gin/-/work_items/3500065</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506336" title="Status: Active">#3506336: Keyboard navigation issues on node edit forms</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506338" title="Status: Needs work">#3506338: Tabbing order in the table header is off</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506340" title="Status: Postponed">#3506340: [PP-1] Breadcrumb separators are focusable</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506342" title="Status: Reviewed & tested by the community">#3506342: Disabled elements are hard to distinguish</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3541719" title="Status: Needs review">#3541719: Adjust the top bar to the landmark used with the navigation module</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3566851" title="Status: Postponed">#3566851: [PP-1] Avoid announcing the star for required fields in the aural interface </a></li> <li><a href="https://www.drupal.org/project/gin/issues/3570087" title="Status: Needs review">#3570087: Page Title Ellipsis Accessibility Issue</a></li> <li><a href="https://www.drupal.org/project/gin/issues/3506334" title="Status: Active">#3506334: Increase the target sizes to meet the minimum requirement</a></li> </ul> <h4>Completed</h4> <ul> <li><a href="https://www.drupal.org/project/gin/issues/3506341" title="Status: Closed (fixed)">#3506341: Respect operating system settings for reduced motion</a></li> <li><a href="https://www.drupal.org/project/drupal/issues/3506321" title="Status: Closed (fixed)">#3506321: Increase the color contrast of the toggle button border</a></li> </ul> <h4>Related but not Gin</h4> <ul> <li><a href="https://www.drupal.org/project/drupal/issues/3506324" title="Status: Active">#3506324: Redundant aural interface and the general interaction with CKEditor toolbar configuration</a></li> <li><a href="https://www.drupal.org/project/drupal/issues/3506343" title="Status: Active">#3506343: Visual field type presentation is misleading in regard of the keyboard interaction</a></li> <li><a href="https://www.drupal.org/project/drupal/issues/3506339" title="Status: Active">#3506339: Selecting a column in a table header by keyboard drops the focus</a></li> </ul> > Related issue: [Issue #3585823](https://www.drupal.org/node/3585823)

issue