ARTICLE AD BOX
I have been using Accessibe.com's audit tool to ensure my website complies with accessibility standards. After addressing all the notifications from the audit, I achieved a score of 100% for the majority of elements. However, one issue continues to appear in the faults found list, affecting my overall score.
Audit Findings:
Score: 50 Element: Menus should be built using the HTML5 <nav> element or include a role attribute set to menu or navigation to indicate a navigation landmark for screen readers.Code Snippet for Successful Elements:
<nav id="menu" aria-label="Primary navigation"> <ul class="menu-list"> <li><a href="/">Home</a></li> <li><a href="facilities.php">Rules & Facilities</a></li> <li><a href="booking-terms-and-conditions.php">Terms</a></li> </ul> </nav>Code Snippets for Failed Elements:
<main class="content" id="main-content" role="main"> <div class="hero"> <div class="slider" id="slides" role="region" aria-label="Homepage slider"> <div class="slide slide-1" data-bg="images/Slider-1.webp" data-title1="stay" data-title2="Stay" style=...> ...Thanks in advance for your assistance!
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Welcome</title> <meta name="keywords" content="Holiday Home"> <meta name="description" content="Discover comfort"> <meta name="robots" content="index, follow"> <link rel="preload" as="image" href="images/Slider-1.webp"> <link rel="preload" as="image" href="images/Slider-3.webp"> <link rel="icon" href="images/Favicon-16.png" sizes="16x16" type="image/png"> <link rel="icon" href="images/Favicon-32.png" sizes="32x32" type="image/png"> <style> h1, h2 { color: #000; } .nowrap { white-space: nowrap; } hr { border: 0.0625em solid #8E5B10; margin: 0 0 0.625em 0; } .facilities { margin: 0.625em 0 0 0.625em; padding: 0; text-align: center; font-size: 1.125em; } .facilities-container { display: flex; flex-wrap: wrap; gap: 1.25em; max-width: 75em; margin: 1.25em; padding: 0 0.9375em; } .column { flex: 1; min-width: 15.625em; } .column h3 { margin-bottom: 0; } .column ul { margin-top: 0; } .list { list-style-type: none; padding: 0; } .list li { position: relative; padding-left: 0.9375em; margin: 0.3125em 0; font-size: 1em; } .list li::before { content: ">"; position: relative; left: 0; color: #0056b3; font-size: 1.125em; line-height: 1em; padding-right: 0.3125em; } .about-map-container { background: rgb(221, 212, 188); padding: 0.625em 1.25em 0 1.25em; margin: 0.625em; border-radius: 0.5em; display: flex; flex-wrap: wrap; justify-content: center; } .map { width: 100%; min-height: 25em; margin: 0; border: 0; pointer-events: none; } .video, .map { padding: 0.625em; box-sizing: border-box; } .video { position: relative; overflow: hidden; margin: 0 auto; width: 100%; max-width: 40em; } .video video { width: 100%; height: auto; } .video p, .map h4 { margin: 0; text-align: center; font-weight: bold; } .video p span { font-size: 0.75em; } .top-picks-container, .about-map-container { display: flex; flex-wrap: nowrap; margin: 0.625em 1.25em; } .top-picks, .video { flex: 1 1 50%; margin: 0.625em; } .about-host, .map { flex: 1 1 50%; margin: 0 0.625em; } .about-host h1 { font-size: 1.125em; } .about-host h2 { font-size: 1em; } .rotating-reviews { display: flex; align-items: center; justify-content: center; margin: 0.625em; } .review-container { display: flex; overflow: hidden; position: relative; width: 100%; } .review-item { flex: 0 0 calc(33.33% - 1.25em); margin: 0.625em; padding: 0.625em; text-align: center; box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); border-radius: 0.5em; background-color: #f9f9f9; box-sizing: border-box; transition: opacity 0.03125s ease; } .review-item span { font-size: 0.9375em; font-weight: bold; } .prev-review, .next-review { background-color: #8E5B10; color: white; border: none; padding: 0.75em 0.625em; cursor: pointer; margin: 0 0.3125em; border-radius: 0.3125em; font-size: 1em; transition: background-color 0.01875s; } .book-direct { text-align: center; } .book-direct h4 { font-size: 1.125em; font-weight: bold; } .book-direct h5 { font-size: 0.875em; font-weight: bold; } nav a:hover { text-decoration: underline; } .transcript #scene { padding: 0; margin: 0; } #viewHouseRulesButton, #viewTermsButton { font-size: 0.75em; } button { font-weight: bold; background-color: #8E5B10; color: white; border: none; padding: 0.625em; cursor: pointer; margin: 0 0.625em; font-size: 1em; border-radius: 0.3125em; } @media (max-width: 37.5em) { .contact-wrapper { flex-direction: column; align-items: flex-start; width: 100%; } .google-translate-container { margin-left: 0; width: 100%; } #google_translate_element { width: 100%; margin-left: 0; } .prev-slide, .next-slide { padding: 0.5em; } .logo { padding-left: 0.125em; } .logo img { height: 2.8125em; width: auto; } footer { padding: 0.1875em 0.625em; } } @media (max-width: 62.5em) { .gallery-container img { height: 15.625em; width: auto; max-width: 9.375em; } } @media (max-width: 48em) { .top-picks-container, .about-map-container { flex-direction: column; align-items: center; } .top-picks, .video, .about-host, .map { flex: 1 1 100%; margin: 0.625em 0 0 0; text-align: left; } .map { height: 18.75em; width: 100%; } } @media (max-width: 48em) { .review-item { flex: 0 0 calc(100% - 1.25em); } } :focus { outline: 0.125em solid blue; } button:hover { background-color: #0056b3; } .prev-review:hover, .next-review:hover { background-color: #0056b3; } body{display:flex;flex-direction:column;min-height:100vh;margin:0;font:normal 17px / 27px "Alegreya Sans",Helvetica,Arial,Verdana,sans-serif;color:#000;}header{width:100%;position:fixed;top:0;left:0;right:0;background-color:white;z-index:1000;} .content{margin-top:160px;margin-bottom:60px;} #main-content, #menu { scroll-margin-top: 170px; } .header-content{display:flex;justify-content:space-between;align-items:center;}header div{font-size:14px;}.logo{padding-left:15%;} .hero{position:relative;margin-top:0px;}.hero-title{position:absolute;height:130px;top:50px;bottom:60px;left:10px;color:black;text-shadow:3px 3px 8px rgba(255,255,255,0.9);z-index:2;} .slides{position:relative;} .slide-1{background-image:url('../images/Slider-1.webp');}.slide-2{background-image:url('../images/Slider-12.webp');}.slide-3{background-image:url('../images/Slider-13.webp');}.slide-4{background-image:url('../images/Slider-14.webp');}.slide{display:none;width:100%;min-height:600px;background-color:#f0f0f0;background-size:cover;background-position:center;overflow:hidden;}.prev-slide{left:10px;}.next-slide{right:10px;}.prev-slide,.next-slide{position:absolute;top:50%;z-index:2;background-color:#8E5B10;color:white;border:none;cursor:pointer;padding:10px;}.slide:first-child{display:block;}.booking-button{background-color:#8E5B10;color:white;font-weight:bold;border:none;cursor:pointer;padding:10px 20px;z-index:2;} .home-welcome{font-size:19px;margin:10px 0 0 10px;padding:0;text-align:center;} .modal-title{font-size:16px;margin-bottom:0;margin:10px 0 0 10px;padding:0;text-align:center;} .gallery-wrapper{display:flex;align-items:center;justify-content:center;margin:0 20px;} .gallery-container{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;} .gallery-container img{height:300px;width:auto;max-width:200px;object-fit:cover;display:block;} .google-translate-container{display:flex;align-items:center;margin-right:10px;min-width:220px;min-height:30px;flex-grow:0;}#google_translate_element{margin-left:auto;} .booking-terms{text-align:center;margin:10px 0 0 10px;padding:0;font-size:19px;} .info{margin:20px;}.info li{margin-bottom:8px;}.info h1{font-size:19px;}.info h2{font-size:16px;margin-bottom:0;}.info p{padding:0;margin:0;} .contact{display:flex;justify-content:flex-end;padding:10px;flex-wrap:wrap;width:100%;} .contact-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap;width:100%;} .address-icon,.phone-icon{display:flex;align-items:center;margin-left:30px;position:relative;padding-left:25px;line-height:1;flex-grow:1;min-width:150px;margin-bottom:10px;} .address-icon::before,.phone-icon::before{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-size:cover;margin-bottom:10px;} .address-icon::before{background-image:url('../images/address-icon.webp');} .phone-icon{display:flex;flex-direction:row;align-items:center;flex-grow:1;} .phone-icon span{display:flex;} .phone-icon a{white-space:nowrap;margin-left:5px;} .phone-icon::before{background-image:url('../images/phone-icon.webp');} .modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.8);} .modal-content{margin:auto;display:block;} .button-container{display:flex;align-items:center;justify-content:center;margin-top:10px;gap:20px;} .button-container button{margin:5px 0;width:200px;} .modal img{max-width:80%;max-height:80%;} .modal #modal-description{text-align:center;color:white;background-color:rgba(0,0,0,0.8);} .modal a {color:white;text-decoration:none;} .close{position:absolute;top:15px;right:55px;color:red;font-size:40px;font-weight:bold;cursor:pointer;padding:1px;background:white;} footer{display:flex;justify-content:space-between;align-items:center;background-color:#333;color:white;font-size:12px!important;line-height:12px;padding:5px 20px !important;position:fixed;bottom:0;left:0;right:0;z-index:1000;} footer a{color:white!important;font-size:12px!important;text-decoration:none;} footer a:hover{text-decoration:underline;} footer .pb{text-align:center;} .skiptranslate.goog-te-gadget{width:100%;font-size:12px !important;} .goog-te-gadget-simple{display:flex;padding:0;margin-top:5px;width:100%;border:none;border-top:none;} .goog-te-gadget-simple span{white-space:nowrap;margin:0 5px;} .goog-te-gadget-simple img{margin-left:5px;} .goog-te-gadget-simple a{padding:5px;font-size:16px;color:#000;text-decoration:none;cursor:pointer;} .goog-te-gadget-simple a:hover{} .goog-te-combo{font-size:12px;} .goog-te-menu-frame{display:block !important;z-index:9999;} .goog-gt-tt{display:none;} .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .menu-list { list-style: none; margin: 0; padding: 0; padding-right: 20px; display: flex; gap: 1.5rem; align-items: center; } .menu-list li { margin: 0; padding: 0; } .menu-list a { color: #000; text-decoration: none; font-weight: 600; } .inactive { pointer-events: none; cursor: default; text-decoration: none; } .skip-link { position: absolute; /* Position it correctly */ top: -40px; /* Initially hidden */ left: 0; background: white; /* Pure black */ color: black; /* White text for visibility */ padding: 8px; z-index: 99999; /* Higher z-index value */ transition: top 0.3s, opacity 0.3s; border: 2px solid transparent; /* Use more visible border */ opacity: 0; } .skip-link:focus { top: 20px; /* Bring into view */ z-index: 199999; /* Ensure maximum visibility */ border: 2px solid #FFD700; /* Bright gold border */ background: white; /* Slightly lighter gray for focus */ opacity: 1; /* Make visible */ } /* Adjust hover/focus style */ .skip-link:hover, .skip-link:focus-visible { background: white; /* Change for interactivity */ color: black; /* Keep text readable */ } </style> </head> <body> <a href="#menu" class="skip-link" aria-label="Skip to menu">Skip to menu</a><a href="#main-content" class="skip-link" aria-label="Skip to main content">Skip to main content</a> <header role="banner"> <div class="google-translate-container" tabindex="0"> <div id="google_translate_element"></div> </div> <div class="contact"> <div class="contact-wrapper"> <div class="address-icon"><span>Address:</span></div> <div class="phone-icon"><span>Call us on:</span></div> </div> </div> <hr /> <div class="header-content"> <div class="logo"> <img src="images/Holiday-Cottage-150.webp" alt="Logo" width="100" height="52"> </div> <nav id="menu" aria-label="Primary navigation"> <ul class="menu-list"> <li><a href="/">Home</a></li> <li><a href="facilities.php">Rules & Facilities</a></li> <li><a href="booking-terms-and-conditions.php">Terms</a></li> </ul> </nav> </div> </header> <main class="content" id="main-content" role="main"> <div class="hero"> <div class="slider" id="slides" role="region" aria-label="Homepage slider"> <div class="slide slide-1" data-bg="images/Slider-1.webp" data-title1="stay" data-title2="Stay"></div> <div class="slide slide-2" data-bg="images/Slider-12.webp" data-title1="...." data-title2="Stay"></div> </div> <div class="hero-title"> <span class="title1"></span> <br> <span class="title2"></span> <br> <br> <button class="booking-button" id="bookNowButton">Book Now</button> </div> <div class="slider-navigation" aria-label="Slider controls"> <button class="prev-slide" aria-label="Previous slide"><</button> <button class="next-slide" aria-label="Next slide">></button> </div> </div> <h1 class="home-welcome">Welcome</h1> <h2 class="modal-title">Tap through the gallery below.</h2> <div class="gallery-wrapper" role="region" aria-label="Photo gallery"> <div class="gallery-controls" aria-label="Gallery controls"> <button id="prevGallery" aria-label="Previous gallery image" aria-controls="galleryImages"><</button> </div> <div class="gallery-container" id="galleryImages" aria-live="polite"> <img src="images/G0001.webp" data-src="images/G0001.webp" alt="View from the left" width="200" height="300"> <img src="images/G0002.webp" data-src="images/G0002.webp" alt="View from the center" width="200" height="300"> <img src="images/G0001.webp" data-src="images/G0001.webp" alt="View from the left" width="200" height="300"> <img src="images/G0002.webp" data-src="images/G0002.webp" alt="View from the center" width="200" height="300"> </div> <div class="gallery-controls" aria-label="Gallery controls"> <button id="nextGallery" aria-label="Next gallery image" aria-controls="galleryImages">></button> </div> <div class="modal" id="imageModal" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description"> <h2 id="modal-title" class="visually-hidden"> Image gallery preview </h2> <img class="modal-content" id="modalImage" src="images/G0001.webp" alt="View from the left" aria-hidden="false"> <div id="modal-description">Caption for the image</div> <div class="modal-controls" aria-label="Modal image navigation"> <button id="modalPrev" aria-label="Previous image" aria-controls="galleryImages"> Previous </button> <button id="modalNext" aria-label="Next image" aria-controls="galleryImages"> Next </button> </div> <button class="close" id="modalCloseBtn" aria-label="Close dialog"> × </button> </div> </div> <div class="top-picks-container"> <div class="top-picks"> <p>One of the Top Picks</p> <p>Overview</p> </div> <div class="video"> <p> Take a guided tour<br> <span>(change language using top left dropdown)</span> </p> <video id="video" controls width="640" height="360" poster="images/video-thumbnail.webp" aria-label="Guided tour"> <source src="640x360-v1.webm" type="video/webm" /> <track id="captionTrack" kind="captions" src="captions-en.vtt" srclang="en" label="English" default> Your browser does not support the video tag. </video> <div class="button-container"> <button id="viewHouseRulesButton" aria-label="VIEW HOUSE RULES & FACILITIES">VIEW HOUSE RULES & FACILITIES</button> <button id="viewTermsButton" aria-label="VIEW HOUSE TERMS & CONDITIONS">VIEW HOUSE TERMS & CONDITIONS</button> </div> </div> </div> <div class="about-map-container"> <div class="about-host"> <h3>About Your Host</h3> <h4>Features:</h4> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> </div> <div class="map"> <h4>Find us on the map</h4> <iframe id="map" class="map" loading="lazy" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d4920073.433788987!2d-2.0087965607973617!3d54.19798529755862!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1767011064874!5m2!1sen!2suk" title="Find us on the map" allowfullscreen=""></iframe> </div> </div> <div class="rotating-reviews" role="region" aria-label="Guest reviews"> <button class="prev-review" aria-label="Previous review"><</button> <div class="review-container" aria-live="polite"> <div class="review-item" tabindex="0"> It's was in the perfect<br> <span>Jane, UK</span> </div> <div class="review-item" tabindex="0"> It's was in the perfect<br> <span>Jane, UK</span> </div> <div class="review-item" tabindex="0"> It's was in the perfect<br> <span>Jane, UK</span> </div> </div> <button class="next-review" aria-label="Next review">></button> </div> <div class="book-direct"> <h4>SAVE MONEY BY BOOKING DIRECTLY</h4> <h5>Call us to ask about Availability</h5> </div> </main> <footer id="footer" role="contentinfo" aria-label="Site footer"> <img src="images/Logo_White-70.webp" alt="logo footer" width="50" height="26">© 2025 All Rights Reserved. <br><span class="pb">Site designed by</span><span> <a href="privacy-data-protection.php" rel="external" aria-label="View our GDPR compliance page">GDPR</a></span> </footer><script> // JS goes here </script> </body> </html>I tried to add the JS file in the next reply, but I can not. But maybe it is not really needed. I'll reply with the JS file should anyone reply with suggestions.
