CMS Sample: Department Page 1

Making Images Accessible

Image Guidelines

Alternative text or "alt text" is required to make images accessible to people using screen readers.

When uploading an image to the media library, fill out the alternative text with a brief and accurate description of the image. Alternative text is used by screen readers or people whose images load slowly.

Good alternative text is descriptive but brief. 

Good: "Elementary school student holds a flower pot with plants"

Not recommended: "Boy"

Not recommended: "Elementary school student with black hair in a hoodie holds a flower pot with the rim painted blue with several other students in the background"

Images with Text

Don't use images with text embedded in them. Screen readers cannot read the text in an image, and Google Translate cannot translate the text. 

The Department webpage template is used for SFUSD departments and programs. 

The main distinction of the Department template is the left-side navigation that displays subpages.

This template consists of the following Components:

• Postcard Carousel

• Section Text

• Section Cards

• Section Contact

Section Text Component includes  WYSIWYG options for:

• Block Quote
• Numbered List
• Bulleted List
• Links
• Bold
• Italic
• HTML source code

Drupal Class Practice Resources

We encourage you to use the images and text options below as you work on your practice page. That way you can spend your time focusing on learning how to use and manipulate the website components, rather than seeking the “right” images for your content and spending time drafting language you might use on your future page.

Images

• Download one of SFUSD's stock images
• You can then upload it to Drupal.
  • You will then be prompted to give it a helpful name and add appropriate alt text.
  • During training, only use images you upload yourself.
    • When you are working on your actual content, you can use images in the Media Library. 

Text

• To generate random text, you can use this Lorem Ipsum text generator.
  • For sample Postcards and Section Cards, select a number of Words
  • For sample Section Text, use the text below and/ or select a number of Paragraphs.
• Section Text practice
  • Copy and paste the text below into a Section Text field.
  • Before doing anything, use the Accessibility Checker to see if you have errors and then fix those errors.
  • You can then practice adding formatting such as bullets and numbers.
  • You can also try adding links.
    • For practice, try linking one item to any external website.
    • Link another item to a page on the SFUSD website (e.g.,  Manage Websites)

Title: Using Section Text

Using Headers

Use headers by highlighting text and selecting a heading style from the dropdown labeled "Normal." Using heading styles instead of bolding text is helpful for people using screen readers and for search engine optimization.

Using Lists

See the types of lists you can add to Drupal. 

Numbered Lists

Start the Application Process

Apply to an Early Education School

Submit an Application Form

Register at the Assigned School If you bold text and include normal text right after, the bold text will automatically be on its own line.

Bulleted List

Art

Math

English

Drama

Insert table