Writing

Writing Accessible Documentation

Create documentation that works for everyone by following accessibility principles and inclusive design practices.

Accessible documentation isn't just about compliance—it creates better experiences for all users by prioritizing clarity, structure, and multiple ways to consume information.

Clear Language and Structure

Accessible writing starts with clear, direct language that reduces cognitive load for all readers.

Write for Clarity

Use simple, direct language that communicates efficiently:

❌ Complex Language
Subsequently, in order to implement the aforementioned functionality,
it is necessary to instantiate the configuration object with the
appropriate parameters as delineated in the following example.
✅ Clear Language
Next, create a configuration object with these settings:

Meaningful Headings

Write headings that describe content accurately and help users navigate efficiently:

# Introduction
## Getting Started
## More Information
## Advanced Stuff
# User Authentication Setup
## Installing the Authentication SDK
## Configuring Your First Login Flow
## Handling Authentication Errors
## Multi-Factor Authentication Options

Screen Reader Test: Read only your headings aloud. Can someone understand your document structure and find what they need?

Alternative Text and Media

Provide meaningful descriptions for all visual content so information isn't lost for users who can't see images.

Effective Alt Text

Write alt text that conveys the same information the image provides:

Focus on what information the image conveys, not how it looks.

❌ "Screenshot of a dashboard"
✅ "Dashboard showing 3 active integrations, 1,247 API calls today,
    and 99.8% uptime status"

If the image contains important text, include it in the alt text.

❌ "Error message dialog box"
✅ "Error dialog stating 'Invalid API key. Please check your
    configuration and try again.' with a retry button"

Video and Interactive Content

Provide text alternatives for multimedia content:

Logical Content Structure

Organize information in a predictable hierarchy that assistive technologies can navigate effectively.

Consistent Navigation Patterns

Use consistent patterns throughout your documentation:

Page Structure

  • Page title (H1)

  • Introduction paragraph

  • Main sections (H2)

  • Subsections (H3)

  • Code examples

  • Next steps

Section Patterns

  • Descriptive heading

  • Brief overview

  • Step-by-step instructions

  • Code example

  • Expected outcome

  • Troubleshooting

Help users navigate efficiently through content:

Navigation Strategy: Users with screen readers often navigate by headings, landmarks, or links. Ensure your content structure supports these navigation methods.

Color and Visual Accessibility

Don't rely solely on color to convey important information.

Color-Independent Information Design

Use multiple visual cues to communicate status and importance:

❌ Color-Only Indicators
❌ Red text: "Error occurred"
🟡 Yellow text: "Warning message"
✅ Green text: "Success"
✅ Multiple Visual Cues
**Error:** Invalid API key provided
⚠️ **Warning:** Rate limit approaching (80% used)
**Success:** Configuration saved successfully

High Contrast Content

Ensure sufficient contrast between text and backgrounds:

Contrast Requirements: Text should have at least a 4.5:1 contrast ratio against its background. Large text (18pt+) needs at least 3:1 contrast.

Keyboard Navigation Support

Ensure all interactive elements work with keyboard navigation:

Focus Management

Design content flow that makes sense when navigating with keyboard:

Interactive elements should follow reading order (left-to-right, top-to-bottom).

## API Key Configuration

1. [Input field: API Key]
2. [Button: Test Connection]
3. [Button: Save Configuration]
4. [Link: Advanced Settings]

Users should always know which element has focus.

Focus Indicators: Ensure buttons, links, and form fields have visible focus states that are clearly distinguishable.

Provide ways to skip repetitive content.

<a href="#main-content" class="skip-link">
    Skip to main content
</a>

Testing Your Content

Regularly test your documentation with accessibility tools and real users:

# Test with accessibility scanners
npm install -g @axe-core/cli
axe-cli https://your-docs-site.com

# Check color contrast

npm install -g colour-contrast-checker
contrast-checker "#333333" "#ffffff"

Keyboard Navigation Test:

  1. Unplug your mouse

  2. Navigate your entire documentation using only keyboard

  3. Can you access all information and functionality?

Screen Reader Test:

  1. Enable your OS screen reader (VoiceOver on Mac, NVDA on Windows)

  2. Navigate through your content

  3. Is all information available audibly?

Include Diverse Users:

  • Users with visual impairments

  • Users with motor disabilities

  • Users with cognitive differences

  • Users with limited technical experience

Ask Specific Questions:

  • Can you find how to authenticate API requests?

  • What steps would you take if you got an error?

  • Is any information unclear or confusing?

Error Messages and Help Text

Write error messages and help text that are clear and actionable:

Accessible documentation creates better experiences for everyone—users with disabilities, non-native speakers, people in low-bandwidth environments, and anyone trying to quickly find information.

How is this guide?

Last updated on

Powered by Holocron

Documentation