https://github.com/dequelabs/axe-core<

Another interesting tool might be <code class

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

[qa] test accessibility about www.rust-lang.org HOT 9 CLOSED

rust-lang commented on May 6, 2024

[qa] test accessibility

from www.rust-lang.org.

Comments (9)

chriskrycho commented on May 6, 2024 1

There are a fair number of things in good shape here, including generally contrast ratios. However, I just ran Chrome Lighthouse's tool for accessibility audits and it has a bunch of issues. I'm listing the issues it identified here, along with the elements it identified as failing, for ease of chasing them down and fixing them.

Image elements do not have an alt attribute.

<img src="/static/images/cli.svg">
<img src="/static/images/webassembly.svg">
<img src="/static/images/networking.svg">
<img src="/static/images/embedded.svg">
<img src="/static/images/twitter.svg">
<img src="/static/images/youtube.svg">
<img src="/static/images/discord.svg">
<img src="/static/images/github.svg">

Links do not have a discernible name.

<a href="https://twitter.com/rustlang"><img src="/static/images/twitter.svg"></a>
<a href="https://www.youtube.com/channel/UCaYhcUwRBNscFNUKTjgPFiA"><img src="/static/images/youtube.svg"></a>
<a href="https://discord.gg/rust-lang"><img src="/static/images/discord.svg"></a>
<a href="https://github.com/rust-lang"><img src="/static/images/github.svg"></a>

<frame> or <iframe> elements do not have a title

<iframe class="twelve columns" src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;mode=AGENDA&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=apd9vmbc22egenmtu5l6c5jbfc%40group.calendar.google.com&amp;color=%23691426&amp;ctz=Europe%2FMadrid" style="border-width:0" height="400" frameborder="0" scrolling="no">

Form elements do not have associated labels

<select id="lang"> <option value="">Languages</option> <option title="English (US)" value="en-US">English (en-US)</option> <option title="French" value="fr">Français (fr)</option> <option title="German" value="de">Deutsch (de)</option> </select>
<select id="lang"> <option value="">Languages</option> <option title="English (US)" value="en-US">English (en-US)</option> <option title="French" value="fr">Français (fr)</option> <option title="German" value="de">Deutsch (de)</option> </select>

[id] attributes on the page are not unique

<select id="lang"> <option value="">Languages</option> <option title="English (US)" value="en-US">English (en-US)</option> <option title="French" value="fr">Français (fr)</option> <option title="German" value="de">Deutsch (de)</option> </select>

<html> element does not have a [lang] attribute.

Lighthouse rates the site a 42/100 for these reasons, but they're easy wins.

from www.rust-lang.org.

yoshuawuyts commented on May 6, 2024 1

Another interesting tool might be pa11y. I usually run it after having gone through the issues on lighthouse; might come in useful if we want to take things further.

from www.rust-lang.org.

skade commented on May 6, 2024

The tool looks good, but it seems like it mostly tests elements for aria and labels?

I think it would make sense to specify what we want to test for and maybe also assemble community volunteers to test (and contribute subsequently?). https://www.w3.org/wiki/Accessibility_testing#Personas_with_disabilities has a couple of recommendations for accessibility personas.

Luckily, we don't have a lot of audio-visual content anyways, which makes the whole thing boil down to mainly dealing with making the text accessible visually and for tooling. Anecdotal feedback for the current page is that it is very good in that area.

If you are fine with that, I'd be willing to do some research there.

I think it would also make sense to come up with a couple of guidelines as a project there, as those could be shared with the books, for example. My gut feeling is that we actually have quite some things covered already, writing things down would be great. That's definitely another topic of another scope, though.

from www.rust-lang.org.

ashleygwilliams commented on May 6, 2024

@skade - so i would like to have the aXe tools in there because they are a great start. certainly not the be all end all. it's somewhat of a stop gap and given that we don't have anything in place and this is a project that will soon be open sourced, and likely have a large set of contributors, having some automated tests is really the only way we can maintain any semblance of support for a11y long term without significant overhead of folks to review all PRs. the aXe core stuff gives us a way to have CI remind folks to even think about accessibility. which is def not happening on any of our current web properties at the moment. this is not because folks don't care, but because we need tooling to help remind us. anecdata is Very Useful, but not a long term automated maintenance strategy, which while not ideal, is what large websites with tons of stakeholders, need.

while we're def not at the stage to bring in community volunteers, i'd certainly not be opposed to doing so once we are much closer to release. i'm not entirely sure what the project's governance will be once we ship first release, that's yet to be determined but i certainly would love to have feedback from folks this affects directly. if there are folks that would like to help define goals and help maintain them i think that would be absolutely fantastic and i'd be down for helping get that set up- though we are several months away from that.

from www.rust-lang.org.

ashleygwilliams commented on May 6, 2024

i can knock this out this morning.

from www.rust-lang.org.

chriskrycho commented on May 6, 2024

Just caught this while running through the audit for where we are and are not using Tachyons: this way of displaying images on Community is completely inaccessible. We should switch it to using actual images, e.g. with flex box or another strategy for making it fit exactly as we want it.

from www.rust-lang.org.

chriskrycho commented on May 6, 2024

Another observation: many of the uses (not quite all, but many) of <em> and <strong> throughout are being used purely for visual distinction, rather than because we're emphasizing or strongly emphasizing the underlying content. This blog post has a great discussion of the issues here.

(I can do a quick and easy audit and fix for this after I finish the Tachyons audit. I'll open an issue tracking this and the issue noted above.)

from www.rust-lang.org.

skade commented on May 6, 2024

I got testing feedback from a braille line user and they liked the page :).

Should manual testing be put into a separate ticket?

from www.rust-lang.org.

ashleygwilliams commented on May 6, 2024

@skade yes that'd be great! or even better- an issue for each thing that will need to be fixed ;)

from www.rust-lang.org.

[qa] test accessibility about www.rust-lang.org HOT 9 CLOSED

Comments (9)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs