Edlio Accessible Documents provides two flexible ways to process your school or district's PDF files: through manual dashboard uploads or through automatic website crawling. Administrators can also customize the visual appearance of the web overlay to match their school branding and embed the viewer across external district sites.
⚠️ Important Note on Embedded PDFs & File Page Blocks: Accessible Documents and its built-in PDF remediation automatically apply to all standard document links and PDF hyperlinks across your site. However, the overlay does not fix un-remediated PDFs displayed directly on a page via the embed function in File Page Blocks. Inline embedded PDF viewers remain inaccessible to screen readers and assistive technology until visitors click the underlying file name hyperlink to launch the accessible HTML overlay. To ensure full ADA Title II compliance, we recommend linking directly to PDF file names or using File Page Block download links rather than embedding raw visual PDF windows on pages.
Step 1: Ingesting Documents (Manual Upload vs. Automatic Crawling)
Documents enter your Accessible Documents catalog through two primary channels:
Automatic Website Crawling: The Edlio platform automatically scans the public pages of your Edlio CMS website, detects linked PDF documents, and ingests them directly into your Accessible Documents catalog for automated conversion and remediation.
Manual Dashboard Upload: If you have a net-new document that is not yet linked on your public site—or if you manage an external website—you can upload it directly:
Navigate to Site Management > Accessible Documents.
Click the Upload a PDF button in the upper-right corner.
In the upload drawer, drag and drop your
.pdffile or click to browse your local computer.The file immediately begins automatic HTML conversion and PDF remediation.
Step 2: Customize the Accessible Web Overlay Appearance
You can customize the appearance of the interactive document viewer modal that visitors see on your website to ensure consistent district branding:
In Site Management > Accessible Documents, select Customize overlay from the top management options.
Under Theme, select your preferred default viewer mode:
Light: Clean white background with crisp dark typography.
Dark: High-contrast dark mode to reduce eye strain in low-light environments.
Custom / System: Automatically matches the visitor's operating system preferences.
Set your Primary Brand Color: Enter your school or district's primary hex color code (e.g.,
#1E3A8Afor navy blue). This accent color applies to toolbar buttons, active navigation states, and interactive links within the document viewer.Use the Live Preview window on the right to see exactly how your document toolbar and fonts will appear to families.
Click Save to publish your design settings across all active documents.
Step 3: Embedding the Viewer on External Websites
If your district utilizes third-party websites or external platforms (such as Finalsite, Blackboard, WordPress, or specialized athletic portals) alongside or independent of the Edlio CMS, you can enable Accessible Documents on those external sites with a single script tag:
In Site Management > Accessible Documents, click Add to another website.
Copy the customized
<script>embed code provided in the drawer.Paste the script snippet into the global header or footer template of your external website.
Once installed, any PDF linked across that external website will automatically open in the Edlio Accessible Documents interactive viewer without requiring manual file migration.
💡 Best-Practice Adoption Tip
When configuring your brand accent color, choose a color that passes WCAG AA contrast standards against white backgrounds (at least a 4.5:1 contrast ratio) so that all buttons and indicators in the overlay remain fully visible to visitors with low vision.
Related Articles