Image alt and title tags

The majority of images on our site will be flagged as decorative.

In these examples, all images on the page are decorative and can be removed without changing the meaning or context of the page.

• Number Worlds home page
• Higher Ed home page
• Language Arts DLP

Most images on our site are decorative and do not add contextual value. When this is the case, the alt text field should be left blank. Our code automatically uses empty alt text ("") so screen readers skip these images.

Example 1: Logo is in the header of the page.

Connect Marketing site: Here, the Connect logo in an introduction to the page and tells the user that they are on the Connect site.  Therefore, the logo SHOULD have an alt tag of "Connect logo". 

Example 2: Logo represents a program name on the page in place of text.

• PreK–12 Summer School campaign page: Here the program logos are in a table with the column header of "Program". Because there is not visual text in that column stating the program names, each logo would need alt text of "Program Name logo". 
• McGraw Hill Go page (grey bar under the hero): Here the logos are all clickable to forms regarding that product.  The alt text should state to the user what exactly it is they are clicking on (i.e. Learn more about Blackboard). 

Example 3: Logo is next to text representing the product.

McGraw Hill Go page: If you scroll to the “A New and Improved eBook+ Experience” section, you’ll see four gray boxes. Alt text is not needed for any of these images—including the Sharpen and Evergreen logos—because the accompanying text already provides the necessary context.

Charts and Graphs should be explained to a user on the page and not through alt/title text.

In the example of the Number Worlds Program Foundations page, there are some graphs showing results using our programs.  Alt text will not suffice for charts/graphs in this case. Ideally a visible textual description is provided to the user either (a) adjacent to the chart/graph or (b) via a modal on selection of a “Text Alternative” button. While screen reader-only content could be provided, everyone benefits if the information is available to all.

Screenshots and product images may need alt text, depending on the situation

Examples:

• Connect New Releases page: On this page, there are multiple screenshots showing within the Connect platform which is not explicit in the text. These should have some sort of alt text to describe to the user what they would be seeing. The description should be meaningful and convey to the user what they are seeing in the screenshot.  Remember to keep the descriptions to 150 characters or less. 
• Emerge Components page: Here the images of product do not provide additional value to the context of the page.  Each product has a thorough description with it, therefore, alt text would not be needed. 
• Reveal Math In the Classroom page (Go Beyond Rote Memorization section, carousel):  In this example, the images within the carousel require alt text. While there is a brief description above the carousel that introduces the section, it does not describe the individual images. Each image should include alt text or a caption to convey its content. If you scroll to the final set of tabs on the page, you’ll see product images. These images do not need alt text because the accompanying text already describes the lessons, and the images do not add additional visual context.

In most cases, icons do not require alt text unless they function as a link without any accompanying context.

In the following examples, the icons are visual representations of the text beneath them.  No alt text needed here.

• LMS Integration site (all the way at the bottom of the page)
• PreK–12 Product Trainings