@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>Text</h1> <p class="lead">These are <strong>not</strong> a WCAG 2.1 requirement but are considered to be best practice.</p> </div> </div> </section> <section id="italics"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2>Bold and italic tags</h2> <p>Bold and italic tags have semantic meaning, and should <strong>not</strong> be used to highlight entire paragraphs. Bolded text should be used to provide strong <strong>emphasis</strong> on a word or phrase. Italics should be used to <em>highlight</em> proper names (i.e. book and article titles), foreign words, quotes. Long quotes should be formatted as a blockquote.</p> <p>To ensure that the semantic meaning is conveyed you should use the <strong> and <em> tags and not <b> or <i>.</p> <p><strong>For example this paragraph will be flagged as it is entirely in bold. Users of assistive technology may not be able to determine what it is you are trying to highlight. For some it is the equivalent as shouting in ALLCAPS on social media.</strong></p> </div> </div> </div> </section> <section id="italics"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2>Uppercase text</h2> <p>This warning is to discourage the use of uppercase text. Based on research it is a strongly discouraged practice for readability. Secondly, some capitalized words may be mistaken for an acronym and ready out character by character with a screen reader.</p> <p>This condition uses regex to find uppercase words that are at least 3 characters in length, however it will only be indicated as a warning if at least 5 uppercase words within an element is found. It only checks for uppercase words within the following elements: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.</p> </div> </div> <div class="row pt-3 ms-5"> <div class="col-md-6"> <h3>Example #1</h3> <p>FOR EXAMPLE, THIS WILL BE FLAGGED.</p> </div> <div class="col-md-6"> <h3>Example #2</h3> <p>FOR EXAMPLE, this WILL NOT be flagged.</p> </div> <div class="col-md-12"> <h3>Example #3</h3> <ul> <li>UPPERCASE TEXT WITHIN BULLETS will be flagged too.</li> </ul> </div> </div> </div> </section> <section id="underline"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2>Underlined text</h2> <p>This warning is to discourage the use of underlined text as it is easily confused with links.</p> <p>This condition checks for underlined text created with <u> markup and css styles within the following elements: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.</p> </div> </div> <div class="row pt-3 ms-5"> <div class="col-md-6"> <h3>Example #1</h3> <p style="text-decoration-line: underline;">For example this will be flagged.</p> </div> <div class="col-md-6"> <h3 style="text-decoration:1px solid black underline">Example #2</h3> <p>This heading will be flagged.</p> </div> <div class="col-md-6"> <h3>Example #3</h3> <ul> <li style="text-decoration:1px solid coral underline">Underlined text wihin lists will be flagged too.</li> </ul> </div> <div class="col-md-6"> <h3>Example #4</h3> <p><a href="#">Linked text</a> will not be flagged.</p> </div> <div class="col-md-12"> <h3>Example #5</h3> <p>Text <u><u&gtunderlined</u&gt</u> this way will be flagged.</p> </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>