Key HTML Elements

Wed Apr 12 2017

In the previous post we went over semantics and the Accessibility tree. While testing the structure of your Web App and composing functionality it is good to have in mind some key elements that will help you with Accessibility.

Headers

While constructing our websites the way we place the headings is important. Headings have a priority of <h1> to <h9>. So we can structure our site in different sections where like writing a book we can organize the content and the headings accordingly.

Links

As you’ve understood till now, links are really important while navigating through our page.

But be aware, we can link through content with JavaScript. But this won’t offer the semantic information needed for assistive technology and search engine bots as well.

<div onclick="goSomewhere()">Go to page</div> or <a onclick="goSomewhere()">Go to page</a>

So while using links the href attribute would be better and the text of the link should determine the purpose of the link

<a href="https://www.fullstackweekly.com">Full Stack Weekly</a>

Labels

While creating forms and input/select elements you can use the label element to link an input with the label to offer a name for that input.

<form action=”/action_page.php”>
<label for=”male”>Male</label>
<input type=”radio” name=”gender” id=”male” value=”male”><br>
<label for=”female”>Female</label>
<input type=”radio” name=”gender” id=”female” value=”female”><br>
<label for=”other”>Other</label>
<input type=”radio” name=”gender” id=”other” value=”other”><br><br>
<input type=”submit” value=”Submit”>
</form>

 

Images

While using images something that is usually ignored is the alt attribute. This is important because assistive technology will use this value for visually impaired users. Also, this value is used if the images don’t appear on your site.

<img src=”./image.png” alt=”Black Cat”/>

HTML5 Elements

Lastly, don’t forget the <nav>, <main>, <article>, <aside>, <section>, <footer> elements to give context to various sections of your page.

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!