A11y Demo

by reesewill

HTML

<html lang="en">

  <head>

  </head>

  <body><!-- role=document -->
    <header role="banner" id="masthead"><!-- デフォルトロール: article, aside, main, nav, sectionの子供の場合は違います -->
      <a id="logo-link" href="/"><img alt="logo" src="http://placehold.it/80x80"></a>
      <nav id="primary-nav-wrap" role="navigation" aria-label="primary"><!-- デフォルトロール -->
        <ul id="primary-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">Articles</a></li>
          <li><a href="#">Videos</a></li>
          <li><a href="#">History</a></li>
        </ul>
        <div role="search">
          <form method="post" action="/">
            <input name="query" type="text"><input type="submit" value="Go">
          </form>
        </div>
      </nav>
    </header>
    <main role="main"><!-- デフォルトロール -->
      <nav id="article-filters" role="navigation" aria-label="filters"><!-- デフォルトロール -->
        <ul>
          <li><a href="#">Politics</a></li>
          <li><a href="#">Entertainment</a></li>
          <li><a href="#">Weather</a></li>
          <li><a href="#">International</a></li>
        </ul>
      </nav>
      <article role="article" aria-labelledby="article-title"><!-- デフォルトロール -->
        <h1 id="article-title">Lorem ipsum dolor</h1>
        <section role="region" aria-label="article content"><!-- デフォルトロール：aria-label, aria-labelledby, titleがある場合のみ -->
          <p id="article-content">Lorem 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>
        </section>
        <section role="region" aria-label="sponsored content">
          <a href="#"...

SCSS

ul {
  list-style-type: none;
  padding: 0;
}
#article-filters {
  padding-right: 40px;
}
#logo-link {
  display: inline-block;
  margin-right: 20px;
}
#primary-nav {
  li {
    display: inline-block;
    margin-right: 10px;
  }
}
#primary-nav-wrap {
  display: inline-block;
  vertical-align: top;
}
#masthead {
  border-bottom: 2px solid black;
  padding-bottom: 10px;
}
#footer {
  clear: both;
}
#aside {
  width: 30%;
  float: right;
}
.sponsor-link {
  display: block;
  text-align: center;
}
main {
  box-sizing: border-box;
  float: left;
  display: flex;
  width: 70%;
}
aside {
  box-sizing: border-box;
  padding-left: 40px;
}
img {
  max-width: 100%;
}








/* 
main {
  background-color: red;
}
aside {
  background-color: blue;
}
header {
  background-color: green;
}
footer {
  background-color: yellow;
} */