Today's modern monolithic web frameworks have eschewed the semantic web
elements for a bland palette of divs and spans. Rather than use the
browser's default styling we completely reset the css, assign classes,
add our own styles, and re-invent native controls with our own
javascript methods. Is this decision something to be lauded? This isn't
a tutorial about how to write semantic HTML.
What makes <div class="navbar"></div> better than <nav></nav>? Or
<span class="text-lg"></span> better than <h1>? There's not exactly
a clear explanation. Here's a few excuses that float around the web
development space regarding the reluctance to use elements with
no corresponding role.
This argument tends to falter against examples of larger applications where virtually all styling is abstracted out to semantic CSS classes. No reasonable web developer is creating selectors like:
/* If you are doing this: don't do this */
div.container div div {
padding-left: 6px;
}
Element-level selectors are absurd when you scale past a simple static
landing page and that's not even mentioning the nested parent to child
structure. We instead prefer to assign semantically named classes to
our elements and selectors on a single class or ID like .banner-image,
.blog-posts, and .header-text. If we accept semantics in our CSS
then why are we opposed to it in our HTML?
The idea that your web application may appear inconsistent to users with different browsers tends to be extremely unacceptable to designers and product managers. I personally disagree with this opinion, just as the user is free to choose their browser they should also be free to choose the look and feel of the sites they visit.
Disregarding my opinion, the same CSS resets I mentioned earlier are present and common in many popular web frameworks. I can understand and acknowledge the concern for consistent styling but this argument fails due to the fact that we already tend to do what we can to replicate user experience among all browsers.
Developers may be concerned that their precious reusable modules may not be reusable anymore and render poorly depending on the context where they're inserted (This is an actual argument I've heard from professional web developers).
Obviously absurd, either their CSS selectors are immeasurably fragile,
or the semantics of their design is flawed. If replacing your elements
with their semantic equivalent results in illegal HTML then the user
experience should likely be redesigned. A <button> is still a
<button> regardless of where it's inserted as long as it's within
permitted Content Categories.
Accessibility is a real concern. As of 2018 there are over 7.5 million Americans with a visual disability. Needless to say, Screen reader usage will likely become more prevalent as the web sees an increasing amount of traffic. Surveys indicate that many visually impaired users report that the web has not become more accessible and the reason for this inaccessibility is due to a lack of awareness or lack of skills/knowledge.
It's not difficult to design for screen reader compatibility. Organizing content in reasonable ways doesn't require much effort, and it helps everyone navigate your website. If it's too daunting of a task to restructure your HTML or rewrite you CSS selectors, we can at least start with trying to reintroduce semantic structure back into our web applications.
If you have used Google's lighthouse software to determine the accessibility of your website, you may be misleading yourself about its actual performance. Lighthouse tends to check that you're not breaking the rules rather than following best practices. I received a perfect score
on my lighthouse report before I even added any skip links. I'm not visually impaired but to someone using a screen reader, is that perfect score actually justified?