fix: improve docs pages accessibility #1464

Olaleye-Blessing · 2023-03-24T23:26:31Z

Description

Improves the docs page accessibility.

Related issue(s)

Closes: #1453

netlify · 2023-03-24T23:26:38Z

✅ Deploy Preview for asyncapi-website ready!

Name	Link
🔨 Latest commit	`87d8e78`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/6447ee0c86af270008f13763
😎 Deploy Preview	https://deploy-preview-1464--asyncapi-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 site settings.

github-actions · 2023-03-24T23:29:13Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	23
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://deploy-preview-1464--asyncapi-website.netlify.app/

imabp · 2023-04-01T10:17:35Z

components/Feedback.js

@@ -84,7 +84,7 @@ export default function Feedback(className = '') {
    return (
        <div className={`flex flex-col rounded-md shadow-md border border-gray-200 p-4 ${className}`}>
            <div className='flex flex-row'>
-                <img src="/img/illustrations/icons/icon.svg" className='w-28 md:w-14' />
+                <img src="/img/illustrations/icons/icon.svg" className='w-28 md:w-14' alt="" aria-hidden="true" />


why empty alt=""?

I left it blank because the image looks like it's for purely decoration.

Remember we need to be WCAG compliant

Yes. The WCAG explanation for decorative images is to use empty alt instead of not providing it at all.
https://www.w3.org/WAI/tutorials/images/decorative/

This is the image by the way:

imabp · 2023-04-01T10:18:11Z

components/Footer.js

@@ -17,7 +17,7 @@ export default function Footer() {
          <div className="mr-14 w-full md:w-auto">
            <div className="">
              <Link href="/">
-                <a className="cursor-pointer">
+                <a className="cursor-pointer" aria-label="AsyncAPI homepage">


Suggested change

<a className="cursor-pointer" aria-label="AsyncAPI homepage">

<a className="cursor-pointer" aria-label="AsyncAPI">

Ok, but aria-label="AsyncAPI" reads as: "AsyncAPI link". It doesn't really show that it's going to the homepage.

homepage sounds bit off. We currently do not have any specific route known as /home. Better to use AsyncAPI. The interpretation will AsyncAPI Link, that itself communicates the link will open the root route of the asyncapi
@Olaleye-Blessing

imabp · 2023-04-01T10:20:07Z

components/buttons/GitHubIssue.js

@@ -3,7 +3,7 @@ import React from 'react'
 export default function GitHubIssue({className=''}) {
    return (
        <a className={`bg-black text-white flex flex-row lg:w-6/12 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out py-2 rounded justify-center ${className}`} href='https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+' target='_blank' rel='noopener noreferrer'>
-            <img src='/img/logos/github-fill.svg' className='mr-2' />
+            <img src='/img/logos/github-fill.svg' className='mr-2' alt="Github logo" />


instead use

Suggested change

<img src='/img/logos/github-fill.svg' className='mr-2' alt="Github logo" />

<img src='/img/logos/github-fill.svg' className='mr-2' alt="Github:AsyncAPI" />

imabp · 2023-04-01T10:20:39Z

components/navigation/MobileNavMenu.js

-                <SearchButton className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
+                <SearchButton
+                  className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
+                  aria-label="Open Algolia Search Modal"


Suggested change

aria-label="Open Algolia Search Modal"

aria-label="Search in AsyncAPI"

I feel like Search in AsyncAPI sounds like the button is the one making the search, whereas it's opening a modal for the search.

This button is for search via opening modal, henceforth my suggestion will be
"Open Search"

Avoid using algolia.

Oh! I see. "Algolia" is really not necessary.

imabp · 2023-04-01T10:20:55Z

components/navigation/NavBar.js

@@ -58,7 +58,7 @@ export default function NavBar({
          <div className="lg:w-auto lg:flex-1">
            <div className="flex">
              <Link href="/">
-                <a className="cursor-pointer">
+                <a className="cursor-pointer" aria-label="AsyncAPI homepage">


Suggested change

<a className="cursor-pointer" aria-label="AsyncAPI homepage">

<a className="cursor-pointer" aria-label="AsyncAPI">

imabp · 2023-04-01T10:21:21Z

components/navigation/NavBar.js

@@ -69,6 +69,7 @@ export default function NavBar({
        <div className="flex flex-row items-center justify-center -mr-2 -my-2 lg:hidden">
          <SearchButton
            className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
+            aria-label="Open Algolia Search Modal"


Suggested change

aria-label="Open Algolia Search Modal"

aria-label="Search in AsyncAPI"

imabp · 2023-04-01T10:21:56Z

components/navigation/NavBar.js

@@ -121,6 +122,7 @@ export default function NavBar({
          <div className="flex flex-row items-center justify-content">
            <SearchButton
              className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
+              aria-label="Open Algolia Search Modal"


Suggested change

aria-label="Open Algolia Search Modal"

aria-label="Search in AsyncAPI"

Olaleye-Blessing · 2023-04-11T11:54:35Z

@imabp any other reviews on this?

derberg · 2023-04-25T15:16:56Z

/rtm

derberg · 2023-04-25T15:19:00Z

@allcontributorsbot please add @Olaleye-Blessing for code, a11y

derberg · 2023-04-25T15:20:08Z

@all-contributors please add @Olaleye-Blessing for code, a11y

allcontributors · 2023-04-25T15:20:18Z

@derberg

I've put up a pull request to add @Olaleye-Blessing! 🎉

Olaleye-Blessing requested review from fmvilas, derberg, mcturco, akshatnema, magicmatatjahu and asyncapi-bot-eve as code owners March 24, 2023 23:26

Olaleye-Blessing force-pushed the 1453-docs-page-accessibility branch from 8e581d5 to 89105fd Compare March 24, 2023 23:55

Olaleye-Blessing changed the title ~~fix:Improve docs pages accessibility~~ fix: Improve docs pages accessibility Mar 25, 2023

Olaleye-Blessing force-pushed the 1453-docs-page-accessibility branch from 89105fd to a90b3c0 Compare March 25, 2023 18:23

Olaleye-Blessing changed the title ~~fix: Improve docs pages accessibility~~ fix: improve docs pages accessibility Mar 25, 2023

imabp reviewed Apr 1, 2023

View reviewed changes

Olaleye-Blessing force-pushed the 1453-docs-page-accessibility branch from a90b3c0 to 081fd0f Compare April 1, 2023 14:42

Olaleye-Blessing requested a review from imabp April 1, 2023 19:29

Olaleye-Blessing force-pushed the 1453-docs-page-accessibility branch from 081fd0f to 5b8007b Compare April 4, 2023 05:44

Olaleye-Blessing force-pushed the 1453-docs-page-accessibility branch from 5b8007b to a439520 Compare April 11, 2023 11:53

imabp previously approved these changes Apr 11, 2023

View reviewed changes

Olaleye-Blessing dismissed imabp’s stale review via a7295fc April 13, 2023 14:39

Olaleye-Blessing force-pushed the 1453-docs-page-accessibility branch from a439520 to a7295fc Compare April 13, 2023 14:39

fix: improve docs pages accessibility

a7295fc

akshatnema approved these changes Apr 15, 2023

View reviewed changes

Merge branch 'master' into 1453-docs-page-accessibility

87d8e78

asyncapi-bot added the ready-to-merge label Apr 25, 2023

asyncapi-bot merged commit 79c581a into asyncapi:master Apr 25, 2023

allcontributors bot mentioned this pull request Apr 25, 2023

docs: add Olaleye-Blessing as a contributor for code, and a11y #1609

Merged

derberg mentioned this pull request Apr 25, 2023

chore: make lighthouse check more radical #1610

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: improve docs pages accessibility #1464

fix: improve docs pages accessibility #1464

Olaleye-Blessing commented Mar 24, 2023 •

edited

Loading

netlify bot commented Mar 24, 2023 •

edited

Loading

github-actions bot commented Mar 24, 2023 •

edited

Loading

imabp Apr 1, 2023

Olaleye-Blessing Apr 1, 2023

imabp Apr 1, 2023

Olaleye-Blessing Apr 1, 2023

Olaleye-Blessing Apr 1, 2023

imabp Apr 1, 2023

Olaleye-Blessing Apr 1, 2023

imabp Apr 4, 2023

imabp Apr 1, 2023

imabp Apr 1, 2023

Olaleye-Blessing Apr 1, 2023

imabp Apr 1, 2023

Olaleye-Blessing Apr 1, 2023

imabp Apr 1, 2023

imabp Apr 1, 2023 •

edited

Loading

imabp Apr 1, 2023

Olaleye-Blessing commented Apr 11, 2023 •

edited

Loading

derberg commented Apr 25, 2023

derberg commented Apr 25, 2023

derberg commented Apr 25, 2023

allcontributors bot commented Apr 25, 2023

	<a className="cursor-pointer" aria-label="AsyncAPI homepage">
	<a className="cursor-pointer" aria-label="AsyncAPI">

	<img src='/img/logos/github-fill.svg' className='mr-2' alt="Github logo" />
	<img src='/img/logos/github-fill.svg' className='mr-2' alt="Github:AsyncAPI" />

	aria-label="Open Algolia Search Modal"
	aria-label="Search in AsyncAPI"

fix: improve docs pages accessibility #1464

fix: improve docs pages accessibility #1464

Conversation

Olaleye-Blessing commented Mar 24, 2023 • edited Loading

netlify bot commented Mar 24, 2023 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

github-actions bot commented Mar 24, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

imabp Apr 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Olaleye-Blessing commented Apr 11, 2023 • edited Loading

derberg commented Apr 25, 2023

derberg commented Apr 25, 2023

derberg commented Apr 25, 2023

allcontributors bot commented Apr 25, 2023

Olaleye-Blessing commented Mar 24, 2023 •

edited

Loading

netlify bot commented Mar 24, 2023 •

edited

Loading

github-actions bot commented Mar 24, 2023 •

edited

Loading

imabp Apr 1, 2023 •

edited

Loading

Olaleye-Blessing commented Apr 11, 2023 •

edited

Loading