Skip to content

a11y: va-date-picker #3744

@m0ksem

Description

@m0ksem

Here's a list of ARIA attributes and roles that you might consider using:

Role: grid (role="grid"):

The calendar itself can be marked with the role="grid" to indicate that it's a grid-like structure.
Role: row (role="row"):

Each row of dates in the calendar can be marked with role="row" to define the rows within the grid.
Role: gridcell (role="gridcell"):

Each individual date cell can be marked with role="gridcell" to indicate that it's a cell within the grid.
aria-label or aria-labelledby:

Provide an accessible name for the gridcell elements using aria-label or aria-labelledby to describe the date to screen reader users. For example, "August 15, 2023."
aria-selected:

Use the aria-selected attribute to indicate whether a date is currently selected. Set it to "true" for the selected date cell.
aria-disabled:

If certain dates are not selectable (e.g., past dates), use the aria-disabled attribute to indicate that they are not available for selection.
aria-current:

If the calendar includes the current date, you can use the aria-current attribute to indicate it.

aria-live or aria-atomic (for dynamic updates):

If your calendar updates dynamically (e.g., when navigating months), you can use aria-live and aria-atomic to announce these changes to screen reader users.
Role: presentation (role="presentation"):

If you have decorative elements or visual formatting within the calendar that shouldn't be presented to screen readers, you can use role="presentation" on those elements.

Metadata

Metadata

Assignees

No one assigned

    Labels

    d3: mediumNo cheats. Monsters a bit faster.good first issueRight issue if you're new to vuesticv3: wish to haveThis is something user want, but can live without it

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions