Importance Of Semantics (For Designers and Developers)

Semantics are the backbone of web accessibility, and it’s important that both designers and developers familiar with the semantic meaning of elements.

In this presentation, I will begin by demonstrating a simple, styled page with elements that users may come to expect from any typical website; header, navigation, hero image, body content, contact form, sidebar, and a footer. This simple page will be constructed using basic div’s and span’s, with CSS to provide a nice presentation and layout. By all accounts, this will be a successful implementation as it will have matched the designers intent, and CSS used will be lightweight and “maintainable” and may even follow best practices for CSS architecture. (Note: Demonstrating CSS best practices will be out of scope. It may not make sense that an engineer will follow CSS architecture and not use proper semantics, so this part is pending final example design/ implementation but might help to prove a point.)

After briefly going over the mock-up and code, I will demonstrate using this page with a screen reader, most likely Safari and Voice Over. This exercise will allow attendees to experience first hand the impact of lacking semantics.

Of course, I will then show an example of the same page using the same CSS but using the proper semantics. Again, I will use Safari and Voice Over to demonstrate the improved experience when using the proper semantic elements.

The important goal of this exercise is to reinforce to attendees the idea that whatever is presented visually is also presented programmatically.

Just as bad, or worse, than not using semantics is using the wrong semantic elements, or using elements in the wrong way. I will go over a few examples of this, starting with the classic link vs button. I will also briefly talk about proper use of the address tag, tables, description lists, section vs article, bold vs strong, and em vs italic, just to name a few.

One important element I do want to spend some time on is the checkbox. Being a simple binary control, it is often misused in many different ways. In some cases, it’s morphed into acting like radio button or as a trigger for other things. Sometimes it’s used with dual meaning depending on other selections, which can be very confusing for users. I also want to caution attendees from being tempted to build their own checkbox, which can be easy to do using custom styles, JavaScript, and a few ARIA roles, properties and states.

That will finally lead us into a discussion about the well known first rule of ARIA, with some supporting information and examples using the periodic table of HTML5 and ARIA roles and states. I hope to leave the attendees with a greater awareness of available elements and proper usage.

For designers, this session help introduce them to the importance of knowing the proper semantics of the elements they use to design with, hopefully being careful to start designing with the right ones.

For developers new to accessibility, this will reinforce the importance of using the proper elements and not being tempted to create their own implementations.

For both audiences I hope I can expose attendees to the benefits of starting with semantic elements; saving time by not having to reinvent/ reengineer the wheel, reducing surface area for defects, and being accessible from the start.