botamusique
botamusique copied to clipboard
azlux
I'm doing an Accessibility audit of the Web Interface
I'm doing an accessibility audit for the web interface, because to me accessibility is really important.
How
I've done this using the WAVE tool by WebAIM. This tool is open source, and you can use it yourself locally through a browser extension.
Where
The commits I've based this off of are 3c87c33ddd2838b (existent in master) merged with 5f67517dc3022df (the volume branch), which are relatively recent (last two weeks).
Results
There are many accessibility issues with the Web Interface. I go through some of them in this video. If you like this format, tell me and I'll go through the ones marked as "Alert" as well (which I've omitted since they're not as critical as the others).
PS: sorry for the audio noise.
My screen produces electronic noise that enters my notebook through the HDMI port, and from there it goes into the USB port and then into my microphone. I'm having a hard time filtering it out. I did the best I could with ffmpeg to reduce its intensity :)
Thanks for raising this. I never paid attention to accessibility. Currently, @TylerVigario is still working on the build system for the web interface. I think we can look into it after his PR is merged.
As for the audio noise, I found it common for an external screen to produce noise. Probably it is caused by improper grounding. You can easily verify that by touching the metal part of your laptop (like the metal shell or the USB port) with your finger. If the noise disappears or reduces when doing so, then it is the grounding problem, and you need to find a power adapter that has the ground wire.
I agree that we should update our markup to use latest accessibility standards.
Edit: On a similar note we should add localization as well.
On a similar note we should add localization as well.
@TylerVigario if you can make the markup localizable, I will gladly take care of localizing the UI to Spanish :) (tis' my mother language)
(offtopic)
Probably it is caused by improper grounding.
@TerryGeng
After an afternoon of messing around with my multimeters, and trying a special USB cable that a friend made for me which has extra capacitance (which should help dampen the noise), we've concluded that it is indeed a grounding problem.
Well, I mean, the monitor has some crappy electronics inside as well - no monitor should feed 50Hz noise into your computer, that's just... just wrong right? But all the possible solutions that I've been told need a good ground connection. And my house has no ground connections! (it's a very old house, and the wiring uses extremely outdated normatives). We're gonna have to work on that with my dad. It's been a long time coming anyway; the non existent ground connection gives us other problems as well.
The obvious alternative to all of this mess is to use wireless headphones... but I'm gonna try fixing our house's earth first :3
@TylerVigario do you think I could make a PR addressing this? Now that the Node migration has been merged into master :3
@felix91gr Yeah that would be great! If you need any help let me know.
Excellent, I will, then! :)
@TylerVigario apart from web > templates > index, what other file is used to generate the HTML? Also, these are all the stylesheets that the web interface uses, right? I'm not missing a special one? :3
@felix91gr yeah that's basically it at the moment. It's still quite a small web app.
After #180, there are two families of issues remaining (at least that I can see with my tools) that I want to work on:
- Contrast issues. Mostly regarding coloured elements which don't have enough contrast between their text and the background.
- Keyboard issues. This is related to how you can control the page with a keyboard.
The keyboard issues are all new to me (I have only just acquired tools to spot them), whereas I have pretty decent experience in working with contrast issues. Therefore, my next accessibility PR will focus on contrast.
The tools I've been using are WAVE (mentioned in the original post) and the Firefox Accessibility Inspector. WAVE is good at spotting many different kinds of errors, whereas the FF A11y Inspector allows you to view the accessibility tree, and spot issues regarding keyboard access, contrast and labelling.