Web Accessibility and compliance to WCAG 2.1 guidelines

[dannycolin]

Our mission folks, should we choose/decide to accept it... is to make Open Science MOOC website more accessible to a wider range of people with disabilities.

From "need to do early" to "can do whenever"

• [ ] Documentation ( #18 )
• [x] Replace Bootstrap 3 CSS code ( #19 ) (moderate)
• [ ] Testing and report bugs (easy)
  • Headings Structure
  • Mobile (touchscreen), No Javascript version
  • Color contrast
  • Navigation with keyboard
  • Screen Reader

It looks like there's a lot of things to do but don't worry! There's a lot of tools that can help us.

Tools we use

• Axe
  • Download for Firefox (Recommended, It's Open Source :smile:)
  • Download for Chrome
• Tota11y It's already installed on the website. It'll be automatically activated if you run the website in development mode. More information on how to do that soon.
• Screen Readers
  • NVDA (For Windows users)
  • Orca (For Linux users) *There's a screen reader builtin on MacOS. It's called VoiceOver.

Guides

• WCAG 2.1 Guidelines
• MDN Mozilla Documentation

[Protohedgehog]

This looks excellent, thanks @dannycolin. Is there a way to partition this up into smaller, manageable chunks for us less initiated folks..?

[MikeDoesScienceUX]

Hey guys! First, that's a great todo list of guidelines!

My 2 cents on this (probably obvious): It seems like some of these changes are more foundation than others. Like, if we need to use a new responsive grid system over Bootstrap, that's a major overhaul that should be done early. We can tweak the colors way after launch if we needed to.

Here is how I'd order the changes, from "need to do early" to "can do whenever"...

1. Ability to navigate on different devices
2. More semantic HTML/replace bootstrap
3. Make sure the website works without Javascript
4. Ability to navigate the website with the keyboard only
5. Make sure that the headings (h1 to h6 tags) are in the right order.
6. Make sure buttons, links are big enough for touchscreens
7. Better colors contrast (At least AA compliant)
8. Add WAI-ARIA tag when needed

My current plan is to (after finishing my thesis this week hopefully), look over the website in whatever state it's in and see if I can lend any help with design/branding and also this accessibility challenge.

As far as this list goes, due to me starting classes soon, it'll probably be easiest for me to help with stuff I can break off a piece of, like items 5-8 (especially as 5-7 are design related). @dannycolin - Would it work for you to start with #1-4, and then hopefully right when you're finishing that I'll be available to help you tackle the remaining tasks?

[dannycolin]

@hiiammike You read my mind :). I was about to propose almost the same thing. I was even doing some test with CSS Grid (and Flexbox, IE fallback) locally. I'll update the main post with your list. Thanks.

This week I'll work on :

• Enhance the documentation
• Break this issue into smaller pieces
• Push a cleaned branch to upstream (this repository) that integrate the tools we'll need. I'll name it "devel".

My current plan is to (after finishing my thesis this week hopefully), look over the website in whatever state it's in and see if I can lend any help with design/branding and also this accessibility challenge.

Your skills in UX will be more than welcome :). When you say design/branding are you thinking about :

• Graphical chart (color palette)
• Maybe redesign some page's layouts

[MikeDoesScienceUX]

@dannycolin - Ha! That's twice now (first was the pillar). It's encouraging that we keep being on the same page haha.

On the UX stuff: Yeah I'm a little concerned about my not being help much until a couple weeks from now, because I know if I'm going to recommend anything for the layout, I need to do it soon. But it's hard to anticipate. So far, the only page I've seen (the people page you Slacked me) looked great and I didn't have much to suggest. On the modules page, I can think I could be helpful with creating a clickable-card style for the logos that carries the brand feel through, but it would be very graphical and wouldn't mess with the layout at all.

I think what might help: Can you work with me sometime this week via Slack to help me get set up with a local copy and walk me through what's been done so far a little? (or pointing me to such a walk-through). That'll help me get a better feel for where I might be able to help design-wise.

Overall, with the design stuff my main goal is to keep the website highly usable, and also try to make it 'feel' fun/exciting and consequential, which is how Mark's logo feels to me --- to the extent that I'm able to do that and in way we're all happy with, of course.

[Protohedgehog]

@dannycolin @hiiammike you guys are amazing, thank you. If I can help with any of this, please let me know! Mike, kick ass with your thesis defense too. This old post of mine might contain a bit of advice, but I'm sure you've got this :) http://fossilsandshit.com/the-best-form-of-viva-defense-is-chilling-the-fuck-out/

[MikeDoesScienceUX]

@Protohedgehog - Thanks Jon! That's a great post. I never thought about publishing chapters of my dissertation along the way. That's baller af.