Accessibility widget for a custom HTML site

A hand-built HTML site gives you full control, which also means accessibility is entirely in your hands. ClearPath adds a visitor-facing layer of controls to a static or server-rendered site without a framework, build tool, or CMS.

You paste one script tag into the template that every page shares, and the widget loads across the whole site. Visitors get 25 tools, 14 languages, and 8 disability profiles, and you get an auto-generated accessibility statement and per-site analytics.

How to add ClearPath to a custom HTML site

  1. Open the shared template or layout file that every page includes, such as a footer include, a base template, or your header partial.
  2. Paste the ClearPath snippet just before the closing body tag so it loads after your page content.
  3. If your pages do not share a template, add the snippet before the closing body tag on each HTML file individually.
  4. Save the file, then upload it over FTP or deploy it through your usual pipeline.
  5. Open a page in your browser and confirm the ClearPath button appears.

Where hand-built HTML sites usually fail

  • Hand-coded nav menus built with nested <div> and <span> tags plus onclick handlers instead of <button> or <a> elements, so the menu is invisible to keyboard users and screen readers even though it works fine with a mouse.
  • Contact and quote forms written by hand often skip <label for=""> associations, relying on placeholder text or nearby text that looks like a label but isn't programmatically tied to the input, which means screen reader users hear "edit text, blank" instead of the field name.
  • Image tags added over the years by different people rarely have consistent alt attributes, some carry the filename as alt text, some have empty alt on meaningful images, and some are missing the attribute entirely.
  • Custom JavaScript sliders, tabs, or accordions built without ARIA roles or state attributes (aria-expanded, aria-selected) leave assistive tech with no way to know what's open, closed, or active on the page.

Why custom HTML site sites choose ClearPath

  • A single script tag works on any HTML page with no framework, CMS, or build step required.
  • Placing it in a shared include means one edit covers your whole site.
  • The defer attribute keeps the script from blocking your page from rendering.
  • The auto-generated accessibility statement is written in your site's language from a live scan of your pages.

Questions

What if my pages do not share a common template?

Then add the snippet before the closing body tag on each HTML file. If you have many pages, moving your header or footer into a shared include first will save you repeating the edit later.

Do I need any server-side code or a database?

No. ClearPath is a client-side script, so it runs on plain static HTML hosted anywhere, including simple file hosts and CDNs.

Does the widget make my hand-built HTML site compliant?

No. ClearPath gives your visitors 25 adjustment tools, support for 8 disability profiles, 14 languages, and an accessibility statement generated from a live scan of your site, all from one script tag pasted into your shared template. What it does not do is rewrite the raw HTML you or a past developer wrote. If your nav menu uses div-based buttons instead of real button elements, if your forms are missing label associations, or if your custom JavaScript widgets lack ARIA states, those are issues in your markup and no widget, including this one, fixes them from the outside or makes the site compliant on its own.