WAS: Visual Design and Colors

Visually hidden and inactive content MUST be hidden from screen reader users until that content is made visible and active for sighted users.

Any content or interface elements that are intentionally hidden from users — such as inactive dialogs, collapsed menus, etc. — must also be hidden from screen reader users. Once those items are made available to sighted users — such as when they activate a button or expand a menu item — the items must be made available to screen reader users. The goal is to give screen reader users an equivalent user experience to sighted users. If there is a compelling reason to hide content from sighted users, there is usually a compelling reason to also hide that content from blind users. And when the content is made available to sighted users, it makes sense to make it available to blind users as well.

CSS-generated content SHOULD be avoided.

CSS-generated content is supported by NVDA + Firefox, VoiceOver on OS X + Safari, and VoiceOver on iOS + Safari. It is not supported by JAWS + Internet Explorer or by Narrator + Edge. Given the lack of universal support, it is best to avoid CSS-generated content, especially if that content is meaningful and not just for decoration.

Small text (under 18 point regular font or 14 point bold font) SHOULD have a contrast ratio of at least 7 to 1 with the background.

Consider increasing the color contrast beyond the minimum requirements for mobile applications.

The number of characters or glyphs per line in any section or column of text SHOULD NOT exceed 80 (40 characters in Chinese, Japanese, or Korean)

For people with some reading or vision disabilities, long lines of text can become a significant barrier. They have trouble keeping their place and following the flow of text. Having a narrow block of text (not exceeding 80 characters or glyphs) makes it easier for them to continue on to the next line in a block.

tabindex of positive values SHOULD NOT be used.

It is possible to customize the tab order of focusable items using tabindex, by setting it to numerical values like 1, 2, 3, etc., but this has the potential to cause significant problems for keyboard users. It causes a discrepancy between the tab order and the reading order, leading to confusion when interacting with the page using a keyboard It removes the items from their natural tab order, and instead places them first in the tab order.

Web content MUST retain all essential visual information in Windows High Contrast Mode.

People who have low vision or other types of visual disabilities may utilize high contrast settings like Windows High Contrast Mode to read and interact with web pages. Windows High Contrast Mode overrides the original colors according to user preferences. When high contrast mode is enabled, though, it is important to keep in mind how the high contrast settings affect the original styles of a web page.

Text SHOULD NOT be full justified.

People with certain reading disabilities or cognitive disabilities have problems reading text that is both left and right justified. The uneven spacing between words in fully justified text can cause "rivers of white space" to run down the page making reading difficult and, in some cases, impossible. Text justification can also cause words to be either bunched closely together or stretched in unnatural ways, so that it is difficult for them to locate word boundaries.

Any information conveyed by color MUST be accompanied by a visible alternative (text, image, etc.) that does not depend on color for meaning.

Since colors may look similar to those who are colorblind or who have low contrast vision and other people who may adjust the screen colors to meet their needs, it is critical that color is not used as the only way to communicate or distinguish information

Line spacing SHOULD be at least 1.5 within paragraphs.

The purpose of paragraphs is to organize a group of sentences into a cohesive unit. Adding visual cues to help distinguish between paragraphs helps to reinforce the concept of a paragraph as a cohesive unit, separate from the preceding and following paragraphs. In the print world, indenting the first line of a paragraph is usually the convention for differentiating between paragraphs. This can be acceptable on the web too, but the convention on the web is usually to provide spacing above and below paragraphs, rather than to indent the first line.

Fonts SHOULD be user-customizable.

To achieve user-customizability, text should be in regular HTML format, not in images. Regular text in the HTML document can be customized by users in terms of: Color (of the text and/or background) Size Font Font variations (underline, italic, bold, etc.) Line spacing Paragraph spacing Other visual characteristics

Any information conveyed by color MUST be accompanied by a programmatically-discernible text alternative.

When color is used as the only means to convey information, people who are colorblind, have low vision or are blind will be unable to take advantage of or make sense of the information.

The navigation order of focusable elements MUST be logical and intuitive.

When keyboard users tab through the focusable items (buttons, links, form elements, custom controls, etc.), the order needs to make sense, so they don't get confused.

Visible UI components SHOULD use native controls and features (not images or graphic versions of controls) where available, to allow user customization of interface color and contrast.

While accessibility guidelines require a minimum contrast ratio between text and its background, some people are sensitive to brightness and need to change the colors. The use of real text instead of images of text allows users to adjust text and background color and contrast.

Visible text SHOULD be standard text in the markup (not images or graphic versions of text), to allow user customization of text color and contrast.

While accessibility guidelines require a minimum contrast ratio between text and its background, some people are sensitive to brightness and need to change the colors. The use of real text instead of images of text allows users to adjust text and background color and contrast.

Document Object Model (DOM)

source code after the browser has parsed it and run any relevant JavaScript. Watch out for: CSS positioning techniques and injecting content dynamically via JavaScript or AJAX