kerri-hicks / blur_no-alt Goto Github PK

Problem

I'm currently testing this plugin in tandem with Editoria11y. It can be frustrating for users to add the noalt class but still have the issue flagged by Editoria11y.

Current Solution

It's possible to set Editoria11y to ignore images with the noalt class used by this plugin.

Proposed Solution

It strikes me as even more user-friendly to flip the script and have this plugin not blur images marked as OK in other plugins.

That would make this tool super complementary with lots of others that people are using, which feels exciting and community oriented.

I don't know if this is feasible for all plugins, but I think I see a path to do it with Editoria11y.

Plugins to consider doing this for:

• Editoria11y - Allows dismissing notice of image without alt text (I don't think Editoria11y's predecessor Sa11y allows for this, so it wouldn't be possible to integrate)
• WP Accessibility - Allows marking images as decorative in Classic Editor and Media Library
• Equalize Digital Accessibility Checker - Allows dismissing warnings for no alt text

Alternative Solution

Another way to solve this automatically would be to adjust the "Ignore" setting to include noalt when the plugin is activated, though I get nervous about silently changing a setting without a way to easily opt-out.

I just tested this plugin on a site where I'm using CSS filters on images for something else. The ruleset from the theme that used the filter property had a higher specificity than the plugin style, so the images weren't blurred.

I'm thinking that this plugin should use !important on the key rules that style images to avoid issues like this. Important can be divisive, but this feels like a good use, since the entire point of the plugin is to ensure that people get this visual feedback.

@kerri-hicks What do you think? Could I submit a PR?

Title pretty much says it all. I haven't looked into how to do this, but I assume the image in the markup contains alt text.

@kerri-hicks and I were chatting about the possibility of this feature. Here are some initial thoughts on the likely requirements:

• Is opt-in via a new setting that very clearly explains what happens
• Excludes images with .noalt but also with or inside an aria-hidden element
• Possibly allow configuration that scopes selectors so that rules are limited to what editors can fix? (TBD)

Feedback and suggestions very much welcome!

I've been making some contributions to this plugin lately in hopes of using it for all my client sites. I think some of them will be all-in on the blur effect, but I worry that for a few, it may make adoption a little harder. Do I agree with that? No, but I want to be pragmatic.

When implementing similar features on my own previously, I've often used a red dotted outline that is offset or inset:

This makes me wonder if offering a few alternate styles might help increase adoption of the plugin so that there's more alt text in the world.

A few initial ideas are:

• outline: 5px dotted tomato; outline-offset: 10px; (or outline-offset: -10px to account for rare cases of overflow: hidden)
• filter: grayscale(1)
• filter: invert(1)
• opacity: .5 (or lower?)

I know that I hope to use this plugin on a multisite install and I suspect others already are. Therefore, it would be great to create some multisite options! My initial thinking is that it would be nice to have all of the following:

• Ability to determine whether individual sites can configure either option or whether there are only network settings (Should this be a single ON/OFF option or should there be settings per-option. There are currently only 2 options.)
• Ability to force all sites to use or not use a specific option. (When this is enabled, it would presumably remove or disable the ability for individual sites to change the option. Maybe the option stays visible but in a disabled state?)

I'd be happy to take a first pass at this but would love some feedback on what is useful first.

Currently the message above the title in the block editor has a few issues:

1. It's output with CSS generated content, so it doesn't support formatting, links, ARIA, etc.
2. It may be inaccessible? I was unable to get NVDA + Firefox to read the message.

I think finding a different way to include this message (instead of CSS) would have some big advantages:

1. Include a link to information about alternative text
2. Hide the emoji/icon with aria-hidden="true"
3. Show the message next to the "Alt Text" field instead of or in addition to at the top of the editor (possibly controlled by a setting)

If someone wants to take that on, that would be awesome!

Currently this plugin supports unblurring an image by adding the "noalt" class. This works for folks who know about this and understand CSS classes, but isn't super user-friendly. Adding a checkbox below the alt text field in the sidebar would likely be a more user-friendly and transparent manner of indicating this. It would also put it next to the link that helps people determine whether the image needs alt text or is decorative.