Accessibility Issues Overview

[hofmann-felix]

Priority

• 🔴 High Priority
• 🟡 Moderate Priority
• 🟢 Low Priority

General Issues

• 🔴 Breadcrumb: Background and foreground colors do not have a sufficient contrast ratio. (WCAG Reference)
  • Proposed Solution: Make the Breadcrumbs darker and check if the result matches with https://contrastchecker.com/
  • PR: fix (a11y): breadcrumb a11y issues on blog page #805
• 🔴 Focus Outline is cut of in many places
  
  • PR: fix (a11y): breadcrumb a11y issues on blog page #805
  • Not fixed in:
    • TeaserContainer
• 🔴 Images: Provide useful alt texts
  • Description: We have set alt=“” for almost all images so that they are ignored by the screen reader. However, these images often offer added value and should therefore not be ignored. The alt text should be set for these images
  • Assignee: @hofmann-felix
• 🔴 Legal Links: Add <nav> tag to “Data Protection” & “Imprint” in the Menu
  • PR: fix (a11y): add nav landmark to social and legal links #806
• 🔴 Navigation: LinkedIn & GitHub Links aren’t highlighted on keyboard focus
  • PR: fix (a11y): social link focus outline #810
• 🔴 Navigation: Add [aria-hidden="true"] to flyout when it is visually hidden
  • PR: fix (a11y): add aria hidden to navigation flyout when visually hidden #811
• 🔴 Navigation: Other content should not be focusable when the flyout is active (WCAG Refernce)
  • • PR: fix (a11y): trap focus when navigation flyout is active #829
• 🟡 Breadcrumbs: Add aria-label="Breadcrumbs" and role=”navigation” to breadcrumb container (WAI-ARIA Reference)
  • PR: fix (a11y): breadcrumb a11y issues on blog page #805
• 🟢 Hero Images: Background and foreground colors do not have a sufficient contrast ratio. (WCAG Reference)
  • Proposed Solution: Make the background image darker and check if the result matches with https://contrastchecker.com/
  • Note: automated checkers use the background color of the whole page to compare it to which results in an insufficient contrast ratio. The actual visible colors have a WCAG compliment color ratio.
• 🟢 Navigation: Language switch chevron should be aria-hidden: true
  • PR: fix (a11y): add aria-hidden to chevron in language-switch #833

Page Specific Issues

Careers

• 🟡 Accordion elements: Hide chevron from screen readers
  • PR: fix (a11y): hide accordion chevron from screen reader #815
• 🟢 Accordion elements: aria-describedby and aria-labeledby attributes should be connected by ID to an element that either has text description or an "aria-label" attribute.
  • PR: fix (a11y): add aria-labeled by to accordion button #834

Career Details

• 🔴 Privacy checkbox is not keyboard accessible
  • PR: fix (a11y): make privacy checkbox keyboard accessible #816
• 🟡 Form Fields: The validity status of every form element must be represented in the code at all times using the "aria-invalid" attributes and the "true/false" values, and change dynamically when the status changes 
  • PR: fix (a11): add aria-invalid to career form fields  #817
• 🟢 Form Fields: aria-describedby and aria-labeledby attributes should be connected by ID to an element that either has text description or an "aria-label" attribute.
  • PR: fix (a11): add aria-invalid to career form fields  #817

Blog Overview

• 🔴 Pagination buttons don’t work with keyboard 
  • PR: fix (a11y): make pagination buttons keyboard accessible #812

Blog Post

• 🔴 Social Buttons and Copy Code Button do not have an accessible name
  • PR: fix (a11y): add accessible name to social buttons and copy button #814
• 🔴 RSS Feed Button is <li> without <ul>, <ol> or <menu> parent elements.
  • PR: Fix: Problems found in automatic a11y testing #798
• 🟡 Code Snippets: Background and foreground colors do not have a sufficient contrast ratio. (WCAG Reference)
  • Things to consider: check if the result matches with https://contrastchecker.com/
  • PR: fix (a11y): make code block colors WCAG AA color contrast compliant #820
• 🟡 Links that open in a new tab or a new window should either have an "aria-label" attribute or a screen-reader only element explaining to screen-readers that this opens in a new tab.
  • PR: fix (a11y): mark all external links with aria label #821