Accessibility

Accessible blockquote requirements

Keep these considerations in mind.

WCAG guidelines

1.3.1 Info and Relationships

Structure the quote component using semantic HTML elements such as <blockquote> and <cite> for quotations and sources, respectively. This will ensure the information is conveyed effectively to screen reader users.

Considerations

There seems to be some debate and different approaches for the correct implementation of the <cite> element. Our approach is to use the cite element for a URLs and sources but never for authors and names. This is the same approach taken by the W3C Design System and Mozilla Developer Network both of these use figure and fig-caption in conjunction with the <blockquote> element for citing the authors.

1.4.1 Use of Colour

Ensure colour isn't used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. For example out callouts and quote designs have a thick left-hand border as an indicator.

1.4.3 Contrast (Minimum)

Ensure that the text colour and background colour of the quote have a contrast ratio of at least 4.5:1 to accommodate users with low vision or colour deficiencies.

2.4.6 Headings and labels

If the quote is part of a larger section or article, use clear and descriptive headings to help users navigate through the content.