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.
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
<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".
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.
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
Now we don't need to give up
<span> tags altogether, but in specific instances, we should. It's important to note that
<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|
|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.|
||role="banner"||The header element is used for intro content, often with navigation aids. The
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.
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 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.