Let's Talk Semantics
When we are talking about frontend web development what do we mean by semantics and what does it have to do with our software? Additionally, how are semantics interpreted by our users? To say the least, semantics brings some loaded questions to the table. So Let's start by answering the first question.
What do we mean by semantics in frontend web development?
Well, when we refer to semantics, we are referencing our, HTML markup general tags and landmark tags as well as aria role prescribed landmarks. I assume that you're still as confused as Obi-Wan at this point. I'm sure you're all familiar with the <div> or <span> tags because let's be honest they more or less get the job done, so long as we only think of one type of user. And there you have it the segue into what semantics have to do with Accessibility... but that will come later, but remember it because it's important, this relationship between Semantics and Accessibility...
Let's get back on track, Semantics...
As I mentioned earlier semantics in relation to frontend development have to do with HTML markup tags or aria roles. Semantics provides a map in our DOM for our assistive technology users, such as people using screen readers or text to brail keyboards. It keeps our code organized and easy to "read".
What does it have to do with our software?
I answered this a bit in the previous question, but the reason behind coding semantically is to make sure your software is available to be used by everyone, not just the some. There are many disabilities that can prevent someone from fully using your software, whether they be permanent or temporary. So it's important to put thought behind your design and build your software right the first time.
How are semantics interpreted by our users?
There are alternative ways to exploring a website, that you may not experience in your life that tracks the semantics in our code to create a different way of navigation. You see this primarily in screen readers and keyboard-only users. If you want to experience this, there is a free extension for google chrome called
ChromeVox Classic Extension. There are quite few out there, but this is probably the cheapest and easiest to get your hands on. Or simply go to a website and hit the tab key a bunch to see how well you can navigate through a page.
Now we should be able to delve into some of the better semantic elements that you should be using instead of <div> or <span> tags.
But before we go on... a DANCE break
Landmarks & HTML5 tags for better Accessibility
Now we don't need to give up <div> or <span> tags altogether, but in specific instances, we should. It's important to note that <div> and <span> tags have their place along with the other HTML tags that aren't mentioned in this article.
| Tag / Landmark | Aria | What is this used for |
|---|---|---|
| Headers | ||
| h1, h2, h3, h4, h5, h6 | role="heading" | Headings go in order 1 being the most important and 6 being the least and should always go in order never skipped. You should only have one h1 element per page. From this point, elements should be nested to show the importance and create a map for navigating within the page |
| aria-level="1" | aria-level specifies the heading level in the document structure. The default value of 2. | |
| Landmarks | ||
Header <header>
|
role="banner" | The header element is used for intro content, often with navigation aids. The role="banner" only applies to elements within the <body>. If you have multiple <header> tags throughout a page you need to add an aria-label to distinguish between them. |
Nav <nav>
|
role="navigation" | The <nav> tag represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. If you have multiple <nav> tags throughout a page you need to add an aria-label to distinguish between them. |
Main <main>
|
role="main" | The <main> tag represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. If you have multiple <main> tags throughout a page you need to add an aria-label to distinguish between them. |
Article <article>
|
role="article" | The <article> tag represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable |
Aside <aside>
|
role="complementary" | The <aside> tag represents a portion of a document whose content is only indirectly related to the document's main content. |
Section <section>
|
role="region" | The <section> tag represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document. For the section tag to work with assistive technology, it will need to have its aria role asigned |
Footer <footer>
|
role="contentinfo" | The <footer> tag represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents. If you have multiple <footer> tags throughout a page you need to add an aria-label to distinguish between them. |
| Other Elements | ||
button <button>
|
role="button" | A <button> tag is a button and should only be used for interactive functionality, never for navigation. Buttons need clear and understandable text for it to truly be accessible either as a child or via an aria-label. A button has an inherent tab-index so you know that element will be able to be reached by keyboard-only users. |
anchor <a>
|
role="link" | An <a> (anchor)tag should only be used for navigation whether it be within your site or to external locations. Links need clear and understandable text for it to truly be accessible either as a child or via an aria-label. An anchor tag has an inherent tab-index so you know that element will be able to be reached by keyboard-only users. |
Aria roles do not need to be placed on their coinciding HTML5 tag, it would be redundant. The time you use aria roles is if you are making custom tooling or if you are refactoring, but don't have the time completely rewrite to incorporate The above HTML tags.
HTML Semantic Example
HTML5 semantics is well within the best practices for developing accessible software for the web. It's also much easier to read for a developer coming on to a project.
<body>
<header>
<h1>Title which should be rleative to the main topic </h1>
<nav>
<a html="/">Main navigation Link</a>
<a html="/">Main navigation Link</a>
<a html="/">Main navigation Link</a>
</nav>
<button>action item</button>
</header>
<main>
<article>
<h2>Article 1</h2>
<main aria-label="Article 1 main">
<div>
<button>Action Item 1</button>
<button> Action Item 2</button>
</div>
<p> Here's som main content</p>
</main>
</article>
<article>
<h2>Article 2</h2>
<main aria-label="Article 2 main">
<p>some info...</p>
<h3> sub topic in article</h3>
<p>some info...</p>
</main>
</article>
</main>
<footer>
<h2>Copyright 2020</h2>
</footer>
</body>
Aria Semantic Example
Aria semantics are good to know but are not particularly clean or organized for other developers coming on to the project. Aria is really only useful for assistive technology like screen readers.
<body>
<div role="banner">
<div role="heading" aria-level="1">
<div role="navigation">
<a html="/">Main navigation Link</a>
<a html="/">Main navigation Link</a>
<a html="/">Main navigation Link</a>
</div>
<div role="button" tab-index=0>
if you make a "button" out of a div you need a
tab-index of 0 or -1 with a way to change the value
when it is needed.
</div>
</div>
<div role="main">
<div role="article">
<h2>Article 1 - Just use Heading tags</h2>
<div role="main" aria-label="Article 1 main">
<div>
<button>Action Item 1</button>
<button> Action Item 2</button>
</div>
<p> Here's som main content</p>
</div>
</div>
<div role="region">
<h2>Article 2 - Just use Heading tags</h2>
<div role="main" aria-label="Article 2 main">
<p>some info...</p>
<h3> sub topic in article</h3>
<p>some info...</p>
</div>
</article>
</div>
</div>
<div role="contentinfo">
<h2>Copyright 2020</h2>
</div>
</body>
So let's start writing our HTML with Accessibility in mind!!
Thank you so much for making it this far!! please watch out for my content about Accessibility.
Top comments (0)