Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Website accessibility issues #1315

Closed
acrymble opened this issue May 25, 2019 · 7 comments
Closed

Website accessibility issues #1315

acrymble opened this issue May 25, 2019 · 7 comments
Assignees
@mdlincoln
Labels
Enhancement

Comments

@acrymble
Copy link

I've run a few of our pages through website accessibility tests. Here are some of the issues that we should want to address:

  • All lesson icons on the /lessons page should have a machine-readable description that is semantically meaningful. At present these images are linked to the lesson, but a screen reader wouldn't likely know what they are. Related to this, all images should have alternative text.
  • We should declare the natural language of all pages for screen readers.
  • Links should not directly target images. When an image is embedded within an HTML document, content providers are able to provide an alternate text equivalent through the alt attribute. When images are directly targeted, the image will load in the current browser window without any further information available to users of assistive technology.
  • When ARIA attributes (state, roles, and properties) are not used correctly assistive technology may not correctly function as expected. Valid markup should always be used.

I will suggest the technical team takes a look at this, as it seems like most fixes are quite easy.
@arojascastro
Copy link
Contributor

Great job! I know @jenniferisasi is interested in this topic.

@jenniferisasi
Copy link
Contributor

Oh, yes! This is something I've been meaning to talk about but I have so many things on my plate that I was waiting to cross a few first. I have been implementing the rules I know, following W3C standards, and so, for instance, in our Voyant-Tools lesson, I told the author to include this step by step in written format as an alternative to visual-gif form.

@mdlincoln
Copy link
Contributor

These are all great points. I'm going to split these into separate tickets. One question @acrymble - can you provide the site that you used to test this:

We should declare the natural language of all pages for screen readers.

I had believed that all(?) of our pages already declared their proper natural language, but perhaps some are missing this, or we haven't formatted it correctly. I need more detail.

This was referenced May 31, 2019
Closed
Closed
@mdlincoln
Copy link
Contributor

also

When ARIA attributes (state, roles, and properties) are not used correctly assistive technology may not correctly function as expected. Valid markup should always be used.

This may be from our dropdown menus... I need to see the full accessibility report to diagnose it however.

@walshbr walshbr mentioned this issue May 31, 2019
Closed
11 tasks
@acrymble
Copy link
Author

the warnings came from testing a few pages with this tool: https://www.webaccessibility.com/

@mdlincoln
Copy link
Contributor

The language warning seems to be triggering erroneously - it's pointing to a <script> tag? All of our pages start with <html lang={{ page.lang }}>, so I believe this is addressed.

@amsichani amsichani mentioned this issue Jun 7, 2019
Closed
14 tasks
@walshbr
Copy link
Contributor

walshbr commented Jun 24, 2019

Since you've split this into several tickets, can we close this @mdlincoln?

@acrymble acrymble mentioned this issue Apr 21, 2020
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mdlincoln mdlincoln

Labels
Enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@acrymble @walshbr @mdlincoln @arojascastro @jenniferisasi