diff --git a/about.html b/about.html
index f79bb40a7c8f8f6c009d007bf36715294d4400bf..6f8501aa640e5ab1bbd7988ebb9566c81edcf40e 100644
--- a/about.html
+++ b/about.html
@@ -14,26 +14,27 @@
<header id="main-navigation">
<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 -->
- <nav aria-labelledby="Create Against Hate Main Navigation">
+ <nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar">
<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 -->
<span class="icon--home"></span><span class="hideable-text">Home</span>
</a>
</li>
<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>
</a>
</li>
<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>
</a>
</li>
<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>
</a>
</li>
diff --git a/index.html b/index.html
index 4ee0a842d42415dad55f09687876f0bf7f2d9785..547f9e3fe2436c8b27131cc1ad57c91cb6e40229 100644
--- a/index.html
+++ b/index.html
@@ -10,29 +10,30 @@
<title>Create Against Hate</title>
</head>
-<body>
+<body id="home">
<header id="main-navigation">
<!-- 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">
<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 -->
<span class="icon--home"></span><span class="hideable-text">Home</span>
</a>
</li>
<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>
</a>
</li>
<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>
</a>
</li>
<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>
</a>
</li>
@@ -45,7 +46,7 @@
<div class="hamburger--bottom"></div>
</button>
</header>
- <main id="home">
+ <main>
<!-- Hero -- index.html && about.html -->
<section id="home__hero" class="hero">
<article>
diff --git a/location.html b/location.html
index 28ec5ae293e0805d4d1a586588037ecf8107573b..c6ff3f9a7b950c41117beaeb7789d2fc47c4121c 100644
--- a/location.html
+++ b/location.html
@@ -14,26 +14,27 @@
<header id="main-navigation">
<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 -->
- <nav aria-labelledby="Create Against Hate Main Navigation">
+ <nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar">
<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 -->
<span class="icon--home"></span><span class="hideable-text">Home</span>
</a>
</li>
<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>
</a>
</li>
<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>
</a>
</li>
<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>
</a>
</li>
diff --git a/rules.html b/rules.html
index a3ecad4625c7c18e5b97d186ea1004bef45303c2..c508ee8fa8a2b4c9b152e665150d48541e97a45c 100644
--- a/rules.html
+++ b/rules.html
@@ -14,26 +14,27 @@
<header id="main-navigation">
<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 -->
- <nav aria-labelledby="Create Against Hate Main Navigation">
+ <nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar">
<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 -->
<span class="icon--home"></span><span class="hideable-text">Home</span>
</a>
</li>
<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>
</a>
</li>
<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>
</a>
</li>
<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>
</a>
</li>