Chapter 6. Using XStandard to Create Accessible Content
Joomla! gives you the option of using either of the two most popular WYSIWYG editors—Tiny MCE and XStandard. For sighted users, both provide an intuitive and easy-to-use interface and both are suitable for creating accessible websites. So what you use depends largely on your own personal preference.
For a screen reader user, both the editors have improved their accessibility. In our tests, Tiny MCE was usable by a screen reader and all the various controls could be identified. However, screen reader users may also prefer to mark up their own content in a separate editor and then copy-paste the HTML code directly into Joomla! This is viable if a screen reader user finds the WYSIWYG difficult to use.
You can choose the editor you wish to use by going to Global Configuration and making your choice with the Default WYSIWYG editor option there.
While writing this book I had some problems getting XStandard to display (due...
You can choose the editor you wish to use by going to Global Configuration and making your choice with the Default WYSIWYG editor option there.
While writing this book I had some problems getting XStandard to display (due more to the fresh betas of Joomla! that I used), so I stuck to TinyMCE for most of the book and used it for many of examples in Chapter 4. I found TinyMCE effective as well (it's also quite accessible for screen reader users), but XStandard is also an excellent editor and we will cover its features in this chapter.
At the end of the day, the editor that you use really depends on your personal choice and preference.
Note
The latest version of XStandard 2.0 has some good accessibility features that can really help you when building your sites. It includes tools to help you generate accessible mark up, as well as a keyboard accessible interface.
The XStandard toolbar is divided into four areas: the Styles Menu, Tool buttons, View modes and Help.
The Styles Menu is used to format the content in the editor. First select the content in the editor pane and then the style.
For consistency of presentation, styles available in the Style Menu can be preset to offer formatting choices suitable to the document being edited. This would be great if your organization has a particular visual theme or style that you need to stick to when making your website.
For speed, a single style can apply sophisticated formatting combinations, as well as structural metadata like heading information.
For added convenience, styles can also be grouped under headings.
When a style is selected, it displays a check mark in the drop-down menu.
Tool buttons include action items, for applying bullet points, uploading a file, inserting a table, or inserting third-party content.
For faster access, other formatting options...
Removing The "Noise" From Markup
In order to help you create a good clean markup, XStandard removes what is referred to as 'noise' from your markup. This 'noise' is basically anything that should not be in a clean, standards-compliant web page. This includes deprecated tags (which are tags that were once in the specifications for previous versions of HTML, but have now been dropped, so they are technically 'illegal' if we wish to be dramatic about it).
It also uses a CSS powered Styles Menu.
XStandard encourages the correct use of markup by (for example) not using the<blockquote> element to force a paragraph indent for purely presentational purposes; so in real terms this means the editor will not display a left indent for content within<blockquote> elements.
<blockquote> should be used only for its intended purpose—which is marking up quotations.
XStandard supports the use of relative values for text size such as % and em. Using relative...
Decorative Versus Non-decorative Images
As mentioned in Chapter 4, it is important to know which images should be given alternate text, what appropriate alternate text is, and equally when not to use alternate text at all. XStandard makes it easy to handle either situation.
XStandard will prompt you to identify an image as Decorative or non-decorative. The editor then goes on to the Alternate text for all non‑decorative images and also permits the author to enter a Description and a Long description URL for a more detailed description if required.
Using the Long description URL to provide a more detailed description of an image is useful when you are using images that really need complex and detailed descriptions. This may be the case if you work in an academic environment or something similar.
However, in some situations it may be better to include the information that the image contains somewhere in the body text if possible.
Note
If the image is identified as decorative, the fields Alternate...
In Chapter 4, we saw how to create accessible tables using TinyMCE; now we will look at using XStandard.
Although you can use layout tables in XStandard, I am not going to recommend that you do so; we will stick with using them only for data.
As we know, data tables are made up of cells that usually contain text or numbers, whose content is understood by referring the column and row headers.
As we also know, if screen readers are not made aware of the presence of column and row headers, they will process information in a data table as if it were in a layout table—reading from left-to-right, top-to-bottom. This is mostly with large and more complex tables.
For example, a screen reader that is unaware of the column headers in the table above will generate the following meaningless output:
Popular Summer availability Winter availability Greece Yes. Visitors are particularly drawn to sites of antiquity such as the Acropolis. Yes No Egypt Yes, an increasingly popular tourist spot,...
I really hope that you have enjoyed this brief introduction to accessibility, found it useful, and now feel more confident about using Joomla! to build more accessible websites. For more, keep an eye on the Joomla! forums and don't be shy about posting any queries you have.
If you would like to lean more about accessibility and have some other questions that you would like to ask, I recommend two great online forums where your query will be answered by the planet's best accessibility advocates and developers. They are the WebAIM mailing list (http://www.webaim.org) and the Accessify Forum (http://www.accessifyforum.com/).
Both are great resources with lots of capable contributors who will always be glad to help.
