Skip to content

GSA/openacr-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

237 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OpenACR Editor

With this tool, people can generate Accessibility Conformance Report in the OpenACR format.

W3C Web Accessibility Initiative (WAI) Reporting Tools

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.

Development

This application is built with Svelte and Vite. To run it locally, you need to clone this repository, have Node installed and then run this in the project's directory:

npm install

This may take a while the first time, but it only needs to be done once.

Then start the local development server:

npm run dev

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

Deployment

To create an optimised version of the app:

npm run build

To preview the built app locally:

npm run start

Release to GitHub pages

The site serves what's on GitHub pages. To release to GitHub pages, create a new release. This should trigger a deploy action.

Base path handling

The app now uses Vite's BASE_URL support for the site root and static asset paths.

  • JavaScript routing and asset helpers live in src/lib/base.js and src/lib/router.js
  • HTML shell asset paths are based on %BASE_URL% in index.html
  • if you ever need a non-root build path, set BASE_PATH before npm run build

Data structure

The editor uses the OpenACR schema and catalog as data structures.

External Blocks Integration Documentation

Overview

The External Blocks feature provided by Section508.gov offers functionality to help the Section508.gov team seamlessly integrate the header and footer elements from the Section508.gov website into external projects. This documentation outlines the steps required to incorporate the Section508.gov header and footer elements into this website.

Integration Steps

To integrate the Section508.gov header and footer into the website, follow these steps:

1. Include Stylesheet and JavaScript Files

Add the following stylesheet and JavaScript files to the 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>

Example

Here's an example of how to integrate the Section508.gov header and footer into the 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>

Notes

  • Ensure that your website's design accommodates the integration of the Section508.gov header and footer appropriately.

About

With this tool, people can generate Accessibility Conformance Report in the OpenACR format.

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors