11.TopStorySection-HuffPostClone
HuffPost Clone - Top Story Section
Objectives
Part 1. top-story-promo
Explain BEM naming
aria-hidden and tabindex="-1"
Commit
Part 2. top-story-development
More BEM naming
span not tabable but can remove from accessibility tree
Commit
Completed Top Story Section
Screen Read
Axe Tools
Table of contents
Top Story Promo
Code:
<section id="top-story" class="top-story">
<div class="top-story-promo">
<a aria-label="BORIS TELLS UN: KERMIT THE FROG WAS WRONG"
href="https://www.huffingtonpost.co.uk/entry/boris-johnson-climate-speech-grow-up_uk_614ba488e4b03d83bace97c8"
class="top-story-promo__headline">
<h1>BORIS TELLS UN: KERMIT THE FROG WAS WRONG</h1>
</a>
<a class="top-story-promo__image"
href="https://www.huffingtonpost.co.uk/entry/boris-johnson-climate-speech-grow-up_uk_614ba488e4b03d83bace97c8"
aria-hidden="true" tabindex="-1">
<img role="none" alt="" width="800" height="450" src="../../images/borisJohnson_800w.webp">
</a>
</div>
</section>Recap:
aria-hidden="true" removes an element from the accessibility tree
tabindex="-1" prevents the element from being focusable meaning when a non-sighted user is using tab to navigate the page this element will be skipped
role="none" changes the semantic meaning of the element it is used on from it's default to none, meaning no semantic meaning but it does not remove the element from the accessibility tree
Commit:
git add .
git status
git commit -m "Add top-story-promo section"
git log --oneline
git push -u origin main
Top Story Development
<div class="top-story-development">
<div class="news-card">
<a href="https://www.huffingtonpost.co.uk/news/" class="news-card__category" aria-hidden="true" tabindex="-1">
News
</a>
<a class="news-card__headline"
href="https://www.huffingtonpost.co.uk/entry/boris-johnson-climate-speech-un-twitter_uk_614c2c6be4b098483a71efb2"
aria-label="PM Swiftly Put Down After His Climate Speech: ‘Speak For Yourself Mate’">
<h2>
PM Swiftly Put Down After His Climate Speech: ‘Speak For Yourself Mate’
</h2>
</a>
<p class="news-card__description">
“Apparently, we're meant to take this cartoon clown seriously”
</p>
<div class="news-card__byline">
<span aria-hidden="true">
By
</span>
<a href="https://www.huffingtonpost.co.uk/author/kate-nicholson" aria-label="By Kate Nicholson">
Kate Nicholson
</a>
</div>
</div>
</div>By default containers are not focusable e.g. div's and spans. That's why, in a previous example, you may have noticed tabindex="0" to make a div focusable.
A span will however be present in the accessibility tree by default, that's why we use the aria-hidden="true" attribute on it.
Commit:
git add .
git status
git commit -m "Add top-story-development section"
git log --oneline
git push -u origin main
Completed Top Story Section
<section id="top-story" class="top-story">
<div class="top-story-promo">
<a aria-label="BORIS TELLS UN: KERMIT THE FROG WAS WRONG"
href="https://www.huffingtonpost.co.uk/entry/boris-johnson-climate-speech-grow-up_uk_614ba488e4b03d83bace97c8"
class="top-story-promo__headline">
<h1>BORIS TELLS UN: KERMIT THE FROG WAS WRONG</h1>
</a>
<a class="top-story-promo__image"
href="https://www.huffingtonpost.co.uk/entry/boris-johnson-climate-speech-grow-up_uk_614ba488e4b03d83bace97c8"
aria-hidden="true" tabindex="-1">
<img role="none" alt="" width="800" height="450" src="../../images/borisJohnson_800w.webp">
</a>
</div>
<div class="top-story-development">
<div class="news-card">
<a href="https://www.huffingtonpost.co.uk/news/" class="news-card__category" aria-hidden="true" tabindex="-1">
News
</a>
<a class="news-card__headline"
href="https://www.huffingtonpost.co.uk/entry/boris-johnson-climate-speech-un-twitter_uk_614c2c6be4b098483a71efb2"
aria-label="PM Swiftly Put Down After His Climate Speech: ‘Speak For Yourself Mate’">
<h2>
PM Swiftly Put Down After His Climate Speech: ‘Speak For Yourself Mate’
</h2>
</a>
<p class="news-card__description">
“Apparently, we're meant to take this cartoon clown seriously”
</p>
<div class="news-card__byline">
<span aria-hidden="true">
By
</span>
<a href="https://www.huffingtonpost.co.uk/author/kate-nicholson" aria-label="By Kate Nicholson">
Kate Nicholson
</a>
</div>
</div>
</div>
</section>Last updated
Was this helpful?