Get a 100 on lighthouse for accessibility

[jeremyphilemon]

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.

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]

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

/available

[github-actions]

This issue is available for contribution.

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

[mkesavan13]

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]

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]

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?

[jeremyphilemon]

@mkesavan13 Hey thanks for working on this!

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

[mkesavan13]

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?

[mkesavan13]

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]

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]

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.

[mkesavan13]

Hi @jeremyphilemon,

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

Thank you.

[abinayabalaji93]

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

[raunak-shr]

/claim

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

[sonat98]

This issue is available for contribution.

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

/claim

[ilicina1]

Hi, i would like to work on this :)

/claim

[Allenagarciaa]

/claim

[marootushar]

/claim

[piyushgupta92]

@jeremyphilemon /claim

[Phoenix0783]

/claim

[mohilkhare1708]

/claim