Sara-Elmelegy / hear-me-oh-content

Apply content accessibility best-practices while writing semantically appropriate HTML.
0 stars 0 forks source link

issue with label links #1

Open Sara-Elmelegy opened 2 years ago

Sara-Elmelegy commented 2 years ago

Hi @wendywarren, Could you please tell me what is the problem with the code? I can't understand what is Markbot exactly requires as a unique label for the link!

Screen Shot 2021-10-08 at 2 57 55 AM
wendywarren commented 2 years ago

Hi @Sara-Elmelegy!

I took a look and what it's referring to is where you've linked for more information with "Read more". There isn't an issue to have the text on the screen to say Read more but for users with assistive technologies like screen readers, they need more information about where they're clicking through to so we would also include an aria-label like this:

<a href="https://en.wikipedia.org/wiki/Sloth" aria-label="Read more about sloths">Read more</a>

I noticed there are a couple of empty H2 headings which Markbot might catch.

Lastly, you could make use of jump links for a user to click on the li item Sloths or Three toed sloths to jump to that part of the page.

Here's an example:

<nav role="navigation">
  <ol>
    <li><a href="#sloths">Sloths</a></li>
    <li><a href="#three-toed-sloths">Three-toed sloths</a></li>
  </ol>
</nav>

And then later on where the actual content is you would add the id you placed in the nav item like so...

<article id="sloths">
.......
</article>

Here is some more info on jump links: https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page.html

Let me know if you run into any other issues. :)

Thanks! Wendy

Sara-Elmelegy commented 2 years ago

Ok thanks, @wendywarren.