search

kieffer-reitenbach / kraken-good-accessibility

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

Kraken Completed #3

Open kieffer-reitenbach opened 2 years ago

kieffer-reitenbach commented 2 years ago

Hey Wendy! I fixed those issues and also added that hover feature with the black box. It has a radius to it but otherwise it's the same and works well. Hopefully that's okay. Thanks!

@wendywarren

wendywarren commented 2 years ago

Hi @kieffer-reitenbach!

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.

Also, since the image is followed by a description you could have changed the content to be within a <figure> like so:

  <figure>
    <img src="images/kraken.jpg" alt="">
    <figcaption>“I remember perfectly to have seen a large vessel drawn under the waves by an octopus’s arm.”</figcaption>
  </figure>

Almost everyone missed the black outline in the screenshots. It's a focus rectangle changed to be black to stand out more than the default blue outline. Adding this to the css would have adjusted it.

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

I hope all of this makes sense. Let me know if you have any questions. I'll go and give you full marks in the progress site.

Thanks! Wendy