[UPDATED] Accessibility Tips

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

[UPDATED] Accessibility Tips

Post by Albert Wiersch »

CSS HTML Validator and Web Accessibility

CSS HTML Validator Home/Pro/Enterprise 2021/v21 generates a random accessibility tip message (unless disabled) to help developers create more accessible websites. I thought it would be helpful to display these accessibility tips here for everyone to see and for possible discussion and improvement. Feel free to comment on them or make any suggestions for improvement.

See also: Accessibility Testing with CSS HTML Validator for Windows

What is Accessibility?

When a website is accessible, it means that anyone, regardless of ability, can enjoy and use the website effectively. As an added bonus, it also makes the website more machine readable, and that often has search engine benefits. When a website is not accessible, then people with disabilities can be prevented from having similar access to a web page's information and function compared to someone without a disability. This can result in user complaints and even in lawsuits if the website is legally required to be accessible.

As a simple example, imagine a website with many images on it (using the img element). A blind visitor may be using a screen reader or talking browser to "view" this page. One of the most significant (and very easy to do) actions a web developer can do to increase accessibility and make a web page more accessible is to supply appropriate alternative text for each image using the alt attribute. This "alt" text is what the user's screen reader or talking browser will read to the blind user because he or she cannot see the images. If this "alt" text is not there, then the web page often becomes inaccessible to blind users.

Also, consider an image on a product page that says "Buy Now" but there is no alternative text for this image. Because there is no "alt" text, a blind user could easily get lost if they are trying to order the product. Instead, the image should have an alt attribute that is simply alt="Buy Now". This will let a screen reader or talking browser tell the blind user that the image is the order button, and the user will then know what to do to continue buying the product. Without this simple addition, a blind user would not be able to use the web page as effectively as a user who is not disabled.


Accessibility Tips in 2021/v21.03 (not in any particular order)

  • Beware of "quick-fix" overlay accessibility products. Accessibility should be an integral part of your website. Visit viewtopic.php?f=9&t=3195 for more information.
  • Use Level 4 media queries like "prefers-reduced-motion" to improve accessibility and the user experience. Visit https://developer.mozilla.org/en-US/doc ... ced-motion for more information.
  • 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 https://www.w3.org/TR/WCAG20-TECHS/H4 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. Visit https://www.w3.org/TR/WCAG20-TECHS/C29 for more information.
  • Provide expansion or definition for abbreviations using the "abbr" element. Example: <abbr title="World Wide Web">WWW</abbr>. Visit https://www.w3.org/TR/WCAG20-TECHS/H28 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H33 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H39 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H39 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H42 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H48 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H49 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H51 for more information.
  • Use "dfn" to mark the use of a word or phrase where it is defined (the term, not the definition). Visit https://www.w3.org/TR/WCAG20-TECHS/H54 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H59 for more information. Consider also linking to a glossary page if appropriate. Visit https://www.w3.org/TR/WCAG20-TECHS/H60 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H69 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H71 for more information.
  • Use these techniques to identify the purpose of a link using link text combined with its enclosing list item: https://www.w3.org/TR/WCAG20-TECHS/H77, or combined with its enclosing paragraph: https://www.w3.org/TR/WCAG20-TECHS/H78, or combined with its enclosing table cell and associated table headings: https://www.w3.org/TR/WCAG20-TECHS/H79, or combined with the preceding heading element: https://www.w3.org/TR/WCAG20-TECHS/H80, or combined with the parent list item: https://www.w3.org/TR/WCAG20-TECHS/H81. 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H85 for more information.
  • Provide text alternatives for ASCII art, emoticons and leetspeak. Visit https://www.w3.org/TR/WCAG20-TECHS/H86 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/H87 for more information.
  • Use the latest mature HTML/XHTML features and specifications. Avoid proprietary elements and attributes and avoid using features in a manner that is not supported by the specification. Consider doing a 'Standards-compliant check' to look for non-standard tags and attributes. Visit https://www.w3.org/TR/WCAG20-TECHS/H88 for more information."); }
  • For required form controls, indicate the required status in the control's "+'"label" or "legend". If not indicated by text (like "(required)"), then ensure the meaning of the indicator is explained before it is used. Note: Abbreviating "required" to "req." may be confusing. Visit https://www.w3.org/TR/WCAG20-TECHS/H90 for more information.
  • When style information is removed from a web document or styles are turned off, ensure that the meaning of content and structural relations are preserved. Visit https://www.w3.org/TR/WCAG20-TECHS/C6 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/C8 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/C9 for more information.
  • 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". Visit https://www.w3.org/TR/WCAG20-TECHS/C12, https://www.w3.org/TR/WCAG20-TECHS/C13, and https://www.w3.org/TR/WCAG20-TECHS/C14 for more information.
  • Use CSS margin, padding, and positioning properties instead of spacer images. Visit https://www.w3.org/TR/WCAG20-TECHS/C18 for more information.
  • 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". Visit https://www.w3.org/TR/WCAG20-TECHS/C20 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/C22 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/C23 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/C24 and https://www.w3.org/TR/WCAG20-TECHS/C28 for more information.
  • 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. Visit https://www.w3.org/TR/WCAG20-TECHS/C25 for more information.
  • Ensure 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. Visit https://www.w3.org/TR/WCAG20-TECHS/C27 for more information.
  • 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. Visit http://jkorpela.fi/forms/accesskey.html for more information."); }
  • 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. Visit http://jkorpela.fi/forms/accesskey.html for more information.
  • Ensure that all videos have appropriate (and accurate) closed captioning and audio descriptions for people who are deaf or hearing impaired.
  • Ensure that all audio media has an appropriate transcript that can be read instead of heard.
  • Ensure that keyboard-only navigation is possible (with no mouse). A user should be able to navigate a website using only the tab key, keyboard shortcuts, and other keyboard actions.
  • Ensure that sufficient contrast is used between critical information and its background. Low contrast (and poor color combinations) can make text and images difficult to perceive.
  • Avoid or limit the use of flashing and moving objects because this can affect someone prone to seizures or distractibility.
  • Use ARIA landmarks to identify regions (sections) of a page. Visit https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11 for more information.
  • If a timeout is used that could result in lost data while performing a task then notify the user how much time they are allowed before they begin the task. Visit https://www.w3.org/WAI/WCAG21/Understan ... eouts.html for more information.
  • Use a responsive web design that can present content without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for text intended to scroll horizontally. Visit https://www.w3.org/WAI/WCAG21/Understanding/reflow.html for more information.
  • Use sufficient contrast to ensure that active user interface components and meaningful graphics are distinguishable by people with moderately low vision. Visit https://www.w3.org/WAI/WCAG21/Understan ... trast.html for more information.
  • Ensure that no loss of functionality or content occurs (text is not cut off or missing) when the user adjusts line height, paragraph spacing, letter spacing, and word spacing (within limits). Visit https://www.w3.org/WAI/WCAG21/Understan ... acing.html for more information.
  • Ensure that additional content triggered on pointer hover or keyboard focus is dismissible, hoverable, and persistent. Visit https://www.w3.org/WAI/WCAG21/Understan ... focus.html for more information.
  • Ensure that any use of single character key shortcuts (like those not requiring the use of a modifier key like ALT or CTRL) can be turned off, remapped, or are active only on focus. Visit https://www.w3.org/WAI/WCAG21/Understan ... tcuts.html for more information.
  • Ensure that the words which visually label a component are also the words programmatically associated with the component. Visit https://www.w3.org/WAI/WCAG21/Understan ... -name.html for more information.
  • Avoid unnecessary (non-essential) animations that are triggered by user interactions, or provide a control for users to turn off such animations. Visit https://www.w3.org/WAI/WCAG21/Understan ... tions.html for more information.
  • Ensure that functionality that uses multipoint or path-based gestures can also be operated with a single pointer without a path-based gesture (unless a multipoint or path-based gesture is essential). Visit https://www.w3.org/WAI/WCAG21/Understan ... tures.html for more information.
  • Make it easy for users to prevent, cancel, or undo accidental or erroneous pointer input. Visit https://www.w3.org/WAI/WCAG21/Understan ... ation.html for more information.
  • Ensure that functions that are triggered by moving a device or by gesturing towards the device can also be operated by more conventional user interface components (with some exceptions). Visit https://www.w3.org/WAI/WCAG21/Understan ... ation.html for more information.
  • Ensure that the target size for pointer inputs is at least 44 by 44 CSS pixels (with some exceptions). Visit https://www.w3.org/WAI/WCAG21/Understan ... -size.html for more information.
  • Ensure that users can use and switch among different input devices and mechanisms (with some exceptions) when interacting with web content. Visit https://www.w3.org/WAI/WCAG21/Understan ... nisms.html for more information.
  • Do not restrict content to a single display orientation (like portrait or landscape) unless it is essential. Visit https://www.w3.org/WAI/WCAG21/Understan ... ation.html for more information.
  • Ensure that status messages can be programmatically determined through role or properties so that they can be presented to the user by assistive technology without receiving focus. Visit https://www.w3.org/WAI/WCAG21/Understan ... sages.html for more information.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply