Accessibility improvements

[allanaaa]

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]

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.