Accessibility: <blockquote> and <figcaption>

It’s possible to manually style text to look like a blockquote in Evolve either using the formatting options in the text editor, or in the theme. However, there’s no formatting option that applies the <blockquote> and <figcaption> tags in the code - some screenreaders use these to announce when they’re reading a quote from an individual, rather than reading them like all other text.

I notice ‘no wrap’ and ‘force left align’ are already available as inline formatting options via the ‘paragraph style’ or ‘inline class’ buttons in the text editor. Would it be possible to add ‘blockquote’ and ‘figcaption’ formatting to this list?

Hi @Ruppers, our text editor is from a library, so not sure that functionality exists, but I will raise with the team.

Hi @Ruppers, sorry for delay in responding - spoke to the team about this:

  • we will look to add blockquote at some point in the future
    -can we get a bit more detail on a use case for figcaption? “would like more information about the use case for figcaption as it’s really meant for labelling an image e.g. if you set a caption on an Image component in Evolve”

Hi Sam,

The main purpose of using <figcaption> in this context was to identify the person the block quote is attributed to so that their name isn’t read out as part of the quote itself.

<cite> may be an alternative but I think that’s usually for links to the source of a published article or something like that. In our case, there wasn’t a published article to quote - it was just something a colleague/employee had said.

There are some examples of figcaption used for this purpose here:

https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element

and:

1 Like