Who This Guide Is For

This guide is a basic workflow for faculty and staff who edit content on SRJC Drupal websites. The guide covers the essential accessibility steps every content editor should follow. 

More comprehensive Drupal editor documentation (Siteimprove reports and workflow, advanced topics) will be coming to this site in the future. In the meantime, watch your email for announcements of upcoming trainings, or book time with the Online Accessibility Coordinator (see sidebar).
 

Step-by-Step: Accessible Web Content in Drupal

Step 1: Use Proper Heading Structure

Use the formatting dropdown in the Drupal WYSIWYG editor to select heading levels. Don't use bold, large font, or color to create the appearance of headings.

• Heading 1 (H1) — the page title (usually set automatically by Drupal — don't add another)
• Heading 2 (H2) — major sections on the page
• Heading 3 (H3) — sub-sections within an H2
• Don't skip levels (don't go from H2 to H4)

See Structure & Headings for why this matters.

Step 2: Add Alt Text to Images

When inserting an image in Drupal:

1. Upload the image via the editor or via the Media tab in the Content  module ([siteURL]/admin/content/media)
2. Fill in the Alt Text field — write a concise description of the image's meaning
3. If the image is purely decorative, fill the alt text field with empty quotes: "" — or toggle the "Decorative image" slider

Do not skip the alt text field. This is one of the most common accessibility issues on SRJC websites.

See Images & Alternative Text for guidance on writing good alt text.

Step 3: Write Descriptive Link Text

When adding a link:

1. Select the text you want to use as the link
2. Click the Link button in the editor
3. Enter the URL

Use descriptive text that tells the user where they're going:

❌ Don't	✅ Do
[Click here]	View the [Fall 2025 class schedule]
[Read more]	Read more about [ADA Title II requirements]
[https://www.santarosa.edu]	Visit the [SRJC homepage]

See Links & Navigation for more detail.

Step 4: Use Built-In List Tools

Use the Bullets and Numbering buttons in the Drupal editor. Don't type or copy/paste bullets (•), dashes, or numbers manually — built-in lists create the proper HTML code (<ul>, <ol>) that screen readers recognize and interpret correctly.

Step 5: Create Accessible Tables

Only use tables for tabular data, never for layout.

1. Copy and paste the Responsive Table code from the Kitchen Sink (in the Drupal menu bar, hover over Content — Kitchen Sink will appear in the dropdown menu). 
2. Paste in the code using the Source button in the Drupal editor.
3. Set header rows: click the row to bring up the editor's table tool. Select either the row or column button and toggle "Header row" or "Header column" as appropriate.
4. Don't merge or split cells
5. Keep tables simple

If you're using a table for visual layout (columns, positioning), STOP — use CSS layout or grid layouts (code available in the Kitchen Sink) instead.

See Tables for why this matters.

Step 6: Check Color Contrast

Ensure text on your web pages meets the 4.5:1 contrast ratio. Be especially careful with:

• SRJC brand colors — some combinations may not meet contrast requirements for text
• Colored backgrounds with text on top
• Links — ensure they're distinguishable (underline, not just a different color)

Test with the WebAIM Contrast Checker.

See Color & Contrast for requirements.

Step 7: Upload Accessible Documents

When you link to documents (PDFs, Word files) from your web page, ensure those documents are accessible:

• PDFs — see the PDF Documents Guide for remediation steps
• Word documents — see the Word Documents Guide
• Never link to scanned image-only PDFs — they're completely inaccessible to screen readers

Indicate the document type in the link text, e.g.: [Accessibility Checklist (PDF)]

Step 8: Write Meaningful Page Titles

Every page should have a clear, descriptive, unique title. In Drupal, the page title is usually the Title field at the top of the edit form.

• "Faculty Resources" ✅
• "Page" ❌
• "Untitled" ❌

The page title is what appears in browser tabs, bookmarks, and screen reader announcements, and also becomes part of the URL. 

You can edit that URL, making it short and memorable, but keep the page title more descriptive. To the right of the editor window, open the URL Alias panel and uncheck the box "Generate automatic URL alias." Type your desired URL alias, beginning with a forward slash: /.

Step 9: Use Siteimprove

SRJC uses Siteimprove to automatically scan web pages for accessibility issues. As a content editor, you can receive weekly reports for your pages via email, which give a brief overview of issues needing attention: broken links, misspellings, accessibility errors, etc. You can also access the Siteimprove dashboard which allows you to:

• Review your Accessibility and Quality Assurance reports as often as you wish
• Fix any WCAG failures or issues flagged by Siteimprove
• Focus on Errors first (Critical and Significant), then Warnings
• The DCI (Digital Certainty Index) score tells you how accessible your pages are — aim for a high score (in the 90s)

For detailed Siteimprove training and setup, contact the Online Accessibility Coordinator in Web Services.

Drupal-Specific Tips

Common Issues & Fixes