omigroup/website

Accessibility Review of our Style Guide

Closed this issue · 10 comments

mrmetaverse commented

Let's conduct an Accessibility Review of our Style Guide

Originally posted by @mrmetaverse in #29 (comment)

robertlong commented

I can help with this 👍

jsejms commented

I can help as well, already posted some quick suggestions, changing over font weights, color contrasts, and white font colors on CTA's from the black on purple we had.

I also masked and edited the avatar images in the header with custom drop shadows to increase the quality of the images we are placing.

@Elirudite
@robertlong
@mrmetaverse

https://www.figma.com/file/7IkelFTsQPpMwzrWGzqFBA/Omigroup-Designs?node-id=676%3A529

  • 👀1
mrmetaverse commented

@jsejms and @Elirudite Hey there! We are doing backlog refinement and I wanted to shake this up. How do we feel about completing this next? @technobaboo we would benefit from your XR Accessibility eye as well.

  • 👍1
technobaboo commented
Elirudite commented

I'm definitely down for this! Whenever you all are ready.

mrmetaverse commented

bump

Lets do a formal pass, and document what we do as an accessibility review. Then move this to done, with the understanding that we should always review for accessibility

@Elirudite @technobaboo @jsejms

  • 👍1
Elirudite commented

When/how would you like to do this?

jsejms commented

I've got time next Tuesday after 6pm EST.

  • ❤️1
mrmetaverse commented

Ping me when you feel it's "done" or just move it into "In Progress" and then back to "Review" when done if you prefer. :)

I won't be around next Tuesday (I am teaching a class) but will keep my eye out and am at your service otherwise.

Elirudite commented

@jsejms did an accessibility review today. Here are our notes:

  • Skipping Header sizes (not a huge problem, but it can get problematic once we add to the website)

    • Subheader (Header is h1, subheader is h3)
    • Core Value headers (Section header is an h2, core values are h5 and h6)
      image
      image

  • 
Primary CTA button needs better contrast (can pass with a larger text and a darker purple)

  • The big OMI logo behind the core values is blurry, this is not an accessibility issue, but would be cleaner if it was uploaded as an SVG. Can also either be smaller, or appear on top of the section backgrounds above and below, similar to how it is on figma.

  • The ‘How you can get involved’ section does not read the BG colors. It's being read as white on white for some reason, may need to check how wordpress is handling the background image/gradient.

    • The hover states for the buttons are purple on purple, may need to consider a different color

Overall, our site is mostly accessible according to AA standards!! Just need to clean up those colors and text sizes to ensure everything passes.

(Feel free to update if I missed anything)