Images Guide

Creating Accessible Images for the web

• Creating and maintaining accessible web sites is required by law.

• Images must not have text in them unless they are a logo.

• All images must have the alternative text (alt text) field filled out with meaningful text.

  • Describe the image as if you are describing it to a person.

  • Do not start with 'Picture of' or 'Image of' as screen readers say this before reading alt text.

  • Alt text must be added to images in documents posted on the web as well (Word, PDF, Excel, etc).

• When placing images as the background to text, ensure there is enough contrast between the image and the text color. The contrast rate must be at least 3.1. Use this website to check the background color to text color: https://webaim.org/resources/contrastchecker/

Sizing and Image/Graphic Types

• Keep in mind that devices and browsers will resize images and graphics differently.

• Resize photos to the approximate pixel size as will be needed on the webpage. This will enable faster loading.

• Use the SiteViz Photo Editor under the Tools menu to do this.

• Graphic types for logos and icons should be vector images like .SVG which are meant for web usage.

  • They can be sized up and down without diminishing quality.

  • Transparent backgrounds

  • PNG (Portable Network Graphic) can have transparent background but it cannot be scaled up without pixelation. It can be sized down. A high quality PNG (sized correctly) is a good substitute for a SVG.(See SiteViz Tools>Photo Editor for help with this task).

  • If created in an illustration program, a .PDF image could be a vector image or it may not.

• Photos or images

  • JPG/JPEG is a raster based image meant for web or print and are best for photos. It should be created with the correct size and resolution for end use. Size down and compress files for best performance (See SiteViz Tools>Photo Editor for help with this task).

  • Other types PNG (transparency with millions of colors) or GIF (supports animation).

Uploading the file

Before being able to insert the image it first must be uploaded to SiteViz Files. It is good practice to leave files in a folder to keep the filesystem organized, if you can't find an appropriate file to leave your image, go ahead and create one.

Site-Viz Manual

Inserting the Image

Once the image has been uploaded to the files, it's ready to be displayed on your page, follow the Site-viz manual on uploading an image.

Site-Viz Manual