HTML / Accessibility validation
jaimeiniesta opened this issue · 19 comments
Hello!
As we talked in #35 we're using Rocket Validator to check for HTML and Accessibility issues in the new site for Elixir School.
I've set up a weekly schedule to run site-wide reports, and the new domain stats feature (now in beta) gives the latest reports run for that domain, and some nice stats showing the evolution in the number of issues and check coverage.
Here's the direct link to the latest stats and reports for that domain:
https://rocketvalidator.com/domains/elixirschool.com?auth=171c6160-f0a2-49d9-b83f-065c15c8a072
@doomspork feel free to replace this with your own shared link, so that we get the data from reports in your account, which I believe should be our main reference.
I've muted some issues, for example those related to phx- attributes (required by Phoenix), and those related to x- attributes, needed for Alpine:
If there are more issues like this that we should mute (as are out of our scope, so we won't fix them) please let me know!
Thank you so much @jaimeiniesta! I am going to start going through the new features you released later this week, super excited for this!
No problem, I'll be eating my own dog food and using Rocket Validator to find and fix issues in School House. So expect some PRs :)
By the way if anyone is interested in getting free account for open source just ping me at jaime AT rocketvalidator DOT com and I'll set you up.
My recommended flow is using ngrok to open a local tunnel into your dev machine so you can validate while you develop:
https://docs.rocketvalidator.com/how-to-validate-your-local-server/
@kinson was asking me the other day how he could test changes locally 🎉
@jaimeiniesta just so you're aware I'm trying to aim for us to launch this new site in the next 2 weeks. I'm afraid with my upcoming schedule (buying a house, moving, big work project) that if we don't do it now, it may not come to be for many moons.
@kinson ping me with your email and I'll set a free account for you so you can test changes locally.
@doomspork tight schedules are great for focusing :D
@jaimeiniesta my email is REDACTED , thanks for adding me and thanks for finding and fixing all of these issues!
Hey @kinson I'll send you an email with instructions!
We're making good progress! Just by fixing some of the HTML issues, take a look at the issue density graphs:
HTML issue density
A11Y issue density
Let's crush those issues!
Wow! That's really awesome. I would very much like to highlight the work you both have done with this A11Y stuff, I don't feel as though it is widely known or understood.
Do you think there's merit in writing a short blog post on Elixir School just about these efforts? While it may not directly relate to Elixir it's important for the health of the community and the internet 🎉
@jaimeiniesta the URL you provided: will that always be static? I'd like to include a link to this report in the footer (if possible) and on the contributing page that @kinson is taking a stab at. That is, in addition to a call out on the homepage to yourself and AppSignal for the support. If you have thoughts on the latter I'm all ears.
Hey @doomspork I'm happy to help!
Yes, that URL is going to be static - as long as I keep it shared, which I plan to do. I mean, it's a "shared link" on the new Domain Stats feature. You may want to set up your own but as you're busy, I'm happy with keeping mine.
I'll be happy to write a short blog post explaining how we're crushing those issues. I can explain our setup, and maybe also mention what we did to fix the site (based on the PR history).
@jaimeiniesta I am trying to understand how muting rules work on RV. Is a muting rule tied to a specific domain or to a specific run by a particular user?
For instance, if I wanted to mute a rule like this that is a part of Phoenix, would I run a report from my account and then add the muting via the muting page on RV along with the ones you've already added? Thanks in advance and feel free to link me to a documentation page that I may be missing!
@kinson each user has his own muting rules. So the rules you define apply only to your reports. We should agree on what rules to apply.
A muting rule is formed by a URL match and a message match. For example these are the rules I've defined in my account
In that example there are 3 rules, the first one means: mute anything on URLs containing "elixirschool.com" and "Attribute “@click"
The URL match can be something as broad as the domain or a more specific URL part, like "elixirschool.com/blog" for example.
Muted issues still exist in the reports, but are muted - they don't show up until you explicitly disable muted visibility.
More info found here:
https://docs.rocketvalidator.com/muting/
Thanks for the feedback - I'll try to explain this better in the UI.
Thanks for the explanation, do you have a proposal for how we should set the muting rules for the project? Perhaps a json or yaml file with the muting phrases listed for the domain.
I'm writing a quick guide explaining how we use Rocket Validator in this project, as a markdown file. I think we can include them in that document by now.
OK so we're almost at 0 HTML issues (pending some content fixes) so I'll be focusing now in the accessibility checks!
Now that we're using the main domain, I've updated the shared domain stats, this is the new URL (I've also edited it in the previous comments)
https://rocketvalidator.com/domains/elixirschool.com?auth=171c6160-f0a2-49d9-b83f-065c15c8a072
🎉 🎉 🎉 🚀 Good job everyone! We've achieved a 96% score on HTML checking for the site. This means that for the 1,017 URLs checked, only 4% of them have any issue - and they're only warnings:
Here's the link to the latest report. I'll open issues to fix the remaining warnings:
https://rocketvalidator.com/s/3b30de02-419d-4c3a-ac45-b055680a8f3b
...and after that, we can continue with accessibility checks - we're at 47%, not bad at all!
The next biggest HTML issue is this one - it's on the other repo as it's related to content:
Yay, look at the HTML issues chart for the domain !!!
