Skip to content

Implement some sort of accessible/text-alternative for callout icons or blocks (a11y issue) #726

@batpigandme

Description

@batpigandme

I'd argue that the icons used in callout blocks are semantic icons, or (alternatively) that the blocks themselves are intended as "semantic" classes.

As such, I think there should be visually hidden, but accessible text for either the icons or the callout divs. Because the icons are used as background images, I think that of the accessibility techniques for semantic icons (link is from Font Awesome, but the same ideas apply), we'd probably want to use Bootstrap's .visually-hidden class anyhow—which is why I think it might make sense to add this to the divs, rather than just the icons (since it will then work with appearance="minimal" or icon=false).

I suppose the downside to this is that you'd only want it to apply to HTML, which might be cumbersome given the callouts are used in other formats. One alternative would be to supply an aria-label, though I think screen-reader support for them on things like <div>s and <span>s can be a bit inconsistent.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions