datascijedi / website

https://datascijedi.org
Creative Commons Attribution Share Alike 4.0 International
6 stars 2 forks source link

Accessibility check? #29

Closed rycoley closed 1 year ago

rycoley commented 1 year ago

Do we need to do any additional checks to ensure that the website content is screen-reader friendly and accessible in any other ways? Mine mentioned that most of the defaults for Quarto supported accessibility. Is there anything else we need to check?

mine-cetinkaya-rundel commented 1 year ago

@rycoley I ran an accessibility check using axe DevTools and addressed the ones I could with #37.

There are two alt-text issues that are due to how Quarto works, I'll open issues for those for Quarto enhancements.

There are also some remaining color contrast issues in the Twitter embed, I don't think we can address them but maybe someone else knows?

Finally, there are some issues remaining that are around making links accessible to screenreaders with aria labels etc. which I haven't been able to address fully but if there's someone in the group more well-versed in those, maybe we can figure them out together. Otherwise, I'm happy to give it another shot in the next few days.

brtarran commented 1 year ago

@mine-cetinkaya-rundel @rycoley I went through the links on the site pages and added aria labels in places where I thought that the purpose of the link was unclear (using this helpful overview). For example, for the upcoming webinar I added "Register for [webinar title]" as an aria label to the "Register now" button. All changes made are in 1e22a99.

I was unsure whether we also needed to add aria labels to links like the following (in bold):

The Communications Committee manages the JEDI Outreach Group social media channels and website, coordinates the JEDI Corner in Amstat News, and advertises JEDI-related events and opportunities.

Do we need to label this as, for example, "Link to JEDI Corner listings page". Or is the "JEDI Corner" text associated with the link sufficient?

rycoley commented 1 year ago

Thanks for the aria labels instructions, Brian. I will be sure to do this when adding future links and have included it in the instructions for contributors. Based on the link you sent, I think we could go either way with the JEDI Corner link. I don't think there is any harm in having a more explicit label like "Link to JEDI Corner archive" and we should lean to being more clear when we can. I will update the Activities page.

ravicodelabs commented 1 year ago

There are two alt-text issues that are due to how Quarto works, I'll open issues for those for Quarto enhancements.

I don't know enough about how accessibility features work as of yet (it's on the reading list!) to chime in on the open questions here, but @mine-cetinkaya-rundel I think it'd be helpful to link to the relevant Quarto GitHub issues from here as well.

ravicodelabs commented 1 year ago

Hi All - if this issue is still open, I was thinking to take a closer look at any remaining website accessibility needs.

mine-cetinkaya-rundel commented 1 year ago

@ravimakhija I have not had a chance to run through the accessibility checks again on this site recently so there may still be remaining issues. I would recommend rebuilding with latest Quarto before checking.

ravicodelabs commented 1 year ago

I would recommend rebuilding with latest Quarto before checking.

Sounds good! The Netlify deploys are using Quarto v1.2.475 which is the currently the latest release, so I can give the accessibility checks another run soon.

mine-cetinkaya-rundel commented 1 year ago

The latest release is now 1.3+ and I'd recommend using that one since there were many updates to Quarto in between, including some accessibility ones.

ravicodelabs commented 1 year ago

Sounds good. According to the quarto-cli GitHub releases page, currently the latest release is 1.2.475. However, the latest pre-release is currently 1.3.296. I can update Netlify to use 1.3.296 (or newer) before doing the accessibility check. Thanks for the feedback!

ravicodelabs commented 1 year ago

Hi all, to follow up on this: I used Firefox accessibility inspector and some additional references in my checks, and I've made a few updates in PR #110, as well as provided some feedback to the Quarto team for improving accessibility.

I did my testing using the live website, as well as locally using the latest pre-release Quarto version at the time (1.4.388).

Do we need to do any additional checks to ensure that the website content is screen-reader friendly and accessible in any other ways?

Between Mine's check with Axe tools and my check with Firefox accessibility tools, and additional checks by the team, my opinion (as someone who is not an expert but now has a decent understanding of web accessibility) is that we are in a pretty good place as far as web accessibility goes.

There are also some remaining color contrast issues in the Twitter embed, I don't think we can address them but maybe someone else knows?

We recently disabled the embedded timeline (see issue #100), so I suppose this is no longer an issue, unless we decide to bring it back at some point.

Finally, there are some issues remaining that are around making links accessible to screenreaders with aria labels etc. which I haven't been able to address fully but if there's someone in the group more well-versed in those, maybe we can figure them out together.

I think the use of aria-label for links (when needed) and alt for images (always) addresses this. I have added an "Accessibility Tips" section to CONTRIBUTING.md for reference.