szabgab szabgab - 2 months ago 15
HTML Question

Inline quote in html 5 and accessibility

What is the recommended way to quote someone else in an HTML text?
Especially if I'd like to make sure screen-readers will handle it properly?


  • Should I use double-quotes like this:
    "

  • Should I write
    "
    that will look like this: " ?

  • Should I use the
    <q></q>
    pair that apparently I cannot demo here?

  • Something else?



http://html5doctor.com/blockquote-q-cite/ has a bunch of explanation on how works, but I did not see a recommendation.

Answer

For short inline quotations, use the <q></q> tag. Most browsers will insert quotation marks around the quotation, however if you are using a css reset the following may be required:

q:before, q:after {
    content: "&quot;"
}

For any longer quotations I would advise using the <blockquote></blockquote> tag in combination with the <cite></cite> tag, as follows:

<blockquote>
    This text is from another source
    <cite>
        <a href="http://source-url.com">Source Title</a>
    </cite>
</blockquote>

As per the HTML5 spec:

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Source: https://w3c.github.io/html/grouping-content.html#the-blockquote-element

Avoid using inline quotation marks in conjunction with the <q></q> tag, however they can be used with the <blockquote></blockquote> tag. In either case it would be advisable to make some sort of graphical distinction (e.g. italics or a different background colour) between quotes from external sources and the page's original content.