Solved Add alt text to the images in docs #116

content/en/_index.md

@@ -13,30 +13,26 @@ description: >
 </div>
 <div>
 <h1 style="margin:4.5rem auto 1.5rem auto">Explore tutorials & documentation</h1>
-<a class="btn btn-lg btn-primary me-3 mb-4 l5btn"
-  href="/cloud">
-    <img src="images/logos/5-light-no-trim.svg" />
-  Cloud Docs
-  <i class="fas fa-arrow-alt-circle-right ms-2"></i>
-</a>
-<a class="btn btn-lg btn-primary me-3 mb-4 l5btn"
-  href="/meshmap">
-  <img src="images/logos/meshmap-alt.svg" />
-  MeshMap Docs
-  <i class="fas fa-arrow-alt-circle-right ms-2"></i>
-</a>
-<a class="btn btn-lg btn-primary me-3 mb-4 l5btn"
-  href="https://docs.meshery.io">
-  <img src="images/logos/meshery-light-icon.svg" />
-  Meshery Docs
-  <i class="fas fa-arrow-alt-circle-right ms-2"></i>
-</a>
-<a class="btn btn-lg btn-primary me-3 mb-4 l5btn"
-  href="https://getnighthawk.dev">
-  <img src="images/logos/nighthawk-logo.svg" />
-  Nighthawk Docs
-  <i class="fas fa-arrow-alt-circle-right ms-2"></i>
-</a>
+<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="/cloud" aria-label="Cloud Docs">
+    <img src="images/logos/5-light-no-trim.svg" alt="Layer5 Cloud Docs Logo" />
+    Cloud Docs
+    <i class="fas fa-arrow-alt-circle-right ms-2"></i>
+  </a>
+<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="/meshmap" aria-label="MeshMap Docs">
+    <img src="images/logos/meshmap-alt.svg" alt="Layer5 MeshMap Docs Logo" />
+    MeshMap Docs
+    <i class="fas fa-arrow-alt-circle-right ms-2"></i>
+  </a>
+<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="https://docs.meshery.io" aria-label="Meshery Docs">
+    <img src="images/logos/meshery-light-icon.svg" alt="Layer5 Meshery Docs Logo" />
+    Meshery Docs
+    <i class="fas fa-arrow-alt-circle-right ms-2"></i>
+  </a>
+  <a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="https://getnighthawk.dev" aria-label="Nighthawk Docs">
+    <img src="images/logos/nighthawk-logo.svg" alt="Layer5 Nighthawk Docs Logo" />
+    Nighthawk Docs
+    <i class="fas fa-arrow-alt-circle-right ms-2"></i>
+  </a>
 </div>
 
 <div class= "product-section">
@@ -64,8 +60,8 @@ description: >
   <div class="grid-card">
   <span class="product-head">Discussion forum</span>
   <p>Cloud Native Management of developer-defined infrastructure. Join the open source-first community of cloud native engineers.</p>
-  <img src="images/landing/discuss.png" />
-  </div>
+  <img src="images/landing/discuss.png" alt="Discussion Forum Image" />
+      </div>
 </div>
 </a>
 
@@ -76,7 +72,9 @@ description: >
     <p>Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.</p>
   </div>
   <div class= "handbook-image">
-<img src="images/landing/handbook.png" />
+<img src="images/landing/handbook.png" alt="Community Handbook Image" />
+      </div>
+
 </a>
 
 </div>

content/en/cloud/catalog/_index.md

@@ -9,7 +9,8 @@ description: >
 Public Catalog: https://meshery.layer5.io/catalog
 {{%/pageinfo%}}
 
-{{< figure src="/cloud/catalog/images/delivering-catalog-content.svg"  class="image-center-shadow" >}}
+{{< figure src="/cloud/catalog/images/delivering-catalog-content.svg" alt="Delivering-catalog-content" class="image-center-shadow" >}}
+
 
 The Cloud Catalog is a web-based, public catalog to facilitate easy discovery of existing designs. Designs that are published into the catalog can be, but are not always curated for known best practices and patterns. Content is published at [meshery.layer5.io/catalog](https://meshery.layer5.io/catalog), and one-click import of catalog content into Meshery Server is seamlessly integrated.
 

content/en/cloud/identity/organizations/_index.md

@@ -9,7 +9,7 @@ tags: [orgs]
 
 {{< cardpane >}}
 {{% card %}}
-<img src="/cloud/identity/images/organization_units.svg" link="images/organization_units.svg"  />
+<img src="/cloud/identity/images/organization_units.svg" link="images/organization_units.svg" alt="Organizational units" />
 {{% /card %}}
 {{< /cardpane >}}
 

content/en/cloud/identity/organizations/organizations.md

@@ -13,7 +13,7 @@ tags: [orgs]
 
 {{< cardpane >}}
 {{% card header="Organization Administrator and Organization Billing Manager" %}}
-<img src="/cloud/identity/images/organization-administrator-and-organization-billing-manager.svg" link="images/organization-administrator-and-organization-billing-manager.svg"  width="100%"  />
+<img src="/cloud/identity/images/organization-administrator-and-organization-billing-manager.svg" link="images/organization-administrator-and-organization-billing-manager.svg"  width="100%" alt="Organization Administrator and Organization Billing Manager " />
 {{% /card %}}
 {{< /cardpane >}}
 

content/en/cloud/identity/teams/teams.md

@@ -13,7 +13,7 @@ tags: [teams]
 
 {{< cardpane >}}
 {{% card header="Team Admins and Team Managers" %}}
-<img src="/cloud/identity/images/team-admins-and-team-managers.svg" link="images/team-admins-and-team-managers.svg"  width="100%"  />
+<img src="/cloud/identity/images/team-admins-and-team-managers.svg" link="images/team-admins-and-team-managers.svg"  width="100%" alt="Team Admin and Team managers" />
 {{% /card %}}
 {{< /cardpane >}}
 

content/en/cloud/security/roles.md

@@ -11,11 +11,12 @@ Roles map permissions to users. Roles contain any number of keychains, which con
 ![roles](/cloud/security/images/roles-overview.svg "image-center-no-shadow")
 
 
+
 ## Provider Admin Role
 
 {{< cardpane >}}
 {{% card header="### Provider Admin Role" %}}
-![](/cloud/security/images/role-provider-admin.svg)
+![role-provider](/cloud/security/images/role-provider-admin.svg)
 {{% /card %}}
 {{% card %}}
 
@@ -52,7 +53,7 @@ Roles map permissions to users. Roles contain any number of keychains, which con
 
 {{< cardpane >}}
 {{% card %}}
-![](/cloud/identity/images/organization-administrator-and-organization-billing-manager.svg)
+![organization-administrator and manager](/cloud/identity/images/organization-administrator-and-organization-billing-manager.svg)
 {{% /card %}}
 {{< /cardpane >}}
 
@@ -120,7 +121,7 @@ For more information, see [Organization](/cloud/identity/organizations).
 
 {{< cardpane >}}
 {{% card %}}
-![](/cloud/identity/images/team-admins-and-team-managers.svg)
+![team-admins-and-manager](/cloud/identity/images/team-admins-and-team-managers.svg)
 {{% /card %}}
 {{< /cardpane >}}
 

content/en/cloud/tutorials/assigning-user-badges.md

@@ -26,7 +26,7 @@ Project Badges are assigned by the admin to the user when a user contributes to
 ### How to Embed Badges
 To share your badges on other social profiles, utilize the provided embedded code and direct share functionality. Access your badges from the Layer5 Cloud profile badges section, and then use it to post your achievements on social media platforms seamlessly. This enables you to showcase your Layer5 contributions and milestones to a wider audience.
 
-{{< figure src="/cloud/tutorials/images/embedding-badges-modal.svg" >}}
+{{< figure src="/cloud/tutorials/images/embedding-badges-modal.svg" alt="Embedding-badges-modal">}}
 
 ### FAQ's
 - **Is there a limit to the number of badges that I can earn?**  

content/en/meshmap/visualizer/_index.md

@@ -24,7 +24,7 @@ Visualizer supports connecting to Kubernetes pods via the following methods.
 
 ### Understanding Log Streamer
 
-{{< figure src="images/log-stream-sequence-diagram.svg" link="images/log-stream-sequence-diagram.svg"  width="100%"  >}}
+{{< figure src="images/log-stream-sequence-diagram.svg" link="images/log-stream-sequence-diagram.svg"  width="100%" alt="log-stream-sequence-diagram" >}}
 
 ### Understanding Interactive Terminal
 
@@ -34,4 +34,4 @@ While using using the interactive terminal, understand that you can only open on
 Each session's data is streamed via Meshery Broker (NATS) from MeshSync to Meshery Server / MeshMap.
 The GraphQL subscription between your web browser running MeshMap and Meshery Server provides isolation between other users who might be concurrently sharing an interactive terminal. Each connection established a unique session ID.
 
-{{< figure src="images/interactive-terminal-sequence-diagram.svg" link="images/interactive-terminal-sequence-diagram.svg"  width="100%"  >}}
+{{< figure src="images/interactive-terminal-sequence-diagram.svg" link="images/interactive-terminal-sequence-diagram.svg"  width="100%" alt="interactive-terminal-sequence-diagram" >}}

hugo.toml

@@ -177,48 +177,64 @@ no = 'Sorry to hear that. Please <a href="https://github.com/layer5io/docs/issue
 enable = false
 
 [params.links]
-	[[params.links.footer.icons]]
-		name = "User mailing list"
-		url = "https://layer5.io/subscribe"
-		icon = "icons/envelope.svg"
-		desc = "Discussion and help from your fellow users"
-	[[params.links.footer.icons]]
-		name = "Twitter"
-		url = "https://twitter.com/layer5"
-		icon = "icons/twitter.svg"
-		desc = "Follow us on Twitter to get the latest news!"
-		class= "social-icon"
-	[[params.links.footer.icons]]
-		name = "Discussion Forum"
-		url = "https://discuss.layer5.io"
-		icon = "icons/discuss.svg"
-		desc = "Practical questions and curated answers"
-	[[params.links.footer.icons]]
-		name = "GitHub"
-		url = "https://github.com/layer5io"
-		icon = "icons/github.svg"
-		desc = "Development takes place here"
-		class= "social-icon"
-	[[params.links.footer.icons]]
-		name = "Slack"
-		url = "https://slack.layer5.io"
-		icon = "icons/slack.svg"
-		desc = "Chat with other project developers"
-	[[params.links.footer.icons]]
-		name = "LinkedIn"
-		url = "https://www.linkedin.com/company/layer5"
-		icon = "icons/linkedin.svg"
-		desc = "Discuss development issues around the project"
-	[[params.links.footer.icons]]
-		name = "YouTube"
-		url = "https://www.youtube.com/channel/UCFL1af7_wdnhHXL1InzaMvA?sub_confirmation=1"
-		icon = "icons/youtube.svg"
-		desc = "Discuss development issues around the project"
-	[[params.links.footer.icons]]
-		name = "Docker"
-		url = "https://hub.docker.com/u/layer5/"
-		icon = "icons/docker.svg"
-		desc = "Discuss development issues around the project"
+  [[params.links.footer.icons]]
+    name = "User mailing list"
+    url = "https://layer5.io/subscribe"
+    icon = "icons/envelope.svg"
+    desc = "Discussion and help from your fellow users"
+    alt = "Envelope Icon"
+
+  [[params.links.footer.icons]]
+    name = "Twitter"
+    url = "https://twitter.com/layer5"
+    icon = "icons/twitter.svg"
+    desc = "Follow us on Twitter to get the latest news!"
+    class = "social-icon"
+    alt = "Twitter Icon"
+
+  [[params.links.footer.icons]]
+    name = "Discussion Forum"
+    url = "https://discuss.layer5.io"
+    icon = "icons/discuss.svg"
+    desc = "Practical questions and curated answers"
+    alt = "Discussion Forum Icon"
+
+  [[params.links.footer.icons]]
+    name = "GitHub"
+    url = "https://github.com/layer5io"
+    icon = "icons/github.svg"
+    desc = "Development takes place here"
+    class = "social-icon"
+    alt = "GitHub Icon"
+
+  [[params.links.footer.icons]]
+    name = "Slack"
+    url = "https://slack.layer5.io"
+    icon = "icons/slack.svg"
+    desc = "Chat with other project developers"
+    alt = "Slack Icon"
+
+  [[params.links.footer.icons]]
+    name = "LinkedIn"
+    url = "https://www.linkedin.com/company/layer5"
+    icon = "icons/linkedin.svg"
+    desc = "Discuss development issues around the project"
+    alt = "LinkedIn Icon"
+
+  [[params.links.footer.icons]]
+    name = "YouTube"
+    url = "https://www.youtube.com/channel/UCFL1af7_wdnhHXL1InzaMvA?sub_confirmation=1"
+    icon = "icons/youtube.svg"
+    desc = "Discuss development issues around the project"
+    alt = "YouTube Icon"
+
+  [[params.links.footer.icons]]
+    name = "Docker"
+    url = "https://hub.docker.com/u/layer5/"
+    icon = "icons/docker.svg"
+    desc = "Discuss development issues around the project"
+    alt = "Docker Icon"
+
 
 	[[params.links.footer.resources.items]]
 		name = "Learning Paths"

layouts/partials/footer.html

@@ -6,14 +6,14 @@
             <div class="col-lg-6">
                 <a href="/">
                     {{ $svg := resources.Get "icons/logo.svg" }}
-                    <img class="footer-logo" src="{{ $svg.Permalink }}">
+                    <img class="footer-logo" src="{{ $svg.Permalink }}" alt="Footer Logo Layer5">
                 </a>
             </div>
             <div class="col-lg-6 footer-info footer-icons">
                 {{ range .Site.Params.links.footer.icons }}
                 <a href="{{ .url  }}" class="{{ .class }}" target="_blank" rel="noreferrer">
                     {{ $svg1 := resources.Get .icon }}
-                    <img height="30px"  src="{{ $svg1.Permalink }}">
+                    <img height="30px"  src="{{ $svg1.Permalink }}" alt="{{ .alt }}">
                 </a>
                 {{ end }}
             </div>

layouts/partials/image-modal.html

@@ -7,7 +7,7 @@
 <div id="myModal" class="modal">
   <button class="modal-close" onclick="closeModal()">close</button>
   <div class="modal-cont">
-    <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;">
+    <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;" alt="Modal-pic">
   </div>
 </div>
 
@@ -33,4 +33,6 @@
   // See note above regarding the footer 
   document.getElementById("site-footer").style.display = "block";
 }
+
+
 </script>