Setting custom controls have ARIA roles

oleksis · oleksis · commit faa5b900663a · 2023-09-16T10:48:57.000-04:00
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,3 +1,3 @@
-<footer>
+<footer role="contentinfo">
   <small>&copy; {{ 'now' | date: "%Y" }} {{ site.title }}</small>
 </footer>
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,11 +1,11 @@
-<header class="site-header">
+<header class="site-header" role="banner">
   <h1 class="site-title"><a class="logo-text" href="/">BPDev</a></h1>
   <nav class="site-navigation">
     <div class="site-navigation-wrap">
-      <ul class="menu">
+      <ul class="menu" role="menu">
         {% for item in site.navigation %} {% assign current = nil %} {% if
         page.url == item.url %} {% assign current = 'nav-current' %} {% endif %}
-        <li class="menu-item {{ current }}">
+        <li class="menu-item {{ current }}" role="menuitem">
           <a class="{{ current }}" href="{{ item.url }}"
             ><i class="{{ item.fa }}"></i>&nbsp;{{ item.text }}</a
           >
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -38,7 +38,7 @@
 
   <body>
     {% include header.html %}
-    <main>{{ content }}</main>
+    <main role="main">{{ content }}</main>
     {% include footer.html %}
     <script src="{{ '/assets/js/bpd.js' }}"></script>
   </body>
