Bloat Ness Monster

About

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, you can contact me with suggestions on what can be improved, but I cannot not guarantee that everything will be implemented.

How to use this?

You can install this extension from the Mozilla Add-ons page.

If you are on a browser that cannot install from that page, you can download the latest release from my codeberg repository.

Once you install the extension, just click on the extension from your browser toolbar to highlight the elements, the only one you need to worry about are the solid red borders for non-semantic elements, and dashed red borders for the script tags.

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 transparant 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.

Why highlight the script tags in red?

The more scripts you have in your website, the more ways the page will break for the user, so I highlight them in dashed red borders, you can ignore them if you want.

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.

License

Copyright © 2024 Rahul Sivananda (CodingOtaku) <contact@codingotaku.com>

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.