CINXE.COM
OpenACR Editor
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta property="og:title" content="OpenACR Editor" /> <meta name="author" content="U.S. General Services Administration (GSA)" /> <meta property="og:description" content="Tool to help generate Accessibility Conformance Report in the OpenACR format." /> <title>OpenACR Editor</title> <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <link rel="icon" type="image/png" href="/favicon.ico" /> <link rel="stylesheet" href="https://www.section508.gov/assets/css/external-blocks.css" /> <link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css?1573220675560713000" /> <link rel="stylesheet" href="/build/bundle.css" /> <script defer src="/build/bundle.js"></script> <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> <style> /* GSA/Section508 placeholder styling. * Dark blue: #162E51 * Light blue: #1e6ad6 */ #site-header, th { background-color: #162e51; } summary > :first-child:before, .box-h, a, a:focus, a:hover, h1, h2, h3, h4 { color: #162e51; align-content: center; } a[target="_blank"]:after { background: 0 0; background-color: currentColor; -webkit-mask: url("/images/external-link.svg") no-repeat center/contain; mask: url("/images/external-link.svg") no-repeat center/contain; content: ""; display: inline-block; margin-left: 0.3em; width: 1.2em; height: 1.2em; vertical-align: text-bottom; flex-shrink: 0; } summary > :first-child:before { border-color: #162e51; align-content: center; } .button.button-secondary, button.button-secondary { background-color: var(--pure-white); color: #162e51; } .button, button { background-color: #162e51; border-color: #162e51; } .button:focus, .button:hover, button:focus, button:hover { background-color: #1e6ad6; border-color: #1e6ad6; color: var(--pure-white); } a.button:after { margin-top: 0; } /* End placeholder styling. */ :target { scroll-margin-top: 5rem; } @media (min-width: 60em) { .default-grid { display: -ms-grid; display: grid; -ms-grid-columns: minmax(16px, 1fr) (minmax(0, 50px)) [2] (minmax(0, 110px)) [6] minmax(16px, 1fr); grid-template-columns: [complete-start] minmax(16px, 1fr) [navigation-start] repeat( 2, minmax(0, 50px) ) [navigation-end content-start] repeat(6, minmax(0, 110px)) [content-end] minmax(16px, 1fr) [complete-end]; } #openacr-editor { padding: 0; } } @media (min-width: 1910px) { main { display: block; padding: 2em 0; background-image: linear-gradient(#d0e1f1 0, #d0e1f1 53px, #fff 48px); } .nav__item a { padding-bottom: 1.25em !important; } } .nav__item { list-style: none; margin: 0; text-decoration: none; } .nav__item a { display: block; font-size: 0.86em; padding: 1em; text-decoration: none; background-color: #d0e1f1; /* cloudy-subtle */ color: inherit; white-space: normal; transition-duration: 0.1s; border-bottom: 1px solid transparent; } .nav__item .active { background-color: #fff; /* body-bg */ border-bottom: 1px solid #fff; } .nav__item a:focus { outline-offset: -0.5em; } .tool-header { -ms-grid-column: 2; -ms-grid-column-span: 8; -ms-grid-row: 1; grid-column: 2 / 10; display: flex; align-items: center; width: 100%; } .tool-header a { text-decoration: none; } .tool-header-name { font-size: 1.125em; white-space: nowrap; } @media (min-width: 60em) { .tool-header-name { font-size: 1.5em; } } .tool-header-logo { margin-left: auto; display: flex; align-items: center; } .tool-header-logo img { display: block; margin: 0.75em 0 0.75em 0.5em; height: 1.5em; } dd { margin-inline-start: 0; margin-bottom: 12px; margin-left: 0 !important; } @media (min-width: 60em) { .tool-header-logo img { height: 2em; } } body { background-color: white; } @media (max-width: 60em) { .img { margin-left: 8px; } .inner { padding-top: 20px; padding-bottom: 20px; } } .nav { position: sticky; top: 0; z-index: 2; } .box { border: solid 1px #71767a; border-radius: 0.5rem; } .box-h { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } @media (max-width: 1910px) { main { display: block; padding: 2em 0; background-image: linear-gradient(#d0e1f1 0, #d0e1f1 49px, #fff 48px); } } .nav__item a:not(.active):focus, .nav__item a:not(.active):hover, .nav__item a:not([aria-current="page"]):focus, .nav__item a:not([aria-current="page"]):hover { border-bottom: none; } .nav__item .active { border-bottom: 1px solid transparent; } </style> </head> <body> <a href="#content" class="visuallyhidden focusable skip-link"> Skip to main content </a> <div id="header-508" class="section508-external-block"></div> <header id="site-header" class="default-grid with-gap"> <div class="tool-header"> <a href="/"> <img alt="ACR Editor logo" src="/images/Accessibility Conformance Report A4 White Horizontal (1).png" height="50" style="margin-top: 3px" class="img" /> </a> </div> </header> <main> <div id="openacr-editor" class="default-grid leftcol"> <!-- app 'renders' here --> </div> </main> <div class="default-grid"> <aside class="box box-icon" id="helpimprove" style="-ms-grid-column: 2; -ms-grid-column-span: 10; grid-column: 2/10" > <header class="box-h box-h-icon box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments"> <use href="/images/icons.svg#icon-comments"></use> </svg> <h2>Help improve this page</h2> </header> <div class="box-i"> <p> Please share your ideas, suggestions, or comments via e-mail to <a href="mailto:openacr@gsa.gov">openacr@gsa.gov</a> or via GitHub. </p> <div class="button-group"> <a href="mailto:openacr@gsa.gov" class="button" target="_blank"> <span>E-mail</span> <span class="visuallyhidden">(opens in a new window or tab)</span> </a> <a href="https://github.com/GSA/openacr-editor" class="button" target="_blank" > <span>Fork & Edit on GitHub</span> <span class="visuallyhidden" >(opens in a new window or tab)</span > </a ><a href="https://github.com/GSA/openacr-editor/issues/new" class="button" target="_blank" > <span>New GitHub Issue</span> <span class="visuallyhidden">(opens in a new window or tab)</span> </a> </div> </div> </aside> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page" style="border-bottom: 1px solid var(--line-grey)" > <div class="inner" style=" -ms-grid-column: 2; -ms-grid-column-span: 10; grid-column: 2 / 10; " > <p><a href="#">Return to top</a></p> <p><strong>Date:</strong> Published April 2024.</p> <p><strong>Version:</strong> v1.0</p> <p> <a href="https://github.com/GSA/openacr" target="_blank"> OpenACR <span class="visuallyhidden">(opens in a new window or tab)</span> </a> is a format maintained by the <a href="https://gsa.gov/" target="_blank"> U.S. General Services Administration (GSA) <span class="visuallyhidden" >(opens in a new window or tab)</span > </a >. The content is the responsibility of the author. </p> <p> This software includes material copied from or derived from <a href="https://github.com/w3c/wai-atag-report-tool" target="_blank"> W3C ATAG Report Tool (ART) <span class="visuallyhidden">(opens in a new window or tab)</span> </a> and Copyright 漏 2021 W3C庐 (MIT, ERCIM, Keio, Beihang). <a href="https://www.w3.org/Consortium/Legal/copyright-software" target="_blank" > W3C Software notice and license <span class="visuallyhidden" >(opens in a new window or tab)</span > </a >. </p> </div> </footer> <div id="footer-508" class="section508-external-block"></div> <!-- Analytics code --> <!-- End Analytics Code --> </body> </html>