Alt text allows you to tell users who cannot see an image what that image is.

• A person may have slow internet and images won’t load. What text should appear on the screen instead of the image?
• What if a person is using a screen reader program to read the screen contents to them? What text should the program read in place of the image? 

How? Follow these steps to add alt text to every graphic in your project.

• Tip: Don’t start "picture of..." or "Image of...”.
• Tip: Be sure alt text is short and useful – why is the picture there? What does someone who cannot see the picture need to know?

Some users can only see or hear the linked text and not the surrounding sentence!

Never just add a link to the words or phrases “here”, "Click here", "Learn more", etc. This is helpful for everyone. Users such as those using screen readers or those that quickly reference pages rely on descriptive links to know where a link goes.

• Do not do this:  Click here to download the undergraduate admissions application form or here for the graduate admissions form.
  • Problem: Where do these links go without reading the whole sentence?
• Better but not good: Download the undergraduate admissions form or the graduate admissions form.
  • New problem: Both links say "admissions form"... but they go different places
• Do this: Download the undergraduate admissions form or the graduate admissions form .

Headings are not just large bold text - there is a specific "heading" setting for text. 

Beyond making your page easier to scan and find a topic that a user is interested in, headings are relied upon by screen readers.

Compare the two examples below:

When adding headings, you will use the text formatting Heading 2, Heading 3, Heading 4. Each number designates the level of topic, with the lowest number the largest topic and the higher numbers the subtopic.

• Here, Campuses and Admissions are both topics on the page, so they are both Heading 2.
• Boston, Medford, Grafton, Undergraduate, and Graduate are subtopic of the Heading 2, so they are set to Heading 3.
• The title of the page is added by the web page editor as a Heading 1 - you don't need to add that.

When adding headings, remember:

• Don’t skip heading levels! e.g. Don’t jump from a Heading 2 to a Heading 4
• Headings don't just go 2, 3, 4 – there could be multiple heading 2s, heading 3s, etc if there are multiple subtopics.
• Don't just make text large and bold.

To add headings in SharePoint:

1. Highlight the heading text, one at a time.
2. Click Normal Text above the text block
   
3. Choose the appropriate heading

Don't add images that are:

• Moving
• Flashing
• Automatically animating (including GIFs)
• Rotating through content (e.g. a carousel) without a pause button

You might have site visitors with:

• Cognitive impairments
• Motion sensitivity 
• Seizure disorders
• Need more time to process an image or text

If you have text or text background with other colors than black and white, you must check the color contrast to be sure the text is legible with your chosen colors. For example, the below text has very little contrast and says "This text might be difficult to read!"

 Tufts has brand guidelines with the Tufts colors and an eye indicating which color text to use on each color.

The best way to check your color contrast is using WebAim's Color Contrast Checker. 

1. If you know the hex code of the color of your background and foreground (text), enter it. This will be a 6 digit combination of letters and/or numbers and can have a # in front of it.
   1. Black is #000000
   2. White is #FFFFFF
2. Otherwise, use the Color Picker.
   
3. Scroll down to see the contrast results. You need to have a Pass on both "Normal" and "Large" text "WCAG AA". The "AAA" is a nice to have but not necessary.
   
4. If your text does not pass, use the color picker or adjust the lightness until it does. Use the new colors that pass.