Content Design Guide Friendly to People with Cognitive and Developmental Disabilities

Overview Summary

• Characteristics of cognitive/developmental disabilities and key considerations
• Simplify information structure and ensure predictability
• Use clear language and visuals for better comprehension
• Optimize interaction design and feedback
• Practical examples and a checklist for immediate implementation

1. Introduction: Toward a World Where Everyone Can Access Information Without Stress

Web content should be not only visually appealing and on-trend but also easily understood by all users. People with cognitive or developmental disabilities often struggle with organizing information and grasping intent, so thoughtful design is essential. This guide introduces concrete examples of simple, predictable, and flexible content design.

2. Basics of Cognitive & Developmental Disabilities and Key Considerations

• Understanding Characteristics
  • Difficulty sustaining attention: prone to drop off during long text or complex procedures
  • Difficulty with transitions: sudden pop-ups or page changes can cause confusion
  • Difficulty with abstract language: ambiguous phrases and idioms may be misinterpreted
• Key Considerations
  1. Minimize information: present no more than 3–5 elements at once
  2. Predictable structure: keep navigation and button placement consistent
  3. Concrete language: avoid abstractions, use bullet points and examples
  4. Control pacing: allow generous timing for user actions

3. Simplify Information Structure & Ensure Predictability

• Headings and Paragraphs
  • Use <h2> and <h3> appropriately to clarify hierarchy
  • Limit paragraphs to around 4–5 lines to create visual chunks
• Fixed Navigation
  • Place global navigation at the top, side navigation at the left edge
  • Keep “Next” and “Back” buttons in the same location
• Breadcrumbs

  <nav aria-label="Breadcrumb">
    <ol>
      <li><a href="/">Home</a></li>
      <li><a href="/articles">Articles</a></li>
      <li>Disability-Friendly Guide</li>
    </ol>
  </nav>
  

4. Use Clear Writing and Visuals for Better Comprehension

• Plain, Concrete Tone
  • Friendly cues like “please,” “for example,” and “first”
  • Keep sentences under 50 characters and balance kanji with hiragana
• Bullet Lists for Key Points
  • Always list steps or cautions; use numbered lists to show sequence
• Visual Aids
  • Icon + text:

    <p><span aria-hidden="true">📝</span> <strong>Example:</strong> The submit button is at the bottom of the page.</p>
    

  • Annotate diagrams and screenshots with numbers or callouts

5. Interaction Design & Optimized Feedback

• Buttons & Links
  • Large touch targets (at least 44×44px)
  • Clear focus styles (color or border changes)
• Control Dynamic Changes
  • Show modals and toast messages only after user action
  • Always include a “close” button on auto-disappearing elements
• Error Messages
  • Display summary of errors at the top of the form
  • Show per-field messages beside each input with aria-describedby

    <input id="age" type="number" aria-describedby="age-error">
    <span id="age-error" role="alert">Please enter an age of 18 or older.</span>
    

6. Practical Example: Markup for a “Frequently Asked Questions” Section

<section aria-labelledby="faq-title">
  <h2 id="faq-title">Frequently Asked Questions</h2>
  <dl>
    <dt><button aria-expanded="false" aria-controls="faq1">Q1. How do I make a purchase?</button></dt>
    <dd id="faq1" hidden>
      <p>Click “Add to Cart” on the product page, then enter your payment details.</p>
    </dd>

    <dt><button aria-expanded="false" aria-controls="faq2">Q2. Where can I contact support?</button></dt>
    <dd id="faq2" hidden>
      <p>Use the “Contact Us” link at the bottom of the page.</p>
    </dd>
  </dl>
</section>
<script>
  document.querySelectorAll('dt button').forEach(btn => {
    btn.addEventListener('click', () => {
      const id = btn.getAttribute('aria-controls');
      const dd = document.getElementById(id);
      const expanded = btn.getAttribute('aria-expanded') === 'true';
      btn.setAttribute('aria-expanded', String(!expanded));
      dd.hidden = expanded;
    });
  });
</script>

7. Who Benefits and How?

• Content Writers: Learn plain, concrete phrasing to write accessible articles
• UI/UX Designers: Easily prototype inclusive information structures
• eLearning Developers: Improve learner comprehension and reduce drop-offs
• Developers/Engineers: Implement accessible interactions while meeting requirements
• Users with Cognitive/Developmental Disabilities: Enjoy a clear, confident browsing experience

8. Accessibility Level

This guide is based on WCAG 2.1 AA compliance, with an aim to achieve AAA where possible.

9. Conclusion: Clarity Born of Consideration

1. Understand cognitive traits and optimize information and expression
2. Create simple, predictable structures
3. Ensure readability with plain language and visual support
4. Provide thoughtful feedback after every interaction
5. Use these examples and apply PDCA for continuous improvement

We hope this guide helps you design web content that is friendly to people with cognitive and developmental disabilities, achieving true clarity for all users.