Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Audit the website for accessibility issues #303
Related to #286, we should do an audit of the website for accessibility issues before launch.
Yellow text in buttons on gray background such as "Start exploring"
Twitter and Github logo in the lower right corner
cc @HTTPArchive/developers can anyone help resolve these a11y issues?
I've found some bugs and will take time tomorrow to write them up individually with repro steps and check them all to ensure they are cross-platform. Where is a good spot to put them?
The most pressing issues I see tonight are:
Inside the report page:
And a few more.
I've updated #237 to outline a process for including accessible data visualizations. To sum it up:
All new data visualizations are following this process and I've gone back through other chapters to ensure that they're accessible. This should solve the P0 issue.
SGTM go for it, alt="" away! Go ahead and run the lighthouse tool in Chrome DevTools if you want to be sure you caught them all.…
On Sun, Nov 10, 2019, 3:32 AM Rick Viscomi ***@***.***> wrote: There are many images of cartoons that need to be decided to be either purely decorative (and get alt="") or have meaning and need alt text I think alt="" is the right way to go, but I'm open to suggestions. They add value to the visual aesthetic but not so much to the content. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#303?email_source=notifications&email_token=AAZ4GUSDBHPAHDF5I4VS35LQS7BK7A5CNFSM4JIH7IF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDUYFPY#issuecomment-552174271>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAZ4GUUK6C5QGTCXABNUPH3QS7BK7ANCNFSM4JIH7IFQ> .
@ljme I'd be interested in hearing your opinion on a conversation how I'm proposing having the details images.
We will basically have this sort of markup:
So we have a figure, containing a linked image and with a
Either the iframe or the linked image will be shown in this case but not both.
I've come up with this approach after some reading but could do with some a11y expertise to validate some assumptions, namely:
Thanks in advance for any insights you can give here as we want to be as accessible as possible!
Please take a look at the Accessibility page for an example of the graphs working as expected in terms of descriptions being provided for screen reader users. For example, if you take a look at the HTML for Figure 2, you'll see that this is the description I wrote that is referenced by aria-describedby:
I'm concerned that the heart of the matter is being lost here. The most important thing is that the data that is being represented by the graph is also articulated to screen reader users. I think most of the work is in getting the descriptions written themselves or preparing links to the relevant data. Please see the end of this paper from researcher Valarie Morash for a great template on writing descriptions for the graphs.
I hope that helps!
Hi @ljme , thanks for responding But I’m not sure you answered the question I was asking.
You seem to have looked at the description in the example. I agree it’s a little light in this example and does convey the full detail that is shown on the graph so this particular example should probably be expanded upon. I look into that separately and try to review all the figures again.
However, I was less asking about the text in the specific example and more on the approach. In this example I converted the existing markup (which I admit is a little light!) to a new structure as previously there was no ‘title
So let’s use the example you give from from the accessibility chapter instead, as that is indeed a better example. This is what is in the markdown file, and is copied to the HTML file:
Again only one of the
So in this example we have a much better description, but my questions are the same as listed in #303 (comment) as you the way this has been implemented in regards to
For example, Rick was concerned that we were being overly repetitive with effectively having the same values in the
So do you understand what I am asking now?
Hi @bazzadp, it might be helpful to know that there is order of operations in ARIA. So for example, if you want to name an element, the name will be resolved in the following order:
If you want to describe an element, the description will be resolved in the following order:
Does this answer your question?
In regards to these:
I'm not an expert but I'm not sure we do need to do anything here. The WCAG standard states the following according to MDN:
(Btw the Firefox Accessibility check in their dev tools is awesome for checking out accessibility issues!)
So the ones highlighted (apart from the last one) are not body text and are all well within the 3 : 1 range. The Twitter and Github logos are admittedly failing this but really are secondary and are much more obvious when hovered over.
So I vote to close this issue as complete. Thoughts?