Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SIRvb's Image Adjustments uses alt text to apply css classes, reducing accessibilty #36

Open
MasssiveJuice08 opened this issue May 23, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@MasssiveJuice08
Copy link
Contributor

MasssiveJuice08 commented May 23, 2024

The syntax of SIRvb's Image Adjustments CSS Snippet uses Markdown embedded image alt text to apply CSS classes to images. The basic principle is the same as Obsidian-flavored-Markdown's syntax for resizing images.

By occupying the alt text field, it prevents us from applying actual alt text to images. Alt text has many benefits:

  • alt text is useful for displaying an image description if the image cannot load for any reason
  • it enables sight-impaired persons to read the image description using a screenreader (don't tell me no one is going to make Morrowind accessible to sight-impaired persons. I'd bet money someone in the future makes this possible in OpenMW)
  • it improves website SEO by telling sitecrawlers what an image is.

This could possibly be resolved by making a provision for two alt text fields for images; one that gets read as CSS classes, and another as alt text.

@MasssiveJuice08 MasssiveJuice08 added the enhancement New feature or request label May 23, 2024
@MasssiveJuice08
Copy link
Contributor Author

MasssiveJuice08 commented Sep 10, 2024

Possible alternative is to wrap images in HTML <div> tags - https://quartz.eilleeenz.com/Quartz-Snippets#applying-custom-styling-through-writing-markdown

This would have the added benefit of also solving Obsidian and Quartz's parsing of alt arrtibute keywords: If adding an image that has 'banner' or 'profile' in the file name, the CSS currently picks this up as an alt text key word and styles it accordingly, even though the keywords aren't actually present in the alt text, they're only in the file name. This will trip up users who don't understand why their image is forced to display like a banner or a profile picture.

  • Check whether standard Markdown image formatting will work inside the <div> - alt text, embed etc.

From research online it appears likely that Markdown won't render inside <div> tags. It is possible with <span> tags, though these are inline elements instead of block elements.

  • Check whether Markdown embedded images behave as block elements if wrapped in <span> tags set to display as 'block'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant