Guideline 1.1: Text Alternatives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

1.1.1: Non-text Content (Level A)

Non-text contents is explained by W3C as: any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language. This includes ASCII Art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text.

Examples:

1. Missing alt attribute.

Correct

The image below has an alt attribute that explains the content of the image.

Wrong

The image below does not have an alt attribute.

2. Decorative image containing alt with non-related text.

Correct

The image below is decorative and should therefore contain an empty alt attribute.

Wrong

The image below is decorative but contains an alt attribute that says "This tag is not necessary".

3. Image containing text that is important for the reader.

Correct

The image below contains important text that should be conveyed in the alt attribute.

Wrong

The image below contains important text but the text is not conveyed in the alt attribute as it should be when it is only text in the image. For reference see example given by w3: example.

4. Properly considering HTML emojis as images.

5. Hiding ASCII art that is purely decorative.

                           |
                         .'|'.
                        /.'|\ \
                        | /|'.|
                         \ |\/
                          \|/
                           `
                        

                           |
                         .'|'.
                        /.'|\ \
                        | /|'.|
                         \ |\/
                          \|/
                           `
                        

6. Providing alternative text for ASCII content.

                            _
                          .'_`--.___   __
                         ( 'o`   - .`.'_ )
                           `-._      `_`./_
                             '/\\    ( .'/ )
                            ,__//`---'`-'_/
                             /-'        '/  VK
                        

                            _
                          .'_`--.___   __
                         ( 'o`   - .`.'_ )
                           `-._      `_`./_
                             '/\\    ( .'/ )
                            ,__//`---'`-'_/
                             /-'        '/  VK
                        

Guideline 1.2: Time-based Media

Provide alternatives for time-based media.

1.2.2: Captions (Prerecorded) (Level A)

Synchronized captions are provided for non-live video.

Example:

1. Caption tracks for videos

Guideline 1.3: Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

1.3.1: Info and Relationships (Level A)

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Examples:

1. h1-h6 in correct order.

2. Using lists.

3. Proper table markup.

4. Asterisk to label obligatory forms.

5. Labeling for checkboxes.

6. Applying title attribute instead of labels.

1.3.2: Meaningful Sequence (Level A)

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Examples:

1. Correct order.

2. White space in the middle of a word.

1.3.3: Sensory Characteristics (Level A)

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.

Example:

1. Navigation using icons.

1.3.4: Orientation (Level AA)

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

Example:

Content not showing in certain orientation.

1.3.5: Identify Input Purpose (AA)

Form autocompletion is a way of easing form completion for users that may struggle with reading, typing, or those that use assistive technologies in general. Providing the appropriate labels and titles helps not only users to understand the purpose of the field, but allows for the autocompletion as a result of forms being able to be programmatically determined.

Depending on the context of the form, some input types are not available as autocompletions. There is a list of Input Attribute Values that catalogues all of the available autocompletion for input types.

Example:

1. Autocompletion identification.

Guideline 1.4: Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

1.4.1: Use of Color (Level A)

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Examples:

1. Link in text.

2. Color cues in a form.

1.4.3: Contrast Minimum (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

• Large Text - Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental - Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes - Text that is part of a logo or brand name has no contrast requirement.

Large scale text is text with at least 18 point or 14 point bold or font size that would yield equivalent size.

Examples:

1. Normal text.

2. Large text.

3. Bold text.

4. Contrasting normal text over a background image.

5. Contrasting large text over a background image.

6. Contrasting large bold text over a background image.

1.4.4: Resize Text (AA)

This criteria ensures dynamic resizing for font sizes and having css measurements of the font size that align and are relative to the other measurements such as viewport or container. Below represents appropriate techniques of fontsizing with percentages, em units, and named font sizes.

Examples:

1. Various font sizing measures.

2. Wrappable resizing text boxes.

1.4.6: Contrast Enhanced (Level AAA)

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

• Large Text - Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
• Incidental - Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes - Text that is part of a logo or brand name has no contrast requirement.

Large scale text is text with at least 18 point or 14 point bold or font size that would yield equivalent size.

Examples:

1. Normal text.

2. Large text.

3. Bold text.

4. Contrasting normal text over a background image.

5. Contrasting large text over a background image.

6. Contrasting large bold text over a background image.

1.4.8: Visual Presentation (AAA)

The intent of this success criterion is to ensure that visually rendered text is presented in such a manner that it can be perceived without its layout interfering with its readability. People with some cognitive, language and learning disabilities and some low vision users cannot perceive the text and/or lose their reading place if the text is presented in a manner that is difficult for them to read.

Examples:

1. Justified Text.

2. Line Spacing.