Bloat Ness Monster by Coding Otaku

Bloat Ness Monster

The name Bloat Ness Monster is derived from Loch Ness Monster, a mythical creature. Unlike the Loch Ness Monster, the Bloat Ness Monster is real.

The Bloat Ness Monster is a monster that lurks around on the internet. It was made unintentionally by web developers who don't know what they are doing.

People with good weapons (high-end computers) are not usually scared of the Bloat Ness Monster. But the Monster will blunt their weapon over time, especially when they fight multiple Bloat Ness Monsters at the same time or their speed of travel is reduced.

This extension will let us detect the monster so that the developers can defeat it, and prevent it from returning.

Once you detect the monster using this extension, depending on who you are, you can do one of the following:

• If you are the developer of the website, defeat the monster.
• If you have some power over the developer, start an epic to defeat the monster (yes, it is not a task).
• If you are none of the above, politely inform the developer that the Bloat Ness Monster is inhibiting their website.

Jokes aside, What is this really?

As developing a website is becoming easier using modern web frameworks, the barrier to entry has become insignificant.

While I think that it is a good thing, many web developers have stopped caring about semantic HTML and accessibility.

I increasingly see websites that are made with nothing but ~div~ blocks, which do not have any semantic meaning.

This extension will do the following:
- Punish the use of non-semantic elements or implementations hostile to assistive technologies by adding a red border.
- Punish the use of JavaScript with a dotted red border
- Reward semantic elements with a green border
- Praise accessibility considerations with a blue border.
- Acknowledge interactive, embedded, and form elements with a teal border.
- Ignore everything else with a black border.

If you are color-blind, this extension will probably be useless for you, contact me with suggestions, but I do not guarantee everything will be implemented.

Important notice
This extension is NOT an accessibility measurement tool.

FAQ
This messed up my layout
This extension will add a lot of styles to all elements in the page, so this is bound to happen. But heavily broken web pages can be due to many reasons, the following may help.

• Check if you have made a block element to an ~inline~ element or vice versa.
• Check if you are heavily relying on position, margin, and ~padding~ for aligning elements.
• Check if you are inserting large images inside small elements without any width or height attributes in HTML.

My images are gone!
Background images and colors are removed by this extension so that the borders will be more visible.
Those images are decorative anyway, so it shouldn't matter for this check.

If your image is white and has transparent background, the image will be hidden, I have no way to check that without complicating this extension further.

What about the role attribute?
Use the proper semantic element instead. A painted monster is still a monster.
If you change the role of a semantic element to fool the browser or this extension, then *you* are the monster.

Why is there a red border around my label?
Is it connected to any form elements?

Accessibility feature X is not checked and is not rewarded
This extension is NOT an accessibility measurement tool, but some very common ones are checked. If would like to add more basic checks, please create a pull request.

Are the div and span elements that bad?
It depends on how you you use it, but no. Both div and span are generic elements that do not have any semantic meaning. So it is fine to use them for managing layouts, highlighting code syntax, and for other pure visual reasons.

But overly relying on them would mean that you are not using semantic elements enough. You do not need to re-invent the wheel if you use semantic elements.