Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[qwik] Accessibility issues #1964

Open
53 tasks
dustinsgoodman opened this issue Oct 12, 2023 · 0 comments
Open
53 tasks

[qwik] Accessibility issues #1964

dustinsgoodman opened this issue Oct 12, 2023 · 0 comments

Comments

@dustinsgoodman
Copy link
Contributor

Manually Identified Issues

  • Filter Dropdown items are tab-indexed when they are not visible. They should have tabindex="-1" when the dropdown is not opened so tabbing the page skips over them.
  • Navigation in dropdown items should be possible with arrow keys. Applies to:
    • Filter Dropdown component
    • User Dropdown component

Accessibility Issues Found by Automated Tests

The audit has been made with Axe DevTools. You can install the extension and run the same test from Chrome dev tools (you may need to restart Chrome to see the new tab there).

General

  • Document must have <title> element to aid in navigation

  • <html> element must have a lang attribute

  • Link must have discernible text

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Element does not have text that is visible to screen readers
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute

Repo Detail (http://localhost:5173/thisdot/starter.dev/)

  • Elements must have sufficient color contrast

    Image

  • Links must be distinguishable without relying on color

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • The link has insufficient color contrast of 2.84:1 with the surrounding text. (Minimum contrast is 3:1, link text: #2563eb, surrounding text: #1f2937)

    • The link has no styling (such as underline) to distinguish it from the surrounding text.

Issues (http://localhost:5173/thisdot/starter.dev/issues/)

  • Buttons must have discernible text

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Element does not have inner text that is visible to screen readers
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
    • Element's default semantics were not overridden with role="none" or role="presentation"

  • Elements must have sufficient color contrast

    Image

  • Form elements must have labels

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Form element does not have an implicit (wrapped)
    • Form element does not have an explicit
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
    • Element has no placeholder attribute
    • Element's default semantics were not overridden with role="none" or role="presentation"

Pull Requests (http://localhost:5173/thisdot/starter.dev/pulls/)

  • Buttons must have discernible text

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Element does not have inner text that is visible to screen readers
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
    • Element's default semantics were not overridden with role="none" or role="presentation"

  • Elements must have sufficient color contrast

    Image

  • Form elements must have labels

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Form element does not have an implicit (wrapped)
    • Form element does not have an explicit
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
    • Element has no placeholder attribute
    • Element's default semantics were not overridden with role="none" or role="presentation"

User (http://localhost:5173/mhevery/)

  • Buttons must have discernible text

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Element does not have inner text that is visible to screen readers
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
    • Element's default semantics were not overridden with role="none" or role="presentation"

  • Elements must have sufficient color contrast

    Image

Organization (http://localhost:5173/orgs/builderIO/)

  • Images must have alt text

    Image
@dustinsgoodman dustinsgoodman changed the title [qwik-pod] Accessibility issues [qwik kit] Accessibility issues Oct 12, 2023
@dustinsgoodman dustinsgoodman changed the title [qwik kit] Accessibility issues [qwik] Accessibility issues Oct 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@dustinsgoodman