Astronaut in space reaching for the Lost Art of HTML

JavaScript Frameworks & The Lost Art of HTML

Have you searched for a web development job lately? When you look at the required skills for most of the jobs, it will probably say you are required to know React, Vue, Angular or some JavaScript framework, along with SCSS skills, maybe some database knowledge, and near the bottom is HTML. And below that, probably “some knowledge of web accessibility.”

HTML has been the running punchline in the web development community lately. “It’s not actually code,” and, “what? Are you stuck in the 90’s?” are the usual jokes. Heck, it even made the latest Godzilla vs Kong movie, where it was joked about how old it actually is (seriously, near the end of the movie). And sure, HTML is the foundation of all web content, so people think that it’s old, but it is still an absolutely necessary skill to create accessible web content.

We are in the midst of a very large problem in the web development field, where HTML is being left in the rearview mirror in place of JavaScript. The push to know the latest JavaScript framework and understand all its workings vs. knowing how to develop properly with HTML is killing the accessibility of the web. Want proof? Take a look at the latest WebAIM Million survey that looks at the top 1 million homepages. Almost all homepages using a JavaScript framework, with the exception of React, have gained more accessibility issues over the last year! Source: https://webaim.org/projects/million/#frameworks

Believe it or not, there are some web developers that don’t even know that a <button> gives you all the accessibility needed out of the box. Or that other tags such as <nav>, <header>, <footer> give you semantic landmarks on your page. Not only does Semantic HTML describe the functional purpose of your content, but it also defines a proper document structure for the DOM. Semantic HTML comes with built-in accessibility, making assistive technology use easier.

Think about that for a second. These fundamental items of HTML are not even known to a pure web developer. Instead, most examples out on the web are <div> on <div> on <div> with some ARIA sprinkled in (at best)– which is why there is a 25% increase in ARIA use over the last year! What’s even worse is that most developers improperly use ARIA and make content even more inaccessible.  Source: https://webaim.org/projects/million/#aria

The big question with all this is, how did we get here? What happened to knowing the foundations of the web first and foremost over knowing the latest framework or flashy language? Below, I’ll describe a couple of reasons why web developers are forgetting HTML, and also what we can do to recover that lost knowledge in order to build more effective and accessible websites.

HTML is the “old” web

The very first version of HTML was created and published in 1993. Since then, there have been 4 other versions, with the latest being HTML 5 (2012). Each version builds on top of each other, and enhances the capabilities of the markup language. So yes, it is old! But it is used as the foundation for all web content to this day. No matter what JavaScript framework or new tech stack comes out next, at the end of it all, HTML will be the result of the content that is created and consumed online.

However, the stigma that “HTML is ‘old’ web” is alive and well. How can that be if HTML is the output of these frameworks? Unfortunately, HTML is seen as just an endpoint to the slick functionality that JavaScript frameworks bring to the table. There is little need to fully understand all the capabilities that exist both functionally and accessibility-wise. It’s gotten so bad that if you go to find an example of how to set up a component in, let’s say, React, the render() function will contain only <div>. And within that, if you are lucky, you will see ARIA used (more-than-likely incorrectly) on the components themselves. With this stigma of HTML being ‘too old’, we start to see companies want the latest and greatest shiny development frameworks because they think it could help them stay relevant.

Staying Relevant

Of course, staying relevant in the business world, especially from a development standpoint, is a big deal for businesses. Wanting to stay up-to-speed with the latest and greatest in development while also speeding up your web content and being able to handle massive amounts of data is a major perk for using JavaScript frameworks. And not only that, it attracts the top talent from the development field to come work for you.

But this push to stay relevant has now pushed so far that it is fully affecting how the development community views the web and HTML. JavaScript is faster and more powerful, and also can be more complex than HTML. So, the need to learn that trumps that of basic HTML and accessibility. If you wonder where the lack of HTML and accessibility knowledge is largely coming from, it’s the boom from companies to try and stay relevant in an ever-changing development world.

Prioritization of Training/Learning

With the push to stay relevant from companies across the globe, we now have developers both in school and in their careers feeling the pressure to know the latest and greatest JavaScript frameworks before they even know the basics of what you can get with HTML.

So what does a good developer do? They go out and find materials to learn and dive right in! What is majorly lacking in these materials, however, is the basic fundamentals of the web, and that includes HTML.

Now, before I get everyone all riled up: yes, there are plenty of training guides, courses, and even API documentation (React, Angular, Vue) for the frameworks that mention HTML and accessibility. If you want a great example, take a look at EmberJS documentation on accessibility and HTML. It is a step-by-step guide, and it is fantastic!

But unfortunately, it is still not enough. If you look at an average course on major learning sites, most have a call-out to an article or an “optional” training piece that tells you to look at this portion ‘really quick’ to understand HTML. That simply is not enough for a developer who is new to web development or maybe upskilling from a different development language to sufficiently learn HTML. And, even those that do have great content on HTML, the developers may gloss over it simply because they want to get to “the good stuff” and what they need to get the skills up.

Anybody can code HTML

The final piece of the puzzle that builds on top of all 3 the reasons listed above, is that anybody can build HTML and be a web developer. A perfect example of this I once saw on a chat board: Person 1 asks, “How well do you know HTML or web development in general?” Person 2 replies, “I know React.” Think about that reply– someone who isn’t familiar with web development was put into a position to learn React, but doesn’t even know that HTML is a part of React!

As wild as this sounds, this is something I see far too often. There aren’t enough developers to fill web development roles, and so the prevailing mindset is that web development is “easy” and “anybody can do it.” Now, the person developing has no true knowledge of web development, and what do they do? Go through the whole cycle above and try to get up to speed as quickly as possible, which in turn leaves the basics of HTML and accessibility in the dust!

What can we do?

HTML is the fundamental language of the web, and it will be forever no matter how many different frameworks or tech stacks try to change the way in which we develop it. Whenever this topic comes up to folks I work with, the first thing that they ask is “What can we do?” The solution is not a simple answer, but there are some things you can do to try to get well-rounded web developers.

  • Take 10 minutes a day to train yourself or the development team in semantic HTML.
  • Make code reviews of rendered HTML prioritize semantic HTML.
  • Find training or courses that require HTML and web fundamentals before the in’s and out’s of the framework.
  • Prioritize accessibility in the build process, as this can lead to more use of semantic HTML
  • Use a tool like the free axe DevTools Browser Extension when developing your content, which includes free Deque University help links that will guide you through proper semantic use.

Even following those 4 simple steps can help make HTML a priority within development teams that are using JavaScript frameworks. At the end of the day, it comes down to the development teams having the information and guidance needed, as well as the ability to act on it day to day, which will make HTML become a priority once again.

Photo of Mark Steadman

About Mark Steadman

Mark is an accessibility developer services consultant at Deque. Mark has been working in the accessibility field for 4 years now. He is extremely passionate about the work that he does and strives to make all content on the web/mobile accessible for all.

Mark's main focus is researching single-page applications (EmberJS, ReactJS), how accessibility affects them, and how to remedy the issues that are in the frameworks.
update selasa

Comments 1 response

  1. I appreciate your time to write about this. I exactly feel the same. Sometimes it feels that these new JavaScript framework are like a curse when it comes to accessibility and implementing other web standards. Not that they are enforcing these practices, it’s just that these frameworks have made implementing a UI/widget so easy that we often forget considering the semantics and other web standards.

Leave a Reply

Your email address will not be published. Required fields are marked *