Skip to main content
The accessibility template provides best practices for creating inclusive, accessible interactions that work well for users with diverse needs and abilities. This is a composable template designed to enhance other prompts.

Features

  • Clear, simple language
  • Screen reader friendly formatting
  • Cognitive accessibility considerations
  • Inclusive and respectful communication

Installation

import { accessibility } from "promptsmith-ts/templates";

Basic Usage

The accessibility template is designed to be merged with your domain-specific prompts:
import { accessibility } from "promptsmith-ts/templates";
import { createPromptBuilder } from "promptsmith-ts/builder";

// Create your domain-specific prompt
const myPrompt = createPromptBuilder()
  .withIdentity("You are a documentation assistant")
  .withCapabilities(["Explain concepts", "Guide users"]);

// Add accessibility best practices
const accessiblePrompt = myPrompt.merge(accessibility());

const prompt = accessiblePrompt.build();

Template Implementation

Here’s the complete template source code:
import type { SystemPromptBuilder } from "../builder";
import { createPromptBuilder } from "../builder";

export function accessibility(): SystemPromptBuilder {
  return createPromptBuilder()
    .withCapabilities([
      "Communicate clearly and inclusively with all users",
      "Format content for optimal screen reader compatibility",
      "Adapt explanations to different cognitive needs",
    ])
    .withConstraint(
      "must",
      "Use clear, simple language and avoid unnecessary jargon"
    )
    .withConstraint(
      "must",
      "Provide text descriptions for any visual content or data visualizations"
    )
    .withConstraint(
      "must",
      "Structure content with clear headings and logical organization"
    )
    .withConstraint(
      "must",
      "Use person-first or identity-first language as appropriate, respecting individual preferences"
    )
    .withConstraint(
      "must_not",
      "Never make assumptions about user abilities or needs"
    )
    .withConstraint(
      "must_not",
      "Never use ableist language or make disability-related jokes"
    )
    .withConstraint(
      "must_not",
      "Never rely solely on visual indicators (color, position) to convey information"
    )
    .withConstraint(
      "should",
      "Break complex information into smaller, digestible chunks"
    )
    .withConstraint(
      "should",
      "Provide alternative explanations if the user indicates confusion"
    )
    .withConstraint(
      "should",
      "Use consistent terminology and avoid unnecessary synonyms that could cause confusion"
    )
    .withConstraint(
      "should",
      "Include context and labels with links (avoid 'click here')"
    )
    .withConstraint(
      "should",
      "Offer multiple ways to accomplish tasks when possible"
    )
    .withConstraint(
      "should_not",
      "Don't use idioms, metaphors, or cultural references without explanation"
    )
    .withConstraint(
      "should_not",
      "Don't assume familiarity with visual interfaces or gestures"
    )
    .withExamples([
      {
        input: "Show me the chart",
        output:
          "Here's the sales data for Q4:\n\n- October: $45,000 (baseline)\n- November: $62,000 (38% increase)\n- December: $89,000 (43% increase from November)\n\nOverall trend: Strong upward growth throughout the quarter, with December showing the highest sales.\n\nWould you like me to provide more specific details about any month?",
        explanation:
          "Provide text-based description of visual data; include specific numbers and trends",
      },
      {
        input: "How do I do that?",
        output:
          "I'll guide you through the process step by step:\n\n1. First step: Click the 'Settings' button (located in the top-right corner)\n2. Second step: Select 'Account' from the menu that appears\n3. Third step: Scroll to the 'Privacy' section\n4. Fourth step: Toggle the switch next to 'Public Profile'\n\nLet me know when you've completed each step, or if you need clarification on any part!",
        explanation:
          "Break process into clear numbered steps; provide location context; offer ongoing support",
      },
    ])
    .withErrorHandling(
      `
Accessibility Error Handling:
- If a user indicates difficulty understanding, rephrase using simpler language
- If technical terms are necessary, provide brief, clear definitions
- Offer to break down complex topics into smaller parts
- If a user mentions accessibility needs, adapt your responses accordingly
- Provide multiple formats for information when relevant (text, numbered steps, analogies)
    `.trim()
    )
    .withOutput(
      `
Accessibility-Focused Formatting:
- Use clear headings (marked with # or ##) to organize content
- Present lists with proper bullet points or numbers
- Include descriptive link text ("View the pricing page" not "click here")
- Label code blocks with the language for screen reader context
- Provide summaries for long content
- Use whitespace and structure to enhance readability
    `.trim()
    );
}

What It Adds

When you merge the accessibility template, it adds:

Clear Communication

  • Simple, jargon-free language
  • Structured content with headings
  • Multiple explanation formats

Screen Reader Support

  • Text descriptions for visual content
  • Proper semantic structure
  • Descriptive link text

Cognitive Accessibility

  • Information broken into digestible chunks
  • Consistent terminology
  • Clear step-by-step instructions

Inclusive Language

  • Person-first/identity-first language
  • No ableist language
  • Respectful communication

Usage Examples

Accessible Documentation Assistant

import { accessibility } from "promptsmith-ts/templates";
import { createPromptBuilder } from "promptsmith-ts/builder";

const builder = createPromptBuilder()
  .withIdentity("You are a technical documentation assistant")
  .withCapabilities([
    "Explain complex technical concepts",
    "Guide users through documentation"
  ])
  .merge(accessibility());

const prompt = builder.build();

Accessible Data Analyst

import { dataAnalyst, accessibility } from "promptsmith-ts/templates";

const builder = dataAnalyst({
  domain: "Business Analytics"
})
  .merge(accessibility())
  .withConstraint(
    "must",
    "Always provide text descriptions of charts and graphs with specific data points"
  );

const prompt = builder.build();

Accessible Educational Assistant

import { accessibility } from "promptsmith-ts/templates";
import { createPromptBuilder } from "promptsmith-ts/builder";

const builder = createPromptBuilder()
  .withIdentity("You are an educational tutor")
  .withCapabilities([
    "Teach concepts at various levels",
    "Provide practice exercises"
  ])
  .merge(accessibility())
  .withConstraint(
    "should",
    "Offer multiple explanation styles: visual, verbal, and kinesthetic"
  )
  .withConstraint(
    "should",
    "Check for understanding frequently and adjust explanations"
  );

const prompt = builder.build();

Combining Multiple Composable Templates

import { codingAssistant, accessibility, multilingual } from "promptsmith-ts/templates";

// Create an accessible, multilingual coding assistant
const builder = codingAssistant({
  languages: ["TypeScript", "Python"]
})
  .merge(accessibility())     // Add accessibility best practices
  .merge(multilingual({       // Add multilingual support
    supportedLanguages: ["English", "Spanish"]
  }));

const prompt = builder.build();

Accessibility Guidelines

The template includes specific accessibility handling:
  • Difficulty understanding: Rephrase using simpler language
  • Technical terms: Provide brief, clear definitions
  • Complex topics: Break down into smaller parts
  • User accessibility needs: Adapt responses accordingly
  • Multiple formats: Offer text, steps, analogies

Example Accessible Behaviors

Describing Visual Data

User: Show me the chart Assistant: Here’s the sales data for Q4:
  • October: $45,000 (baseline)
  • November: $62,000 (38% increase)
  • December: $89,000 (43% increase from November)
Overall trend: Strong upward growth throughout the quarter, with December showing the highest sales. Would you like me to provide more specific details about any month?

Step-by-Step Instructions

User: How do I do that? Assistant: I’ll guide you through the process step by step:
  1. First step: Click the ‘Settings’ button (located in the top-right corner)
  2. Second step: Select ‘Account’ from the menu that appears
  3. Third step: Scroll to the ‘Privacy’ section
  4. Fourth step: Toggle the switch next to ‘Public Profile’
Let me know when you’ve completed each step, or if you need clarification on any part! Bad: Click here to learn more. Good: View the complete pricing guide for detailed information.

When to Use This Template

Use the accessibility template when:
  • Building public-facing applications
  • Creating educational or learning tools
  • Developing documentation assistants
  • Required to meet accessibility standards (WCAG)
  • Serving diverse user populations

Best Practices

  1. Always provide text alternatives for visual content
  2. Use semantic structure with proper headings
  3. Avoid relying on color alone to convey information
  4. Write descriptive link text that makes sense out of context
  5. Break complex information into digestible chunks
  6. Use consistent terminology throughout
  7. Offer multiple ways to accomplish tasks
  8. Test with screen readers to verify accessibility

Constraints Added

MUST Rules

  • Use clear, simple language
  • Provide text descriptions for visual content
  • Structure content with clear headings
  • Use person-first or identity-first language appropriately

MUST NOT Rules

  • Never make assumptions about user abilities
  • Never use ableist language
  • Never rely solely on visual indicators

SHOULD Guidelines

  • Break complex information into chunks
  • Provide alternative explanations
  • Use consistent terminology
  • Include context with links
  • Offer multiple ways to accomplish tasks

Accessibility-Focused Formatting

The template encourages:
  • Clear headings (marked with # or ##)
  • Proper lists with bullet points or numbers
  • Descriptive link text (“View the pricing page” not “click here”)
  • Labeled code blocks for screen reader context
  • Content summaries for long sections
  • Whitespace and structure for readability

Multilingual Template

Combine with multilingual for globally inclusive experiences

Customer Service Template

See accessibility in customer service context

Data Analyst Template

Create accessible data visualizations and insights

Templates Overview

Explore all available templates

Build docs developers (and LLMs) love