Vorschläge, was mit meinem HTMl nicht in Ordnung sein könnte – fehlende Barrierefreiheit ⇐ 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 Gesamtpunktzahl auswirkt.
Audit-Ergebnisse:

Punktzahl: 50.

Element: Menüs sollten mit dem HTML5-Element erstellt werden oder ein Rollenattribut enthalten, das auf „Menü“ oder „Navigation“ festgelegt ist, um einen Navigationspunkt für Bildschirmleser anzuzeigen.

Code-Snippet für „Erfolgreich“. 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

...

Ganze Seite
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.

Code: Select all

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

Code: Select all

Welcome



[*]



[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