Skip to content
This repository has been archived by the owner on Nov 2, 2021. It is now read-only.

Get a 100 on lighthouse for accessibility #1610

Open
jeremyphilemon opened this issue Apr 27, 2020 · 20 comments
Open

Get a 100 on lighthouse for accessibility #1610

jeremyphilemon opened this issue Apr 27, 2020 · 20 comments
Assignees
Labels
Good First Issue For first time contributors :) Status: In Progress

Comments

@jeremyphilemon
Copy link
Collaborator

Is your feature request related to a problem? Please describe.
There are parts of the website that can use improvements in increasing the accessibility of the website.

Screen Shot 2020-04-27 at 7 58 18 PM

Describe the solution you'd like
Open website in chrome, use lighthouse under "Audit" in developer tools and it'll tell you where we can improve the website under the accessibility section.

Additional context
This is for the light mode version of the website, the dark mode will need some more eyes regarding contrast color palettes, hence it will be worked on a little later.

@jeremyphilemon jeremyphilemon added Status: Review Needed Good First Issue For first time contributors :) labels Apr 27, 2020
@jeremyphilemon
Copy link
Collaborator Author

I'm leaving this open for first-time contributors, so please be mindful before claiming :)

/available

@github-actions github-actions bot added Status: Available Reply with /claim to assign to you and removed Status: Review Needed labels Apr 27, 2020
@github-actions
Copy link

This issue is available for contribution.

Please reply "/claim" (without quotes) if you wish to work on this issue.

@mkesavan13
Copy link

I'm new to react and a first time contributor. I have another issue open though. #1604

However would like to work on this.

/claim

@github-actions github-actions bot added Status: Claimed It's clear what the subject of the issue is about, and what the resolution should be and removed Status: Available Reply with /claim to assign to you labels Apr 27, 2020
@github-actions
Copy link

Thank you @mkesavan13 for claiming this issue! 🎉

Please reference this issue when you submit your Pull Request and make sure you follow the contributing guidelines.

@mkesavan13
Copy link

Hi @jeremyphilemon

I have brought it up to 96 on home page alone and is available at mkesavan13:covid19-react/HUNDRED_ON_LIGHTHOUSE. Working on other page lighthouse issues. However I have a doubt.

The pending 4 points are related background and foreground colours. Bringing that one up to 100 requires minor colour changes. Shall proceed with changing the colours as per dev tool guidelines or is there any project specific guidelines that I should follow?

Screen Shot 2020-04-28 at 7 20 01 AM

@jeremyphilemon
Copy link
Collaborator Author

@mkesavan13 Hey thanks for working on this!

Between which colors and which components is the tool suggesting the contrast issue?

@mkesavan13
Copy link

Hi @jeremyphilemon

I'm glad to work on this. If you look at the screenshot below you'll know. It points out most of the elements. The tool mentions that the four colours for "Confirmed", "Active", "Recovered" & "Deceased" itself needs contrast adjustment. Do you need me note down and share, specifically which elements or which colours need a change?

Screen Shot 2020-04-29 at 7 16 44 AM

@mkesavan13
Copy link

Hi @jeremyphilemon

There's a problem with material select w.r.t accessibility labels. I'm working on it as well. Other than that one and these Background and foreground colour changes, every other page is complete.

Please let me know about these colour changes alone. Looking forward and thank you.

@mkesavan13
Copy link

Hi @jeremyphilemon

There's an update. I also found what the problem was with the Select native and fixed the accessibility issues. Have opened a Draft PR #1715

Kindly let me know how do we proceed about this. Thank you.

@mkesavan13
Copy link

Hi again,

https://covid19india-react-git-fork-mkesavan13-hundredonlighthouse.covid19india.now.sh/state/DL

In the state page, there's a hidden "Visit state page" link. Since this is hidden, I think there's no point providing an accessibility label to a hidden button. Kindly let me know your thoughts. Thank you.

@github-actions github-actions bot added Status: In Progress and removed Status: Claimed It's clear what the subject of the issue is about, and what the resolution should be labels May 3, 2020
@mkesavan13
Copy link

Hi @jeremyphilemon,

I am still waiting for an update from you. Please let me know how to proceed about this.

Thank you.

@abinayabalaji93
Copy link

I'm new to react and a first-time contributor
How can I claim the project

@raunak-shr
Copy link

/claim

1st time contributor. What has to be done reply please @jeremyphilemon

@sonat98
Copy link

sonat98 commented Dec 18, 2020

This issue is available for contribution.

Please reply "/claim" (without quotes) if you wish to work on this issue.

/claim

@ilicina1
Copy link

Hi, i would like to work on this :)

/claim

@Allenagarciaa
Copy link

/claim

1 similar comment
@marootushar
Copy link

/claim

@piyushgupta92
Copy link

@jeremyphilemon /claim

@Phoenix0783
Copy link

/claim

1 similar comment
@mohilkhare1708
Copy link

/claim

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Good First Issue For first time contributors :) Status: In Progress
Projects
None yet
12 participants