Accessibility (a11y) issues summary

[yusufkandemir]

This issue serves as a summary and tracking thread for all accessibility-related (area/a11y) issues for Quasar. These issues highlight opportunities to improve accessibility and align with best practices such as WCAG guidelines.

To clarify, Quasar already has a lot of a11y-related features. These are the ones that we haven't been able to cover yet, but we want to complete them for full coverage.

---

General

• Accessibility documentation #11889
  Description: We need a detailed accessibility documentation for Quasar components and best practices.

• Meta viewport tag is not accessible #17031
  Description: Zooming is disabled in the meta viewport tag, which violates WCAG guidelines for text resizing. Relevant: Scalable UI  rfcs#3

Navigation & Keyboard Interaction

• QTree nodes should expand with keyboard right-arrow, and collapse with left-arrow #7561
  Description: Improve keyboard navigation in QTree to support expanding/collapsing nodes.

• q-tree with tickable nodes traps the keyboard #17603
  Description: The keyboard gets trapped when navigating tickable nodes in q-tree.

• Splitter component is not keyboard-accessible #12466
  Description: The splitter component does not receive focus or respond to keyboard navigation.

• Time picker component is not keyboard accessible #12467
  Description: Keyboard users cannot tab or interact with the time picker component.

• Dialog Plugin: Tab doesn't focus cancel button #12505
  Description: The cancel button in dialogs with only cancel & ok buttons is not keyboard accessible via tab navigation.

• WCAG keyboard support #7423
  Description: Address multiple WCAG keyboard accessibility issues across multiple Quasar components.

• QTabPanels isn't accessible #6560
  Description: Improve accessibility and keyboard navigation for QTabPanels.

• Clickable items added in the before-options slot in q-select are not accessible via keyboard #17344
  Description: Items in before-options or after-options slots in q-select cannot be accessed via keyboard navigation.

• Option Group: focus behaviour #17638
  Description: Improve focus behavior in option groups to align with keyboard navigation standards.

Screen Reader & ARIA Support

• QSelect options aren't being read inside QDialog #17078
  Description: QSelect options are not being read by screen readers when placed inside QDialog.

• a11y: handle ARIA error state in form field components #17306
  Description: Screen readers do not announce invalid form inputs with aria-invalid and accompanying error messages.

• QMenus Are Not Compatible with QLists and QItems by Default #17162
  Description: Usages of QItem within QMenu violate WCAG Success Criteria due to missing role="menuitem".

• QEditor - A11y issues #15675
  Description: Multiple accessibility issues in QEditor, including focus management and missing aria-labels.

• Improve accessibility for QTable #9689
  Description: Pagination controls in QTable are not properly announced to screen readers.

Component Behavior

• A11y : consistency in HTML structure when CSS are disabled #16855
  Description: <label> in QInput should be before the <input> field in the DOM structure.

• Click on field with calendar inside makes date to go 1 month back #16948
  Description: Clicking outside the calendar within a q-field causes the calendar to navigate 1 month back unexpectedly.

• Error Blocked aria-hidden show up when clicking on Popup Proxy (cover mode) #17810
  Description: Console errors related to improper aria-hidden handling appear when interacting with the Popup Proxy.

• Add Slot for the dropdown button of QBtnDropdwon #16955
  Description: Add a customizable slot for the dropdown button of QBtnDropdown to be able to place a tooltip for a11y.

Some Discussions

• [a11y] Compatibility with RGAA (French WCAG) #16109
• Screen readers announces QInput labels twice when reading page content #16743

[chrisjung-dev]

I have added an PR for #18058, which is also an a11y issue