Skip to content
Snippets Groups Projects
Commit b352ae61 authored by Robin King's avatar Robin King
Browse files

fix(*.html): fix accessibility of main navigation

parent e263b3e5
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
about.html
+ 6
− 5
View file @ b352ae61
...@@ -14,26 +14,27 @@ ...@@ -14,26 +14,27 @@
<header id="main-navigation"> <header id="main-navigation">
<img src="assets\main-logo\logo-long-dark.min.svg" alt="Create Against Hate Logo"> <img src="assets\main-logo\logo-long-dark.min.svg" alt="Create Against Hate Logo">
<!-- Navigation Bar -- index.html && about.html && rules.html && location.html --> <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
<nav aria-labelledby="Create Against Hate Main Navigation"> <nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar"> <ul role="menubar" class="navbar">
<li role="none"> <li role="none">
<a href="#" role="menuitem"> <!-- aria-label is necessary for when the text is hidden on mobile -->
<a href="index.html" role="menuitem" aria-label="Home">
<!-- .hideable-text exists for the mobile navigation which contains no text --> <!-- .hideable-text exists for the mobile navigation which contains no text -->
<span class="icon--home"></span><span class="hideable-text">Home</span> <span class="icon--home"></span><span class="hideable-text">Home</span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="about.html" role="menuitem" aria-current="page"> <a href="#" aria-label="About Stop Hate UK" role="menuitem" aria-current="page">
<span class="icon--about"></span><span class="hideable-text">About <i>Stop Hate UK</i></span> <span class="icon--about"></span><span class="hideable-text">About <i>Stop Hate UK</i></span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="rules.html" role="menuitem"> <a href="rules.html" aria-label="Jam Rules" role="menuitem">
<span class="icon--rules"></span><span class="hideable-text">Jam Rules</span> <span class="icon--rules"></span><span class="hideable-text">Jam Rules</span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="location.html" role="menuitem"> <a href="location.html" aria-label="How to find us" role="menuitem">
<span class="icon--location"></span><span class="hideable-text">How to find us</span> <span class="icon--location"></span><span class="hideable-text">How to find us</span>
</a> </a>
</li> </li>
......
index.html
+ 8
− 7
View file @ b352ae61
...@@ -10,29 +10,30 @@ ...@@ -10,29 +10,30 @@
<title>Create Against Hate</title> <title>Create Against Hate</title>
</head> </head>
<body> <body id="home">
<header id="main-navigation"> <header id="main-navigation">
<!-- Navigation Bar -- index.html && about.html && rules.html && location.html --> <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
<nav aria-labelledby="Create Against Hate Main Navigation"> <nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar"> <ul role="menubar" class="navbar">
<li role="none"> <li role="none">
<a href="#" role="menuitem" aria-current="page"> <!-- aria-label is necessary for when the text is hidden on mobile -->
<a href="#" role="menuitem" aria-label="Home" aria-current="page">
<!-- .hideable-text exists for the mobile navigation which contains no text --> <!-- .hideable-text exists for the mobile navigation which contains no text -->
<span class="icon--home"></span><span class="hideable-text">Home</span> <span class="icon--home"></span><span class="hideable-text">Home</span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="about.html" role="menuitem"> <a href="about.html" aria-label="About Stop Hate UK" role="menuitem">
<span class="icon--about"></span><span class="hideable-text">About <i>Stop Hate UK</i></span> <span class="icon--about"></span><span class="hideable-text">About <i>Stop Hate UK</i></span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="rules.html" role="menuitem"> <a href="rules.html" aria-label="Jam Rules" role="menuitem">
<span class="icon--rules"></span><span class="hideable-text">Jam Rules</span> <span class="icon--rules"></span><span class="hideable-text">Jam Rules</span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="location.html" role="menuitem"> <a href="location.html" aria-label="How to find us" role="menuitem">
<span class="icon--location"></span><span class="hideable-text">How to find us</span> <span class="icon--location"></span><span class="hideable-text">How to find us</span>
</a> </a>
</li> </li>
...@@ -45,7 +46,7 @@ ...@@ -45,7 +46,7 @@
<div class="hamburger--bottom"></div> <div class="hamburger--bottom"></div>
</button> </button>
</header> </header>
<main id="home"> <main>
<!-- Hero -- index.html && about.html --> <!-- Hero -- index.html && about.html -->
<section id="home__hero" class="hero"> <section id="home__hero" class="hero">
<article> <article>
......
location.html
+ 6
− 5
View file @ b352ae61
...@@ -14,26 +14,27 @@ ...@@ -14,26 +14,27 @@
<header id="main-navigation"> <header id="main-navigation">
<img src="assets\main-logo\logo-long-dark.min.svg" alt="Create Against Hate Logo"> <img src="assets\main-logo\logo-long-dark.min.svg" alt="Create Against Hate Logo">
<!-- Navigation Bar -- index.html && about.html && rules.html && location.html --> <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
<nav aria-labelledby="Create Against Hate Main Navigation"> <nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar"> <ul role="menubar" class="navbar">
<li role="none"> <li role="none">
<a href="#" role="menuitem"> <!-- aria-label is necessary for when the text is hidden on mobile -->
<a href="index.html" role="menuitem" aria-label="Home">
<!-- .hideable-text exists for the mobile navigation which contains no text --> <!-- .hideable-text exists for the mobile navigation which contains no text -->
<span class="icon--home"></span><span class="hideable-text">Home</span> <span class="icon--home"></span><span class="hideable-text">Home</span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="about.html" role="menuitem"> <a href="about.html" aria-label="About Stop Hate UK" role="menuitem">
<span class="icon--about"></span><span class="hideable-text">About <i>Stop Hate UK</i></span> <span class="icon--about"></span><span class="hideable-text">About <i>Stop Hate UK</i></span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="rules.html" role="menuitem"> <a href="rules.html" aria-label="Jam Rules" role="menuitem">
<span class="icon--rules"></span><span class="hideable-text">Jam Rules</span> <span class="icon--rules"></span><span class="hideable-text">Jam Rules</span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="location.html" role="menuitem" aria-current="page"> <a href="#" aria-label="How to find us" role="menuitem" aria-current="page">
<span class="icon--location"></span><span class="hideable-text">How to find us</span> <span class="icon--location"></span><span class="hideable-text">How to find us</span>
</a> </a>
</li> </li>
......
rules.html
+ 6
− 5
View file @ b352ae61
...@@ -14,26 +14,27 @@ ...@@ -14,26 +14,27 @@
<header id="main-navigation"> <header id="main-navigation">
<img src="assets\main-logo\logo-long-dark.min.svg" alt="Create Against Hate Logo"> <img src="assets\main-logo\logo-long-dark.min.svg" alt="Create Against Hate Logo">
<!-- Navigation Bar -- index.html && about.html && rules.html && location.html --> <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
<nav aria-labelledby="Create Against Hate Main Navigation"> <nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar"> <ul role="menubar" class="navbar">
<li role="none"> <li role="none">
<a href="#" role="menuitem"> <!-- aria-label is necessary for when the text is hidden on mobile -->
<a href="index.html" role="menuitem" aria-label="Home">
<!-- .hideable-text exists for the mobile navigation which contains no text --> <!-- .hideable-text exists for the mobile navigation which contains no text -->
<span class="icon--home"></span><span class="hideable-text">Home</span> <span class="icon--home"></span><span class="hideable-text">Home</span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="about.html" role="menuitem"> <a href="about.html" aria-label="About Stop Hate UK" role="menuitem">
<span class="icon--about"></span><span class="hideable-text">About <i>Stop Hate UK</i></span> <span class="icon--about"></span><span class="hideable-text">About <i>Stop Hate UK</i></span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="rules.html" role="menuitem" aria-current="page"> <a href="#" aria-label="Jam Rules" role="menuitem" aria-current="page">
<span class="icon--rules"></span><span class="hideable-text">Jam Rules</span> <span class="icon--rules"></span><span class="hideable-text">Jam Rules</span>
</a> </a>
</li> </li>
<li role="none"> <li role="none">
<a href="location.html" role="menuitem"> <a href="location.html" aria-label="How to find us" role="menuitem">
<span class="icon--location"></span><span class="hideable-text">How to find us</span> <span class="icon--location"></span><span class="hideable-text">How to find us</span>
</a> </a>
</li> </li>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment