Accessibility (tick_24Pro, tick_24Std, cross_24Lite)

This is where you set up options that affect the accessibility part of the syntax checker. Accessibility checking is included in the standard and higher editions, but not in the lite edition.

Accessible content means that the content is easily to access (use) by people with disabilities such as blindness, low vision, deafness, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity, and combinations of these. Accessible content is also often easier to access for users in general.

Accessibility Checking Options

Enable accessibility checking - Check this box to enable accessibility checking. If this option is unchecked, then all accessibility checking is disabled. If you are using the integrated editor, then the accessibility messages will appear in the Accessibility tab in the Results Window. Checking this option will result is slightly slower validation times as more processing is required. This option is not enabled by default.


When accessibility is enabled (and sometimes when it's not enabled, depending upon the issue or error), CSE HTML Validator checks for certain WAI-ARIA issues, such as the ones below.

Generates a warning (only if accessibility checking is enabled) when setting a "role" attribute value to the default implicit ARIA role because this is unnecessary and not recommended because it is already set by the browser.

Generates an error if an element is assigned a role that it does not support.

Generates errors for invalid ARIA attributes and attribute values.

Generates errors when an ARIA role is set and the tag is missing the required ARIA attributes for that role.

Accessibility Tips (not in any order)

These tips and others like them may be displayed if flag 124 is enabled to display a random accessibility tip and accessibility checking is enabled.

Use the "tabindex" attribute to provide a logical tab order, BUT ONLY WHEN the default tab order is insufficient. AND BE CAREFUL! It is easy to introduce usability bugs when setting the order explicitly. "Tabindex" values can be from 0 to 32767 and do not have to be sequential or unique. When the same value is used more than once, the order is determined by which appears first in the character stream. Visit for more information.

If needed or desired, use a style switcher to provide a conforming alternate version of a page. For example, use client-side JavaScript or a server-side scripting language like PHP or JSP to switch between external CSS files.

Provide expansion or definition for abbreviations using the "abbr" or "acronym" element ("abbr" is recommended for better future compatibility). Example: <abbr title="World Wide Web">WWW</abbr>.

Use the "title" attribute with "a" elements to further describe or clarify the purpose of the link and/or to provide mouse-over tooltips. Tooltips build user trust by telling visitors where links will take them. However, important information that the user should know before selecting the link, like warnings, should be described in the link text, and if a link will open in a new window or tab, a visual indicator of this should be provided.

Although still allowed (not prohibited) by WCAG 2.0, layout tables should be avoided whenever possible in favor of CSS layouts in order to maintain the semantic meaning of table elements and the separation of presentation from content.

Use the "caption" element with data (non-layout) tables to identify the table. Use the "summary" attribute for the "table" element to provide an overview of the purpose of the table or to explain how to navigate the table. The caption and summary text should not duplicate each other.

Use the heading elements ("h1" to "h6") to identify headings. Do not use headings to simply change the appearance of text. Proper use of heading elements allows assistive technology and user agents to properly recognize heading text.

Use the "ol" element for ordered lists, the "ul" element for unordered lists, and the "dl" element for definition lists. This makes it easier for assistive technology to navigate from list to list or from item to item.

Use semantic markup elements like "em", "strong", "cite", "blockquote", "q", "quote", "sub", and "sup" when appropriate. Use "em" and "strong" to indicate structural emphasis, use "blockquote" for long quotations which may require paragraph breaks, use "q" for short inline quotations, and use "sub" and "sup" for subscripts and superscripts.

Use the "table" element and other table elements ("tr", "th", "td", etc.) to present tabular information. This preserves data relationships even when users cannot see the table or the presentation format is changed. Do not use tabs or spacing to create visual presentations of columns.

Use "dfn" to mark the use of a word or phrase where it is defined (the term, not the definition).

Consider using the "link" element with the "rel" attribute to provide metadata about the position of web pages that are part of collection. For example, specify the URLs to the next, previous, and content pages. Consider also linking to a glossary page if appropriate.

Use the heading elements ("h1" to "h6") to begin each section of content. This assists user agents and assistive technology in letting users navigate based on headings. Avoid skipping heading levels. Use CSS to change heading appearance.

Provide a semantic grouping for related form controls using the "fieldset" and "legend" elements. This is most important for related radio buttons and checkboxes. If desired, CSS can be used to change the visual effect of using the elements.

Use this technique to identify the purpose of a link using link text combined with its enclosing list item:, or combined with its enclosing paragraph:, or combined with its enclosing table cell and associated table headings:, or combined with the preceding heading element:, or combined with the parent list item: Note: Whenever possible, provide link text that does not need additional context.

In "select" elements, use "optgroup" to group related "option" elements. Label the option groups with the "label" attribute. Avoid using dummy list entries to delimit groups.

Provide text alternatives for ASCII art, emoticons and leetspeak.

Avoid situations where horizontal scrolling may occur. This can cause trouble, especially for people with cognitive disabilities and low vision. To test, open pages containing text in a browser and resize the browser to 1/4 of the screen width to check for horizontal scrolling.

Use the latest mature HTML and XHTML specifications (currently HTML 4.01 and XHTML 1.0). Avoid proprietary elements and attributes and avoid using features in a manner that is not supported by the specification.

For required form controls, indicate the required status in the control's "label" or "legend". If not indicated by text (like "(required)"), then make sure the meaning of the indicator is explained before it is used. NOTE: Abbreviating "required" to "req." may be confusing.

When style information is removed from a web document or styles are turned off, make sure that the meaning of content and structural relations are preserved.

Use the CSS "letter-spacing" property to control the amount of whitespace between characters. Do not use blank characters (like space characters) that may change the meaning and pronunciation of words.

Use CSS to include decorative images wherever possible. The CSS "background", "background-image", "content", and "list-style-image" properties can be used. This avoids additional markup in the content.

When sizing fonts, use CSS and specify relative sizes using "em", percentages or named font sizes like "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", or "larger".

Use CSS margin, padding, and positioning properties instead of spacer images.

Limit line lengths to 80 characters or less. This makes reading easier, especially for those with certain disabilities. One way to do this is to use "div" elements with "max-width: 80em".

Use CSS to control the visual representation of text. There are many CSS font, color, transform, and spacing properties to let you do this. Using CSS increases accessibility by separating structure from presentation. Also, avoid images of text.

For better accessibility, consider using CSS to specify text and background colors of secondary content (such as banners, features and navigation) but avoid specifying text and background colors for the main content. This makes it easier for users to choose their own colors.

Use percentages or "em" values in CSS for text container sizes. This helps eliminate horizontal scrolling (when using percentages) and text cropping (when using "em") when users increase the text size.

For better accessibility, consider using CSS to specify borders and layout to delineate areas of a web page but avoid specifying text and text-background colors. This makes it easier for users to choose their own colors.

For better accessibility, make sure that the order of content in the source code matches the visual presentation order. This makes it easier to access the content in the proper order.

When using accesskeys with the "accesskey" attribute, use standard accesskeys if possible. An accesskeys standard is emerging from the UK government recommendation: 'S' - Skip navigation, '1' - Home page, '2' - What's new, '3' - Site map, '4' - Search, '5' - Frequently Asked Questions (FAQ), '6' - Help, '7' - Complaints procedure, '8' - Terms and conditions, '9' - Feedback form, '0' - Access key details. If using accesskeys, then consider using this standard (or another appropriate standard). Also, be aware that using accesskeys often reduces accessibility due to the problems it can create.

When using "accesskeys", understand the benefits as well as the associated problems. For example, accesskeys can override pre-existing keyboard shortcuts in user agents or assistive technologies. Because of poor design and implementation, accesskeys can actually reduce accessibility in many cases.