search

Extenza-Academy / WebDev-100_2021-Q1

24 Lessons, 12 Weeks, Get Started as a Web Developer
2 stars 0 forks source link

1.3.3. Challenge #17

Closed mserykh closed 3 years ago

mserykh commented 3 years ago

🚀 Challenge

Take this HTML and rewrite it to be as accessible as possible, given the strategies you learned.

<!DOCTYPE html>
<html>
  <head>
    <title>
      Example
    </title>
    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="site-header">
      <p class="site-title">Turtle Ipsum</p>
      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
    </div>
    <div class="main-nav">
      <p class="nav-header">Resources</p>
      <div class="nav-list">
        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
      </div>
    </div>
    <div class="main-content">
      <div>
        <p class="page-title">Welcome to Turtle Ipsum. 
            <a href="">Click here</a> to learn more.
        </p>
        <p class="article-text">
          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </p>
      </div>
    </div>
    <div class="footer">
      <div class="footer-section">
        <span class="button">Sign up for turtle news</span>
      </div><div class="footer-section">
        <p class="nav-header footer-title">
          Internal Pages
        </p>
        <div class="nav-list">
          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
        </div>
      </div>
      <p class="footer-copyright">&copy; 2016 Instrument</span>
    </div>
  </body>
</html>
mserykh commented 3 years ago 
<!DOCTYPE html>
<html>
  <head>
    <title>
      Example
    </title>
    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <header class="site-header">
      <h1 class="site-title">Turtle Ipsum</h1>
      <h2 class="site-subtitle">The World's Premier Turtle Fan Club</h2>
    </header>
    <nav class="main-nav" role="navigation">
      <h3 class="nav-header" id="resources">Resources</p>
      <ul class="nav-list" aria-labelledby="resources">
        <li class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y" aria-label=”Watch video on Youtube”>"I like turtles"</a></li>
        <li class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle" aria-label=”Read an Wiki article about turtles”>Basic Turtle Info</a></li>
        <li class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)" aria-label=”Read an Wiki article about chocolate turtles”>Chocolate Turtles</a></li>
      </ul>
    </nav>
    <main class="main-content">
      <article role="article">
        <h3 class="page-title" id="article-title">Welcome to Turtle Ipsum. 
            <a href="" aria-label=”Learn more about Turtle Ipsum”>Click here</a> to learn more.
        </h3>
        <p class="article-text" aria-labelledby="article-title">
          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </p>
      </div>
    </main>
    <footer class="footer">
      <div class="footer-section">
        <button class="button">Sign up for turtle news</button>
      </div>
      <nav class="footer-section" role="navigation">
        <h3 class="nav-header footer-title" id="internal">
          Internal Pages
        </h3>
        <ul class="nav-list" aria-labelledby="internal">
          <li class="nav-item nav-item-bull"><a href="../">Index</a></li>
          <li class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></li>
        </ul>
      </nav>
      <small class="footer-copyright">&copy; 2016 Instrument</small>
    </footer>
  </body>
</html>
dev-experience commented 3 years ago

Consider using:

mserykh commented 3 years ago

Updated the html mark-up:

  1. Added small for the copyright
  2. Added aria-labelledby, please see how it should work in the video