Images

Photos and graphics can be worth a thousand words each–if you select, create, and display the right ones on your web page.

Image AccessibilityUsing Images | Creating Images | Image Style Guide

Image Accessibility

All images placed on a page must include alt text which describes the content or purpose of the image.

Consider the experience of visually-impaired people who are navigating the page using software that vocalizes the content to them.

  • If the image is used as a header, provide alt text that repeats the site or page section name. Alt text (which is required) is not to be confused with other image attributes such as title, caption, or description, which are all optional.
  • If the image is a photograph, describe the subject of the photograph in alt text.
  • If the image contains text, the alt text should include that text.
  • If the image links to a web page, state the topic of that page in the alt text.
  • If the image contains a great deal of data, ensure that the information is also available in text.

References

H30: Providing link text that describes the purpose of a link for anchor elements
H37: Using alt attributes on img elements
F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives

Using Images

Learn how imagery can enhance your site in ways that communicate rather than confuse. Also included: copyright issues, image sources, and simple edits.

Watch the following 32:23 video for all the details. It will show you how to create a pleasurable user experience with high-quality, ethical image selection and placement.

Creating Images

You have an event or program, and you need to get the word out. Your choice of images, words, and fonts–and how you put them together–can have a powerful effect on the viewer. Learn the secrets of the graphic designers. They aren’t very difficult but can have a big impact.

Image Style Guide

Header Images

Header images have specific size and color requirements, depending on their placement within the SCC website.

Main Home Page

The home page images are to be in full color.

screen capture of SCC website home page

Top Level Pages and Administration Sites

The front page header image of all top level pages and administration sites are to be in full color.

screen capture of SCC president page

Administration sites (President, VPs, PIO).

screen capture of SCC financial aid page

Top level pages (About Us, Current Students, etc.).

Home page headers are to be 1440px wide by 400px high (with some exceptions for 300px high).

Home page headers consist of a Meta Slider (plug-in) of 4-6 relevant images. (See below for Meta Slider settings.)

All Other Site Headers

Services, divisions, departments, etc. have gold-tinted images on their front page and red-tinted images on all lower level pages.

screen capture of SCC cosmetology home page

Gold-tinted 1440px wide by 400px high on home page.

screen capture of SCC cosmetology interior page

Red-tinted 1440px wide by 25px high on lower-level pages.

The name of the site in all caps Futura Bold, right aligned with the top navigation bar.

These headers consist of 3-8 images loaded into the WordPress Headers section and set to randomly rotate.

See Color for color adjustment settings.

Featured Images

Some Area and Department template pages pull the Featured Image identified on the page being linked to in the 3 Columns of Links section. Alternatively, you can create and upload images directly to the page you’re working on. Use the same gold or red tint as page headers.

screen capture of SCC financial aid page

screen capture of SCC financial aid page