Aria Labels here we come

I recently built an e-commerce site, and I attempted to build a strong accessible foundation along the way. The project is mostly complete, but I thought it was a great opportunity to comb through the project to add aria labels where they are needed.


This content originally appeared on DEV Community and was authored by JD Brewer-Hofmann

I recently built an e-commerce site, and I attempted to build a strong accessible foundation along the way. The project is mostly complete, but I thought it was a great opportunity to comb through the project to add aria labels where they are needed.

I hope this can serve as an introduction to adding aria labels in a React/NextJS project.

Landing Page

landing-page-one

On the landing page we have a few items to address. Using Firefox's Accessibility Inspector we can see multiple issues in the header alone.

Screen Shot 2021-04-06 at 11.35.58 AM

Burger Menu

First and foremost I want to make sure the burger menu is accessible and makes sense to everyone. Adding an aria-label easily removes our warning.

<button 
  className={ menuOpen ? "burger-btn active" : "burger-btn"}
  onClick={handleMenuToggle}
  aria-label="open main menu"
>

But, you may notice that this button is a toggle button, so what happens when our menu is open?

Screen Shot 2021-04-06 at 11.42.25 AM

Our label informs our user that this button will "open main menu". But the menu is already open, and visually we are showing a huge X, so this is rubbish.

Using the same ternary logic I used for my button className, I can update the aria-label to change based on the state.

<button 
  className={ menuOpen ? "burger-btn active" : "burger-btn"}
  onClick={handleMenuToggle}
  aria-label={ menuOpen ? "close main menu" : "open main menu"}
>

Now our aria label updates with our menu opening and closing. When I use voice-over I hear "open main menu, button" when I apply focus (tab to the button) and when I hit enter, I hear "close main menu" immediately. That worked better than I even though honestly.

Page Header

My site title is "C&G", which doubles as a link to the landing page, though I am not sure you'd never know that from the voice over. What I currently hear is "link, C & G". I'm going to add an aria label to this as well.

<Link href="/">
  <a aria-label="c & g home page">C<span>&</span>G</a>
</Link>

Now I hear "link, c & g home page" when I apply focus to the element. If this link element looks strange, just know I'm using NextJS along with React.

Cart Icon

Next up is our cart icon. The code currently reads as such

<button 
  className="header-cart"
  onClick={handleCartPreviewClick}
>
  <img className="cart-vector" src="/shopping-cart-vector.png"></img>

  {context.contextCart.length > 0 ? 
  <span className="cart-count"> {context.contextCart.length}</span>
  : null }
</button>

I immediately notice some issues. For one, my image tag has no alt attribute. While I'm fixing that, I can add a ternary aria label just like our burger menu button.

<button 
  className="header-cart"
  onClick={handleCartPreviewClick}
  aria-label={ cartPreview ? "close shopping cart preview" : "open shopping cart preview" }
>
  <img 
    className="cart-vector" 
    src="/shopping-cart-vector.png"
    alt="shopping cart" 
   />
{context.contextCart.length > 0 ? 
    <span className="cart-count">{context.contextCart.length}</span>
: null }
</button>

That solves the same issues I had with my burger menu toggle button. Although when I use the screen reader I only receive information about the image inside the button, or the span when I am first loading the page. I'm not thrilled about that, I'd like to have the number of cart items be relayed somehow. I am going to try to add that into the button's aria label.

I attempted to interpolate my cart items length into the aria label, but that doesn't work. So I will leave that issue open for now. At least the button instructions make sense now.

Conclusion

Well addressing only the header took a while, so I will have to write another article detailing the slider on the landing page and digging further into our cart items - which I fear aren't laid out too well.

If you'd like to see the page as it stands currently or checkout out the code the links are included below.

live page
github repo


This content originally appeared on DEV Community and was authored by JD Brewer-Hofmann


Print Share Comment Cite Upload Translate Updates
APA

JD Brewer-Hofmann | Sciencx (2021-04-06T16:41:01+00:00) Aria Labels here we come. Retrieved from https://www.scien.cx/2021/04/06/aria-labels-here-we-come/

MLA
" » Aria Labels here we come." JD Brewer-Hofmann | Sciencx - Tuesday April 6, 2021, https://www.scien.cx/2021/04/06/aria-labels-here-we-come/
HARVARD
JD Brewer-Hofmann | Sciencx Tuesday April 6, 2021 » Aria Labels here we come., viewed ,<https://www.scien.cx/2021/04/06/aria-labels-here-we-come/>
VANCOUVER
JD Brewer-Hofmann | Sciencx - » Aria Labels here we come. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/06/aria-labels-here-we-come/
CHICAGO
" » Aria Labels here we come." JD Brewer-Hofmann | Sciencx - Accessed . https://www.scien.cx/2021/04/06/aria-labels-here-we-come/
IEEE
" » Aria Labels here we come." JD Brewer-Hofmann | Sciencx [Online]. Available: https://www.scien.cx/2021/04/06/aria-labels-here-we-come/. [Accessed: ]
rf:citation
» Aria Labels here we come | JD Brewer-Hofmann | Sciencx | https://www.scien.cx/2021/04/06/aria-labels-here-we-come/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.