Мобильная версияВот фрагмент HTML для меню навигации, которое я использую:
Код: Выделить всё
[list]
[*][url=/]Home[/url]
[*][url=facilities.php]Rules & Facilities[/url]
[*][url=booking-terms-and-conditions.php]Terms[/url]
[/list]
Код: Выделить всё
Successes: 1
Failures: 1
Score: 50
Запрос о помощи:
Может ли кто-нибудь помочь определить, что может быть не так в текущей реализации? Какие шаги я могу предпринять, чтобы решить эту проблему с доступностью?
Заранее благодарим за помощь!
Код: Выделить всё
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
×
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]
© 2025 All Rights Reserved.
Site designed by [url=privacy-data-protection.php]GDPR[/url]
// JS goes here
Подробнее здесь: https://stackoverflow.com/questions/798 ... essibility
