Converting Handwritten PDFs to WCAG 2.2 Compliant HTML using Claude AI

Quick Reference: Prompt Templates

Choose one of the following three layout options based on your needs:

Layout Option 1: Basic Conversion (HTML Only - No Images)

Use this when: You want a clean, text-based HTML document without embedded page images. Best for lightweight files and purely accessible content.

Basic 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:

Use proper MathJax delimiters: $inline math$ and \[display math\]
Use the full accessibility MathJax configuration: tex-chtml-full.js with enableAssistiveMml: true
Maintain semantic HTML structure with proper heading hierarchy (start at h3)
Apply appropriate color-coded containers (definition, theorem, example, warning, important)
Include detailed visual descriptions for all diagrams and graphs
Ensure all mathematical expressions are properly formatted for screen readers
Preserve all worked examples with step-by-step solutions
Keep natural paragraph flow - avoid excessive bullet points
Use tables only when comparing multiple values or showing structured data
Bold only for truly critical terms (Definition:, Theorem:, Warning:, etc.)
Maintain academic tone and precision
Preserve the logical flow of the lecture

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

Note: Do NOT embed page images. Provide accessible HTML content only.

Layout Option 2: Page-by-Page Sequential Layout (With Embedded Images)

Use this when: You want students to see original handwritten content alongside accessible version. Best for most use cases - simple vertical layout with page images followed by accessible HTML.

Page-by-Page Sequential 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, with a page-by-page structure.

Document structure:

For each page of the PDF, display the page image first, followed immediately by the accessible HTML conversion of that page's content
Use clear section breaks between pages (e.g., <h3>Page [number]</h3> or horizontal rules)
This allows students to see the original handwritten content alongside its accessible version

Key requirements:

Use proper MathJax delimiters: $inline math$ and \[display math\]
Use the full accessibility MathJax configuration: tex-chtml-full.js with enableAssistiveMml: true
Maintain semantic HTML structure with proper heading hierarchy (start at h3 for page sections, h4 for major topics within pages)
Apply appropriate color-coded containers (definition, theorem, example, warning, important)
Include detailed visual descriptions for all diagrams and graphs
Ensure all mathematical expressions are properly formatted for screen readers
Preserve all worked examples with step-by-step solutions
Keep natural paragraph flow - avoid excessive bullet points
Use tables only when comparing multiple values or showing structured data
Bold only for truly critical terms (Definition:, Theorem:, Warning:, etc.)
Maintain academic tone and precision
Preserve the logical flow of the lecture

Page-by-page format:


<h3>Page 1</h3>
<figure>
    <img src="[base64 data]" alt="Page 1: [brief description of page content]">
    <figcaption><strong>Original handwritten page 1</strong></figcaption>
</figure>

<div class="page-content">
    [Accessible HTML conversion of page 1 content goes here]
    [Include all text, equations, definitions, examples, etc.]
</div>

<hr style="margin: 40px 0; border: 2px solid #3498db;">

<h3>Page 2</h3>
<figure>
    <img src="[base64 data]" alt="Page 2: [brief description]">
    <figcaption><strong>Original handwritten page 2</strong></figcaption>
</figure>

<div class="page-content">
    [Accessible HTML conversion of page 2 content]
</div>

[Continue for all pages...]

Image handling requirements:

Extract ALL pages from the PDF as images using pdftoppm or similar tools
Embed each page image directly into the HTML file as base64-encoded data URLs
Each page image should be wrapped in a <figure> element
Page images should show the full handwritten page
Use max-width: 100% and height: auto for responsive display
Add a simple figcaption like "Original handwritten page [N]"

Content conversion requirements:

After each page image, provide the accessible HTML conversion of that specific page's content
If a page contains diagrams, include detailed visual descriptions in .visual-desc divs within the accessible content
Maintain continuity - if a topic spans multiple pages, continue it naturally but keep it within the appropriate page section
Use the .page-content class to wrap each page's accessible content for consistent styling

CSS additions needed:


.page-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

figure img {
    border: 2px solid #dee2e6;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

hr {
    margin: 40px 0;
    border: none;
    border-top: 2px solid #3498db;
}

Layout Option 3: Side-by-Side Comparison Layout (With Embedded Images)

Use this when: You want direct visual comparison between original handwritten notes and accessible version. Best for verification and allowing students to reference original diagrams.

Side-by-Side Layout 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, with a side-by-side layout.

Document structure:

For each page of the PDF, create a two-column layout with the page image on the left and accessible HTML content on the right
Use CSS Grid or Flexbox for responsive side-by-side display
On mobile devices (< 768px width), stack the columns vertically (image first, then content)
This allows direct comparison between original handwritten notes and accessible version

Key requirements:

Use proper MathJax delimiters: $inline math$ and \[display math\]
Use the full accessibility MathJax configuration: tex-chtml-full.js with enableAssistiveMml: true
Maintain semantic HTML structure with proper heading hierarchy (start at h3 for page sections, h4 for major topics within pages)
Apply appropriate color-coded containers (definition, theorem, example, warning, important)
Include detailed visual descriptions for all diagrams and graphs
Ensure all mathematical expressions are properly formatted for screen readers
Preserve all worked examples with step-by-step solutions
Keep natural paragraph flow - avoid excessive bullet points
Use tables only when comparing multiple values or showing structured data
Bold only for truly critical terms (Definition:, Theorem:, Warning:, etc.)
Maintain academic tone and precision
Preserve the logical flow of the lecture

Side-by-side format:


<h3>Page 1</h3>
<div class="page-container">
    <div class="page-image">
        <figure>
            <img src="[base64 data]" alt="Page 1: [brief description]">
            <figcaption><strong>Original handwritten page 1</strong></figcaption>
        </figure>
    </div>
    <div class="page-content">
        [Accessible HTML conversion of page 1 content goes here]
        [Include all text, equations, definitions, examples, etc.]
    </div>
</div>

<hr style="margin: 40px 0; border: 2px solid #3498db;">

<h3>Page 2</h3>
<div class="page-container">
    <div class="page-image">
        <figure>
            <img src="[base64 data]" alt="Page 2: [brief description]">
            <figcaption><strong>Original handwritten page 2</strong></figcaption>
        </figure>
    </div>
    <div class="page-content">
        [Accessible HTML conversion of page 2 content]
    </div>
</div>

[Continue for all pages...]

CSS additions needed for side-by-side layout:


.page-container {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 30px;
    margin: 30px 0;
    align-items: start;
}

.page-image {
    position: sticky;
    top: 20px;
}

.page-image figure {
    margin: 0;
}

.page-image img {
    max-width: 100%;
    height: auto;
    border: 2px solid #dee2e6;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 4px;
}

.page-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Mobile responsive: stack vertically on small screens */
@media (max-width: 768px) {
    .page-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .page-image {
        position: static;
    }
}

hr {
    margin: 40px 0;
    border: none;
    border-top: 2px solid #3498db;
}

Benefits of side-by-side layout:

Direct visual comparison between original and accessible version
Easier verification of conversion accuracy
Students can reference original diagrams while reading accessible content
Sticky positioning keeps page image visible while scrolling through content
Responsive design ensures usability on all devices

Conversion Workflow

Step 1: Prepare Your PDF

Ensure the PDF is clear and readable
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:

Use proper MathJax delimiters: $inline math$ and \[display math\]
Maintain semantic HTML structure with proper heading hierarchy (start at h3)
Apply appropriate color-coded containers (definition, theorem, example, warning, important)
Include detailed visual descriptions for all diagrams and graphs
Ensure all mathematical expressions are properly formatted for screen readers
Preserve all worked examples with step-by-step solutions
Keep natural paragraph flow - avoid excessive bullet points
Use tables only when comparing multiple values or showing structured data
Bold only for truly critical terms (Definition:, Theorem:, Warning:, etc.)
Maintain academic tone and precision
Preserve the logical flow of the lecture

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

Step 3: Review Generated HTML

Check the converted document for:

Content Accuracy Checklist:

☐ All mathematical expressions are correctly transcribed
☐ Formulas use proper MathJax delimiters
☐ Examples include complete solutions
☐ Definitions and theorems are properly contained and labeled
☐ Visual descriptions are present for all technical diagrams

Accessibility Checklist:

☐ Heading hierarchy is logical (h3 → h4 → h5)
☐ No heading levels are skipped
☐ Color is not the only means of conveying information
☐ All content has sufficient color contrast (4.5:1 for normal text)
☐ Mathematical notation is properly structured for assistive technology
☐ Visual descriptions enhance STEM learning (not just decorative)

Step 4: Test with Assistive Technology

Open the HTML file in a web browser
Activate a screen reader (NVDA, JAWS, or VoiceOver)
Navigate through headings to verify structure
Test mathematical expression pronunciation
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

<h3> - Main sections/topics (e.g., "Derivatives of Trigonometric Functions")
<h4> - Subsections (e.g., "Derivative of Sine Function")
<h5> - Sub-subsections, example titles (e.g., "Example 1: Finding the derivative")

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

Default to paragraphs: Use natural prose rather than bullet points for explanations, derivations, and discussions
Reserve bullets for: Lists of distinct items (formulas to remember, steps in a procedure, properties of a function)
Avoid excessive bullets: If content reads like connected sentences, keep it as paragraph text

Tables Usage

Use tables when: Comparing multiple values, showing function values at different points, displaying derivatives of multiple functions
Avoid tables when: Presenting sequential information that flows better as prose or a simple list

Bold Text Usage

Bold for labels: "Definition:", "Theorem:", "Warning:", "Solution:", "Important:"
Bold for key terms: Only when introducing a new mathematical term for the first time
Avoid over-bolding: Don't bold entire sentences or multiple words in regular explanatory text

Logical Flow

Preserve lecture structure: Follow the order and organization of the original handwritten notes
Maintain connections: Keep transitions between topics, references to previous concepts, and build-up to conclusions
Group related content: Keep examples with their explanations, keep related theorems together

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

Graphs: Axes labels, scale, key points (intercepts, maxima, minima), curve behavior, domain/range
Diagrams: Spatial relationships, labeled components, directional information, measurements
Geometric Figures: Shape types, dimensions, angles, relative positions
Tables/Charts: Data trends, patterns, significant values

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

☐ All content has semantic HTML structure
☐ Mathematical notation uses accessible MathJax configuration
☐ Visual descriptions provided for all technical diagrams
☐ Color contrast ratio meets 4.5:1 for normal text
☐ Color is not the only means of conveying information (borders/labels also used)

Operable

☐ All functionality available from keyboard
☐ Proper heading structure for navigation
☐ Focus order is logical and intuitive
☐ Page has descriptive title (in <title> tag)

Understandable

☐ Language of page is identified (lang="en")
☐ Consistent navigation and structure throughout
☐ Labels and instructions provided where needed
☐ Mathematical expressions are properly structured

Robust

☐ Valid HTML5 markup
☐ Compatible with current and future assistive technologies
☐ MathJax properly configured for screen readers

Additional Resources

Accessibility Standards

WCAG 2.2 Guidelines: https://www.w3.org/WAI/WCAG22/quickref/
MathJax Accessibility: https://docs.mathjax.org/en/latest/basic/accessibility.html
WebAIM Screen Reader Testing: https://webaim.org/articles/screenreader_testing/

Screen Reader Resources

NVDA (Free, Windows): https://www.nvaccess.org/
JAWS (Commercial, Windows): Freedom Scientific
VoiceOver (Built-in, macOS/iOS): System Preferences → Accessibility

LaTeX/MathJax References

LaTeX Math Symbols: OEIS Wiki
MathJax Documentation: https://docs.mathjax.org/

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}\]`