Adding accessibility features into Automad - especially alternate text for images

[hansiallen]

Quick note: I'm going to split this post into two different sections: the main feature request and some background about this.

Hi there! I've been trying out the basics of Automad's templating system, and whilst it is quite good overall, I feel that quite a few accessibility-related features haven't yet been implemented (as in, features for creating accessible websites) Would it be possible to implement alt text support for image blocks? It would be neat if so.

Feature request

Adding support for alternate text for images so that images produced within the blocks editor and other areas can have alt text (using an alt attribute) and the ability to mark an image as decorative (which produces a blank alt attribute), for accessibility purposes.

Even better if there could be even more cohesive integration for alternate text for images, in order to increase the accessibility of sites produced using Automad, such as being able to add alternate text when uploading an image, and edit it in the files pane (and this automatically appearing when you add it in the blocks editor)

Other CMS such as Webflow go even further by warning users before they publish pages if any images that they have uploaded are missing alt text / not marked as decorative, where appropriate. As this would probably require quite a bit more effort though I think that would be more of an idea for the distant future.

Some context

Within the UK there is a heavy emphasis on web accessibility, to the point where for certain organisations, such as public sector organisations (under PSBAR regulations) it is even a legal requirement that sites are made accessible! (which could pose a barrier for some organisations adopting Automad)

Additionally, even for non-required organisations, there are many upsides to and ethical reasons to make a website accessible to people with disabilities.

Whilst it is possible to implement most accessibility features within a theme itself (skip-links, contrast, navigability, etc.) One issue that I ran into with Automad is that, without modifying the CMS itself (for instance, through changing the image block to put the caption field as alt text) I can't find a method to add alternate text to an image.

It is also important to note that the caption functionality, which uses fig caption elements, does not serve as a direct replacement for alternate text, as one is intended to add contextual information whilst the other is intended for a description for users of a screen-reader, without being visible to other users.

Thank you for considering this feature request, and I look forward to seeing the continued progress of Automad in the future!

[marcantondahmen]

I can see that makes total sense. I also agree it's not about the caption. I wonder what be the best place to bind the alt text to an image from an UI perspective.

[Imerion]

I agree this would ne useful. Perhaps they could be in the File section for each page, only displayed for image files. I usually have the same alt-text for an image, but it could differ depending on context so it might be better to have it for every image block instead.

[MakePixelsWork]

Accessibility is not only about some alt text, but a lot of factors. The initiative is called A11Y, and the W3C call it WCAG, which has a full fledged documentation on whats needed to make your site fully accessible for all people.

While I agree it would be nice to add an alt-tag to images, maybe the WCAG/A11Y rules could eventually be build into its own Automad module/package? The usability and accessibility issues are so massive, you'll need a lot of changes in your site that are outside of the scope of a core CMS.

I've just found out about Automod a few days ago, and love to experiment with it. Keep up the awesome work!