Skip to main content

Use <blockquote> tag for block-level citations

Medium
accessibilityreacthtml

What​

This practice is triggered when presenting longer or block-level quotations on a web page. Violations occur when such citations are rendered using generic containers like <div> or <p> without semantic indication.

Why​

The <blockquote> element explicitly indicates that the contained text is a quotation, aiding both user readability and assistive technology while also satisfying WCAG requirements regarding information relationships.

Fix​

Replace generic container elements with the <blockquote> tag in your React TSX components to semantically denote block-level citations. Optionally include a <footer> to credit the citation's source.

Examples​

Example 1:​

Positive​

The positive example uses the <blockquote> tag to semantically represent a block-level citation, enhancing accessibility and clarity.

import React from 'react';

interface BlockCitationProps {
  citation: string;
  author?: string;
}

const BlockCitation: React.FC<BlockCitationProps> = ({ citation, author }) => {
  return (
    <blockquote>
      <p>{citation}</p>
      {author && <footer>— {author}</footer>}
    </blockquote>
  );
};

export default BlockCitation;

Negative​

The negative example fails to use the semantic <blockquote> element, opting instead for a generic <div> which does not convey the proper meaning to assistive technologies.

import React from 'react';

interface BlockCitationProps {
  citation: string;
  author?: string;
}

const BlockCitation: React.FC<BlockCitationProps> = ({ citation, author }) => {
  return (
    <div className="citation-block">
      <p>{citation}</p>
      {author && <span>— {author}</span>}
    </div>
  );
};

export default BlockCitation;