Validate or restructure admin-supplied content fields for accessibility

[marcysutton]

Is your feature request related to a problem? Please describe.

The sponsorship widget in the left sidebar of Forem has accessibility issues, including missing alt text for an image wrapped in a link–causing an empty anchor to be rendered. This content area and other similar textfields should be updated to either validate the freeform content for accessibility, or be restructured into separate data fields to ensure accessible markup.

Describe the solution you'd like

There are a few options:

• A plain textarea could have an accessibility checker run on it, for example the axe linter or CKEditor in the case of a WYSIWYG.
• The textarea could instead be converted into structured data fields such as a link, image, and image alt text, preventing inaccessible markup from being inserted. It would be less flexible markup-wise, but easier to implement and enforce accessibility.

Describe alternatives you've considered

Fixing the accessibility issues themselves in Forem would satisfy these particular accessibility issues short-term, but wouldn't prevent them from occurring again on DEV or other Forem sites.

Additional context

Here are some screenshots from the accessibility issues found in the axe extension:

[github-actions]

Thanks for the issue! We'll take your request into consideration and follow up if we decide to tackle this issue.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem/oss and we will follow up within 3 business days.

For full info on how to contribute, please check out our contributors guide.

[marcysutton]

Here's another example that appeared recently, the "campaignmode-hackathon", which has images with no alt text and an h1 with only a + in it:

And one more, which I'm realizing is a flavor of the sponsorship widget: a DevDiscuss Podcast link, which isn't properly wrapping text so it ends up empty:

[cmgorton]

@forem/frontend I know we have had several accessibility changes recently. is this something we have worked on? If not I think we should add this either to our planning funnel or I can add this to the MLH project board. Thoughts?

[nickytonline]

This hasn't been worked on and most likely will require an RFC.