Accessibility Guidelines for Content Creators

Source: https://digitalaccessibility.caltech.edu/accessibility-guidelines-for-content-creators Parent: https://digitalaccessibility.caltech.edu/

Home  /  Guidelines

Accessibility Guidelines for Content Creators

More Resources

FAQs: Digital Accessibility at Caltech

Accessible Mailchimp Campaigns

Identity Toolkit Accessibility Resources

WAVE Accessibility Tools

We all have a role to play in making Caltech's digital presence accessible to all individuals and audiences who want to learn about and engage with Caltech's programs, services, and activities. Creating accessible content requires careful attention to detail and an understanding of how different users experience or interact with digital content using assistive technology including screen readers, navigating with visual or audio assistance, using keyboard-only commands, or using alternative input devices such as speech recognition software.

Guidelines for Creating Accessible Content

Link Text

Link text should describe where a link will take people when they click on it.

• Write clear, unique link text so that the user knows where the link is going.
• Do not use generic link text such as "click here" or "read more." Instead, use text such as, "Learn more about Caltech."
• Link text should make sense outside of context on a page.

More information on writing link text

Headings

Headings should be unique, descriptive, and provide a hierarchical structure of content.

Headings are style elements that may be applied to sections of text to provide structural information about the content. These elements should essentially provide an outline of the information on a page. They will be invaluable for people using screen readers and assist sighted users skimming text by helping to organize the content presented on the page in a hierarchical manner.

• Headings should describe the content that follows.
• On Caltech Sites, use the styles toolbar or header blocks to apply headings.
• Use one, and only one, H1 (Heading Level 1) per webpage.
• Use in hierarchical order: H1, H2, H3, H4, etc.
• Do not skip heading levels.
• Choose headings based on the appropriate level, not because of how they look. (Text that does not function as a heading should not be styled as such.)
• On Caltech Sites, when you want to add spacing between content, use Spacer blocks. Do not use empty headers or empty paragraphs in rich text.
• Caltech Sites validation code will no longer allow you to have empty headings in your Rich Text blocks; please read about the Built-In Accessibility Checker for information about how to find and correct problems with empty headings.

More information on using headings

Alternative Text (Alt Text) for Images

When uploading images, include a concise alternative or "alt" text. Alt text should convey the intended meaning of an image.

• Alt text is read by screen reader software, and displays on the page if an image fails to load.
• If the image is used purely for visual interest, mark it as "decorative" so screen readers will ignore the image.
• If the image conveys information, use the fewest words possible (around 125 characters or less) to insert alt text that provides a clear description of the content displayed in the image.
• When an image is functional, such as a link, the alt text should include any text in the image and indicate where the link will take the user.
• Alt text should not include "image of," "picture of," "graphic of," etc., because this information is communicated automatically by assistive technology.
• Appropriate alt text for an image may change depending on the context in which the image is used. When inserting a previously uploaded image from within the RichText editor on Caltech Sites, check the alt text to ensure it is appropriate in the context of your intended use, and add appropriate text it if necessary.
• Keep it simple, helpful, and descriptive.

More information on writing alt text

Alt Text for Complex Graphics (Graphs, Charts, etc.)

When an equivalent alternative for a complex image (chart, graph, map, etc.) will not fit inside a succinct "alt text" field (a couple sentences in length), then the alternative must be provided elsewhere. This might be an adjacent data table on the same page, or it might be on a separate web page, linked from the page with the image. The link can be adjacent to the image, or the image itself could be linked to the description page. The text in the "alt text" field for the image should still describe the general content of the image.

WCAG guidelines for complex images

Tables

Do not use tables to manipulate the layout of text. Instead, use column blocks, headings, or lists whenever possible.

When creating a necessary table, the first row should be used as table headers. Fill each column in the first row. On Caltech Sites, you can save tables that do not have values for all column headers, but the built-in accessibility checker will note any that do not have values.

More information on tables

Color Use

It is important to make sure that content is perceptible for people who have different ranges of vision. This means considering people who have low vision or people who have a color deficiency.

When using colors, it is important to remember that:

1. Color is not the only way of conveying information or identifying content
2. The default foreground and background color combinations provide sufficient contrast
3. That high contrast color combinations are used for text and backgrounds

4. That there is a minimum contrast ratio of 4.5:1.  You can find out the contrast of your foreground and background colors using the WebAim: Color Contrast Checker

5. More information on color usage

6. Examples using colors in Caltech's Identity Toolkit

Readability

Language should be clear and presented in a layout that reduces cognitive load.

• Be succinct. If there's a shorter, simpler way to say something, say it that way. What you take out of the text is as important as what you leave in.
• Lead with your main point. Key facts and important information should be at the beginning of a page or section. Then elaborate.
• Write clear, direct headlines. Direct headlines help users find the information they are seeking.
• Create identifiable "chunks" of content by using lists, heads, and subheads to facilitate scanning of onscreen copy.
• Keep paragraphs short. This—especially if para­graphs have topic sentences—speeds scanning and alleviates fatigue.

More information on writing for the web

Built-in Accessibility Checker on Caltech Sites

To help editors evaluate the accessibility of their pages and to ensure robust access for all users, IMSS have included some built-in accessibility checks on Caltech Sites websites. The checker will automatically screen your page for compliance with accessibility standards before publishing. The evaluation tool will prevent an editor from publishing a page if there are empty headings. It will flag for you to fix all other errors that it identifies as not aligning with our accessibility standards. Please do resolve these items before moving forward with your page.

Using Preview to Monitor Accessibility

Preview gives you the option to view the page in various sizes (mobile, tablet, and desktop) within the slide out window or view the page in a new tab. This will allow you to get a quick look at how your changes will appear on various devices. To run accessibility checks, you will need to open the preview in a new window by clicking the box with an arrow at the end of the row of device options.

In the new page, look at the bird icon in the lower right hand corner. If the checks have identified issues with your page, there will be a number in a red circle.

Preview Warnings

When a validation issue exists (usually because of missing data), you will get a "Preview is out of date" warning at the bottom of the preview sidebar. If you try to preview in a new tab, you will see "Preview not available." To view the validation errors, click "Save Draft" or "Publish." The form will refresh and then error messages will be associated with to each problematic block or field.

In the example below, we attempted to save a rich text block that has an empty H2 header. You can tell it is empty by the gray font color and placeholder text of the heading level.

After attempting to save with a validation error, you should see a small red icon in the minimized vertical navigation bar (if the preview sidebar is closed), indicating the block location of the error and an actual validation error at the affected field. The validation error gives you a textual clue as to where the empty header is located.

The minimized vertical navigation bar will open up when you hover over it. You can click on the name of the block to jump to it rather than scroll down yourself. Note: If you have the preview sidebar open, you'll need to close it to see the navigation bar. Click the right-arrow icon in the sidebar's upper-left corner.