{"id":21016546,"url":"https://github.com/gsa/openacr-editor","last_synced_at":"2025-06-20T21:32:55.376Z","repository":{"id":43330317,"uuid":"427414786","full_name":"GSA/openacr-editor","owner":"GSA","description":"With this tool, people can generate Accessibility Conformance Report in the OpenACR format.","archived":false,"fork":false,"pushed_at":"2025-04-22T18:55:03.000Z","size":13790,"stargazers_count":15,"open_issues_count":11,"forks_count":18,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-06-19T12:13:57.233Z","etag":null,"topics":["a11y","accessibility","acr","compliance","conformance","reporting-tool","vpat"],"latest_commit_sha":null,"homepage":"https://acreditor.section508.gov","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GSA.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.txt","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-12T15:51:02.000Z","updated_at":"2025-05-07T13:57:13.000Z","dependencies_parsed_at":"2024-03-05T00:30:19.430Z","dependency_job_id":"6aeb1067-29f6-480a-ac43-32f87f7ab147","html_url":"https://github.com/GSA/openacr-editor","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/GSA/openacr-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GSA%2Fopenacr-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GSA%2Fopenacr-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GSA%2Fopenacr-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GSA%2Fopenacr-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GSA","download_url":"https://codeload.github.com/GSA/openacr-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GSA%2Fopenacr-editor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261020140,"owners_count":23098084,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","acr","compliance","conformance","reporting-tool","vpat"],"created_at":"2024-11-19T10:14:30.145Z","updated_at":"2025-06-20T21:32:50.346Z","avatar_url":"https://github.com/GSA.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenACR Editor\n\nWith this tool, people can generate Accessibility Conformance Report in the [OpenACR](https://github.com/GSA/openacr) format.\n\n## W3C Web Accessibility Initiative (WAI) Reporting Tools\n\nThis software includes builds on the work from the WAI's [ATAG Report Tool (ART)](https://github.com/w3c/wai-atag-report-tool) and [WCAG-EM Report Tool](https://github.com/w3c/wai-wcag-em-report-tool/). Copyright © 2021 W3C® (MIT, ERCIM, Keio, Beihang).\n\n[W3C Software notice and license](https://www.w3.org/Consortium/Legal/copyright-software).\n\n## Development\n\nThis application is built with [Svelte](https://svelte.dev). To run it locally, you need to clone it this repository, have [Node](https://nodejs.org) installed and then run this in the project's directory:\n\n```bash\nnpm install\n```\n\nThis may take a while the first time, but it only needs to be done once.\n\nThen, to build the app with [Rollup](https://rollupjs.org), and serve it on a local dev server, run:\n\n```bash\nexport NODE_ENV=development; npm run dev\n```\n\nNavigate to [localhost:10001](http://localhost:10001). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.\n\n## Deployment\n\nTo create an optimised version of the app:\n\n```bash\nnpm run build\n```\n\n### Release to GitHub pages\n\nThe site serves what's on GitHub pages. To release to GitHub pages, [create a new release](https://github.com/GSA/openacr-editor/releases/new). This should trigger a [deploy action](https://github.com/GSA/openacr-editor/actions?query=workflow%3ADeploy).\n\n### Environment-specific variables in HTML and JavaScript (.svelte)\n\nIn some deployment contexts, things like paths may need to vary. There are two steps to this:\n\n1. Add environment specific settings to `config/[environment-name].json`, for example `{ pathPrefix: \"/editor\" }` or `{ imageDir: \"/images\" }`\n2. Before running `npm run build` or `npm run dev`, set `export NODE_ENV=[environment-name]`\n\n#### Using in HTML\n\nUse variables in HTML, with `{{ variable-name }}`, for instance `{{ pathPrefix }}`. If you need these non-escaped, use triple brackets, for instance `{{{ pathPrefix }}}`.\n\n[Mustache](http://mustache.github.io/) replaces the variables in `src/index.html` and places the resulting HTML in `public/index.html`.\n\n#### Using in JavaScript\n\nIn JavaScript, `__buildEnv__` is replaced with the name of the build environment using the [replace plugin for rollup](https://github.com/rollup/plugins).\n\nTo use variables, this is how you can import the JSON file that your build environment needs:\n\n```js\nimport vars from \"../../config/__buildEnv__.json\";\n```\n\nThe vars are now in the `vars` object, you can reference them with `vars.variableName`, for instance `vars.pathPrefix`.\n\n## Data structure\n\nThe editor uses the OpenACR [schema](https://github.com/GSA/openacr/tree/main/schema) and [catalog](https://github.com/GSA/open-product-accessibility-template/tree/main/catalog) as data structures.\n\n# External Blocks Integration Documentation\n\n## Overview\n\nThe 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.\n\n## Integration Steps\n\nTo integrate the Section 508 header and footer into your website, follow these steps:\n\n### 1. Include Stylesheet and JavaScript Files\n\nAdd the following stylesheet and JavaScript files to your website's HTML code:\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://www.section508.gov/assets/css/external-blocks.css\"\n/\u003e\n\u003cscript\n  defer\n  src=\"https://www.section508.gov/assets/js/external-508-blocks.js\"\n\u003e\u003c/script\u003e\n\u003cscript defer src=\"https://www.section508.gov/assets/js/uswds.min.js\"\u003e\u003c/script\u003e\n```\n\n### Example\n\nHere's an example of how to integrate the Section 508 header and footer into your HTML code:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eMy Website\u003c/title\u003e\n    \u003c!-- Include Section 508 stylesheet and JavaScript after Open ACR--\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://www.section508.gov/assets/css/external-blocks.css\"\n    /\u003e\n    \u003cscript\n      defer\n      src=\"https://www.section508.gov/assets/js/external-508-blocks.js\"\n    \u003e\u003c/script\u003e\n    \u003cscript\n      defer\n      src=\"https://www.section508.gov/assets/js/uswds.min.js\"\n    \u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- Section 508 Header --\u003e\n    \u003cdiv id=\"header-508\"\u003e\u003c/div\u003e\n\n    \u003c!-- Your Website Content Goes Here --\u003e\n\n    \u003c!-- Section 508 Footer --\u003e\n    \u003cdiv id=\"footer-508\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Notes\n\n- Ensure that your website's design accommodates the integration of the Section 508 header and footer appropriately.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgsa%2Fopenacr-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgsa%2Fopenacr-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgsa%2Fopenacr-editor/lists"}