Elem Libraries - workshops: accessibility notes

Images:

• Use Alt Text Tag for images - if image is just decorative do not label
• Upload images to your image manager - do not copy/paste or drag and drop an image to your guide (This generates a very large amount of code which slows down site loading and uses up character limits).
• Best to save the image with a standard size and then upload. e.g image with width of 200px. Or limit by file size: 80-150KB. You can adjust when you insert the image on your LibGuide page.
• Use percentage for image size in LibGuide image properties box. Set width at % e.g. 50% of box width. Leave height blank.

How to adjust image size.

1. Save your image to the desktop
2. Open the image in Preview.
3. Rename the image file
4. Resize:  click on Tools > adjust size  

Fonts:

• Larger font size is always better. 14-16px is good
• Use standard fonts that can be edited/manipulated by screen readers e.g. all standard fonts available in LibGuides comply
• Don’t use too many fonts types - too confusing

Text:

• Don't use color to emphasize text. e.g. Directions for a lesson - use the red words for your lesson today.
• Left justify. Centering text slows down a reader and looks untidy.

Links:
Linked text should be descriptive. e.g. Google vs click here

Navigation:
Screen readers start at the top and read across and then down the page. Side navigation layout can be a problem.

If you add a Twitter feed or a scrolling blog, put it on the right.

Generally tables are not web friendly and do not look good on mobile devices. Screen readers will read across the top then on to each row. With headers, screen reader will read by row and/or column.

Tables:
If you use tables, make sure they have headers. Limit use of tables if possible.

Generally tables are not web friendly and do not look good on mobile devices. Screen readers will read across the top then on to each row. With headers, screen reader will read by row and/or column.

Colors and color combinations should have high contrast.

Reds and greens are often indistinguishable;

Different values create more contrast than different hues;

Using 2-3 colors should be enough.

Color combos to avoid:

• Green & Red
• Green & Brown
• Blue & Purple
• Green & Blue
• Light Green & Yellow
• Blue & Grey
• Green & Grey
• Green & Black

Accessibility benefits everyone!