This is the easiest step to implement for your site when it comes to accessibility. Let's stop using <div> for headers and footers when
we can just use the proper <header> or <footer> tag.
Screenreaders have shortcuts for users that will target headers or headings first, but requires the correct markup. If you are starting a fresh project, consider using a template like the one below:
html<body><header><nav>Logo and list items here</nav></header><main>All of your main content should go here</main><footer>site footer</footer></body>
Within your <main>, you should also try to be as detailed as possible when it comes to your components.
I have worked a ton of e-commerce sites, so I'll use a PLP (product listing page) as an example.
A PLP typically has a filter, and a list of products. Some of them have a "Recommended For You" carousel beneath the list, or a
"Recently Viewed" slider. I would write the html within the <main> to look something like this:
NOTE: Place the filters first if it on the LEFT so it's in the correct order when the user is tabbing through the page. I'm thinking of making a video on this, not sure yet. For this example, the filters are seen on the left side of the page, the products list on right. It may sound obvious but this is an issue that has been flagged on a lot of sites I've worked on during QA tests.
html<main><h1>PLP example</h1><aside class="filters"><h2>Filter By</h2><div id="colors"><p>Colors</p><ul><li>Red</li><li>Blue</li></ul></div></aside><section><ul><li>Product #1</li><li>Product #2</li></ul></section></main>
It's also important to note that the headings should be in order, i.e, H1, then H2, then H3. When using a screenreader like NVDA, users
can press 'h' and it will tab through the page headings in order. If there's an H3 on top and an H1 on the bottom of the page,
it will go to the bottom of the page first since it's an h1.
As a best practice, there should only be one <h1> per page. I've seen some sites where they will make the "logo" the h1, but that's not
a great solution. The h1 should always be the main title of the page... if it's a product page, it should be the product name, if its a product category
page, it should be the category name, and so on.
Below are the html tags that I have used the most along with a short description. Get used to working with these tags instead of using <div>. You will create a better
experience for users overall!
HTML Tags
<article> - Use for a blog post, article
<aside> - Use for content that lives next to the main content, like a filter
<footer> - Use for your site's footer
<header> - Site header
<main> - main page content lives in here
<nav> - your site's navigation
<section> - this is a section of your page, could be a slider, a hero
view all posts