The Accessibility Story Behind Deprecated HTML Elements

I attended the Web Accessibility in Mind Conference a few weeks ago, and the sessions gave me valuable new perspectives on accessibility. I kept thinking about some of the design choices we make when developing products and services as developers, product managers, designers, or anyone contributing to them and how we can advocate designing for an inclusive and equitable user experience with these choices.

Interestingly, right after the conference, I came across a cool design created with a marquee tag. It explained how easy it was to use this HTML element and whether we should bring it back since it was deprecated in HTML5. As "accessibility" kept running through my mind, that design made me think about why some HTML elements, once so popular, are now deprecated.

Why are HTML elements deprecated?

Over time, with evolving web technologies and a better understanding of how to structure and style content and pages, they were eventually deprecated as better ways for structuring and styling content emerged. Although these elements were deprecated, they are sometimes still available due to backward compatibility and their future removal (which we call "sunsetting" a feature). So, we can still use some of these elements, but they are discouraged to use for valid reasons.

There are several reasons for deprecating these elements. One main reason is the separation of concerns. Once the HTML standard introduced the versioning system, CSS and JavaScript became the norm for handling styling and behavior. The role of HTML shifted to focusing solely on structuring the content. This separation made some older HTML elements that blended structure and styling, such as font, big, and small, redundant and eventually led to their deprecation.

Accessibility has also been a key factor in deprecating some HTML elements. Some older HTML elements, like marquee and blink, were not designed with accessibility in mind, making these tags visually distracting and also making it difficult for screen readers and other assistive technologies to interpret or interact with the content properly. Some of these elements could even cause a health hazard. For example, flashing or blinking content can trigger seizures in someone with photosensitive epilepsy. So, there are technical requirements issued by WCAG 2.0 from W3C for flashing and flickering contents. This emphasis on accessibility led to the deprecation of several HTML elements, which prioritized visual effects over user inclusivity.

Let's dive into a few specific examples to understand why they were deprecated and how we can learn from these decisions to build better, more accessible websites.

The Accessibility Story Behind Deprecated HTML Elements

1. marquee

Microsft introduced the marquee tag in the 1990s. Remember those old, retro websites with moving text or images? Those classic screen savers with floating shapes and text? While it was fun and impressive to develop web pages with this effect, it was not supported across all browsers and was not a part of any official HTML standard. Soon, developers realized the main issues and the accessibility problems it was causing.

One of the main accessibility problems with this effect was that the constantly moving text was distracting, and there was no option for users to stop scrolling except to close the web page. Even worse, screen readers struggled to interpret the content within a element. Those who relied on assistive technologies could easily miss important information. Because of these issues, the marquee element was deprecated.

However, the concept of moving text or images is not obsolete. Although you can still use this tag, it's better to avoid using it. Instead, we can use CSS and JavaScript to design the same effect with accessibility in mind, providing controls for users to pause or stop animations if they find it distracting. While creating impressive visual designs, it's important to ensure they are accessible to everyone and follow accessibility guidelines.

2. blink

Netscape introduced the blink element a few months before Microsoft introduced the marquee. This tag did exactly what it sounds like, giving the text a blink effect. Like the marquee, web creators used this tag to grab users' attention. They created visually stand-out content to highlight special offers, warnings, or anything that should be highlighted on web pages.

Some users found this blinking effect really annoying, and it also caused serious accessibility issues. Users with cognitive disabilities might find it really hard to focus on other parts of the page due to this effect. Also, flashing or blinking content can trigger seizures in someone with photosensitive epilepsy, which makes this effect dangerous to some and a potential health hazard.

The blink was eventually decreased due to these concerns and was never a part of HTML standards. Although we can use CSS and JavaScript to create the same effect, ensuring the design follows the accessibility standard is important since it can cause serious harm to some users. If you want to refresh your mind on the technical requirements for flashing and flickering contents, check the guideline issued by WCAG 2.0 from W3C here.

3. frameset and frame

Netscape introduced the frame and frameset in 1996. The primary use of these tags is to split a website into different sections or frames to display multiple documents in a single view. Designers and developers could improve the page loading time by separating elements of the web page, like headers and navigation bars, from the main content. This was useful back then when most users had slow internet connections.

Although they improved the loading time, frames introduced a whole set of usability and accessibility issues. For example, frames made it difficult for users to bookmark specific pages or use the back button effectively. Also, frames were not compatible with responsive web design. One of the major accessibility issues was that the content inside frames was difficult to access and index, making websites less accessible and harder to find.

Instead of frames, we can create better layouts and complex, responsive designs that work seamlessly across all devices with CSS Flexbox and Grid. Modern layout tools provide far greater control and accessibility than frames ever could.

4. applet

The applet was introduced with HTML 3.2, released in 1997, and it was highly popular during the mid-to-late 1990s due to the rich possibilities of adding interactive content to websites. Java applets brought an exciting and new level of interactivity to the web by enabling features like games, dynamic charts, and media playback.

However, besides the security and compatibility issues, the applet created major problems for accessibility. The content inside a Java applet was often a black box to screen readers and other assistive technologies. For users with disabilities, this issue made it nearly impossible to interact with or even understand the content within the applet.

The applet element was deprecated when the HTML 4.01 specification was released in December 1999. We can now create more secure, accessible, and widely supported interactions on websites using JavaScript and other web technologies.

5. dir

The dir was introduced to create multi-column directory lists, specifically to present a list of items, such as file directories or links, in a compact format. However, it wasn't as flexible or semantically clear as the ul (unordered list) and ol (ordered list) that we commonly use today.

The ul and ol tags allow us to create accessible lists by providing clear, structured ways to present information with better semantic meaning, making it easier for screen readers and other assistive technologies to interpret the content. So, the ul tag became the standard when the dir was deprecated in HTML 4.01.

Why understanding deprecated elements matters

As web designers and developers, it's important to understand the reasoning behind these deprecations to know why certain elements were phased out. This could be related to several factors:

• Separation of concerns: Keeping content structure (HTML), style (CSS), and behavior (JavaScript) separate allows for cleaner, more maintainable code.

• Security: Elements like applet introduced security vulnerabilities.

• Accessibility: Older HTML elements like marquee and blink were not designed with accessibility in mind and created barriers and issues for users with disabilities.

By understanding these factors, we can make more informed choices in our design and development practices, ensuring that we avoid past mistakes and create more accessible, user-friendly websites.

Conclusion:

While it's fun to look back at the quirky, nostalgic elements of early web design, we must prioritize inclusivity and accessibility in modern web development. The decisions we make today will shape users' experiences tomorrow. So, when tempted to use impressive visual effects, remember the lessons from deprecated HTML elements and make sure your designs are accessible to everyone.

Feel free to connect with me on X (Twitter), LinkedIn, and Medium! 😊