@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>Headings</h1> </div> </div> </section> <section id="content"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2>Jooa11y's heading structure ruleset has the following conditions:</h2> <ul class="mb-4"> <li>There must only be one <kbd><h1></kbd> on a page.</li> <li>Headings must not skip levels.</li> <li>Headings must not be empty.</li> <li>Headings must not exceed 160 characters.</li> <li>Blockquotes must not be used as headings.</li> </ul> <h2 aria-hidden="true" class="sr-only">Intentionally hidden heading.</h2> <h3>Headings must not skip levels</h3> <p>Headings should be structured in a way that conveys hierarchy. This condition is based on WCAG 2.1 <a href="https://www.w3.org/TR/WCAG20-TECHS/H42.html">Technique H42: Using h1-h6 to identify headings.</a></p> <div class="ms-5 mt-4 mb-5"> <h5>Example #1 - This heading skips a level.</h5> <p>This error is also visually reflected in the "Show Outline" feature.</p> </div> <h3>Headings must not be empty</h3> <p>This error sometimes happens in content management systems or WYSIWYG editors. For example when a content author accidently presses the Enter key twice or sometimes intentionally for more spacing.</p> <h4 class="ms-5" style="height:20px;"></h4> <h3>Headings that are too long</h3> <p>If a heading is greater than 160 characters it will be flagged as an error. This condition was created to prevent content authors from using headings for visual aesthetics instead of good hierarchy.</p> <p><strong>Note:</strong> This condition is <strong>not</strong> a WCAG 2.1 criterion. The 160 character limit is arbitrary.</p> <h4 class="ms-5">Example #1: Integer ut quam ut nibh tristique bibendum eget sit amet ex. Sed elementum mauris neque, vitae consectetur tellus pellentesque vel. Pellentesque consequat orci.</h4> <h3 class="pt-3">Blockquotes used as headings</h3> <p>This error might be common in content management systems where there are templated components. Sometimes content authors may use a component for visual aesthetics. For example, a stylized blockquote in place of a semantic header.</p> <p><strong>Note:</strong> This condition is <strong>not</strong> a WCAG 2.1 criterion. The 25 character limit is arbitrary.</p> <div class="ms-5 mt-4 mb-5"> <h4>Example #1</h4> <p>If a blockquote is less than 25 characters it will be flagged as an warning.</p> <blockquote class="blockquote"> <p class="mb-0">About the team</p> </blockquote> <p>Donec metus urna, pharetra vel ipsum id, egestas ultrices sapien. Nullam viverra vitae turpis quis consequat. Fusce porttitor urna in ipsum ornare pulvinar. Donec sed sagittis ex. Vivamus vel eros ac augue tempor faucibus sit amet in lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tincidunt metus sem, ac sagittis diam semper sit amet. Vestibulum porttitor vel velit ut finibus. Praesent mauris enim, faucibus ut interdum sed, feugiat in metus.</p> <h4>Example #2</h4> <p>A blockquote greater than 25 characters will not be flagged as an error.</p> <blockquote class="blockquote"> <p class="mb-0">"To be, or not to be, that is the question."</p> </blockquote> </div> <h3>Empty heading contains a decorative image</h3> <div class="row"> <div class="col-md-4"><h4><img width="120" src="../assets/images/joomla.png" alt=" "></h4> <p>This will show up in the Page Outline as an error/empty</p></div> <div class="col-md-8"><h4><img width="120" src="../assets/images/joomla.png" alt="Joomla"></h4> <p>The alt text for this image will show up in the Page Outline.</p></div> </div> <h3>Bolded text used as headings</h3> <div class="mt-4 mb-5"> <h4>Algorithm 1</h4> <p>Bolded text as heading. We're looking for paragraph tags that look like this: <kbd><span style="color:#00c4ff;font-weight:600;"><p><strong></span>Some text<span style="color:#00c4ff;font-weight:600;"></strong></p></span></kbd></p> <div class="ms-5"> <p><strong>About us</strong></p> <p>Paragraph that only contains strong elements. If the text length is less than 25, flag as warning. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.</p> <p><strong>This shouldn't be flagged since it's long and not necessarily a heading. It could just be a big block of bolded text. It is over 120 characters.</strong></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.</p> </div> <h4>Algorithm 2</h4> <p>Bolded text as heading with line breaks. We're looking for paragraph tags that start with strong tag, and have a line break either before the closing strong tag or after. It will only flag paragraphs that have more than 300 characters.</p> <h5>Example 1</h5> <p><kbd><span style="color:#00c4ff;font-weight:600;"><p><strong></span>Fake heading<span style="color:#00c4ff;font-weight:600;"><br></strong></span> Followed by some text.</p></kbd></p> <div class="ms-5"> <p><strong>About us<br></strong>Will not be flagged because it's a small paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh.</p> <p><strong>This won't be flagged either since this bolded text is long and not necessarily a heading. It could just be a big block of bolded text. It is over 120 characters.<br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.</p> <p><strong>This will be flagged!<br></strong> Because it's a pretty substantial paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.</p> </div> <h5>Example 2</h5> <p><kbd><span style="color:#00c4ff;font-weight:600;"><p><strong></span>Fake heading<span style="color:#00c4ff;font-weight:600;"></strong><br></span> Followed by some text.</p></kbd></p> <div class="ms-5"> <p><strong>About us</strong><br>Will not be flagged because it's a small paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh.</p> <p><strong>This won't be flagged either since this bolded text is long and not necessarily a heading. It could just be a big block of bolded text. It is over 120 characters.</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.</p> <p><strong>This will be flagged!</strong><br> Because it's a pretty substantial paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.</p> </div> </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>