Firefox 浏览器附加组件
  • 扩展
  • 主题
    • 适用于 Firefox
    • 字典和语言包
    • 其他浏览器网站
    • 适用于 Android 的附加组件
登录
Bloat Ness Monster 预览

Bloat Ness Monster 作者: Coding Otaku

Shows the nesting level and accessibility features of web pages by adding colorful borders.

实验性实验性
0 (0 reviews)0 (0 reviews)
1 个用户1 个用户
您需要 Firefox 来使用此扩展
下载 Firefox 并安装扩展
下载文件

扩展元数据

关于此扩展
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.
评分 0(1 位用户)
登录以评价此扩展
目前尚无评分

已保存星级评分

5
0
4
0
3
0
2
0
1
0
尚无评价
权限与数据详细了解

必要权限:

  • 访问您在所有网站的数据
更多信息
附加组件链接
  • 主页
  • 用户支持网站
  • 支持邮箱
版本
1.1
大小
26.85 KB
上次更新
8 个月前 (2024年12月3日)
相关分类
  • 网页开发
许可证
仅 GNU 通用公共许可证 v3.0
版本历史
  • 查看所有版本
添加到收藏集
举报此附加组件
支持这位开发者

此扩展的开发者寻求您的小小捐助以支持其持续发展。

我要捐款

Coding Otaku 制作的更多扩展
  • 目前尚无评分

  • 目前尚无评分

  • 目前尚无评分

  • 目前尚无评分

  • 目前尚无评分

  • 目前尚无评分

转至 Mozilla 主页

附加组件

  • 关于
  • Firefox 附加组件博客
  • 扩展工坊
  • 开发者中心
  • 开发者政策
  • 社区博客
  • 论坛
  • 报告缺陷
  • 评价指南

浏览器

  • Desktop
  • Mobile
  • Enterprise

产品

  • Browsers
  • VPN
  • Relay
  • Monitor
  • Pocket
  • Bluesky (@firefox.com)
  • Instagram (Firefox)
  • YouTube (firefoxchannel)
  • 隐私
  • Cookie
  • 法律

除非另有注明,否则本网站上的内容可按知识共享 署名-相同方式共享 3.0 或更新版本使用。