Fix Accessibility Violations for Navigation and Footer Elements

[huangkevin-apr]

Summary

This PR resolves 2 accessibility violations detected by the IBM Equal Access Accessibility Checker related to navigation landmarks lacking unique labels. The fix ensures multiple <nav> <footer>elements on the same page can be distinguished by screen reader users.

Problem

The IBM A11Y Checker identified the following issues:


Why is this important?
When there are multiple elements with role "nav" on a page, they must have unique labels that clearly describe their purpose. This helps people who use assistive technologies to quickly understand and navigate to each navigation region.

Solution

Implemented a flexible labeling system using Django/Jinja2 template variables to provide unique aria-label attributes for each navigation instance.

Files Changed:

• site/theme/templates/nav.html - Added aria-label with default value
• site/theme/templates/footer.html - Provided custom label for footer instance

diff --git a/site/theme/templates/footer.html b/site/theme/templates/footer.html
index 5315a9934..1436d029b 100644
--- a/site/theme/templates/footer.html
+++ b/site/theme/templates/footer.html
@@ -1,5 +1,5 @@
 <footer class="footer bg-purple">
-  {% with show_logo='no' %}
+  {% with show_logo='no', nav_label='Site Footer navigation' %}
   {% include 'nav.html'  %}
   {% endwith %}
   <div class="b-gray">
diff --git a/site/theme/templates/nav.html b/site/theme/templates/nav.html
index 982950164..074484103 100644
--- a/site/theme/templates/nav.html
+++ b/site/theme/templates/nav.html
@@ -8,7 +8,7 @@
     {% endif %}
   </div>
   <div class="col-sm-6">
-    <nav class="nav">
+    <nav class="nav" aria-label="{{ nav_label | default('Main navigation') }}">
       <ul class="container-fluid">
         {% for link in NAV %}
         <li>

Benefits

• Efficient navigation: Users can jump directly to the navigation region they need
• Better orientation: Clear distinction between header and footer navigation
• Reduced confusion: No ambiguity about which navigation section is focused
• Improved UX: Keyboard and screen reader users save time finding the right navigation

[netlify]

✅ Deploy Preview for envoy-website ready!

Name	Link
🔨 Latest commit	8b47ae1
🔍 Latest deploy log	https://app.netlify.com/projects/envoy-website/deploys/697de2b36dbf1d0008086adc
😎 Deploy Preview	https://deploy-preview-541--envoy-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.