guideline-13-present-content-in-different-ways

Posted on April 27, 2019 Posted by

guideline-13-present-content-in-different-ways

Guideline 1.3: Present content in different ways


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

Your website audience has very different needs and preferences, so ensure that your content is available in a way that can be perceived by all users in different ways (visually, audibly, tactilely etc.).

If there is embedded information in a way that the structure and information cannot be rendered by the assistive technology, then it cannot be rendered in other formats as needed by the user. (e.g. text in an image).

WCAG 2 refers to structure as the way the parts of a Web page are organized in relation to each other; and the way a collection of Web pages is organized; and presentation as rendering of the content in a form that can be perceived by users.

1.3.1 Info and Relationships Level A

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

Compulsory

If the technology provides semantic structure to make information and relationships conveyed:
  • Use semantic elements to mark up structure AND use semantic markup to mark emphasized or special text
  • Use text to convey information that is conveyed by variations in presentation of text
  • Separate information and structure from presentation to enable different presentations
  • Make information and relationships conveyed using:
    Web page structure
    • semantic markup whenever color cues are used
    • ol, ul and dl for lists
    • h1-h6 to identify headings
    • functions of the Document Object Model to add content to a page
    Tables
    • table markup to present tabular information
    • caption elements to associate data table captions with data tables
    • the scope attribute to associate header cells and data cells in data tables
    • the summary attribute of the table element to give an overview of data tables
    • id and headers attributes to associate data cells with header cells in data tables
    Forms
    • label elements to associate text labels with form controls
    • the title attribute to identify form controls when the label element cannot be used
    • a description for groups of form controls using fieldset and legend elements
    • OPTGROUP to group OPTION elements inside a SELECT
If the technology in use does NOT provide the semantic structure to make the information and relationships conveyed:
  • Use text to convey information that is conveyed by variations in presentation of text
  • Make information and relationships conveyed through presentation programmatically determinable or available in text using standard text formatting conventions for paragraphs, lists and headings

Recommended

  • Use CSS to control visual presentation of text
  • Use CSS rather than tables for page layout
  • Position labels to maximize predictability of relationships
  • Use ARIA to provide a descriptive, programmatically determined label
  • Use ARIA to identify form fields as required
  • Provide labels for all form controls that do not have implicit labels
  • Organize a page using headings

Failures

  • using changes in text presentation to convey information without using the appropriate markup or text
  • insufficient information in DOM to determine one-to-one relationships (e.g., between labels with same id) in HTML
  • using white space characters to create multiple columns in plain text content
  • using white space characters to format tables in plain text content
  • using scripting events to emulate links in a way that is not programmatically determinable
  • using structural markup in a way that does not represent relationships in the content
  • using th elements, caption elements, or non-empty summary attributes in layout tables
  • using the pre element to markup tabular information
  • insufficient information in DOM to determine specific relationships in XML
  • using changes in text presentation to convey information without using the appropriate markup or text
  • association of label and user interface controls not being programmatically determinable
  • inserting non-decorative content by using :before and :after pseudo-elements and the ‘content’ property in CSS

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.

Compulsory

  • Order the content in a meaningful sequence for all the content in the Web page
  • Mark sequences in the content as meaningful using one of the following techniques AND order the content in a meaningful sequence for those sequences:
    • Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
    • Using the dir attribute on an inline element to resolve problems with nested directional runs
    • Positioning content based on structural markup with CSS
    • Using CSS letter-spacing to control spacing within a word
  • Make the DOM order match the visual order.

Recommended

  • Use left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-left
  • Provide a link to linearized rendering
  • Provide a style switcher between style sheets that affect presentation order

Failures

  • using white space characters to format tables in plain text content
  • using white space characters to create multiple columns in plain text content
  • using white space characters to control spacing within a word
  • using an HTML layout table that does not make sense when linearized
  • changing the meaning of content by positioning information with CSS

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, size, visual location, orientation, or sound.

Compulsory

  • Provide textual identification of items that otherwise rely only on sensory information to be understood

Recommended

  • Use an image with a text alternative for graphical symbols instead of a Unicode font glyph with the desired graphical appearance but different meaning

Failures

  • Identifying content only by its shape or location
  • Using a graphical symbol alone to convey information

More Info


guideline-13-present-content-in-different-ways

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-12-time-based-media

Guideline 1.2: Time-based Media


Provide alternatives for time-based media

You can use this guideline both for time-based media and synchronized media (with another format and/or time-based interactive components), including:

  • only audio
  • only video
  • audio and video combined
  • audio and/or video combined with interaction

Best practices

  • Prerecorded audio: Provide an alternative that presents equivalent information for prerecorded audio-only content.
  • Prerecorded video: Provide either an alternative for time-based media or an audio track to present equivalent information for prerecorded video-only content.
  • Prerecorded synchronized media: Provide an audio description or media alternative.
  • Prerecorded audio in synchronized media: Provide captions, and if possible, also sign language interpretation.
  • Live audio content in synchronized media (Live): provide captions.
  • Prerecorded video content in synchronized media (): Provide an audio description.
  • Embed interactive elements (for example links) in the alternative content where appropiate.

1.2.1 Prerecorded audio only and prerecorded video only Level A

For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:

  • Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
  • Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.

Compulsory

  • Provide an alternative for time-based media for prerecorded audio-only content or prerecorded video-only.
  • Provide audio that describes the important video content and describing it as such.

Recommended

  • Provide a transcript of an audio only presentation.
  • Link to textual information that provides comparable information (e.g., for a traffic Webcam, a municipality could provide a link to the text traffic report.)

Failures

  • Alternative text that are not descriptive. E.g. alt="spacer", alt="icon.jpg" or alt="image".
  • Long descriptions that does not present the same information.

1.2.2 Captions for prerecorded audio content Level A

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

Compulsory

  • Provide open (always visible) or closed captions.

Recommended

  • If the clip has no sound, provide a note saying “No sound is used in this clip”.
  • If there are audio tracks for different languages, provide captions using SMIL.

Failures

  • Captions omitting some dialogue or important sound effects
  • Synchronized media without captions when the synchronized media presents more information than is presented on the page
  • Not labeling a synchronized media alternative as an alternative.

1.2.3 Audio Description or Media Alternative (Prerecorded) Level A

An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

Compulsory

  • Provide an alternative for time based media linking to the alternative for time-based media immediately next to the non-text content; or using the body of the object element
  • Provide a second, user-selectable, audio track that includes audio descriptions
  • Provide a version of a movie with audio descriptions using SMIL or using any player that supports audio and video
  • Provide a movie with extended audio descriptions using SMIL or using any player that supports audio and video

Recommended

  • Use SMIL to provide audio description in multiple languages

1.2.4 Captions (Live media) Level AA

Captions are provided for all live audio content in synchronized media.

Compulsory

  • Create captions for live synchronized media and provide open (always visible) captions.
  • Create captions for live synchronized media and closed captions using any readily available media format that has a video player that supports closed captioning.
  • Create captions for live synchronized media and provide closed captions using SMIL.

1.2.5 Audio Description (Prerecorded media) Level AA

Audio description is provided for all prerecorded video content in synchronized media.

Compulsory

  • Provide a second, user-selectable, audio track that includes audio descriptions
  • Providing a version of a movie with audio descriptions using SMIL or using any player that supports audio and video.
  • Provide a movie with extended audio descriptions using SMIL or using any player that supports audio and video.

Recommended

  • Provide audio description in multiple languages in SMIL.
  • Provide audio description for live synchronized media.

1.2.6 Sign Language (Prerecorded media) Level AAA

Sign language interpretation is provided for all prerecorded audio content in synchronized media.

Compulsory

  • Include a sign language interpreter in the video stream
  • Provide a synchronized video of the sign language interpreter that can be displayed in a different viewport or overlaid on the image by the player using SMIL.

Recommended

  • Use metadata to associate sign language alternatives of a video to enable choice of sign language. E.g. provide, in metadata, URI(s) that point to several English sign language translations (ASL, SASL, BSL, Auslan, ISL, NZSL) of a Web page.

1.2.7 Extended Audio Description (Prerecorded media) Level AAA

Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.

Compulsory

  • Provide a movie with extended audio descriptions using SMIL or using any player that supports audio and video

Recommended

  • Add extended audio description in multiple languages in SMIL.

1.2.8 Media Alternative (Prerecorded media) Level AAA

An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.

Compulsory

If the content is prerecorded synchronized media:
  • Place a link to the alternative for time-based media immediately next to the non-text content OR
  • Link to the alternative using the body of the object element
If the content is prerecorded video-only:
  • Provide an alternative for time-based media for video-only content

Recommended

  • Use noembed with embed (HTML)
  • Provide a corrected script
  • Add detail to audio description

Failures

  • Not labeling a synchronized media alternative to text as an alternative

1.2.9 Audio-only (Live media) Level AAA

An alternative for time-based media that presents equivalent information for live audio-only content is provided.

Compulsory

  • Provide a link to a text transcript of a prepared statement or script if the script is followed
  • Provide text based alternatives for live audio-only content
  • Incorporate a live audio captioning service into a Web page

Recommended

  • Use metadata to associate text transcriptions with audio-only conten. E.g. provide, in metadata, URI(s) that point to several text transcripts (English, French, Dutch) of an audio file.

More info


guideline-12-time-based-media

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-11-provide-text-alternatives

Guideline 1.1: Provide 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.

Text can be rendered in a visual, oral or tactile way. Even by any combination of them. So text information can be presented and manipulated in whatever form best meets the user needs. For example, a blind person can understand a picture if her browsers reads aloud the text alternative. Or a deaf person can understand an audio file if there is a text alternative on the screen.

1.1.1. Non-text Content Level A

All “non-text content” that is presented to the user has a “text alternative” that serves the equivalent purpose

What is non-text content? How to provide alternatives? Here some examples

  • Data charts: Provide a short label (e.g. “Weather records in Spain from 1909 to 2009”); a longer description with a high-level summary of the data, trends and implications (e.g. “Timeline shows the rising of the temperature while the rain is descending. Most remarkable data are…”); and if possible and practical, the data in a table.
  • Audio recordings: Describe the content of the audio inside the link (e.g. “Barack Obama’s speech at the United Nations, May 2009.”), and inmediately after that, provide a link to a text transcript. If there are two or more speakers, identify when is speaking each one, just as applause, laughter, etc.
  • Sound effects: Provide text indicating what it means (e.g. an error fulfilling a form)
  • Animations that illustrate a subject: Make sure that the text alternative provide the full explanation, the animation must be a complement.
  • Live Web-cams: Provide a short text that identify the camera and how often it reloads the image.
  • Photographs and content images: Provide an alternative text that describes them and their context (the old way “alt” and “longdesc” is ok).
  • Thumbnail images with links : Provide an “alt” with the text you should include if no image is given.
  • Image maps : Provide an “alt” for the image, including its interactive purpose (e.g. “Europe Map. Select the country you want to travel”). Each image map area should include an “alt” .
  • Controls or Input fields: Provide a “name” that describes its purpose. (Guideline 4.1)
  • Time-Based Media: Provide text alternatives that describe the non-text content. (Guideline 1.2)

Exceptions for this rule

  • It is very difficult to give equivalent information for live Audio-only and live video-only content, so provide a descriptive label.
  • If the non-text content would be invalid if presented in text, for example a test or exam,  then text alternatives at least provide descriptive identification of the non-text content.
  • If you use a CAPTCHA, different output modes for different types of sensory perception are provided to accommodate different disabilities. For example, provide two or more modalities of CAPTCHAs, a human customer service representative or not requiring CAPTCHAs for authorized users.
  • If you have used a non-text content to create a specific sensory experience, provide a description and it purpose.
  • Decoration, Formatting, Invisible: Although CSS is strongly recommended, you are allowed to use invisible images to format text or smoothing corners. Just implement them in a way that they can be ignored by assistive technology ( “alt=''“).

Compulsory

Short text alternatives
  • Use alt attributes on images used as submit buttons
  • Combine adjacent image and text links for the same resource
  • Use alt attributes on img elements
  • Provide text alternatives on applet elements
  • Use the body of the object element
  • Provide text alternatives for the area elements of image maps
  • Provide text alternatives for ASCII art, emoticons, and leetspeak
  • Provide link text that describes the purpose of a link for anchor elements
  • Use a text alternative on one item within a group of images that describes all items in the group
Long text alternative
  • Use longdesc
  • Use the body of the object element

Recommended

General Techniques for Informative Non-Text Content
  • Identify informative non-text content
  • Keep short descriptions short
  • Describe images that include text
  • Provide a longer description of the non-text content where only a descriptive label is required using a technology-specific technique (for an accessibility-supported content technology) for long description listed above
  • Provide different sizes for non-text content when it cannot have an equivalent accessible alternative
  • Use server-side scripts to resize images of text
General Techniques for Live Non-Text Content
  • Link to textual information that provides comparable information (e.g., for a traffic Webcam, a municipality could provide a link to the text traffic report.)
HTML Techniques
  • Use noembed with embed
  • Write for browsers that do not support frames
  • Provide alternative content for iframe
  • Provide text and non-text alternatives for object
  • Not using long descriptions for iframe
  • Providing redundant text links for client-side image maps
CSS Techniques
  • Use CSS box rules instead of spacer images for layout design
  • Use CSS background, :before or :after rules for decorative images instead of img elements
  • Display empty table cells
ARIA Techniques
  • Use the ARIA presentation role to indicate elements are purely presentational
Metadata Techniques
  • Use metadata to associate text transcriptions with a video or audio-only content, e.g. providing, in metadata, URI(s) that points to an audio description and a text transcript of a video or audio file

Failures

  • Using alternative text that are not descriptive. E.g. alt=”spacer” , alt=”icon.jpg”, alt=”image2″…
  • Providing a text alternative that is not null for images that should be ignored
  • Omitting the alt-attribute for non-text content used for decorative purposes only in HTML
  • Not updating text alternatives when changes to non-text content occur, e.g. in a date chart.
  • Using CSS to include images that convey important information
  • Using text look-alikes to represent text without providing a text alternative
  • Using ASCII art without a text alternative
  • Omitting the alt attribute on img, area, and input elements of type “image”
  • Providing long descriptions for non-text content that does not present the same information

More info


guideline-11-provide-text-alternatives

Posted on April 27, 2019 Posted by Victoria Brooks

wcag-2-what-they-are-what-they-are-meant-to-be

WCAG 2: What they are, what they are meant to be


On December 11th, 2008, after 5 years of working, the W3C WAI released the WCAG 2.0 . They are an evolution of the WCAG 1.0, released on May 5th, 1999, that became a little bit obsolete due to technological advances. Despite this obsolescence, many laws still standed on these guidelines, so a new version was needed.

WCAG 2 follows the spirit of trying to bring a most accessible Web, but with some changes with the previous ones.

How are ‘WCAG 2’ organized?

WCAG 2 are organized by 4 layers: principles, guidelines, success criteria and techniques to accomplish them.

Principles
They provide the basis for Web accessibility: the website must be perceivable, operable, understandable, and robust.
Guidelines
There are 12 guidelines under the principles, similar to that on the WCAG 1, but with no levels of conformance
Success Criteria
Each guideline has a testable success criteria. Here they are the 3 levels of conformance, equal to that on WCAG 1: A (lowest), AA, and AAA (highest).
Techniques
Each guideline and success criteria has itw own informative techniques. There are 2 categories plus sufficient techniques and the advisory ones that address. The WAI had also documented some common failures, so we can learn how to avoid them.

More info