web-components icon indicating copy to clipboard operation
web-components copied to clipboard

Published 20 hours ago • verified publisher icon vaadin

DatePicker calendar: Hide weekdays from assistive technologies

Open rolfsmeds opened this issue 2 years ago • 1 comments

What is the problem?

From 2022 TetraLogical a11y review:

The days of the week within the calendar dialog are marked up as headings which are accessible to mobile screen readers, but are not programmatically associated with the content for each column. Because each control within the grid of dates for each month have the full date as their accessible name, these day of the week headings are unnecessary and can therefore be hidden from screen readers with aria-hidden="true".

Thus the weekday heading cells could be simply hidden from ATs using aria-hidden="true"

Browsers

  • [ ] Chrome
  • [ ] Firefox
  • [ ] Safari
  • [ ] Safari on iOS
  • [ ] Edge

Screen Readers

  • [ ] None
  • [ ] NVDA
  • [ ] JAWS
  • [ ] VoiceOver on MacOS
  • [ ] VoiceOver on iOS

rolfsmeds avatar Aug 08 '22 10:08 rolfsmeds

Looks like we need to add aria-hidden to this element:

https://github.com/vaadin/web-components/blob/2a9e2610a738fef635a687d87f5823ecbac6dda0/packages/date-picker/src/vaadin-month-calendar.js#L83

web-padawan avatar Aug 08 '22 10:08 web-padawan

@rolfsmeds that looks like a really easy "fail" to fix ;) if you wanna improve your green wall

knoobie avatar Sep 26 '22 07:09 knoobie