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

Accessibility improvements #45

Open
allanaaa opened this issue May 24, 2022 · 1 comment
Open

Accessibility improvements #45

allanaaa opened this issue May 24, 2022 · 1 comment

Comments

@allanaaa
Copy link
Contributor

In #44 I am making some preliminary changes to improve accessibility. This includes, so far:

  • Increasing the main div max-width to 1400px, which makes our screenshots easier to read.
  • Including title fields for all images, not just alt, so that users (who are not using assistive tech but may still be having trouble with our images) can mouse-over to get a description of the image.
  • Increasing the size of the code snippets (they were set at 75%).

Currently our link colours are too low-contrast and will need to be changed. (https://wave.webaim.org/report#/https://omeka.org/classic/docs/Content/Items/)
WCAG requires:

  • 4.5:1 text-to-background contrast;
  • 3:1 link-to-regular-text contrast;
  • something like an underline that appears on hover or focus.

I wouldn't mind adding something else on non-hover links, maybe increasing the font-weight a bit, but there aren't any gradients between regular and bold with our font. Other suggestions would be great.
(I'll replicate our stylistic decisions here on to the S and .net docs later.)

I know the colours are a branding issue so I'd love some feedback there.

allanaaa added a commit to allanaaa/classic-enduser that referenced this issue May 27, 2022
New link colours, new link border-bottoms to match our S docs. New code snippet colour. Still 1400px wide. Resized a few images while thinking about how to deal with image viewability.
@allanaaa
Copy link
Contributor Author

Links are fixed. Width is fixed. Code is fixed.

Two things still open:

  • Image sizes. We should have two or three standard widths based on what the screenshot is of (i.e. the full browser window = 1200px, sidebars 400px, drawers 600px, something like that). We can also do this in the display with CSS classes, or even with inline styling ({width=800}). I need to figure out what everyone else is using for image annotation, and we should have guidelines about image annotation for standardization and accessibility.
  • I'm not being totally consistent with titles and alts yet - will do another dedicated sweep. It does throw up some accessibility warnings about redundancy so I'm cautious to proceed until it's official as per our own guidelines.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant