covid19india-react Get a 100 on lighthouse for accessibility

Get a 100 on lighthouse for accessibility

Open jeremyphilemon opened this issue 4 years ago • 20 comments

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.

Apr 27 '20 17:04 jeremyphilemon

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

/available

Apr 27 '20 17:04 jeremyphilemon

This issue is available for contribution.

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

Apr 27 '20 17:04 github-actions[bot]

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

Apr 27 '20 17:04 mkesavan13

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.

Apr 27 '20 17:04 github-actions[bot]

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?

Apr 28 '20 02:04 mkesavan13

@mkesavan13 Hey thanks for working on this!

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

Apr 29 '20 01:04 jeremyphilemon

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?

Apr 29 '20 01:04 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.

May 01 '20 16:05 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.

May 02 '20 11:05 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.

May 03 '20 13:05 mkesavan13

Hi @jeremyphilemon,

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

Thank you.

May 11 '20 05:05 mkesavan13

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