search

LenkaZhao / kraken-good-accessibility

Fix some HTML semantic accessibility problems for VoiceOver & some CSS design-specific problems.
0 stars 0 forks source link

Kraken - completed #1

Open LenkaZhao opened 2 years ago

LenkaZhao commented 2 years ago

@wendywarren

wendywarren commented 2 years ago

Hi @LenkaZhao,

I apologize for my late feedback on your assignment. Overall, it was well done! I just have a couple follow-up comments. Nothing that needs to be corrected as it wasn't a requirement in Markbot for the assignment but thought I'd point it out.

The solution for the assignment expects the H1 and H2 to be within an hgroup like so:

<hgroup>
  <h1>Chapter XVIII</h1>
  <h2>The Poulps</h2>
</hgroup>

This is actually incorrect as <hgroup> has been removed from the HTML5 spec so you didn't need to wrap it anything. That was an error in the assignment.

I can see where you were going with <section> but you would actually use <section> for pieces of content that are similar in theme. Each section would normally have a heading (h1-h6) and some additional content. Here is some more info: https://www.w3docs.com/learn-html/html-section-tag.html

I noticed you included an aria-label for the <H2>. The aria-label attribute would be used as you correctly did with the links. It gives users with assistive technology more information on where the link is taking them. Maybe you could have been a bit more descriptive as in "Go to next chapter". You wouldn't include on a heading because the heading isn't linked to anywhere and doesn't require any additional information for the user.

The div with the chunk of content and <figure> should be assigned the role="main" since this area is considered the primary content of the this page. Since each page has the header, main nav and footer nav, a user with assistive technology might want to jump to the main section of the page. Hopefully that makes sense.

Overall good job!

Wendy