posit-dev / posit-dev/product-doc-theme

[Accessibility]: Accessibility issues Tracking (Phase 1)

Open
#55 0 comments 0 reactions 1 assignee View on GitHub

@AshleyHenry15 is already working on this.

Since Apr 26, 2024.

accessibility hold-for-quarto
Dominant language
SCSS
Stars
6
Forks
5
Avg merge
1d 4h
Merged PRs (30d)
6

Description

Describe the accessibility issue
A clear and concise description of what the accessibility is.

Lighthouse report surfaced the following issues:

Can't fix (quarto issue):

  • Search button in nav bar: Inaccessible button name. Quarto issue: https://github.com/quarto-dev/quarto-cli/issues/678
  • Callouts: div.callout-header.d-flex.align-content-center Quarto issue: https://github.com/quarto-dev/quarto-cli/issues/4934
    [aria-*] attributes do not match their roles
    Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. 
    [Learn how to match ARIA attributes to their roles](https://dequeuniversity.com/rules/axe/4.8/aria-allowed-attr).
    

Can fix:

  • Footer logos (posit guide and posit logo): Lacking alt text (#56)
  • Nav bar text: contrast between font color and background (contrast is too low) (#56)
  • [aria-hidden="true"] elements contain focusable descendants (I think that this is an issue for both the website logo and the menu item drop-down in the nav - I have fixed the menu item issue) (#56)

    Focusable descendents within an [aria-hidden="true"] element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn how aria-hidden affects focusable elements.

    image

Uncategorized - unsure if we can fix

  • [aria-hidden="true"] elements contain focusable descendants (Quarto team thinks that this is resolved in v1.5 so I can verify at a later date - however, the Quarto website doesn't have this issue so I am assuming that v1.5 does in fact resolve this issue)

    Focusable descendents within an [aria-hidden="true"] element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn how aria-hidden affects focusable elements.

    image
    <body class="nav-fixed quarto-light" data-tabster="{&quot;root&quot;:{}}" data-new-gr-c-s-check-loaded="14.1169.0" 
    data-gr-ext-installed="" data-bs-offset="81" style="padding-top: 81px;">
    
  • [aria-*] attributes do not match their roles
    image
    (Fix?: https://github.com/quarto-dev/quarto-cli/pull/9553/files)

Resolution
If applicable, add the solution to resolve this accessibility issue.

Additional context
Add any other context about the problem here.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.