diff --git a/client/src/routes/FAQs.tsx b/client/src/routes/FAQs.tsx index 3510274..7693254 100644 --- a/client/src/routes/FAQs.tsx +++ b/client/src/routes/FAQs.tsx @@ -1,191 +1,445 @@ -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: -

- - - -

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

+
+
+
+
+
+

+ 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. +

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

+ 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

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

- 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. -

+
+
+
+
+ +
+
+
+

+ How Readable works +

+

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

+
+
+ From upload → to remediated PDF +
+
+ +
+
+
    +
  • +
    +
    +
    +
    + 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. +

    +
    +
    +
    • -
    -

    - How Readable Works -

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

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

    +
    +
    +
    • -

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

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

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

    +
    +
    • +
+
+
+
-
    -
  1. -
    - Analyzes the document structure +
    +

    + What you get +

    +
    +
    +
    +
    +
    -

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

    -
    2. +
+
-
  • -
    - Adds accessibility metadata +
    +
    +
    +
    -

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

    -
    • +
    +
    -
  • -
    - 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. -

    -
    • +
    + -
  • -
    - 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 -
      • -
    -
    • - + + + -
    - -
    -

    - What You Get -

    - - - -

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

    -
    +
    +

    + 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. +

    +     -
    - -
    -

    - 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. -

    + +

    + 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 for UC Davis by the College of + Agricultural and Environmental Sciences Dean's Office @ UC + Davis +

    +     + +
    +
    +

    Want more detail?

    +

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

    +
    +
    -
    +
    );