Accessibility for Content Editors

What is accessibility? 

Accessibility means creating websites that are usable for everyone, including people with disabilities and people who use assistive devices. The most common types of accessibility issues that content editors of Northwestern Pritzker School of Law’s website are likely to encounter are:

  • Visual: users who are blind use software called a screen reader to help them access website content, so content should be created with this software in mind.
  • Motor: small buttons and other interactive elements of a site may not be easy for users with motor difficulties to use.
  • Auditory: users with hearing difficulties may not be able to access video content unless captions or a transcript are provided.

Why is accessibility important?

It is important to ensure that all users are able to access information about the Law School's programs and events in order to promote a truly inclusive environment. Creating accessible web content results in a better digital experience for everyone. 

How do people with disabilities experience the web?

Using a Screen Reader

To understand the importance of creating accessible web content, it can be helpful to learn what navigating the web is like for blind or low-vision users who use software called a screen reader to access web content. The videos below demonstrate what using a screen reader is like. 

Introduction to Screen Readers
Web Accessiblity through the eyes of a Screen Reader

Different Abilities

Visual impairments aren’t the only accessibility issue on the web. To learn more about how users with different abilities use the web, check out W3C’s Stories of Web Users.

What can Law School content editors do to help create accessible experiences?

Use Headings Appropriately 

Headings are used to help organize content on the page. Headings on Northwestern Law’s website use a different color, typeface, and size than normal paragraph text in order to make them stand out visually. However, it’s important to keep in mind that headings should be used to organize and add structure to content. They should not be used merely to add visual style to text.

Think of headings as an outline. Heading 1 is used for the title of your outline. Heading 2 is used for key information. Heading 3 is used for information that supports content at Heading 2. 

For example, if you were creating a webpage about vegetables, your outline and headings might look like the below:

  • Vegetables (Heading 1)
    1. Brassicas (Heading 2)
    2. Tubers
      1. Potatoes (Heading 3)
      2. Taro (Heading 3)
    3. Greens (Heading 2)
      1. Kale (Heading 3)
      2. Spinach (Heading 3)
    4. Fungi (Heading 2) 

This example was inspired by the University of Minnesota.

Please note that on the Law School website, every webpage has a Title (Heading 1) automatically generated, so there is no need to add an additional Heading 1 to your content. We ask that you stick to using Headings 2-5 to organize your content.

Screenshot of a Northwestern Law webpage that shows an auto-generated title with heading 1 applied.

Why is this important?

Users who use screen readers use headings to help them quickly find content on the page. Well-organized headings help create a smooth, efficient web-browsing experience that makes it easy for everyone to find the info they’re looking for. 


Write Informative Link Text

When you create a link to another webpage, you are required to write link text that helps describe the content or page that you’re linking to. It is important that this text be informative and descriptive. It should give the user a good idea of where they’re about to go.

For example, instead of writing “click here to learn about our program,” you could write: “Learn more about the Vegetable Awareness program.” 

Why is this important?

Similar to headings, users who use screen readers rely on link text to help them quickly find content on the page. Well-written, informative link text makes it easier for everyone to quickly find the information they’re looking for. 


Add Alt Text to Images 

Most content editors don’t add images to their pages, so most readers can skip this part. However, if you are an advanced editor who does add images, be sure to add alt text to your images. 

Alt text is used by screen readers to read a description of an image to users with visual impairments. This text will also be displayed on the page if the image fails to load for some reason. 

In the CMS, alt text is entered in the “Image Description” field, shown below:

A screenshot of the "insert/edit image" CMS dialogue box that highlights the "image description" field.

Tips for Writing Good Alt Text 

  • Don’t use alt text for decorative images. Decorative images are those which are added to the page simply to add visual style, but they don’t contribute any new or relevant information to the user. If the image is decorative, the “image description” field can be left blank in the CMS. Learn more about decorative images.
  • Headshots and bio photos should use the individual’s name as the alt text.
  • Descriptions should be short and straight to the point.
  • Don’t include words like “image of” or “photo of.” Screen readers will automatically announce to a user when they have selected an image, so including these words will sound repetitive to these users.
  • For charts, diagrams, and illustrations, make sure that any important facts and figures are included in the alt text. For the example below, the alt text would look something like this: “Vegetables: carrots 30%; tomatoes 20%; zucchini 15%; squash 25%; potatoes 10%.” 
Vegetables: carrots 30%; tomatoes 20%; zucchini 15%; squash 25%; potatoes 10%.

Create Accessible Word Documents and PDFs

All of these best practices can also be applied to Word Documents and/or PDFs posted to the web in order to make them more accessible. To learn more about making documents accessible, please visit Northwestern University's Office of Equity's Accessibility site. Microsoft also provides info on creating accessible documents that may be helpful.

Resources

If you’d like to learn more about accessibility, the following resources may be helpful.