Vorschläge, was möglicherweise mit meiner HTMl nicht stimmt – Barrierefreiheit erneut übergeben [geschlossen] ⇐ HTML

[Anonymous]

Ich habe das Audit-Tool von Accessibe.com verwendet, um sicherzustellen, dass meine Website den Barrierefreiheitsstandards entspricht. Nachdem ich alle Meldungen aus dem Audit bearbeitet hatte, erreichte ich für die meisten Elemente eine Punktzahl von 100 %. In der Liste der gefundenen Fehler taucht jedoch weiterhin ein Problem auf, das sich auf meine Gesamtbewertung auswirkt.
Audit-Ergebnisse:

Code: Select all

Score: 50
Element: Menus should be built using the HTML5  element or include a role attribute set to menu or navigation to indicate a navigation landmark for screen readers.

Code-Snippet für erfolgreiche Elemente:

Code: Select all

[list]
[*][url=/]Home[/url]
[*][url=facilities.php]Rules & Facilities[/url]
[*][url=booking-terms-and-conditions.php]Terms[/url]
[/list]

Codeausschnitte für fehlerhafte Elemente:

Code: Select all

...

Vielen Dank im Voraus für Ihre Hilfe!

Code: Select all

    
Welcome
        
[*]    
    

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 */
}



[url=#menu]Skip to menu[/url][url=#main-content]Skip to main content[/url]






Address:
Call us on:





[img]images/Holiday-Cottage-150.webp[/img]


[list]
[url=/]Home[/url]
[*][url=facilities.php]Rules & Facilities[/url]
[*][url=booking-terms-and-conditions.php]Terms[/url]
[/list]













Book Now

<
>


Welcome
Tap through the gallery below.


<

[img]images/G0001.webp[/img]
[img]images/G0002.webp[/img]
[img]images/G0001.webp[/img]
[img]images/G0002.webp[/img]

>


Image gallery preview

[img]images/G0001.webp[/img]
Caption for the image


Previous


Next



&times;





One of the Top Picks
Overview

Take a guided tour

(change language using top left dropdown)

 
Your browser does not support the video tag.  

VIEW
HOUSE RULES & FACILITIES
VIEW
HOUSE TERMS & CONDITIONS





About Your Host
[h4]Features:[/h4]
...
...
...
...
...
...

[h4]Find us on the map[/h4]

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



<


 It's was in the perfect

Jane, UK
It's was in the perfect

Jane, UK
It's was in the perfect

Jane, UK

>


[h4]SAVE MONEY BY BOOKING DIRECTLY[/h4]
Call us to ask about Availability



[img]images/Logo_White-70.webp[/img]
&copy; 2025 All Rights Reserved.
Site designed by&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[url=privacy-data-protection.php]GDPR[/url]
      //    JS goes here     

Ich habe versucht, die JS-Datei in der nächsten Antwort hinzuzufügen, aber es gelingt mir nicht. Aber vielleicht ist es nicht wirklich nötig. Ich werde mit der JS-Datei antworten, falls jemand mit Vorschlägen antwortet.