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.

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

Web Accessibility and compliance to WCAG 2.1 guidelines #16

Open
1 of 3 tasks
dannycolin opened this issue Aug 17, 2018 · 6 comments
Open
1 of 3 tasks

Web Accessibility and compliance to WCAG 2.1 guidelines #16

dannycolin opened this issue Aug 17, 2018 · 6 comments
Labels
enhancement New feature or request
Milestone

Comments

@dannycolin
Copy link
Member

dannycolin commented Aug 17, 2018

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 ( Documentation #18 )
  • Replace Bootstrap 3 CSS code ( Replacing Bootstrap 3 #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
  • 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

@dannycolin dannycolin added enhancement New feature or request discussion labels Aug 17, 2018
@dannycolin dannycolin self-assigned this Aug 17, 2018
@Protohedgehog
Copy link
Contributor

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

@MikeDoesScienceUX
Copy link

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
Copy link
Member Author

@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
Copy link

@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
Copy link
Contributor

@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
Copy link

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

@dannycolin dannycolin mentioned this issue Aug 23, 2018
2 tasks
@dannycolin dannycolin added this to the 1.0.0 milestone Nov 17, 2018
@dannycolin dannycolin modified the milestones: 2.0.0, 3.0.0 Jul 9, 2019
@dannycolin dannycolin removed their assignment Jun 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants