Categories
Accessibility CSS HTML Web

Always Use <main>

Confession time. Do you need to make accessibility a higher priority in your work?

I know I do. Over the last several months, I’ve made a big push to learn more about the core technologies that make the web accessible to everyone. But, I still need to do way more in the area of accessibility.

Too many websites, some of my own 😳, lack(ed) the fundamental building blocks of accessible design. Often we will claim “the budget” or “the scope” does not include accessibility “enhancements”. However, I’ll be the first to confess the real reason is usually laziness or the mindset of “it doesn’t affect me”.

We must remember that accessibility is not about coding. Accessibility is really about the deeper things we teach our children: love, kindness, generosity, hope, and empathy.

In the end, accessibility starts with our belief system, not code. So, lets practice love and empathy moving forward.

To get us started, here is a low-hanging-fruit list I think encapsulates the accessibility work we neglect most:

  • Not taking the time to add CSS proper hover, focus, and active states to interactive elements.
  • Ignoring the need to test colors for accessibility.
  • “Forgetting” to add ALT text to <img> tags.
  • Because we don’t take the time to consider semantics HUGE overuse of <div> tags.
  • Hiding elements on the page that screenreaders should be able to access.
  • Not marking up forms properly with input labels and ARIA attributes.
  • Adding keyboard access to everything.

I want to ask this one thing of you.

Take some time and think about your own habits and make your own list. Start a small list like the one I’ve shared. Make it a goal to increase your love, kindness, generosity, hope, and empathy for those with disabilities and those who are impaired at any level.

To help us get started I have a simple takeaway: Always use the <main> tag. Adding the tag is easy and can move us toward the goal.

As Nicolas puts it:

What is the <main> tag and why is it important?

Before we begin, imagine with me for a moment that you are blind or impaired (if you need to). Imagine, you are going to a website and want to access the main content of the page. When you enter the website your screen reader starts reading off all of the navigation links and text at the top of the page… on every page you visit… before you can access the main content. Feeling frustrated?

The <main> element fixes this issue by allowing screen readers to skip right past the navigation and directly to the main content. Massive time-saving win!

I’m not going to get into the history of the <main> tag and its inclusion into the HTML5 family. What is important to know is that adding the <main> tag to each project you build makes an impact on your site’s accessibility with no cost to you in terms of “time to build”.

When your site includes a main element it can be like adding a skipnav to your website with just two lines of code. Now, all sites should have a skipnav including those that use a main element (more on this later). But, we are taking small steps right now. You need to crawl before you walk after all.

Here is what is you need to know about the <main> tag:

  • You can only have one <main> tag on a page and it can not be nested inside other HTML5 tags like <article> or <section>.
  • In modern browsers, the role=main landmark is natively conveyed by <main> (the main landmark gives you the pseudo skipnav). The screen readers JAWS, NVDA, and VoiceOver have the ability to navigate to using ARIA landmarks. However, if your users are not using a screen reader their browser will need a plugin to utilize landmarks.

Let’s use the <main> tag in an HTML document and see what it looks like.

<body>
  <header>
    <!-- navigation and header content -->
  <header>

  <main id="main">
    <!-- main page content -->
  </main>
  
  <footer>
    <!-- footer content -->
  </footer>
</body>

And, there you have it. Two lines of code and your site is more accessible. There is simply no reason not to include a <main> element over a <div> element in every project.

If you work on a team or lead a team, be sure to include the <main> tag in your accessibility audit. I’ve let this slide to many times on teams that I’ve lead. We can not assume our team members added the tag. Check for it in your processes.

Adding a Skipnav

So, you have a <main> element. With all seriousness, this is worth celebrating. Nice work!

Let’s go a step further and add a genuine Skipnav to cover our bases and make the main content of the web page accessible to many more people.

Great news here too. Adding a true Skipnav is very easy. Take a look at the HTML needed.

<body>
  <a href="#main">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main">
    <!-- main page content -->
  </main>
</body>

As you can see. A true Skipnav is simply a link at the top of the page that lets users skip the main content of the page.

All that is left is to style the Skipnav with CSS so it doesn’t break the design of our website while also remaining accessible. To accessibly hide the Skipnav you can use the following CSS.

/* Both */
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

Next, update the HTML.

<a class="sr-only skipnav" href="#main">Skip to main content</a>

Finally, we need to handle how the skip nav looks when it has focus (it will only be hidden when it is out of focus). Focus will happen when a user tabs through the website.

.skipnav:focus, .skipnav:active {
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 10px;
  border: 1px solid blue;
}

Now, doesn’t it feel good to do good? With just a little bit of HTML and CSS, you have given the web page a new level of accessibility and shown love to all users.

Thanks for being awesome!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.