Accesibility issues by lighthouse

[alexdor]

Lighthouse has spotted the following accessibility issues:

Header

• [x] Buttons do not have an accessible name Failing Elements:
  • [x] <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

• [x] Buttons do not have an accessible name Failing Elements:
  • [x] <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

[iropal]

@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.