Web Accessibility

Images: All informative images must have alt text (alternative text) that describes the image's content and function. Decorative images can have empty alt text (alt="").

• Example: For an image of a cat playing with a ball, the alt text could be: alt="A ginger cat batting at a red yarn ball."

Audio and Video:

• Captions: Provide synchronized captions for all pre-recorded and live audio content in videos. This benefits individuals who are deaf or hard of hearing, and also those in noisy environments.

• Transcripts: Offer full text transcripts for all audio and video content. This allows users to read the information at their own pace and can be helpful for those who prefer to read.

• Audio Descriptions: For video content that conveys important visual information not available in the audio, provide audio descriptions. This is a narration of key visual details for users who are blind or have low vision.

Semantic HTML: Use proper HTML tags (e.g., <p> for paragraphs, <h1> through <h6> for headings, <ul> and <ol> for lists) to structure your content logically. This allows assistive technologies to interpret and navigate your content correctly.

• Avoid using visual formatting (like bolding) to create headings; always use heading tags.

Clear Language: Write in plain language, using clear and concise sentences. Avoid jargon where possible, or explain it.

Readable Fonts and Contrast:

• Choose font families that are easy to read.

• Ensure there's sufficient color contrast between text and its background. WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. There are many online contrast checkers available, and CSM has a color accessibility guide online.

Keyboard Navigation: All interactive elements (links, buttons, form fields) must be operable using only a keyboard. Users who cannot use a mouse rely entirely on keyboard navigation. Ensure a logical tab order through interactive elements.

Clear Link Text: Link text should be descriptive and make sense out of context. Avoid generic phrases like "click here" or "read more."

• Instead of: "Click here to learn about our services."

• Use: "Learn more about our website design services."

Consistent Navigation: Maintain consistent navigation menus and page layouts throughout the website.

In Word and other document creation software, use the built-in heading styles (Heading 1, Heading 2, etc.) to structure your document. This creates an outline that assistive technologies can read and navigate.

Just like on the web, all images in documents need descriptive alt text. Most document programs have an option to add alt text to images.

Use the built-in bulleted and numbered list features. Avoid manually creating lists using hyphens or asterisks.

Identify header rows and columns in tables. This provides context for screen reader users.

Avoid merging cells unnecessarily. Keep tables simple and clear.

As with web content, ensure sufficient color contrast for text and background in your documents.

When saving documents as PDFs, ensure you select the "Create Bookmarks from Headings" and "Enable Accessibility and Reflow" or "Tagged PDF" options. This embeds the semantic structure into the PDF, making it navigable and readable by assistive technologies.

Specify the document's language within the document properties. This helps screen readers pronounce content correctly.