Creating accessible web content

This page outlines basic principles of document structure, linking, and color contrast.

Many HTML pages on the College website start as Word documents. These principles can be applied when using Word and the resulting content can be pasted into the dotCMS editor. Alternatively, if you have CMS publishing rights, you can use the same principles to edit your content directly in dotCMS.

On this page:

  1. Setting document defaults in Word
  2. Title and filename
  3. Document structure
  4. Readability
  5. Check for errors

1. Setting document defaults in Word

Prepare your Word environment for working with Word “Styles.”

Margins and colors

Create a new Word document with the following defaults:

  1. Set page margins to 1" (1 inch):
    • Format › Document and select Apply to: “Whole document”.
  2. Set Heading 1 color to #000000 black:
    • Ribbon: Home › Styles Pane › Heading 1 › down arrow › Modify Style…
    • In the font color bar, select Color Picker › More Colors… › RGB Sliders › Hex Color # and input the alpha-numeric value (e.g. “000000”).
    • Check “Add to template” and “Automatically update” before saving.
  3. Set Heading 2 color to #CC4E00 dark orange and top margin to 12 pt:
    • Ribbon: Home › Styles Pane › Heading 1 › down arrow › Modify Style…
    • In the font color bar, select Color Picker › More Colors… › RGB Sliders › Hex Color # and input the alpha-numeric value (e.g. “CC4E00”).
    • Navigate to Format › Paragraph and adjust Spacing Before to 12 pt. Check “Add to template” and “Automatically update” before saving.
  4. Repeat Step 3 for Headings 3 and 4 using #222222, very dark grey, as the color value.

★ Tip: To be accessible, there must be sufficient luminance contrast between foreground text color and the background it is set against. Use the WebAIM Contrast Checker to ensure that your content passed at the AA-level or higher.

2. Title and filename

Give the document a meaningful title and a topical filename.

Title

Give your document a metadata title and author (File › Properties › Summary):

If you need to add date information so that users know which version they are using (e.g. “My Document 2019”) this is the place to do it.

★ Tip: Search engines will attempt to use the document title to name your file on results pages. This is what users will click on when they access your file from Google.

Filename

Save the file using standard URL naming practices:

hyphen-separated-lowercase-keywords.docx

Do not include date information in the filename (use Title instead).

3. Document structure

Structural heading tags need to be applied throughout the document so that web browsers, screen readers, and search engines can understand them.

Main heading

Use the Styles Pane to set the top-level heading in the document to Heading 1

If you use the words “Gettysburg College” on a separate line, this is not part of the Heading 1 and should simply become a normal paragraph below it.

Subheadings

Be sure to group all remaining information in the document under Heading 2 subheadings. If you are working on an existing document taht doesn’t do this, then it is up to you to tag second-level headings throughout.

Use your judgement to create concise, meaningful subheadings. Add subheadings that are 2–4 words in length throughout your document and move more verbose headings to body text.

Outline generation

Adding headings organizes the document visually, and also generates a table of contents that allows you to jump to a specific section.

To view the outline in Word, first reveal the Reviewing Panel (Ribbon › Review › Reviewing). Then select the Document Map tab.

★ Tip: Word sometimes fails to generate a heading (e.g. if you didn’t select all text on the line). The Document Map allows you to confirm that the outline is being generated correctly.

You can also create an in-document table of contents that extends this behavior outside of Word, by creating a bulleted or numbered list at the beginning and linking its items to other headings within the document.

4. Readability

It is important to keep readability factors in mind.

  1. A little emphasis goes a long way (bold, italics, etc.). Avoid using all caps for emphasis.
  2. Make sure that links function correctly and observe standard web linking practices.
  3. Consider whether people who are not familiar with your content would understand your terminology—if necessary either provide translations (in parentheses), or substitutions with more common words.
  4. Do not add images to your document that contain text unless that text is in the frame of a photograph—add it to the document as literal text instead.

A good rule of thumb is that if “everything” is emphasized, then nothing is—users will adjust to excess formatting by treating it as noise that can be ignored.

5. Check for errors

Use Word’s built in Accessibility Checker to catch any issues in the Word document before publishing the content on the web (Ribbon › Review › Check Accessibility).

The checker will report both errors and warnings. You must resolve both kinds of issues.

If you have a lot of inline or table issues, it may be a sign that your document layout should be simplified.

  • Images should not be absolutely positioned within the document as this makes it difficult for assistive technology to know their position in the document’s reading order.
  • Tables should not be used to create a content layout—use tables to display data where two to four columns of information can be presented row by row.

★ Tip: Ensure that any data table columns have heading labels and select the option to “Repeat as header row at top of each page” to tell Word that they are headings.