Skip to content

Instantly share code, notes, and snippets.

@benschwarz

benschwarz/index.html

Last active November 6, 2023 21:10
Show Gist options
  • Star 28 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save benschwarz/1106038 to your computer and use it in GitHub Desktop.
Save benschwarz/1106038 to your computer and use it in GitHub Desktop.
Download ZIP
Using ARIA roles with <header>, <footer> and <aside>
Raw
index.html
<!doctype html>
<html>
<body>
<header role="banner">
<a href="/" rel="home">My company</a>
<nav role="navigation">
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<section role="main">
<h1>The meat and potatos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<footer role="contentinfo">
<p>© Copyright Ben Schwarz 2011</p>
</footer>
</body>
</html>
@seanwalsh
Copy link

Shouldn't section be a main element?

@professordino
Copy link

I would concur with Sean.

@tomprogers
Copy link

Agreed re: <main role="main">

Also: "potatoes"

@benschwarz
Copy link
Author

@seanwalsh, @professordino — <main> didn't exist in 2011.

@ozanmuyes
Copy link

@benschwarz so why not back to the future and update the gist?

@lukewatts
Copy link

If you put

you don't need the role at all. Screen readers and assistive tech will understand what it is just fine.
The role attribute is for areas where there is some ambiguity or possible confusion. Like headers, navs and footers which can be placed in different contents and multiple areas throughout a page. Or if you explicitly want to use an element for something it's not normally used for. LIke an li as a button:
  • Button

    • Also there can only be one

    element per page. Unlike header, footer, nav which can be in numerous contexts. Just FYI

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment