Kraken - Completed

[brendendizon]

@wendywarren Thanks for the help and clarification today!

[wendywarren]

Hi @brendendizon!

I took a look at your assignment and overall you seem to have grasped the accessibility part of the exercise, I just have a couple of comments when it comes to the structure. No need to make adjustments, you've received full marks but I think this will help for future assignments.

It looks like you added a <main> to hold the chapter header, chunk of content and footer. I can see why you would have thought that was necessary being that in the past our structure has been <header> <main> and <footer> but for this assignment we wanted to replace existing divs with appropriate elements.

The main header and footer would display on each page of this website. The content in between is specific for each chapter. Because it's an independent piece of content and changes from page to page, we would use an <article> to hold this content. We can open it above the header holding the headings and close after the footer holding the nav like so:

<article>
    <header>
      <hgroup>
        <h1>Chapter XVIII</h1>
        <h2>The Poulps</h2>
      </hgroup>
      <nav role="navigation">
        <ul>
          <li>
            <a href="chapter-xvii.html" aria-label="Go to previous chapter">
              <i class="icon" role="presentation"><img src="images/icons.svg#prev" alt="next icon"></i>
            </a>
          </li>
          <li>
            <a href="contents.html" aria-label="Go to table of contents">
              <i class="icon" role="presentation"><svg><use xlink:href="images/icons.svg#contents"></use></svg></i>
            </a>
          </li>
          <li>
            <a href="chapter-xix.html" aria-label="Go to next chapter">
              <i class="icon" role="presentation"><svg><use xlink:href="images/icons.svg#next"></use></svg></i>
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <div role="main">
      <p>For several days the Nautilus kept off from the American coast. Evidently it did not wish to risk the tides of the Gulf of Mexico or of the sea of the Antilles. April 16th, we sighted Martinique and Guadaloupe from a distance of about thirty miles.</p>
      <p>“Yes; friend Ned. In a picture representing the poulp in question.”</p>
      <p>“Good!” said Ned Land, bursting out laughing.</p>
      <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>
      <p>“He is quite right,” I said. “I have heard of this picture; but the subject represented is taken from a legend, and you know what to think of legends in the matter of natural history. Besides, when it is a question of monsters, the imagination is apt to run wild.</p>
      <p>Ned bowed without replying. The combat had lasted a quarter of an hour. The monsters, vanquished and mutilated, left us at last, and disappeared under the waves. Captain Nemo, covered with blood, nearly exhausted, gazed upon the sea that had swallowed up one of his companions, and great tears gathered in his eyes.</p>
    </div>
    <footer>
      <nav>
        <ul>
          <li>
            <a href="chapter-xvii.html" aria-label="Go to previous chapter">
              <i class="icon" role="presentation"><svg><use xlink:href="images/icons.svg#prev"></use></svg></i>
            </a>
          </li>
          <li>
            <a href="contents.html" aria-label="Go to table of contents">
              <i class="icon" role="presentation"><svg><use xlink:href="images/icons.svg#contents"></use></svg></i>
            </a>
          </li>
          <li>
            <a href="chapter-xix.html" aria-label="Go to next chapter">
              <i class="icon" role="presentation"><svg><use xlink:href="images/icons.svg#next"></use></svg></i>
            </a>
          </li>
        </ul>
      </nav>
    </footer>
  </article>

You will notice the div including the <p> and <figure> is assigned the role="main" and that's because someone using assistive technology can jump to that part of the page for the chapters content. Hopefully that makes sense.

The only other comment I have is that you approached the aria-label correctly in the first nav but in the second you should have been clearer by using aria-label="Go to previous chapter" and better descriptive with what type of icon is was in the alt attribute but since this icon has a role="presentation" the screen reader would ignore the image anyhow... just keep in mind.

Let me know if you have any questions. Otherwise, good job!

Wendy