search

flaminghot-cheesepuff / kraken-good-accessibility

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

Kraken - completed #2

Open flaminghot-cheesepuff opened 2 years ago

flaminghot-cheesepuff commented 2 years ago

@wendywarren

wendywarren commented 2 years ago

Hi @flaminghot-cheesepuff,

I just ok a look at your assignment and have a couple small suggestions.

The div 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.

It was correct for you to include a description within the alt attribute for the images but you might want to describe the icon itself vs. where the button goes - that information was appropriately placed within the aria-label attribute. So for example a simple "previous icon" would be perfect.

Images normally do need an alt attribute but there are two exceptions to this rule: if the image has a caption within a figure element as we do in this assignment or if the image is purely decorative which in that case you would leave the alt attribute empty and assign it the role="presentation".

Lastly, the screenshot shows the main nav is in focus. This is the css you were missing so that the focus rectangle stands out a bit more.

nav a:focus {
  outline: .15rem solid #000;
  outline-offset: .1rem;
}

This last hint wasn't required for Markbot but thought I'd share because I think quite a few people missed it.

Overall, good job! If you'd like to update the assignment for your own learning purposes that would be great but as far as required changes, you completed them all so I will give you the full mark.

Thanks, Wendy