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

Image accessibility #108

Open
mark-wiemer opened this issue Dec 23, 2024 · 2 comments
Open

Image accessibility #108

mark-wiemer opened this issue Dec 23, 2024 · 2 comments

Comments

@mark-wiemer
Copy link
Contributor

mark-wiemer commented Dec 23, 2024

The ![](image.png) syntax is for decorative images. ![some alt text](image.png) ![some descriptive text](image.png) is for meaningful images.

We should scan our codebase for images and set the alt text to the corresponding caption, likely using Hugo shortcodes.

This helps both visually impaired folks and those with slow network connections

@appgurueu
Copy link
Contributor

Alt text is not the same as and should not be set to the same as image captions. See https://hsc.wvu.edu/website-content-guide/creation/images/images-in-the-editor/writing-alternative-text-and-image-captions/:

Image captions differ in comparison to alternative text. Alternative text’s purpose, as we have learned, is to describe what is visually present in an image. Image captions are not intended to be used in this manner. Also, alternative text only appears visually on a page when an image fails to display, whereas image captions are typically always visible.

Alternative text, aside from a few exceptions, should always be included with an image. Image captions, on the other hand, are optional and should only be used to add additional context or understanding as to the meaning of the image or why it is being included on the page.

Because of the differences in purpose, it is important to note that an image’s caption should never be the same as its alternative text. This would result in the same content potentially being conveyed to a site visitor twice.

@mark-wiemer
Copy link
Contributor Author

Sorry, you're right. I meant ![some descriptive text](image.png). Thanks for the clarification

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants