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:
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
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
Last updated