Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.
library Logo

Elem Libraries - workshops: accessibility notes

Edit images

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 and text

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 and navigation

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.

Design - color, contrast,

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

Accessibility benefits everyone!

Newton South High School Library

140 Brandeis Road
Newton, MA 02459
call: (617) 559-6561
nshslibrary@newton.k12.ma.us