@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>Images</h1> <p class="lead">Jooa11y has over 20 different tests for images.</p> </div> </div> </section> <section id="imageswithoutlinks"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2 class="pb-3 pt-3">Images without hyperlinks</h2> <div class="row"> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <img src="image-examples/nambia-desert.jpg" width="100%" alt="Large mountains of sand in the Nambian desert."> <div class="card-body"> <p class="card-text">Condition 1: Image containing alt text.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <img src="image-examples/panama-beach.jpg" width="100%"> <div class="card-body"> <p class="card-text">Condition 2: Image missing alt text.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <img src="image-examples/birdy.jpg" width="100%" alt="An image of a bird."> <div class="card-body"> <p class="card-text">Condition 3: Image whose alt text contains a suspicious stop word.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <img src="image-examples/amsterdam.jpg" width="100%" alt> <div class="card-body"> <p class="card-text">Condition 4: Image that is marked as decorative.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <img src="image-examples/amsterdam.jpg" width="100%" alt=" "> <div class="card-body"> <p class="card-text">Condition 5: Image that is marked as decorative using empty space (alt=" ").</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <img src="image-examples/zebra.jpg" width="100%" alt="Zebras are several species of African equids (horse family) united by their distinctive black-and-white striped coats. Their stripes come in different patterns, unique to each individual. They are generally social animals that live in small harems to large herds. Unlike their closest relatives, horses and donkeys, zebras have never been truly domesticated. Source: Wikipedia."> <div class="card-body"> <p class="card-text">Condition 6: Alt text that is too long.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <img src="image-examples/birdy.jpg" width="100%" alt="birdy.jpg"> <div class="card-body"> <p class="card-text">Condition 7: Image whose alt text contains a file extension.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <img src="image-examples/amsterdam.jpg" width="100%" alt="image"> <div class="card-body"> <p class="card-text">Condition 8: Image whose alt text contains a non descript word, or placeholder text.</p> </div> </div> </div> </div> </div> </div> </div> </section> <section id="imageswithlinks"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2 class="pb-3 pt-3">Images with hyperlinks</h2> <div class="row"> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <a href="#"><img src="image-examples/nambia-desert.jpg" width="100%" alt="Large mountains of sand in the Nambian desert." class="w-100"> </a> <div class="card-body"> <p class="card-text">Condition 9: Hyperlinked image containing alt text.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <a href="#"><img src="image-examples/panama-beach.jpg" width="100%" class="w-100"></a> <div class="card-body"> <p class="card-text">Condition 10: Hyperlinked image missing alt text.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <a href="#"><img src="image-examples/birdy.jpg" width="100%" alt="An image of a bird." class="w-100"></a> <div class="card-body"> <p class="card-text">Condition 11: Hyperlinked image whose alt text contains a stop word.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <a href="#"><img src="image-examples/amsterdam.jpg" width="100%" alt class="w-100"></a> <div class="card-body"> <p class="card-text">Condition 12: Hyperlinked image that is marked as decorative.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <a href="#"><img src="image-examples/amsterdam.jpg" width="100%" alt=" " class="w-100"></a> <div class="card-body"> <p class="card-text">Condition 13: Hyperlinked image that is marked as decorative using empty space (alt=" ").</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <a href="#"><img src="image-examples/zebra.jpg" width="100%" alt="Zebras are several species of African equids (horse family) united by their distinctive black-and-white striped coats. Their stripes come in different patterns, unique to each individual. They are generally social animals that live in small harems to large herds. Unlike their closest relatives, horses & donkeys, zebras have never been truly domesticated. Source: Wikipedia." class="w-100"></a> <div class="card-body"> <p class="card-text">Condition 14: Hyperlinked image text that is too long.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill text-center"> <a href="#" style="background-color:#e2e2e2"><img src="image-examples/tiger.jpg" width="100%" alt class="w-100"><span class="text-center lead">Learn more about Tigers</span></a> <div class="card-body"> <p class="card-text">Condition 15: Hyperlinked image with null alt text, although contains surrounding link text <strong>below image.</strong></p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill text-center"> <a href="#" style="background-color:#e2e2e2"><span class="text-center lead">Learn more about Tigers</span><img src="image-examples/tiger.jpg" width="100%" alt class="w-100"></a> <div class="card-body"> <p class="card-text">Condition 16: Hyperlinked image with null alt text, although contains surrounding link text <strong>above image.</strong></p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill text-center"> <a href="#" style="background-color:#e2e2e2"><img src="image-examples/flower.jpg" width="100%" class="w-100"><span class="text-center lead">Learn more about Dahlias</span></a> <div class="card-body"> <p class="card-text">Condition 17: Hyperlinked image with <strong>missing</strong> alt text and contains surrounding link text.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill text-center"> <a href="#" style="background-color:#e2e2e2"><img src="image-examples/fiat.jpg" alt="Fix it again Tony!" width="100%" class="w-100"><span class="text-center lead">Learn more about Fiat.</span></a> <div class="card-body"> <p class="card-text">Condition 18: Hyperlinked image that <strong>contains both alt text and link text.</strong></p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill text-center"> <a href="#" style="background-color:#e2e2e2"><img src="image-examples/canary.jpg" alt width="100%" class="w-100"> <h5>Learn more about the Canary Islands</h5> </a> <div class="card-body"> <p class="card-text">Condition 19: Hyperlinked image containing an incorrect heading level. The error is appended after the hyperlink to prevent nesting a button inside hyperlink.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <a href="#"><img src="image-examples/amsterdam.jpg" width="100%" alt="image"></a> <div class="card-body"> <p class="card-text">Condition 20: Hyperlinked image whose alt text contains a non descript word, or placeholder text.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill text-center"> <a href="#" aria-hidden="true" tabindex="-1"><img src="image-examples/flower.jpg" alt width="100%" class="w-100"></a> <div class="card-body"> <p class="card-text">Condition 21: Hyperlinked image where anchor has aria-hidden="true" and tabindex="-1"</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill text-center"> <a href="#" aria-hidden="true"><img src="image-examples/fiat.jpg" alt width="100%" class="w-100"></a> <div class="card-body"> <p class="card-text">Condition 22: Hyperlinked image where anchor has aria-hidden="true".</p> </div> </div> </div> </div> </div> </div> </div> </section> <sections id="figures"> <div class="container pt-4"> <div class="row"> <div class="col-sm-12"> <h2 class="pb-3 pt-3">Figures</h2> <div class="row"> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill text-center"> <figure id="attachment_28" aria-describedby="caption-attachment-28"><img src="image-examples/nambia-desert.jpg" alt="" width="100%"> <figcaption id="caption-attachment-28" style="background:lightblue;font-size:80%;">Fig. 1: Nambian desert (Source: unknown)</figcaption> </figure> <div class="card-body"> <p class="card-text">Condition 23: Decorative images within a <kbd><figure></kbd> element.</p> </div> </div> </div> <div class="col-md-4 d-flex"> <div class="card mb-4 shadow-sm flex-fill"> <figure> <img src="image-examples/zebra.jpg" alt="two zebras" width="100%"> <figcaption style="background:lightblue;font-size:80%;text-align: center;">Two zebras</figcaption> </figure> <div class="card-body"> <p class="card-text">Condition 24: Figure element has duplicate alt and caption text.</p> </div> </div> </div> </div> </div> </div> </div> </sections> </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>