@joomla/joomla-a11y-checker

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>JOOA11Y - The Joomla Accessibility Checker</title> <link rel="icon" type="image/x-icon" href="../assets/favicon.ico" /> <link rel="stylesheet" href="../assets/css/joomla-a11y-checker.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>  <script type="module" src="script.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#">Jooa11y - the Joomla Accessibility Checker</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="../index.html">Home</a> </li> <li class="nav-item"><a class="nav-link" href="howto.html">How To</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdownExamples" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Examples</a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownExamples"> <li><a class="dropdown-item" href="errors.html">Errors</a></li> <li><a class="dropdown-item" href="warnings.html">Warnings</a></li> <li><a class="dropdown-item" href="pass.html">No Errors</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdownTests" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Tests</a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownTests"> <li><a class="dropdown-item" href="headings.html">Headings</a></li> <li><a class="dropdown-item" href="images.html">Images</a></li> <li><a class="dropdown-item" href="links.html">Links</a></li> <li><a class="dropdown-item" href="tables.html">Tables</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="contrast.html">Contrast</a></li> <li><a class="dropdown-item" href="labels.html">Labels</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="audiovideo.html">Audio & Video</a></li> <li><a class="dropdown-item" href="text.html">Text</a></li> <li><a class="dropdown-item" href="fakelists.html">Fake Lists</a></li> <li><a class="dropdown-item" href="iframes.html">iFrames</a></li> <li><a class="dropdown-item" href="pdf.html">PDF Content</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="social.html">Social Media</a></li> </ul> </li> </ul> </div> </div> </nav> <main> <section id="title" class="bg-secondary"> <div class="container"> <div class="text-center text-white py-5"> <h1>Links</h1> </div> </div> </section> <section id="partial"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2>Partial stop words</h2> <p>If the following words are used as the hyperlink text alone, it will be flagged as an error. If used with other text, it will <strong>not</strong> be flagged as an error.</p> <div class="ms-5 pt-4"> <div class="row"> <div class="col-md-6"> <h3>Example 1</h3> <p>Using any of the words above on it's own will result in an error since it's not descriptive enough.</p> <a href="#" class="btn btn-primary">Learn more</a> </div> <div class="col-md-6"> <h3>Example 2</h3> <p>However if used with additional text, it will not be flagged as an error.</p> <a href="#" class="btn btn-primary">Learn more about Joomla</a> </div> </div> </div> </div> </div> <div class="row mt-3"> <div class="col-md-6"> <h3 class="pt-4">Example 3</h3> <p>Just another example of a partial stop word being used in a sentence. Visit <a href="#"><strong>this page</strong></a> to learn more about our history, or you can visit <a href="#"><strong>this page</strong> to learn about the future.</a></p> </div> <div class="col-md-6"> <h3 class="pt-4">Example 4</h3> <p>Empty hyperlink <a href="#"></a> and sometimes single characters get linked<a href="#">.</a></p> </div> </div> <div class="row mt-3"> <div class="col-md-12"> <h3>Example 5</h4> <p>This is a demonstration of an exclusion. Sometimes a website theme may automatically append text to a link. For example, the white on black (External Link) text will be ignored, which will correctly flag this link as an error for not being descriptive enough. <a href="#">learn more <span class="sr-only-example" style="background:rgb(0, 0, 0); color: white;">(External link)</span></a></p> </div> </div> </div> </section> <section id="empty"> <div class="container pt-4"> <div class="row"> <div class="col-md-6"> <h2>Empty hyperlinks</h2> <p>Fail: It's common to see hyperlinks around icon fonts without text. Here's an example of one <a href="#"><span class="fab fa-instagram"></span></a></p> <hr> <p>Pass: Here's one with an ARIA label. <a href="#" target="_blank" aria-label="Instagram"><span class="fab fa-instagram"></span></a></p> <hr> <p>Pass: Using an aria-labelledby attribute connected to the previous heading above: <a href="#" target="_blank" aria-labelledby="insta"><span class="fab fa-instagram"></span></a></p> <hr> <p>Pass: Using title attribute: <a href="#" target="_blank" title="Facebook"><span class="fab fa-facebook"></span></a></p> <hr> <p>Pass: Empty hyperlink has SVG or child element that has aria-label, aria-labelledby, or title.</p> <a class="home w3c" href="https://www.w3.org/" lang="en"> <svg role="img" title="W3C" width="100" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h3.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h3.17l5.759 19.58 3.892-13.185-1.906-6.395z"></path><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"></path><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"></path><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"></path></g></svg> </a> <hr> <p>Fail: Empty hyperlink has SVG or child element that <strong>does not</strong> have an aria-label, aria-labelledby, or title.</p> <a class="home w3c" href="https://www.w3.org/" lang="en"> <svg role="img" width="100" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h3.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h3.17l5.759 19.58 3.892-13.185-1.906-6.395z"></path><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"></path><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"></path><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"></path></g></svg> </a> </div> <div class="col-md-6"></div> </div> </div> </section> <section id="best"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2>Link text best practices</h2> <p>If hyperlinks contain <strong>any</strong> of the following words or characters within a hyperlink, it will be flagged as an error.</p> <div class="ms-5 pt-4 mb-5"> <div class="row pb-2"> <div class="col-md-6"> <h3>Example 1</h3> <p>Hyperlink contains descriptive text, although it will still be flagged as an issue since 'click here' is a stop word: <br><a href="#">Click here to view Joomla's documentation</a></p> </div> <div class="col-md-6"> <h3>Example 2</h3> <p>It's very common for content authors to use HTML symbols for visual aesthetics, especially on a button link.</p> <a href="#" class="btn btn-primary">About Joomla ></a> </div> </div> <div class="row pb-2"> <div class="col-md-6"> <h3 class="pt-4">Example 3</h3> <p>It's also very annoying to hear a really long URL being read out character-by-character using a screen reader. <a href="#">https://www.joomla.org/about-joomla/the-project/mission-vision-and-values.html</a> </p> </div> <div class="col-md-6"> <h3 class="pt-4">Example 4</h3> <p>Although if the URL is not too long, let's not flag it. <a href="#">https://www.joomla.org/4/</a></p> </div> </div> </div> </div> </div> </div> </section> <section id="aria"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2>Hyperlinks with ARIA</h2> <p>Hyperlinks featuring an <kbd>aria-label</kbd> or <kbd>aria-labelledby</kbd> attribute will be indicated as a pass and show the accessible label conveyed to assistive technology.</p> <div class="pt-4 pb-5 ms-5"> <div class="row"> <div class="col-md-6"> <h3>Example 1</h3> <p>The following link uses an ARIA label.</p> <a href="#" class="btn btn-primary" aria-label="Learn more about Joomla.">Learn more</a> </div> <div class="col-md-6"> <h3 id="linkexample">Example 2</h3> <p>The following link uses an ARIA labelledby attribute.</p> <a href="#" class="btn btn-primary" aria-labelledby="learnmore of hyperlinks-with-aria" id="learnmore">Learn more</a> </div> </div> <div class="row pt-4"> <div class="col-md-6"> <h3>Example 3</h3> <p>Links with aria-hidden are always ignored.</p> <a href="#" class="btn btn-primary" aria-hidden="true" tabindex="-1">Learn more</a> </div> <div class="col-md-6"> <h3 id="ex4">Example 4</h3> <p>ARIA labelledby attribute doesn't start with visible label.</p> <a href="#" class="btn btn-primary" aria-labelledby="thix ex4" id="thix">Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section id="aria"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2>Links (Advanced)</h2> <ul> <li><strong>Usability:</strong> <a href="https://www.smashingmagazine.com/2008/07/should-links-open-in-new-windows/">Should links open in new windows?</a> (Source: Smashing Magazine)</li> <li><strong>Usability:</strong> <a href="https://www.webcredible.com/blog/beware-opening-links-new-window/">Beware of opening links in a new window.</a> (Source: webcredible)</li> <li><strong>Accessibility:</strong> <a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">Opening new windows and tabs from a link only when necessary.</a> (Source: W3/WCAG 2.1)</li> <li><strong>Accessibility:</strong> <a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">Giving users advanced warning when opening a new window.</a> (Source: W3/WCAG 2.1)</li> </ul> <div class="pt-4 pb-5 ms-5"> <h3>Links that open in a new tab without warning</h3> <div class="row"> <div class="col-md-6"> <h4>Example 1</h4> <p>aria-label with warning text.</p> <a href="#" target="_blank" class="btn btn-primary" aria-label="Learn more about Joomla. Opens new tab.">Learn more</a> </div> <div class="col-md-6"> <h4 id="example2">Example 2</h4> <p>aria-labelledby with warning text.</p> <a href="#" target="_blank" class="btn btn-primary" aria-labelledby="learnmore2 example2 newwindow" id="learnmore2">Learn more</a> <div style="display:none" id="newwindow">(Opens new window)</div> </div> </div> <div class="row mt-3"> <div class="col-md-6"> <h4>Example 3</h4> <p>Warning: aria-label without warning text.</p> <a href="#" target="_blank" class="btn btn-primary" aria-label="Learn more about Joomla.">Learn more</a> </div> <div class="col-md-6"> <h4 id="x4">Example 4</h4> <p>Warning: aria-labelledby without warning text.</p> <a href="#" target="_blank" class="btn btn-primary" aria-labelledby="learn4 x4" id="learn4">Learn more</a> </div> </div> <div class="row mt-3"> <div class="col-md-6"> <h4>Example 5</h4> <p>Warning: Plain text example.</p> <p>Learn more about <a href="https://www.google.com" target="_blank">Google.</a></p> </div> <div class="col-md-6"> <h4>Example 6</h4> <p>Pass: Plain text example with visually hidden warning.</p> <p>Learn more about <a href="https://www.google.com" target="_blank">Google.<span class="sr-only"> (Opens new tab).</span></a></p> </div> </div> <h3 class="pt-4" id="zxc">Links with identical names should have equivalent purpose</h3> <div class="row"> <div class="col-md-12"> <p><a href="#asd">Oranges</a> and <a href="#asd">Oranges</a>: will pass because they point to the same URI.</p> <p><a href="#fasdf">document</a> and <a href="#fsdgdgd">Document</a> and <a href="#xcs">document</a>: will fail because they have the same link text but different URIs.</p> <p><a href="#fasdf" aria-labelledby="fasdf zxc" id="fasdf">Learn more</a> and <a href="#fsdgdgd" aria-labelledby="fsdgdgd zxc" id="fsdgdgd">Learn more</a>: will fail because the accessible name is the same but point to different URIs.</p> </div> </div> <h3 class="pt-4">Links to PDF and other files without warning</h3> <div class="row"> <div class="col-md-6"> <h4>Example 1</h4> <p>Contains file type within link text.</p> <p>View the <a href="#asd.pdf" target="_blank">Final Report (PDF)</a></p> </div> <div class="col-md-6"> <h4>Example 2</h4> <p>Warning: Does not contain file type within link text.</p> <p>View the <a href="#asd.pdf" target="_blank">Final Report</a></p> </div> </div> </div> </div> </div> </div> </section> </main> <footer class="text-white bg-dark py-3"> <div class="container"> <p class="my-1">By default Jooa11y only checks the parts of the website that is contained inside the <main> landmark. For example, <a href="#">this</a> link will be ignored as it is inside the <footer>.</p><p> If a content editor can't edit it, then Jooa11y doesn't scan it.</p> </div> </footer> </body> </html>