Web Accessibility

Creating accessible website content and documents ensures that everyone, including people with disabilities, can perceive, understand, navigate, and interact with your information.

This guide outlines key principles and practical steps to achieve accessibility. 

Understanding Accessibility

Web accessibility is about removing barriers that prevent people with disabilities from interacting with websites. This includes individuals with visual, auditory, physical, speech, cognitive, and neurological disabilities. Adhering to accessibility standards like the Web Content Accessibility Guidelines (WCAG) not only benefits people with disabilities but also improves usability for all users, enhances search engine optimization (SEO), and future-proofs your content for various devices and technologies.

Key Principles for Accessible Content

1. Provide Text Alternatives for Non-Text Content

• 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.

2. Make Content Adaptable

• 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.

3. Ensure Navigability

• 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.

4. Make Forms Accessible

• Labels: Every form field should have an associated <label> element. This ensures screen readers can identify what information is expected in each field.

• Error Identification: Clearly indicate form errors to the user and provide suggestions for correction.

• Instructions: Provide clear instructions for completing forms.

Accessible Documents (PDFs, Word, etc.)

 Making documents accessible is as crucial as accessible web content, especially when providing downloadable resources.

1. Use Heading Styles

• 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.

2. Provide Alt Text for Images

• 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.

3. Use Lists Correctly

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

4. Create Accessible Tables

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

• Avoid merging cells unnecessarily. Keep tables simple and clear.

5. Ensure Proper Color Contrast 

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

6. Export to Tagged PDF

• 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.

7. Check Document Language

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

By integrating these practices into your content creation workflow, you'll significantly improve the accessibility of your website and documents, making them usable and enjoyable for a wider audience.