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.

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

Accesibility issues by lighthouse #263

Open
4 of 7 tasks
alexdor opened this issue Mar 4, 2019 · 1 comment
Open
4 of 7 tasks

Accesibility issues by lighthouse #263

alexdor opened this issue Mar 4, 2019 · 1 comment
Labels
design Design-related issue good first issue Good for newcomers

Comments

@alexdor
Copy link
Member

alexdor commented Mar 4, 2019

Lighthouse has spotted the following accessibility issues:

Header

  • Buttons do not have an accessible name
    Failing Elements:
    • <button class="button button--header header__button" aria-controls="header-navigation-container" aria-expanded="false">

Home page

  • Background and foreground colors do not have a sufficient contrast ratio.
    Failing Elements:
    • <p class="blockquote-box__text">
    • <cite class="blockquote-box__cite">Linus Torvalds</cite>

Clubs page

  • Buttons do not have an accessible name
    Failing Elements:
    • <div role="button" aria-pressed="false" class=" toggle" tabindex="0"><div class="toggle__track"></div><div class="toggle__bullet"></div></div>

Note: I haven't tested with lighthouse the pages as a logged on user

Lighthouse doesn't validate the following :

1 [accesskey] values are unique
2 The page has a logical tab order
3 Interactive controls are keyboard focusable
4 Interactive elements indicate their purpose and state
5 The user's focus is directed to new content added to the page
6 User focus is not accidentally trapped in a region
7 Custom controls have associated labels
8 Custom controls have ARIA roles
9 Visual order on the page follows DOM order
10 Offscreen content is hidden from assistive technology
11 Headings don't skip levels
12 HTML5 landmark elements are used to improve navigation

An example of the lighthouse report can be found here https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https://ossn.club/

@iropal because I'm not familiar with the accessibility targets of the project please let me know if some spotted issues aren't applicable for the project

@alexdor alexdor added the good first issue Good for newcomers label Mar 4, 2019
@iropal
Copy link
Collaborator

iropal commented Mar 5, 2019

@alexdor I fixed the two buttons at pr #262.
The contrast is a design issue. It can be easily fixed since it is either a line of css or an image change but I am not authorized to take such a decision since the design is approved.
As far as the targets of the project, the only one known to me is testing the site with https://observatory.mozilla.org/. Of course the website was build with accessibility in mind but there are no known accessibility targets.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Design-related issue good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

3 participants