With this tool, people can generate Accessibility Conformance Report in the OpenACR format.
This software includes builds on the work from the WAI's ATAG Report Tool (ART) and WCAG-EM Report Tool. Copyright © 2021 W3C® (MIT, ERCIM, Keio, Beihang).
W3C Software notice and license.
This application is built with Svelte. To run it locally, you need to clone it this repository, have Node installed and then run this in the project's directory:
npm installThis may take a while the first time, but it only needs to be done once.
Then, to build the app with Rollup, and serve it on a local dev server, run:
export NODE_ENV=development; npm run devNavigate to localhost:10001. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.
To create an optimised version of the app:
npm run buildThe site serves what's on GitHub pages. To release to GitHub pages, create a new release. This should trigger a deploy action.
In some deployment contexts, things like paths may need to vary. There are two steps to this:
- Add environment specific settings to
config/[environment-name].json, for example{ pathPrefix: "/editor" }or{ imageDir: "/images" } - Before running
npm run buildornpm run dev, setexport NODE_ENV=[environment-name]
Use variables in HTML, with {{ variable-name }}, for instance {{ pathPrefix }}. If you need these non-escaped, use triple brackets, for instance {{{ pathPrefix }}}.
Mustache replaces the variables in src/index.html and places the resulting HTML in public/index.html.
In JavaScript, __buildEnv__ is replaced with the name of the build environment using the replace plugin for rollup.
To use variables, this is how you can import the JSON file that your build environment needs:
import vars from "../../config/__buildEnv__.json";The vars are now in the vars object, you can reference them with vars.variableName, for instance vars.pathPrefix.
The editor uses the OpenACR schema and catalog as data structures.
The External Blocks feature provided by Section 508 offers functionality to seamlessly integrate the header and footer elements from the Section 508 website into external projects. This documentation outlines the steps required to incorporate Section 508 header and footer elements into your website.
To integrate the Section 508 header and footer into your website, follow these steps:
Add the following stylesheet and JavaScript files to your website's HTML code:
<link
rel="stylesheet"
href="https://www.section508.gov/assets/css/external-blocks.css"
/>
<script
defer
src="https://www.section508.gov/assets/js/external-508-blocks.js"
></script>
<script defer src="https://www.section508.gov/assets/js/uswds.min.js"></script>Here's an example of how to integrate the Section 508 header and footer into your HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
<!-- Include Section 508 stylesheet and JavaScript after Open ACR-->
<link
rel="stylesheet"
href="https://www.section508.gov/assets/css/external-blocks.css"
/>
<script
defer
src="https://www.section508.gov/assets/js/external-508-blocks.js"
></script>
<script
defer
src="https://www.section508.gov/assets/js/uswds.min.js"
></script>
</head>
<body>
<!-- Section 508 Header -->
<div id="header-508"></div>
<!-- Your Website Content Goes Here -->
<!-- Section 508 Footer -->
<div id="footer-508"></div>
</body>
</html>- Ensure that your website's design accommodates the integration of the Section 508 header and footer appropriately.