Accessibility and Semantics in Web Development

Accessibility is an often-underestimated topic in web development.

Let's be honest, as Front End Software Engineers we are usually more concerned about the functionality of new features, UI, UX and implementation of the last beautiful design.

We prototype new ideas and quick functionalities using a matryoshka of <div/> tags and manipulate them with CSS and JS. Sadly enough, some of these kinds of prototypes can even see the light of a live production server, just because we didn't have enough time to rework our HTML structure and make it more semantic.

But why should we care about semantics and accessibility if everything looks beautiful and works just fine?

Making your web app semantic and accessible means making it more descriptive, so everyone will be able to navigate and experience your web app in the way you've designed it.

Here are some easy ways to make a big difference in the accessibility of your web app:

1. Stop using only <div /> elements, instead use more sematic tags like:

   <header />
   <nav />
   <menuitem />
   <section />
   <article />
   <footer />
   

2. Use headings tags for page, section and paragraph titles:

   <h1 />  -  <h6 />
   

3. Use alternate text with alt attribute for your images:

   <img src="logo.png" alt="Company Logo">
   

4. You can use a <figure > tag, which also includes a caption and multi-media resources, instead of just <img >:

   <figure>
     <img src="tree.png" alt="A tree">
     <figcaption> A beautiful green tree near a lake.</figcaption>
   </figure>
   

Some less technical but also easy and important accessibility improvements would be:

1. Choose carefully the colors for your web app. About 8% of the world's population has a red-green color deficiency, so using a lot of these colors will make your web app visually difficult to use.

2. Make your content as descriptive as possible, for example, make your links descriptive, avoid using generic wordings like "Click here".

These are just a few suggestions about accessibility and about how we can make the web more friendly and accessible for everyone.

As collateral damage, accessibility, and semantic HTML improve SEO.