Converting Handwritten PDFs to WCAG 2.2 Compliant HTML using Claude AI

Conversion Workflow

Step 1: Prepare Your PDF

  1. Ensure the PDF is clear and readable
  2. Note any diagrams, graphs, or visual elements that will need descriptions

Step 2: Upload and Initiate Conversion

Upload both the PDF and template.html to Claude, then use the following prompt structure:

Standard Conversion Prompt:

Please convert the attached handwritten PDF lecture notes into a WCAG 2.2 Level AA compliant HTML document using the provided template.html file.


Key requirements:


The lesson is: [Lesson Number] - [Lesson Title]

Step 3: Review Generated HTML

Check the converted document for:

Content Accuracy Checklist:

Accessibility Checklist:

Step 4: Test with Assistive Technology

  1. Open the HTML file in a web browser
  2. Activate a screen reader (NVDA, JAWS, or VoiceOver)
  3. Navigate through headings to verify structure
  4. Test mathematical expression pronunciation
  5. Verify visual descriptions provide adequate context

Step 5: Request Refinements (if needed)

Use these follow-up prompts for common adjustments:

For Math Corrections:

"Please fix the following mathematical expression in [section name]: [describe the issue]"

For Visual Descriptions:

"Please add a more detailed visual description for the graph in [section name] that describes [specific spatial relationships or features]"

For Structure Improvements:

"Please reorganize [section name] to better reflect the logical flow: [describe desired structure]"

Template Structure Reference

Content Container Types

Container Class Purpose Use Cases
.definition Formal definitions Mathematical definitions, terminology
.theorem Theorems, laws, principles Major theorems, fundamental principles
.example Worked examples Practice problems, demonstrations
.important Key concepts Critical takeaways, reminders
.warning Common mistakes Pitfalls, misconceptions
.steps Procedures Step-by-step processes, algorithms
.solution Example solutions Inside .example containers
.visual-desc Visual descriptions Graphs, diagrams, spatial relationships

Heading Hierarchy

Warning: Never skip heading levels! Always progress sequentially: h3 → h4 → h5. Skipping levels (e.g., h3 → h5) violates WCAG 2.2 guidelines and confuses screen reader users.

Content Formatting Guidelines

Writing Style

Academic Tone: Maintain the formal, precise language typical of mathematics instruction. Use complete sentences and proper mathematical terminology.

Paragraph Flow

Tables Usage

Bold Text Usage

Logical Flow

Mathematical Notation Guidelines

MathJax Delimiters

Type Delimiter Usage Example
Inline Math \( ... \) Within paragraphs \(f(x) = x^2\)
Display Math \[ ... \] Standalone equations \[x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\]

Critical: Never use dollar signs ($) for math delimiters in this template. The MathJax configuration is set to recognize only \(...\) and \[...\] for accessibility compliance.

Common Mathematical Expressions

Element LaTeX Code
Fractions \frac{numerator}{denominator}
Limits \lim_{x \to a} f(x)
Derivatives f'(x) or \frac{dy}{dx}
Integrals \int f(x) \, dx
Square roots \sqrt{expression}
Summation \sum_{i=1}^{n} i

Visual Description Guidelines

Key Principle: Visual descriptions should enhance STEM learning by describing technical content, spatial relationships, and key features—not decorative elements.

What to Include in Visual Descriptions

Visual Description Template

For Graphs:

The graph shows [function name] plotted on a coordinate plane with [x-axis range] and [y-axis range]. The curve [describe behavior: increasing/decreasing, concavity]. Key features include [intercepts, critical points, asymptotes]. [Any additional relevant spatial relationships].

For Diagrams:

The diagram illustrates [main concept] showing [components and their relationships]. [Component 1] is positioned [spatial relationship] to [Component 2]. [Describe connections, labels, and flow of information]. This represents [conceptual meaning].

Common Prompt Variations

For Different Lesson Types

Theory-Heavy Lessons:

"Please convert this PDF with emphasis on properly formatting all theorems, proofs, and formal definitions. Ensure logical flow between concepts."

Problem-Solving Focused:

"Please convert this PDF ensuring all worked examples include complete step-by-step solutions. Group related problems together and highlight key problem-solving strategies."

Graph-Heavy Content:

"Please convert this PDF with detailed visual descriptions for all graphs. Focus on describing curve behavior, key points, and spatial relationships that are essential for understanding calculus concepts."

For Specific Corrections

Math Formatting Issues:

"The limit notation in section [X] is not rendering correctly. Please fix it using proper \lim_{x \to a} syntax."

Structure Improvements:

"Please add an h4 subsection header before the examples in section [X] to improve the document hierarchy."

Accessibility Enhancements:

"The graph in section [X] needs a more detailed visual description. Please describe the curve behavior, intercepts, and any asymptotes visible in the graph."

WCAG 2.2 Compliance Checklist

Level AA Requirements

Perceivable

Operable

Understandable

Robust

Quick Reference: Prompt Templates

Basic Conversion (Most Common)

Please convert the attached handwritten PDF lecture notes into a WCAG 2.2 Level AA compliant HTML document using the provided template.html file.


Key requirements:


The lesson is: [Lesson #] - [Title]

With Additional Context

Please convert the attached PDF to accessible HTML using template.html. This lesson focuses on [main topic] and includes [notable features, e.g., "several complex graphs" or "multiple related-rates problems"].


Please pay special attention to:

For Corrections/Refinements

Please update the HTML file with the following changes:

  1. [Specific change 1]
  2. [Specific change 2]
  3. [Specific change 3]

Maintain all other formatting and structure as-is.

Additional Resources

Accessibility Standards

Screen Reader Resources

LaTeX/MathJax References