From 6bdeafe07d56cadd16731eb78a406e435d9897e2 Mon Sep 17 00:00:00 2001 From: Scott Kirkland Date: Fri, 16 Jan 2026 13:40:11 -0800 Subject: [PATCH 1/6] fancier! --- client/src/routes/FAQs.tsx | 542 +++++++++++++++++++++++++------------ 1 file changed, 369 insertions(+), 173 deletions(-) diff --git a/client/src/routes/FAQs.tsx b/client/src/routes/FAQs.tsx index 3510274..af71dbd 100644 --- a/client/src/routes/FAQs.tsx +++ b/client/src/routes/FAQs.tsx @@ -1,191 +1,387 @@ -import { createFileRoute } from '@tanstack/react-router'; +import { + ArrowUpTrayIcon, + Bars3BottomLeftIcon, + CheckBadgeIcon, + CheckCircleIcon, + ClipboardDocumentCheckIcon, + DocumentMagnifyingGlassIcon, + SparklesIcon, +} from '@heroicons/react/24/outline'; +import { Link, createFileRoute } from '@tanstack/react-router'; +import type { ReactNode } from 'react'; export const Route = createFileRoute('/FAQs')({ component: FAQs, }); +type FaqItemProps = { + children: ReactNode; + defaultOpen?: boolean; + question: string; +}; + +function FaqItem({ children, defaultOpen = false, question }: FaqItemProps) { + return ( +
+ +
{question}
+
{children}
+
+ ); +} + function FAQs() { return ( -
-
-

FAQ placeholder

-

- Most PDFs are visually readable but structurally inaccessible. They - lack proper headings, document structure, reading order, and - descriptive text for images and links—features required by - accessibility regulations and essential for screen readers and - assistive technologies. -

- -

- Readable automatically analyzes your PDF and: -

- -
    -
  • Detects and adds document structure and hierarchy
    • -
  • Identifies headings, lists, tables, and reading order
    • -
  • - Generates clear, context-aware descriptions for images and links - using AI -
    • -
  • Flags remaining accessibility issues in a detailed report
    • -
- -

- The result is a PDF that is dramatically closer to full accessibility - compliance—saving time, reducing manual remediation effort, and - helping ensure your documents are usable by everyone. -

- -
- -
-

- About Readable -

+
+
+
+
+
+
+ PDF Accessibility +
+

+ How it works +

+

+ Most PDFs look fine—but accessibility depends on structure. + Readable helps you get dramatically closer to WCAG + PDF/UA + expectations without doing everything by hand. +

+
-
-

- Why Accessibility Matters -

- -

- Accessibility regulations such as WCAG, Section 508, and PDF/UA - require digital documents to be usable by people with - disabilities. While many PDFs look correct visually, most fail - accessibility checks because they lack: -

- -
    -
  • Semantic structure (headings, sections, lists)
    • -
  • Logical reading order
    • -
  • Text alternatives for images and graphics
    • -
  • Meaningful descriptions for links and interactive content
    • -
- -

- Without these elements, screen readers cannot interpret the - document correctly—making it inaccessible to many users. -

+
+ + Upload a PDF + + + Jump to FAQs + +
+
-
- -
-

- How Readable Works -

- -

- Readable bridges the gap between visually correct PDFs and truly - accessible documents. When you upload a PDF, Readable - automatically: -

- -
    -
  1. -
    - Analyzes the document structure -
    -

    - It detects headings, paragraphs, lists, tables, and layout - patterns to establish a logical hierarchy and reading order. -

    -
    2. - -
  2. -
    - Adds accessibility metadata -
    -

    - The PDF is enhanced with structural tags, titles, and - navigation elements required by accessibility standards. -

    -
    3. - -
  3. -
    - Generates intelligent descriptions using AI -
    -

    - Readable uses AI to create useful, context-aware descriptions - for: -

    -
      -
    • Images and figures
      • -
    • Links and references
      • -
    • Complex content blocks
      • -
    -

    - These descriptions are designed to be helpful—not generic—so - assistive technology users get meaningful information. -

    -
    4. - -
  4. -
    - Produces an accessibility report -
    -

    - After processing, Readable provides a report highlighting: -

    -
      -
    • What was automatically fixed
      • -
    • Remaining issues that may require manual review
      • -
    • - Recommendations for achieving higher compliance levels -
      • -
    -
    5. -
+
+
+
+

+ The core issue +

+

+ Most PDFs are visually readable but structurally inaccessible. + They lack proper headings, document structure, reading order, + and descriptive text for images and links—features required by + accessibility regulations and essential for screen readers and + assistive technologies. +

+
+
+ +
+
+

What Readable does automatically

+
    +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
+ +
+
+
+
-
- -
-

- What You Get -

- -
    -
  • Significantly improved WCAG and PDF/UA compliance
    • -
  • Dramatically reduced remediation time
    • -
  • Clear visibility into remaining accessibility gaps
    • -
  • A practical balance of automation and human review
    • -
- -

- Readable doesn’t claim to replace human judgment entirely—but it - does eliminate the most time-consuming and technical parts of PDF - accessibility work. -

+
+
+
+

+ How Readable works +

+

+ A simple workflow, with accessibility-focused output. +

+
+
+ From upload → to remediated PDF +
-
- -
-

- Who Readable Is For -

- -

Readable is designed for:

- -
    -
  • Universities and research institutions
    • -
  • Government and public-sector organizations
    • -
  • Companies publishing reports, manuals, or forms
    • -
  • - Teams responsible for compliance, accessibility, or digital - content -
    • -
- -

- If you produce PDFs, Readable helps ensure they’re usable by - everyone. -

+
+
+
    +
  • +
    +
    +
    +
    + Step 1 +
    +
    Upload your PDF
    +

    + Drop a file in and Readable begins inspecting pages, + layout, and content. +

    +
    +
    +
    • + +
  • +
    +
    +
    +
    +
    + Step 2 +
    +
    + Analyze structure + reading order +
    +

    + Detects headings, paragraphs, lists, tables, and a + sensible order for assistive technology. +

    +
    +
    +
    • + +
  • +
    +
    +
    +
    +
    + Step 3 +
    +
    Add tags + metadata
    +

    + Applies structure and accessibility metadata so the PDF + has meaningful navigation and semantics. +

    +
    +
    +
    • + +
  • +
    +
    +
    +
    +
    + Step 4 +
    +
    + Generate useful descriptions +
    +

    + Uses AI to draft context-aware alt text for images and + links (so it’s helpful—not generic). +

    +
    +
    +
    • + +
  • +
    +
    +
    +
    +
    + Step 5 +
    +
    + Deliver output + report +
    +

    + Get an updated PDF plus a clear breakdown of what was + improved and what still needs review. +

    +
    +
    • +
+
+
+
+ +
+

+ What you get +

+
+
+
Structure
+
Tags + reading order
+
+ Headings, lists, tables, and hierarchy +
+
+
+
Descriptions
+
Alt text for images
+
+ Links and figures become understandable +
+
+
+
Metadata
+
Better document info
+
+ Helps navigation + discoverability +
+
+
+
Report
+
What’s fixed vs manual
+
+ Clear next steps for compliance +
+
+
+
+ +
+

+ FAQs +

+ +
+ +

+ Accessibility regulations such as WCAG, Section 508, and PDF/UA + require digital documents to be usable by people with + disabilities. Many PDFs look correct visually, but fail + accessibility checks because they lack: +

+
    +
  • Semantic structure (headings, sections, lists)
    • +
  • Logical reading order
    • +
  • Text alternatives for images and graphics
    • +
  • Meaningful descriptions for links and interactive content
    • +
+

+ Without these elements, screen readers can’t interpret the + document correctly—making it inaccessible to many users. +

+ + + +

+ No tool can guarantee full compliance in every case. Readable + is designed to get you dramatically closer, then clearly show + what still needs human review (especially for complex layouts, + tables, and meaning-dependent images). +

+ + + +

+ Text-based PDFs with real selectable text are typically the best + candidates. If your PDF is scanned (image-only), it may require + OCR before it can be meaningfully remediated. +

+ + + +

+ AI is used to draft clear, context-aware descriptions for images + and links. The goal is helpful descriptions that reflect the + surrounding content, not generic alt text. +

+ + + +

+ You’ll get an updated PDF plus a report showing what Readable + improved automatically and what may still require manual fixes. +

+ + + +

Readable is designed for teams that publish PDFs, including:

+
    +
  • Universities and research institutions
    • +
  • Government and public-sector organizations
    • +
  • Companies publishing reports, manuals, or forms
    • +
  • Teams responsible for compliance and digital content
    • +
+ + +
+
+

Want more detail?

+

+ Start with the{' '} + + UCOP Digital Accessibility guidelines + {' '} + for a practical overview of WCAG and PDF expectations. +

+
+
-
+
); From 186022ddbfe846d303b131ec3a66633c3b23591b Mon Sep 17 00:00:00 2001 From: Scott Kirkland Date: Fri, 16 Jan 2026 13:42:08 -0800 Subject: [PATCH 2/6] larger! --- client/src/routes/FAQs.tsx | 78 ++++++++++++++++++++++---------------- 1 file changed, 46 insertions(+), 32 deletions(-) diff --git a/client/src/routes/FAQs.tsx b/client/src/routes/FAQs.tsx index af71dbd..cc55671 100644 --- a/client/src/routes/FAQs.tsx +++ b/client/src/routes/FAQs.tsx @@ -63,7 +63,7 @@ function FAQs() {
-
+

The core issue

@@ -78,7 +78,7 @@ function FAQs() {
-
+

What Readable does automatically

  • @@ -116,7 +116,7 @@ function FAQs() {
-
+
-
+
  • @@ -154,11 +154,13 @@ function FAQs() { className="h-5 w-5 text-primary" />
    -
    -
    +
    +
    Step 1
    -
    Upload your PDF
    +
    + Upload your PDF +

    Drop a file in and Readable begins inspecting pages, layout, and content. @@ -175,11 +177,11 @@ function FAQs() { className="h-5 w-5 text-primary" />

    -
    -
    +
    +
    Step 2
    -
    +
    Analyze structure + reading order

    @@ -198,11 +200,13 @@ function FAQs() { className="h-5 w-5 text-primary" />

    -
    -
    +
    +
    Step 3
    -
    Add tags + metadata
    +
    + Add tags + metadata +

    Applies structure and accessibility metadata so the PDF has meaningful navigation and semantics. @@ -219,11 +223,11 @@ function FAQs() { className="h-5 w-5 text-primary" />

    -
    -
    +
    +
    Step 4
    -
    +
    Generate useful descriptions

    @@ -242,11 +246,11 @@ function FAQs() { className="h-5 w-5 text-primary" />

    -
    -
    +
    +
    Step 5
    -
    +
    Deliver output + report

    @@ -264,32 +268,42 @@ function FAQs() {

    What you get

    -
    +
    -
    Structure
    -
    Tags + reading order
    -
    +
    Structure
    +
    + Tags + reading order +
    +
    Headings, lists, tables, and hierarchy
    -
    Descriptions
    -
    Alt text for images
    -
    +
    + Descriptions +
    +
    + Alt text for images +
    +
    Links and figures become understandable
    -
    Metadata
    -
    Better document info
    -
    +
    Metadata
    +
    + Better document info +
    +
    Helps navigation + discoverability
    -
    Report
    -
    What’s fixed vs manual
    -
    +
    Report
    +
    + What’s fixed vs manual +
    +
    Clear next steps for compliance
    From a59eae7ddf9c2bbacd6a64514ee810e724057cdb Mon Sep 17 00:00:00 2001 From: Scott Kirkland Date: Fri, 16 Jan 2026 13:44:11 -0800 Subject: [PATCH 3/6] better what you get section --- client/src/routes/FAQs.tsx | 103 ++++++++++++++++++++++++++----------- 1 file changed, 72 insertions(+), 31 deletions(-) diff --git a/client/src/routes/FAQs.tsx b/client/src/routes/FAQs.tsx index cc55671..4427137 100644 --- a/client/src/routes/FAQs.tsx +++ b/client/src/routes/FAQs.tsx @@ -268,43 +268,84 @@ function FAQs() {

    What you get

    -
    -
    -
    Structure
    -
    - Tags + reading order -
    -
    - Headings, lists, tables, and hierarchy +
    +
    +
    +
    +
    -
    -
    - Descriptions -
    -
    - Alt text for images -
    -
    - Links and figures become understandable + +
    +
    +
    +
    -
    -
    Metadata
    -
    - Better document info -
    -
    - Helps navigation + discoverability + +
    +
    +
    +
    -
    -
    Report
    -
    - What’s fixed vs manual -
    -
    - Clear next steps for compliance + +
    +
    +
    +
    From 1e8f2d108767e3d6b3969a65b25cb022e5ebd020 Mon Sep 17 00:00:00 2001 From: Scott Kirkland Date: Fri, 16 Jan 2026 13:45:54 -0800 Subject: [PATCH 4/6] update txt --- client/src/routes/FAQs.tsx | 36 +++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/client/src/routes/FAQs.tsx b/client/src/routes/FAQs.tsx index 4427137..4af1a65 100644 --- a/client/src/routes/FAQs.tsx +++ b/client/src/routes/FAQs.tsx @@ -61,7 +61,10 @@ function FAQs() {
    -
    +

    @@ -301,8 +304,8 @@ function FAQs() { Descriptions that help

    - Context-aware alt text for images and links, drafted to - be useful instead of generic. + Context-aware alt text for images and links, drafted to be + useful instead of generic.

    @@ -357,7 +360,10 @@ function FAQs() {
    - +

    Accessibility regulations such as WCAG, Section 508, and PDF/UA require digital documents to be usable by people with @@ -368,7 +374,9 @@ function FAQs() {

  • Semantic structure (headings, sections, lists)
  • Logical reading order
  • Text alternatives for images and graphics
    • -
  • Meaningful descriptions for links and interactive content
    • +
  • + Meaningful descriptions for links and interactive content +

Without these elements, screen readers can’t interpret the @@ -378,9 +386,9 @@ function FAQs() {

- No tool can guarantee full compliance in every case. Readable - is designed to get you dramatically closer, then clearly show - what still needs human review (especially for complex layouts, + No tool can guarantee full compliance in every case. Readable is + designed to get you dramatically closer, then clearly show what + still needs human review (especially for complex layouts, tables, and meaning-dependent images).

@@ -409,13 +417,11 @@ function FAQs() { -

Readable is designed for teams that publish PDFs, including:

-
    -
  • Universities and research institutions
    • -
  • Government and public-sector organizations
    • -
  • Companies publishing reports, manuals, or forms
    • -
  • Teams responsible for compliance and digital content
    • -
+

+ Readable is designed for for UC Davis by the College of + Agricultural and Environmental Sciences Dean's Office @ UC + Davis +

From a1aba401bfc1731dbe7b859e91d856746806ae86 Mon Sep 17 00:00:00 2001 From: Cal Date: Fri, 16 Jan 2026 16:16:46 -0800 Subject: [PATCH 5/6] remove badge --- client/src/routes/FAQs.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/client/src/routes/FAQs.tsx b/client/src/routes/FAQs.tsx index 4af1a65..f4e8f6d 100644 --- a/client/src/routes/FAQs.tsx +++ b/client/src/routes/FAQs.tsx @@ -37,9 +37,6 @@ function FAQs() {
-
- PDF Accessibility -

How it works

From 568ede35fafde6f92914dd3b5bb61e43ff4a5e76 Mon Sep 17 00:00:00 2001 From: Cal Date: Fri, 16 Jan 2026 17:17:53 -0800 Subject: [PATCH 6/6] small color change --- client/src/routes/FAQs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/routes/FAQs.tsx b/client/src/routes/FAQs.tsx index f4e8f6d..7693254 100644 --- a/client/src/routes/FAQs.tsx +++ b/client/src/routes/FAQs.tsx @@ -40,7 +40,7 @@ function FAQs() {

How it works

-

+

Most PDFs look fine—but accessibility depends on structure. Readable helps you get dramatically closer to WCAG + PDF/UA expectations without doing everything by hand.