Accessibilty for content providers - quotes

Unfortunately the underlying technology used in most WYSIWYG editors makes it very easy to fall foul of these accessibility rules. The problem is the Indent button. It works fine if you use it on a list - making the list item that you’ve highlighted move in a level - but if you apply it to a paragraph then it will mark it up as a quote. That’s because the normal styling applied to a quote by your browser is to indent the text.

The relevant WCAG 1 checkpoint is:

3.7 Mark up quotations. Do not use quotation markup for formatting effects such as indentation.

It’s a Priority 2 requirement, so is necessary for Double-A compliance.

Don’t indent with <blockquote>

So the first thing is probably to put some test content into your WYSIWYG editor and try the Indent button. Then look at the HTML code produced to see if it uses <blockquote>. If that is that case then you should only use that button for indenting lists.

The best alternative is to have an indent style added to your stylesheets and for that to be available as an option in your editor. Then you just have to highlight the text and select the style.

The next stop down is to have the style in your stylesheet but you have to go into the HTML code to say where you want to use it. Finally you can use the style attribute to put the formatting in directly.

In both cases you need to find the tag that surrounds the block of text that you want to indent. This is usually going to be a paragraph so you’re looking for <p>. If you’re armed with a class name from your stylesheet, say ‘indented’, then you want to change it to <p class=”indented”>, otherwise you’ll use something like <p style=”margin-left: 20px;”>.

Do mark up quotations

There are two relevant HTML tags - <blockquote> for blocks of text and <q> when it’s part of a block of text (i.e. a phrase within a sentence, etc.). You don’t need to go overboard though and mark up absolutely every piece of speech in your content.

If your normal browser is Internet Explorer and you’ve been using <q> in your content then you might be surprised by additional speech marks appearing in other browsers. Don’t worry that’s just the default behaviour. Internet Explorer (including IE7) doesn’t understand the tag so there’s no styling applied, some other browsers do and wrap the text up in speech marks. The best solution if you see this is to get your web team to remove this behaviour in the stylesheet so that it looks the same for everyone.

Don’t worry about &quot;

In your journeys through HTML you might have come across this strange notation, which looks like it’s something to do with quotes. It isn’t, so you can ignore it (or remain in your current blissful state).

It’s just used in the HTML code if you need a speech mark within, for example, alt text. The same character is used to enclose the alt text, so this is the route out of the potential confusion of speech marks inside speech marks. Your WYSIWYG editor should take care of these details for you though - you will still enter the ‘”‘ character in the dialog box.

Summary

• avoid using the Indent button if your editor converts it into the <blockquote> tag
• alternatively add a class (if it has been defined in your stylesheet) to the paragraph tag, or the style attribute (e.g. <p style=”margin-left: 20px”> …</p>)
• <blockquote> is for marking up blocks of text
• <q> is if you have a quote within a block of text
• some browsers wrap text marked with <q> in speech marks, Internet Explorer doesn’t – have them removed in your stylesheet for consistency
• don’t worry about &quot;

editors, web-accessibility, WYSIWYG editors

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.