From Front Desk to Front End p.42 Portfolio Polish and Nuances of Aria-Labels

Cover art by Matt Briney on Unsplash

Hi, I'm Tauri!

I am a Front End Developer and a student (and enrollment counselor) with Skillcrush, the online coding and design school with a heart! I am open for employment with a company, and working on adding to my skillset every day! This blog is chronicling my most recent projects, so thank you for reading!

So last week I polished up my portfolio and added my most recent projects (House of Light and the Zero-Waste Recipe App) to it, as well as links to the repos of all my projects.

One of my prerogatives was to update my code to make it as accessible as I could following what I learned from my web accessibility class with Jon Kuperman thru Frontend Masters. To do this, I had to update the aria-labelling for all of my links and the tooltip for my avatar.

This was much easier said than done, and but the end I ended up with a 100% rating for accessibility thru Lighthouse!

• Labelling seems simple, but doing it in the wild requires some nuance.

Here is an example of code from my portfolio:

<div class="project-1 project-container">
 <figure>
  <a 
   aria-describedby="link__desc"
   aria-labelledby="project-1__label"
   href="https://chingu-voyages.github.io/v46-tier1-team-06/" 
   target="_blank">
    <img src="img/zero-waste-recipes.png" alt="Recipe app thumbnail">
  </a>
 </figure>
 <label for="project-1" id="project-1__label">
 <h4 id="project-1" class="project-headline">
  <a
   class="project-headline__label"
   aria-describedby="link__desc" 
   href="https://chingu-voyages.github.io/v46-tier1-team-06/"
   target="_blank">
    <span class="sr-only">Live Site</span>Zero-Waste Recipes
   </a>
  </h4>
 </label>
 <div class="project-description-container">
  <p class="project-description">
   Responsive app to search one ingredient and display recipe 
   summaries and details from an API. 
  </p>
  <p>
   <span class="highlight-one">Skills:</span> Vanilla JS | 
   Sass | API | SCRUM
  </p>
  <p>
   <span class="highlight-two">Tools:</span> VS Code | Github | 
   JIRA
  </p>
 </div>
 <div class="project-buttons-container">
  <a 
   class="button site-button"
   aria-describedby="link__desc"
   aria-labelledby="project-1__label"
   href="https://chingu-voyages.github.io/v46-tier1-team-06/" 
   target="_blank">
    Live Site
  </a>
  <a 
   class="button repo-button"
   aria-describedby="link__desc"
   aria-label="Zero-Waste Recipes Repo"
   href="https://github.com/tauri-st/v46-tier1-team-06" 
   target="_blank">
    Repo
  </a>
 </div>
</div>

The "link__desc" some of my my aria-describedby attributes is is hidden text at the beginning of my portfolio for all of the links on my portfolio that navigate to a different website and open a new tab, as a little forewarning.

I wanted all of the links to the live site to refer to the name of the project, declared in the h4 headline, as the label for the link. This makes it easier for me to pop in new projects without having to rewrite much of the code and only update the content directly. One of the challenges of this was pointed out to me thru Lighthouse that I hadn't quite absorbed yet (but have now!): your accessible name (the aria-label) should match the given label. This came up specifically in reference to the link-button with the label "Live Site" when I didn't previously have "Live Site" in the h4 text. So I added it in to be readable to screen reader only to resolve this issue.

• Making a tooltip accessible.

I learned more about this from MDN docs.

<div class="avatar-container">
 <label for="avatar" class="sr-only">My stepdad made my amazing avatar! porterjohn.com</label>
  <figure id="avatar" aria-describedby="avatar-attribution">
   <img src="img/avatar.png" alt="avatar of a girl with multicolor braids using code to fly a spaceship" >
  </figure>
  <div role="tooltip" id="avatar-attribution">
   <p>My stepdad made my amazing avatar! porterjohn.com</p>
  </div>
</div>

I went beyond what MDN Docs recommended to make it accessible by also adding an sr-only readable label bc the NVDA screen reader I was using to test everything wasn't picking up on what the tooltip said.

So that's it for me from last week!

Up and coming: I am starting to work on updating my React skillset by learning how to use Hooks with functional components!! 💪 Stay tuned! ✨