From 9679fd55d2286cb305ab442c7927275a1e3f0f46 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Sun, 6 Jun 2021 13:45:53 -0400 Subject: [PATCH 01/38] Editorial fixes from PR#526 #526 --- explainer/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/explainer/index.html b/explainer/index.html index 5b815f07..29247dbe 100644 --- a/explainer/index.html +++ b/explainer/index.html @@ -119,7 +119,7 @@

Goals for Conformance

  • Better align conformance with the experiences of people with disabilities, and keep in mind that people with different disabilities have different experiences.
  • Treat the needs of all disabilities equitably.
  • Support a measurement and conformance structure that includes guidance for a broad range of disabilities. This includes more attention to the needs of low vision and cognitive accessibility, whose needs may not fit the true/false statement success criteria of WCAG 2.x. -
  • Consider the needs of more organizations +
  • Consider the needs of more organizations.
  • Be user-oriented instead of page-oriented. Think about what is the person trying to do.
  • Wherever possible, preserve the organization’s investment in training, tooling, and knowledge.
  • Support the ability for organizations to choose parts of their site or product for conformance (a logical subset of a site or product).
    • @@ -250,7 +250,7 @@

    Additional Documentation and Scoring Information

    Some of these sections are in this document. You can find others in links within the sections.

    -

    The core structure has inter-relationships with supporting documents and the scoring process. Functional needs inform both outcomes and functional categories. The tests within methods are used to inform the scores for each outcome. Then outcome scores are aggregated to create scores by functional category and an overall score. These then result in a bronze rating. Silver and gold ratings build on the bronze rating to demonstrate improved accessibility. General information about guidelines is available in How To documents.

    +

    The core structure has inter-relationships with supporting documents and the scoring process. Functional needs inform both outcomes and functional categories. The tests within methods are used to inform the scores for each outcome. Then outcome scores are aggregated to create scores by functional category and an overall score. These then result in a bronze rating. Silver and gold ratings build on the bronze rating to demonstrate improved accessibility. General information about guidelines is available in How-To documents.

    Documentation and Scoring Structure
    From deb75099d04db11aac26646302d21c9a513383b4 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Tue, 15 Jun 2021 16:06:07 -0400 Subject: [PATCH 02/38] Update Explainer from June 8 meeting Added two goals for Conformance Added diversity goal Put ED Note on Accessibility Supported. --- explainer/index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/explainer/index.html b/explainer/index.html index 29247dbe..4b14b3c0 100644 --- a/explainer/index.html +++ b/explainer/index.html @@ -99,6 +99,7 @@

    Goals for Inclusion

    • Actively recruit a diverse range of people with disabilities in recognition of the importance of their contributions to accessibility standards and solutions. Review and monitor whether people are included. Continually evaluate inclusive features of available tooling and procedures.
    • Facilitate global participation and feedback. +
    • Include Diversity, Equity, Inclusion.
    @@ -128,9 +129,12 @@

    Goals for Conformance

  • Help organizations prioritize things that have a greater impact on improving the experience of people with disability.
  • Develop a more flexible method of measuring conformance that is better suited to accommodate dynamic or more regularly updated content.
    • -
  • Remove “accessibility supported” as an author responsibility, and help developers of authoring tools, browsers, and assistive technologies learn the behaviors that users expect of their products. +
  • Remove “accessibility supported” as an author responsibility, and help developers of authoring tools, browsers, and assistive technologies learn the behaviors that users expect of their products. Note: This requires more detailed discussion in AGWG. It does not yet have consensus.
  • Improve tests so that repeated tests get more consistent results.
  • Increase the ability to create more automated tests. +
  • Lower the cost of accessibility testing. +
  • Do not increase the testing burden. +
    • From 5818f8a624e1bf9301b9771d6a6ff3945d3802e6 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 16 Jun 2021 10:28:24 -0400 Subject: [PATCH 03/38] Update Explainer with Inclusion goal --- explainer/index.html | 56 ++++++++++++++++++++++---------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/explainer/index.html b/explainer/index.html index 4b14b3c0..2292951d 100644 --- a/explainer/index.html +++ b/explainer/index.html @@ -68,12 +68,12 @@

    Background and development history

    The Silver Task Force of the Accessibility Guidelines Working Group and the W3C Silver Community group have partnered to produce the needs, requirements, and structure for the new accessibility guidance. To date, the group has:

      -
    1. Researched accessibility guidance needs -
    2. Developed problem statements and opportunities to improve accessibility guidance -
    3. Received input from industry leaders for directions to proceed -
    4. Drafted requirements for the project (they will be reviewed after public feedback from the First Public Working Draft) -
    5. Created and tested prototypes for aspects of the project -
    6. Created a First Public Working Draft +
    7. Researched accessibility guidance needs;
      8. +
    8. Developed problem statements and opportunities to improve accessibility guidance;
      9. +
    9. Received input from industry leaders for directions to proceed;
      10. +
    10. Drafted requirements for the project (they will be reviewed after public feedback from the First Public Working Draft);
      11. +
    11. Created and tested prototypes for aspects of the project; and
      12. +
    12. Created a First Public Working Draft and a heartbeat update draft.
    @@ -97,43 +97,43 @@

    Goals

    Goals for Inclusion

    These goals come from the Silver Requirements Design Principles. The creation process for the guidelines should:

      -
    • Actively recruit a diverse range of people with disabilities in recognition of the importance of their contributions to accessibility standards and solutions. Review and monitor whether people are included. Continually evaluate inclusive features of available tooling and procedures. -
    • Facilitate global participation and feedback. -
    • Include Diversity, Equity, Inclusion. +
    • Actively recruit a diverse range of people with disabilities in recognition of the importance of their contributions to accessibility standards and solutions. Review and monitor whether people are included. Continually evaluate inclusive features of available tooling and procedures.
      • +
    • Facilitate global participation and feedback.
      • +
    • Set goals for Diversity, Equity, Inclusion. Include a goal for more recruiting of younger accessibility experts.

    Goals for Content

      -
    • Support the needs of a wide range of people with disabilities and recognize that people have individual and multiple needs. -
    • Be flexible enough to support the needs of people with disabilities and keep up with emerging technologies. The information structure allows guidance to be added or removed. -
    • Be written in plain language, as easy as possible to understand. We need a definition of plain language that includes the ease of translation. Ideally, it will be a broadly accepted definition internationally. -
    • Improve the ability to support automated testing where appropriate and provide a procedure for repeatable tests when manual testing is appropriate. -
    • Be data-informed and evidence-based where possible. We recognize that research and evidence are influenced by the number of people with a particular disability, by the size of the body of research, and by the difficulty in capturing data regarding some disabilities or combination of disabilities. The intent is to make informed decisions wherever possible to ensure that the needs of all people with disabilities are prioritized, including needs that differ from the majority. In situations where there is no evidence or research, valid data-gathering methods should be used to obtain and evaluate information from advocacy groups, people with lived experience and other subject matter experts. -
    • Be written so the Guideline content is usable in adaptable and customizable ways. For example, Silver content is available to be extracted by users to adapt to their needs. +
    • Support the needs of a wide range of people with disabilities and recognize that people have individual and multiple needs.
      • +
    • Be flexible enough to support the needs of people with disabilities and keep up with emerging technologies. The information structure allows guidance to be added or removed.
      • +
    • Be written in plain language, as easy as possible to understand. We need a definition of plain language that includes the ease of translation. Ideally, it will be a broadly accepted definition internationally.
      • +
    • Improve the ability to support automated testing where appropriate and provide a procedure for repeatable tests when manual testing is appropriate.
      • +
    • Be data-informed and evidence-based where possible. We recognize that research and evidence are influenced by the number of people with a particular disability, by the size of the body of research, and by the difficulty in capturing data regarding some disabilities or combination of disabilities. The intent is to make informed decisions wherever possible to ensure that the needs of all people with disabilities are prioritized, including needs that differ from the majority. In situations where there is no evidence or research, valid data-gathering methods should be used to obtain and evaluate information from advocacy groups, people with lived experience and other subject matter experts.
      • +
    • Be written so the Guideline content is usable in adaptable and customizable ways. For example, Silver content is available to be extracted by users to adapt to their needs.

    Goals for Conformance

    The goals are based on the Silver research, the results from the Silver Design Sprint, and input from the Silver Community Group and Task Force.

      -
    • Better align conformance with the experiences of people with disabilities, and keep in mind that people with different disabilities have different experiences. -
    • Treat the needs of all disabilities equitably. -
    • Support a measurement and conformance structure that includes guidance for a broad range of disabilities. This includes more attention to the needs of low vision and cognitive accessibility, whose needs may not fit the true/false statement success criteria of WCAG 2.x. -
    • Consider the needs of more organizations. -
    • Be user-oriented instead of page-oriented. Think about what is the person trying to do. -
    • Wherever possible, preserve the organization’s investment in training, tooling, and knowledge. +
    • Better align conformance with the experiences of people with disabilities, and keep in mind that people with different disabilities have different experiences.
      • +
    • Treat the needs of all disabilities equitably.
      • +
    • Support a measurement and conformance structure that includes guidance for a broad range of disabilities. This includes more attention to the needs of low vision and cognitive accessibility, whose needs may not fit the true/false statement success criteria of WCAG 2.x.
      • +
    • Consider the needs of more organizations.
      • +
    • Be user-oriented instead of page-oriented. Think about what is the person trying to do.
      • +
    • Wherever possible, preserve the organization’s investment in training, tooling, and knowledge.
    • Support the ability for organizations to choose parts of their site or product for conformance (a logical subset of a site or product).
    • Create a more flexible conformance model that addresses the challenges in applying the 2.x conformance model to large, complex, or dynamic websites and web applications.
      • Help organizations prioritize things that have a greater impact on improving the experience of people with disability.
      • Develop a more flexible method of measuring conformance that is better suited to accommodate dynamic or more regularly updated content.
      -
    • Remove “accessibility supported” as an author responsibility, and help developers of authoring tools, browsers, and assistive technologies learn the behaviors that users expect of their products. Note: This requires more detailed discussion in AGWG. It does not yet have consensus. -
    • Improve tests so that repeated tests get more consistent results. -
    • Increase the ability to create more automated tests. -
    • Lower the cost of accessibility testing. -
    • Do not increase the testing burden. +
    • Remove “accessibility supported” as an author responsibility, and help developers of authoring tools, browsers, and assistive technologies learn the behaviors that users expect of their products. Note: This requires more detailed discussion in AGWG. It does not yet have consensus.
      • +
    • Improve tests so that repeated tests get more consistent results.
      • +
    • Increase the ability to create more automated tests.
      • +
    • Lower the cost of accessibility testing.
      • +
    • Do not increase the testing burden.
    @@ -144,8 +144,8 @@

    Non-Goals or Out-of-Scope

  • Non-web emerging technologies (this may change as the charter is clarified)
  • Normative requirements for platforms, operating systems, software in the web technology stack (etc.)
      -
    • We want to point to external accessibility guidance by the vendor -
    • We want to document the needs of people with disabilities where vendor accessibility guidance is lacking +
    • We want to point to external accessibility guidance by the vendor
      • +
    • We want to document the needs of people with disabilities where vendor accessibility guidance is lacking
    • From 22b144c4d362b9b0eb7892305c70522d6dc2f6cc Mon Sep 17 00:00:00 2001 From: francisstorr Date: Fri, 16 Jul 2021 08:57:18 -0700 Subject: [PATCH 04/38] rename and update Resources page - resources.html is now background.html - page content updated --- methods/decorative-images/background.html | 41 +++++++++++++++++++++++ methods/decorative-images/resources.html | 27 --------------- 2 files changed, 41 insertions(+), 27 deletions(-) create mode 100644 methods/decorative-images/background.html delete mode 100644 methods/decorative-images/resources.html diff --git a/methods/decorative-images/background.html b/methods/decorative-images/background.html new file mode 100644 index 00000000..e661d96f --- /dev/null +++ b/methods/decorative-images/background.html @@ -0,0 +1,41 @@ + + + + Method - Background + + +
    +

    Resources

    +
    +
    +
    +

    W3C Resources

    + +
    +
    +

    Non-W3C Resources

    + +
    +
    +

    Accessibility Support

    +

    No accessibility support issues known.

    +
    +
    +

    Assumptions

    +
      +
    • svg elements with a semantic role of graphics-document and with an empty ("") accessible name are ignored by assistive technologies tested for this rule. If some assistive technology does not ignore these elements, and that assistive technology is required for conformance, passing this rule does not ensure all decorative svg elements can be ignored, and the Success Criterion 1.1.1 Non-Text Content may still not be satisfied. The same is true for canvas elements with no semantic role and an empty ("").
      • +
    • A web page with informative images without an accessible name may conform to WCAG 2.1 Level A when the information provided by that image is available elsewhere on the web page itself. For example if an equivalent text is adjacent to the image, or if the text alternative is included in the accessible name of a parent element. +
      • +
    +
    +
    + + \ No newline at end of file diff --git a/methods/decorative-images/resources.html b/methods/decorative-images/resources.html deleted file mode 100644 index e4dbb5c0..00000000 --- a/methods/decorative-images/resources.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - Method - Resources - - -
    -

    Resources

    -
    -
    -
    -

    W3C Resources

    - -
    -
    -

    Non-W3C Resources

    - -
    -
    - - \ No newline at end of file From 5983fe2cd5db5e3585b687c51f301ba6391758ab Mon Sep 17 00:00:00 2001 From: francisstorr Date: Fri, 16 Jul 2021 11:12:14 -0700 Subject: [PATCH 05/38] initial commit of glossary page --- methods/decorative-images/glossary.html | 118 ++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 methods/decorative-images/glossary.html diff --git a/methods/decorative-images/glossary.html b/methods/decorative-images/glossary.html new file mode 100644 index 00000000..7b7877c3 --- /dev/null +++ b/methods/decorative-images/glossary.html @@ -0,0 +1,118 @@ + + + + Method - Glossary + + +
    +

    Glossary

    +
    +
    +
    +

    Accessible Name

    +

    The accessible name is the programmatically determined name of a user interface element that is included in the accessibility tree.

    +

    The accessible name is calculated using the accessible name and description computation.

    +

    For native markup languages, such as HTML and SVG, additional information on how to calculate the accessible name can be found in HTML Accessibility API Mappings 1.0, Accessible Name and Description Computation (working draft) and SVG Accessibility API Mappings, Name and Description (working draft).

    +

    For more details, see ACT’s examples of accessible name.

    +

    Note: As per the accessible name and description computation, each element always has an accessible name. When no accessible name is provided, the element will nonetheless be assigned an empty ("") one.

    +

    Note: As per the accessible name and description computation, accessible names are flat string trimmed of leading and trailing whitespace. Notably, it is not possible for a non-empty accessible name to be composed only of whitespace since these must be trimmed.

    +
    + +
    +

    Explicit Semantic Role

    +

    The explicit semantic role of an element is determined by its role attribute (if any).

    +

    The role attribute takes a list of tokens. The explicit semantic role is the first valid role in this list. The valid roles are all non-abstract roles from WAI-ARIA Specifications. If the element has no role attribute, or if it has one with no valid role, then this element has no explicit semantic role.

    +

    Other roles may be added as they become available. Not all roles will be supported in all assistive technologies. Testers are encouraged to adjust which roles are allowed according to the accessibility support base line. For the purposes of executing test cases in all rules, it should be assumed that all roles are supported by assistive technologies so that none of the roles fail due to lack of accessibility support.

    +
    + +
    +

    Focusable

    +

    Elements that can become the target of keyboard input as described in the HTML specification of focusable and HTML specification of can be focused.

    +
    + +
    +

    Hidden State

    +

    An HTML element’s hidden state is “true” if at least one of the following is true for itself or any of its ancestors in the flat tree:

    +
      +
    • has a hidden attribute; or
      • +
    • has a computed CSS property display of none; or
      • +
    • has a computed CSS property visibility of hidden; or
      • +
    • has an aria-hidden attribute set to true
      • +
    +

    In any other case, the element’s hidden state is “false”.

    +
    + +
    +

    Implicit Semantic Role

    +

    The implicit semantic role of an element is a pre-defined value given by the host language which depends on the element and its ancestors.

    +

    Implicit roles for HTML and SVG, are documented in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

    +
    + +
    +

    Included In The Accessibility Tree

    +

    Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet the requirements of the individual user.

    +

    The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are included in the accessibility tree can be found in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

    +

    For more details, see ACT’s examples of included in the accessibility tree.

    +

    Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

    +
    + +
    +

    Marked As Decorative

    +

    An element is marked as decorative if one of the following conditions is true:

    +
      +
    • it has an explicit role of none or presentation; or
      • +
    • it is an img element with an alt attribute whose value is the empty string (alt=""), and with no explicit role.
      • +
    +

    Elements are marked as decorative as a way to convey the intention of the author that they are pure decoration. It is different from the element actually being pure decoration as authors may make mistakes. It is different from the element being effectively ignored by assistive technologies as rules such as presentational roles conflict resolution may overwrite this intention.

    +

    Elements can also be ignored by assistive technologies if their hidden state is true. This is different from marking the element as decorative and does not convey the same intention. Notably, the hidden state of an element may change as users interact with the page (showing and hiding elements) while being marked as decorative should stay the same through all states of the page.

    +
    + +
    +

    Outcome

    +

    An outcome is a conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

    +
    +
    Inapplicable:
    +
    No part of the test subject matches the applicability.
    +
    Passed:
    +
    A test target meets all expectations.
    +
    Failed:
    +
    A test target does not meet all expectations
    +
    +

    Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

    +

    Note: Implementations using the EARL 1.0 Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such “interim” results can be expressed with the incomplete outcome.

    +
    + +
    +

    Semantic Role

    +

    The semantic role of an element is determined by the first of these cases that applies:

    +
    +
    Conflict:
    +
    If the element is marked as decorative, but the element is included in the accessibility tree; or would be included in the accessibility tree when its hidden state is false, then its semantic role is its implicit role.
    +
    Explicit:
    +
    If the element has an explicit role, then its semantic role is its explicit role.
    +
    Implicit:
    +
    The semantic role of the element is its implicit role.
    +
    +
    + +
    +

    Visible

    +

    Content perceivable through sight.

    +

    Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

    +

    Content is defined in WCAG.

    +

    For more details, see ACT examples of visible.

    +
    + +
    +

    WAI-ARIA Specifications

    +

    The WAI-ARIA Specifications group both the WAI ARIA W3C Recommendation and ARIA modules, namely:

    + +

    Note: depending on the type of content being evaluated, part of the specifications might be irrelevant and should be ignored.

    +
    +
    + + \ No newline at end of file From 65560ea52444c97be310511c01f15c866b658f32 Mon Sep 17 00:00:00 2001 From: francisstorr Date: Fri, 16 Jul 2021 11:47:04 -0700 Subject: [PATCH 06/38] update description page - move in content from index page. - add new content. --- methods/decorative-images/description.html | 49 ++++++++++++++++++---- 1 file changed, 41 insertions(+), 8 deletions(-) diff --git a/methods/decorative-images/description.html b/methods/decorative-images/description.html index 8fa8e9cf..1ded8baf 100644 --- a/methods/decorative-images/description.html +++ b/methods/decorative-images/description.html @@ -11,17 +11,50 @@

    Description

    Outcome

    This method supports the outcome Text alternatives available.

    +
    +
    +

    Platform

    +
      +
    • All web platforms
      • +
    +
    +
    +

    Technology

    +
      +
    • HTML
      • +
    • CSS
      • +
    • ARIA
      • +
    • ePub
      • +
    • PDF
      • +
    +
    +
    +

    Input aspects for testing

    +
      +
    • DOM tree
      • +
    • Accessibility tree
      • +
    • CSS styling
      • +
    +
    +
    +

    Summary

    +

    Decorative images don’t add information to the content of a page. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Merely omitting the alternative text can cause problems as some screen readers will try to repair the omission by reading the image filename. Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page.

    +
    +
    +

    How it solves user need

    +

    Explicitly marking an image as decorative will cause assistive technology to skip over the image as if it didn’t exist on the page. This reduces time and fatigue needed to listen to descriptions of decorative images or long cryptic file names.

    -
    -

    Detailed description

    -

    Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

    -

    In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.

    +
    +

    When To Use

    +

    Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

    +

    In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.

    Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. Images may be decorative when they are:

      -
    • Visual styling such as borders, spacers, and corners;
      • -
    • Supplementary to link text to improve its appearance or increase the clickable area;
      • -
    • Illustrative of adjacent text but not contributing information (“eye-candy”);
      • -
    • Identified and described by surrounding text.
      • +
    • A background behind textual content;
      • +
    • Visual styling such as borders, spacers, and corners;
      • +
    • Supplementary to link text to improve its appearance or increase the clickable area;
      • +
    • Illustrative of adjacent text but not contributing information (“eye-candy”);
      • +
    • Identified and described by surrounding text.
    From d157c873f298eeff4a8a431077494a98ac032f3b Mon Sep 17 00:00:00 2001 From: francisstorr Date: Fri, 16 Jul 2021 11:55:18 -0700 Subject: [PATCH 07/38] delete into page --- methods/decorative-images/intro.html | 33 ---------------------------- 1 file changed, 33 deletions(-) delete mode 100644 methods/decorative-images/intro.html diff --git a/methods/decorative-images/intro.html b/methods/decorative-images/intro.html deleted file mode 100644 index 3b840453..00000000 --- a/methods/decorative-images/intro.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - Method - Introduction - - -
    -

    Introduction

    -
    -
    -
    -

    Platform

    -
      -
    • All web platforms
      • -
    -
    -
    -

    Technology

    -
      -
    • HTML, CSS, ARIA, ePub, PDF
      • -
    -
    -
    -

    Summary

    -

    Decorative images don’t add information to the content of a page. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Merely omitting the alternative text can cause problems as some screen readers will try to repair the omission by reading the image filename. Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page.

    -
    -
    -

    How it solves user need

    -

    Explicitly marking an image as decorative will cause assistive technology to skip over the image as if it didn't exist on the page. This reduces time and fatigue needed to listen to descriptions of decorative images or long cryptic file names.

    -
    -
    - - From 3e60b2d1f765496ca003afaf62877a62865270df Mon Sep 17 00:00:00 2001 From: francisstorr Date: Fri, 16 Jul 2021 12:20:46 -0700 Subject: [PATCH 08/38] fix copy and paste errors --- methods/decorative-images/examples.html | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/methods/decorative-images/examples.html b/methods/decorative-images/examples.html index 705d19b8..5316e51f 100644 --- a/methods/decorative-images/examples.html +++ b/methods/decorative-images/examples.html @@ -17,22 +17,22 @@

    Examples

    HTML decorative bitmaps

    -

    In HTML, decorative bitmap images need to have an alt attribute with no value (e.g. alt=”” or alt). For example:

    +

    In HTML, decorative bitmap images need to have an alt attribute with no value (e.g. alt="" or alt). For example:

    -<img alt=”” src=”clipart-of-business-people-looking-at-a-computer-screen.jpg”>
-<img alt src=”clipart-of-someone-smiling-and-eating-a-salad.jpg”>
+<img alt="" src="clipart-of-business-people-looking-at-a-computer-screen.jpg">
+<img alt src="clipart-of-someone-smiling-and-eating-a-salad.jpg">

    HTML decorative SVG

    -

    In HTML, decorative SVGs need to use the aria-hidden attribute with a value of “true”. For example:

    +

    In HTML, decorative SVGs need to use the aria-hidden attribute with a value of "true". For example:

    -<button type=”button”>
-  <svg aria-hidden=”true” viewBox=”0 0 30 30”>
-    <use href=”#help-icon” />
-  </svg>
-  <span>Help</span>
-</button>
+<button type="button">
+  <svg aria-hidden="true" viewBox="0 0 30 30">
+    <use href="#help-icon" />
+  </svg>
+  <span>Help</span>
+</button>
    @@ -54,13 +54,13 @@

    ePub

    Adding the role attribute with a value of presentation will hide a decorative SVG in an ePub document: 

     <svg lang="en" role="presentation" xml:lang="en" xmlns="http://www.w3.org/2000/svg">
-   …
+   ...
 </svg>

    PDF

    -

    Tagging PDFs for accessibility is covered in WCAG 2’s PDF4 Hiding decorative images with the Artifact tag in PDF documents.

    +

    Tagging PDFs for accessibility is covered in WCAG 2’s PDF4 Hiding decorative images with the Artifact tag in PDF documents.

    From 89fb1f722193bfebf43a22dba70f5809d3bf57b0 Mon Sep 17 00:00:00 2001 From: francisstorr Date: Tue, 20 Jul 2021 06:22:44 -0700 Subject: [PATCH 09/38] fixexed resources heading --- methods/decorative-images/background.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/methods/decorative-images/background.html b/methods/decorative-images/background.html index e661d96f..ab7940ee 100644 --- a/methods/decorative-images/background.html +++ b/methods/decorative-images/background.html @@ -5,7 +5,7 @@
    -

    Resources

    +

    Background

    From 555e6733bf403cf135b0eb5de6d3507eeb6973a0 Mon Sep 17 00:00:00 2001 From: francisstorr Date: Tue, 20 Jul 2021 06:22:56 -0700 Subject: [PATCH 10/38] add link to glossary --- methods/decorative-images/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/methods/decorative-images/index.html b/methods/decorative-images/index.html index 04301922..98cee319 100644 --- a/methods/decorative-images/index.html +++ b/methods/decorative-images/index.html @@ -15,6 +15,7 @@

    Decorative images

  • Examples
  • Tests
  • Resources
    • +
  • Glossary
    • From ae54b026b13bad92ffec05e369d8bd8a8746868c Mon Sep 17 00:00:00 2001 From: francisstorr Date: Tue, 20 Jul 2021 06:23:47 -0700 Subject: [PATCH 11/38] remove pdf from list of technologies --- methods/decorative-images/description.html | 1 - 1 file changed, 1 deletion(-) diff --git a/methods/decorative-images/description.html b/methods/decorative-images/description.html index 1ded8baf..87c41e16 100644 --- a/methods/decorative-images/description.html +++ b/methods/decorative-images/description.html @@ -25,7 +25,6 @@

    Technology

  • CSS
  • ARIA
  • ePub
    • -
  • PDF
    • From 243196acae088ba1ee8bd891c6c462b222e072ce Mon Sep 17 00:00:00 2001 From: francisstorr Date: Tue, 20 Jul 2021 06:24:37 -0700 Subject: [PATCH 12/38] remove introduction link --- methods/decorative-images/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/methods/decorative-images/index.html b/methods/decorative-images/index.html index 98cee319..a6315e6c 100644 --- a/methods/decorative-images/index.html +++ b/methods/decorative-images/index.html @@ -10,7 +10,6 @@

    Decorative images

      -
    • Introduction
    • Description
    • Examples
    • Tests
      • From 4332491c89311748a216c84a33d1695e46bf2e44 Mon Sep 17 00:00:00 2001 From: francisstorr Date: Tue, 20 Jul 2021 08:53:53 -0700 Subject: [PATCH 13/38] update tests to include all relevant ACT tests --- methods/decorative-images/tests.html | 351 ++++++++++++++++++--------- 1 file changed, 240 insertions(+), 111 deletions(-) diff --git a/methods/decorative-images/tests.html b/methods/decorative-images/tests.html index 0a9fc39b..60d49436 100644 --- a/methods/decorative-images/tests.html +++ b/methods/decorative-images/tests.html @@ -8,117 +8,246 @@

      Tests

      -
      -

      Atomic Tests

      - -
      -

      Automated test for all images

      -

      Unit Tested: All Images

      -

      Measurement: Percentage (# passed/total # of img elements for all images)

      -
        -
      • This test is measured by the number of img elements in the HTML document or the number of images in non-HTML content being tested.
        • -
      • The percentage test result is the number passed divided by the total number of img elements or images.
        • -
      -
      -

      Procedure for HTML

      -
        -
      1. Run an automated test that displays the text alternative (or accessible name) for images.
        2. -
      2. Check that functional, informative, and images of text have alternative text that serves an equivalent purpose of the image -
          -
        • Functional images describe the function
          • -
        • Informative images describe the image
          • -
        • Images of text repeat the text or the equivalent purpose of the text.
          • -
        3. -
      3. Check that decorative images are appropriately coded (see “Decorative Images” method) so they are hidden to assistive technology.
        4. -
      -
      -
      -

      Expected Results

      -

      Check #2 and #3 are true.

      -
      -
      -

      Procedure for Technology Agnostic

      -
        -
      1. Examine each image in the content.
        2. -
      2. Check that each image that conveys meaning has its text alternative.
        3. -
      3. If the image contains text that is not purely decorative, the text alternative contains the same text.
        4. -
      4. If it is within a link together with text, check that it is implemented to be ignored by assistive technology or the text alternative describes the image and supplements the link text.
        5. -
      5. If it is a button, check that the text alternative indicates the button's function.
        6. -
      -
      -
      -

      Expected Results

      -

      Checks #2 and #3, or #2 and #4, or #2 and #5 are true.

      -
      -
      -
      -

      Manual test of a CSS background image

      -
        -
      • Unit Tested: All CSS background images
        • -
      • Measurement: Percentage (# passed/total # of elements for “CSS background images”)The percentage test result is the number passed divided by the total number of elements or images.
        • -
      -
      -

      Test Procedure

      -
        -
      1. Check for the presence of decorative images.
        2. -
      2. Check that they are included as CSS background images.
        3. -
      -
      -
      -

      Expected Results

      -

      If #1 is true then #2 is true.

      -
      -
      -
      -

      Manual test of CSS generated content

      -
        -
      • Unit Tested: All CSS generated content
        • -
      • Measurement: Percentage (# passed/total # of elements for “CSS generated content”)The percentage test result is the number passed divided by the total number of elements or images.
        • -
      -
      -

      Test Procedure

      -
        -
      1. Check for the presence of decorative images.
        2. -
      2. Check if decorative images are included using CSS generated content.
        3. -
      3. Check that the image has an empty alt value.
        4. -
      -
      -
      -

      Expected Results

      -

      If 1 is true then 2 and 3 are true.

      -
      -
      -
      - -

      Manual test if an image uses null alt text and no title attribute for decorative images

      -
        -
      • Unit Tested: All decorative HTML images
        • -
      • Measurement: Percentage (# passed/total # of elements for “decorative HTML images”)The percentage test result is the number passed divided by the total number of elements or images.
        • -
      -
      -

      Test Procedure

      -
        -
      1. Check for the presence of decorative images
        2. -
      2. Check that the title attribute is either absent or has no value.
        3. -
      3. Check that the alt attribute is present and has no value.
        4. -
      -
      -
      -

      Expected Results

      -

      If 1 is true then 2 and 3 are true.

      -
      -
      -
      -
      -

      Holistic Tests

      -
        - -
      • Still to be developed. We will include this in a future working draft.
        • -
      -
      +
      +

      Passed

      + +

      Passed example 1

      +

      This img element with an empty alt attribute which is not included in the accessibility tree is purely decorative.

      + +
      +
+<p>Happy new year!</p>
+<img src="/test-assets/shared/fireworks.jpg" alt="" />
+
+
      + +

      Passed example 2

      +
      
+<p>Happy new year!</p>
+<img src="/test-assets/shared/fireworks.jpg" aria-hidden="true" role="img" alt="" />
+
+
      + +

      Passed example 3

      +

      This img element that is ignored by assistive technologies because it has an explicit semantic role of none is purely decorative.

      +
      +
+<p>Happy new year!</p>
+<img src="/test-assets/shared/fireworks.jpg" role="none" alt="ignore me" />
+
+
      + +

      Passed example 4

      +

      This svg element that is ignored by assistive technologies because it has no attribute that would give it an accessible name is purely decorative.

      +
      +<p>Happy new year!</p>
+<svg height="200" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
+</svg>
+
+
      + +

      Passed example 5

      +

      This canvas element that is ignored by assistive technologies because it has no attribute that would give it an accessible name is purely decorative.

      +
      +
+<p>Happy new year!</p>
+<canvas id="newyear" width="200" height="200"></canvas>
+  <script>
+    const ctx = document.querySelector('#newyear').getContext('2d')
+    ctx.fillStyle = 'yellow'
+    ctx.beginPath()
+    ctx.moveTo(100, 10)
+    ctx.lineTo(40, 180)
+    ctx.lineTo(190, 60)
+    ctx.lineTo(10, 60)
+    ctx.lineTo(160, 180)
+    ctx.fill()
+  </script>
+
+
      +
      + +
      +

      Failed

      + +

      Failed example 1

      + +

      This img element with an empty ("") alt is not purely decorative.

      + +
      +
+<img src="/test-assets/shared/w3c-logo.png" alt="" />
+
+
      + +

      Failed example 2

      + +

      This img element which is not included in the accessibility tree because it has an explicit semantic role of none is not purely decorative.

      + +
      +
+<img src="/test-assets/shared/w3c-logo.png" aria-hidden="true" alt="W3C logo" />
+
+
      + +

      Failed example 3

      +

      This img element which is not included in the accessibility tree because it has an explicit semantic role of none is not purely decorative.

      + +
      +
+<img src="/test-assets/shared/w3c-logo.png" role="none" alt="W3C logo" />
+
+
      + +

      Failed example 4

      +

      This svg element which has a semantic role of graphics-document and an empty ("") accessible name is not purely decorative.

      + +
      +<p>Best W3C logo:</p>
+<svg viewBox="0 0 512 512">
+  <path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
+  <path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
+  <path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
+  <path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
+  <path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
+</svg>
+
+
      + +

      Failed example 5

      +

      This canvas element which has no semantic role and an empty ("") accessible name is not purely decorative.

      +
      +
+<canvas id="w3c" width="200" height="60"></canvas>
+<script>
+  const ctx = document.querySelector('#w3c').getContext('2d')
+  ctx.font = '30px Arial'
+  ctx.fillText"('WCAG Rules!', 20, 40)
+</script>
+
+
      +
      + +
      + +

      Inapplicable

      + +

      Inapplicable example 1

      + +

      This img element is included in the accessibility tree because the alt attribute is not empty ("").

      +
      +
+  <img src="/test-assets/shared/w3c-logo.png" alt>="W3C" />
+
+
      + +

      Inapplicable example 2

      + +

      This img element is neither visible nor included in the accessibility tree.

      + +
      +<img src="/test-assets/shared/w3c-logo.png" style="display:none" alt="" />
+
+
      + +

      Inapplicable example 3

      + +

      This img element is not visible because it is positioned off screen.

      + +
      +
+<style>
+  img {
+    position: absolute;
+    top: -9999em;
+  }
+</style>
+<img src="/test-assets/shared/fireworks.jpg" alt="" />
+
+
      + +

      Inapplicable example 4

      +

      This svg element is ignored because it is a child of a link that provides its accessible name.

      + +
      +
+<a href="https://example.org" aria-label="SVG star">
+  <svg height="200" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
+  </svg>
+</a>
+
+
      + +

      Inapplicable example 5

      +

      This svg element has a semantic role of img and an accessible name from its aria-label attribute.

      + +
      +
+<svg viewBox="0 0 512 512" role="img" aria-label="HTML 5 logo">
+  <path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6" />
+  <path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
+  <path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
+  <path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
+  <path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
+</svg>
+
+
      + +

      Inapplicable example 6

      +

      This canvas element is not visible because it is completely transparent.

      + +
      <canvas width="200" height="200"></canvas>
      + +

      Inapplicable example 7

      +

      This canvas element has a semantic role of img and an accessible name from its aria-label attribute.

      + +
      +
+<canvas id="w3c" width="200" height="60" role="img" aria-label="WCAG Rules!"></canvas>
+<script>
+  const ctx = document.querySelector('#w3c').getContext('2d')
+  ctx.font = '30px Arial'
+  ctx.fillText('WCAG Rules!', 20, 40)
+</script>
+
+
      + +

      Inapplicable example 8

      +

      This img element is visible but included in the accessibility tree.

      + +

      Note: While it might be better for the PDF icon to be ignored by assistive technologies, because assistive technologies will announce “PDF” twice, the image is not purely decorative. Having assistive technologies ignore it is not required by Success Criterion 1.1.1 Non-text content.

      + +
      +
+<img src="/test-assets/shared/pdf-icon.png" alt="PDF" /> PDF document
+
+
      + +

      Inapplicable example 9

      +

      This is a div element with a background image. Background images must be tested separate from this rule.

      + +
      <p>Happy new year!</p>
+<div
+  style="
+  width: 260px;
+  height: 260px;
+  background:url(/test-assets/shared/fireworks.jpg) no-repeat;"
+></div>
+
+
      + +

      Inapplicable example 10

      +

      This img element has an src attribute which will cause the image request state to be Broken.

      + +
      +
+<img src="/test-assets/does-not-exist.png" alt="" />
+
+
      + +
      \ No newline at end of file From 2036189647d5aab582dae2e70e1374a7f452b2a6 Mon Sep 17 00:00:00 2001 From: francisstorr Date: Tue, 20 Jul 2021 08:54:24 -0700 Subject: [PATCH 14/38] update glossary to add missing definitions. --- methods/decorative-images/glossary.html | 33 +++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/methods/decorative-images/glossary.html b/methods/decorative-images/glossary.html index 7b7877c3..76ab1008 100644 --- a/methods/decorative-images/glossary.html +++ b/methods/decorative-images/glossary.html @@ -16,7 +16,36 @@

      Accessible Name

      For more details, see ACT’s examples of accessible name.

      Note: As per the accessible name and description computation, each element always has an accessible name. When no accessible name is provided, the element will nonetheless be assigned an empty ("") one.

      Note: As per the accessible name and description computation, accessible names are flat string trimmed of leading and trailing whitespace. Notably, it is not possible for a non-empty accessible name to be composed only of whitespace since these must be trimmed.

      -
    +
    + +
    +

    Accessibility Support For Accessible Name

    +
      +
    • Because the accessible name and description computation is not clear about which whitespace are considered, browsers behave differently when trimming and flattening the accessible name. For example, some browsers completely trim non-breaking spaces while some keep them in the accessible name.
      • +
    • There exists a popular browser which does not perform the same trimming and flattening depending whether the accessible name comes from content, an aria-label attribute, or an alt attribute.
      • +
    • There exists a popular browser which assign no accessible name (null) when none is provided, instead of assigned an empty accessible name ("").
      • +
    • The accessible name and description computation suggest that if an aria-labelledby attribute refers to an existing but empty element, the computation should stop and return an empty name without defaulting to the next steps. Several user agents and assistive technologies chose to use the next step in the computation in this case.
      • +
    +
    + +
    +

    Accessibility Support For Definition Of Semantic Role For Semantic Role

    +
      +
    • There exist popular web browsers and assistive technologies which do not correctly implement Presentational Roles Conflict Resolution. These technologies will not include in the accessibility tree elements that should be, according to Specifications. Thus, some elements that should have their semantic role fixed by case Conflict above are instead falling into case Explicit and are hidden for users of assistive technologies.
      • +
    • A similar conflict exists for focusable elements with a aria-hidden="true" attribute. The WAI ARIA specification does not explain how to solve it. Some browsers give precedence to the element being focusable (and expose it in the accessibility tree) while some give precedence to the aria-hidden attribute (and hide the element).
      • +
    + +
    + +
    +

    Accessibility Support For Explicit Semantic Role

    +

    Some browsers and assistive technologies treat the tokens of the role attribute as case-sensitive. Unless lowercase letters are used for the value of the role attribute, not all user agents will be able to interpret the tokens correctly. ARIA in HTML (working draft) also specifies that authors must use lowercase letters for the role and aria-* attributes.

    +
    + +
    +

    Accessibility Support For Implicit Semantic Role

    +

    Images with an empty alt attribute should have an implicit role of presentation, according to the HTML Accessibility API Mapping (work in progress). However, there are several popular browsers that do not treat images with empty alt attribute as having a role of presentation. Instead, they add the img element to the accessibility tree with a role of either img or graphic.

    +

    Explicit Semantic Role

    @@ -56,7 +85,7 @@

    Included In The Accessibility Tree

    Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

    -
    +

    Marked As Decorative

    An element is marked as decorative if one of the following conditions is true:

      From 9cd5e20f3498af79cf7ff0a0ae599cb08f00bfc1 Mon Sep 17 00:00:00 2001 From: francisstorr Date: Tue, 20 Jul 2021 08:54:41 -0700 Subject: [PATCH 15/38] remove empty dependencies section --- methods/decorative-images/description.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/methods/decorative-images/description.html b/methods/decorative-images/description.html index 87c41e16..307939a9 100644 --- a/methods/decorative-images/description.html +++ b/methods/decorative-images/description.html @@ -56,10 +56,6 @@

      When To Use

    • Identified and described by surrounding text.
    -
    -

    Dependencies

    -

    None

    -
    \ No newline at end of file From 22ac9ca582a91f7a4b99a119200a2e807872a2bc Mon Sep 17 00:00:00 2001 From: francisstorr Date: Tue, 20 Jul 2021 09:43:00 -0700 Subject: [PATCH 16/38] whitespace tweak --- methods/decorative-images/tests.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/methods/decorative-images/tests.html b/methods/decorative-images/tests.html index 60d49436..16b4aa9c 100644 --- a/methods/decorative-images/tests.html +++ b/methods/decorative-images/tests.html @@ -53,17 +53,17 @@

    Passed example 5

    <p>Happy new year!</p> <canvas id="newyear" width="200" height="200"></canvas> - <script> - const ctx = document.querySelector('#newyear').getContext('2d') - ctx.fillStyle = 'yellow' - ctx.beginPath() - ctx.moveTo(100, 10) - ctx.lineTo(40, 180) - ctx.lineTo(190, 60) - ctx.lineTo(10, 60) - ctx.lineTo(160, 180) - ctx.fill() - </script> +<script> + const ctx = document.querySelector('#newyear').getContext('2d') + ctx.fillStyle = 'yellow' + ctx.beginPath() + ctx.moveTo(100, 10) + ctx.lineTo(40, 180) + ctx.lineTo(190, 60) + ctx.lineTo(10, 60) + ctx.lineTo(160, 180) + ctx.fill() +</script>
    From c79c8fb034d3738101f8d87a8f60c791217e04ba Mon Sep 17 00:00:00 2001 From: francisstorr Date: Wed, 21 Jul 2021 10:24:09 -0700 Subject: [PATCH 17/38] update tabs --- methods/decorative-images/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/methods/decorative-images/index.html b/methods/decorative-images/index.html index a6315e6c..f5832fe4 100644 --- a/methods/decorative-images/index.html +++ b/methods/decorative-images/index.html @@ -11,9 +11,9 @@

    Decorative images

    From 192ad2d2c573d2ee5905d01571babbecd4196825 Mon Sep 17 00:00:00 2001 From: Michael Cooper Date: Thu, 22 Jul 2021 08:45:14 -0400 Subject: [PATCH 18/38] Remove explainer edits from this methods PR --- explainer/index.html | 64 +++++++++++++++++++++----------------------- 1 file changed, 30 insertions(+), 34 deletions(-) diff --git a/explainer/index.html b/explainer/index.html index 2292951d..1bf1b1b8 100644 --- a/explainer/index.html +++ b/explainer/index.html @@ -68,12 +68,12 @@

    Background and development history

    The Silver Task Force of the Accessibility Guidelines Working Group and the W3C Silver Community group have partnered to produce the needs, requirements, and structure for the new accessibility guidance. To date, the group has:

      -
    1. Researched accessibility guidance needs;
      2. -
    2. Developed problem statements and opportunities to improve accessibility guidance;
      3. -
    3. Received input from industry leaders for directions to proceed;
      4. -
    4. Drafted requirements for the project (they will be reviewed after public feedback from the First Public Working Draft);
      5. -
    5. Created and tested prototypes for aspects of the project; and
      6. -
    6. Created a First Public Working Draft and a heartbeat update draft.
      7. +
    7. Researched accessibility guidance needs +
    8. Developed problem statements and opportunities to improve accessibility guidance +
    9. Received input from industry leaders for directions to proceed +
    10. Drafted requirements for the project (they will be reviewed after public feedback from the First Public Working Draft) +
    11. Created and tested prototypes for aspects of the project +
    12. Created a First Public Working Draft
    @@ -97,44 +97,40 @@

    Goals

    Goals for Inclusion

    These goals come from the Silver Requirements Design Principles. The creation process for the guidelines should:

      -
    • Actively recruit a diverse range of people with disabilities in recognition of the importance of their contributions to accessibility standards and solutions. Review and monitor whether people are included. Continually evaluate inclusive features of available tooling and procedures.
      • -
    • Facilitate global participation and feedback.
      • -
    • Set goals for Diversity, Equity, Inclusion. Include a goal for more recruiting of younger accessibility experts.
      • +
    • Actively recruit a diverse range of people with disabilities in recognition of the importance of their contributions to accessibility standards and solutions. Review and monitor whether people are included. Continually evaluate inclusive features of available tooling and procedures. +
    • Facilitate global participation and feedback.

    Goals for Content

      -
    • Support the needs of a wide range of people with disabilities and recognize that people have individual and multiple needs.
      • -
    • Be flexible enough to support the needs of people with disabilities and keep up with emerging technologies. The information structure allows guidance to be added or removed.
      • -
    • Be written in plain language, as easy as possible to understand. We need a definition of plain language that includes the ease of translation. Ideally, it will be a broadly accepted definition internationally.
      • -
    • Improve the ability to support automated testing where appropriate and provide a procedure for repeatable tests when manual testing is appropriate.
      • -
    • Be data-informed and evidence-based where possible. We recognize that research and evidence are influenced by the number of people with a particular disability, by the size of the body of research, and by the difficulty in capturing data regarding some disabilities or combination of disabilities. The intent is to make informed decisions wherever possible to ensure that the needs of all people with disabilities are prioritized, including needs that differ from the majority. In situations where there is no evidence or research, valid data-gathering methods should be used to obtain and evaluate information from advocacy groups, people with lived experience and other subject matter experts.
      • -
    • Be written so the Guideline content is usable in adaptable and customizable ways. For example, Silver content is available to be extracted by users to adapt to their needs.
      • +
    • Support the needs of a wide range of people with disabilities and recognize that people have individual and multiple needs. +
    • Be flexible enough to support the needs of people with disabilities and keep up with emerging technologies. The information structure allows guidance to be added or removed. +
    • Be written in plain language, as easy as possible to understand. We need a definition of plain language that includes the ease of translation. Ideally, it will be a broadly accepted definition internationally. +
    • Improve the ability to support automated testing where appropriate and provide a procedure for repeatable tests when manual testing is appropriate. +
    • Be data-informed and evidence-based where possible. We recognize that research and evidence are influenced by the number of people with a particular disability, by the size of the body of research, and by the difficulty in capturing data regarding some disabilities or combination of disabilities. The intent is to make informed decisions wherever possible to ensure that the needs of all people with disabilities are prioritized, including needs that differ from the majority. In situations where there is no evidence or research, valid data-gathering methods should be used to obtain and evaluate information from advocacy groups, people with lived experience and other subject matter experts. +
    • Be written so the Guideline content is usable in adaptable and customizable ways. For example, Silver content is available to be extracted by users to adapt to their needs.

    Goals for Conformance

    The goals are based on the Silver research, the results from the Silver Design Sprint, and input from the Silver Community Group and Task Force.

      -
    • Better align conformance with the experiences of people with disabilities, and keep in mind that people with different disabilities have different experiences.
      • -
    • Treat the needs of all disabilities equitably.
      • -
    • Support a measurement and conformance structure that includes guidance for a broad range of disabilities. This includes more attention to the needs of low vision and cognitive accessibility, whose needs may not fit the true/false statement success criteria of WCAG 2.x.
      • -
    • Consider the needs of more organizations.
      • -
    • Be user-oriented instead of page-oriented. Think about what is the person trying to do.
      • -
    • Wherever possible, preserve the organization’s investment in training, tooling, and knowledge.
      • +
    • Better align conformance with the experiences of people with disabilities, and keep in mind that people with different disabilities have different experiences. +
    • Treat the needs of all disabilities equitably. +
    • Support a measurement and conformance structure that includes guidance for a broad range of disabilities. This includes more attention to the needs of low vision and cognitive accessibility, whose needs may not fit the true/false statement success criteria of WCAG 2.x. +
    • Consider the needs of more organizations +
    • Be user-oriented instead of page-oriented. Think about what is the person trying to do. +
    • Wherever possible, preserve the organization’s investment in training, tooling, and knowledge.
    • Support the ability for organizations to choose parts of their site or product for conformance (a logical subset of a site or product).
    • Create a more flexible conformance model that addresses the challenges in applying the 2.x conformance model to large, complex, or dynamic websites and web applications.
      • Help organizations prioritize things that have a greater impact on improving the experience of people with disability.
      • Develop a more flexible method of measuring conformance that is better suited to accommodate dynamic or more regularly updated content.
      -
    • Remove “accessibility supported” as an author responsibility, and help developers of authoring tools, browsers, and assistive technologies learn the behaviors that users expect of their products. Note: This requires more detailed discussion in AGWG. It does not yet have consensus.
      • -
    • Improve tests so that repeated tests get more consistent results.
      • -
    • Increase the ability to create more automated tests.
      • -
    • Lower the cost of accessibility testing.
      • -
    • Do not increase the testing burden.
      • - +
    • Remove “accessibility supported” as an author responsibility, and help developers of authoring tools, browsers, and assistive technologies learn the behaviors that users expect of their products. +
    • Improve tests so that repeated tests get more consistent results. +
    • Increase the ability to create more automated tests.
    @@ -144,8 +140,8 @@

    Non-Goals or Out-of-Scope

  • Non-web emerging technologies (this may change as the charter is clarified)
  • Normative requirements for platforms, operating systems, software in the web technology stack (etc.)
      -
    • We want to point to external accessibility guidance by the vendor
      • -
    • We want to document the needs of people with disabilities where vendor accessibility guidance is lacking
      • +
    • We want to point to external accessibility guidance by the vendor +
    • We want to document the needs of people with disabilities where vendor accessibility guidance is lacking
    • @@ -165,7 +161,7 @@

    Structure of these guidelines

    Some of these sections are in this document. You can find others in links within the sections.

    - +
    Core Structure

    Figure 1 shows the core structure of WCAG 3.0. WCAG 3.0 has three levels of content with associated documentation. Guidelines form the top level. Each guideline contains multiple outcomes, with associated critical errors and outcomes scoring. Each outcome contains multiple methods, with an associated description and examples, tests, and test scoring.

    @@ -203,7 +199,7 @@

    Outcome rating

    Methods structure

    - +
    Screenshot of a Method for Structured Content

    Each outcome has one or more methods. There are three types of methods:

    @@ -254,16 +250,16 @@

    Additional Documentation and Scoring Information

    Some of these sections are in this document. You can find others in links within the sections.

    -

    The core structure has inter-relationships with supporting documents and the scoring process. Functional needs inform both outcomes and functional categories. The tests within methods are used to inform the scores for each outcome. Then outcome scores are aggregated to create scores by functional category and an overall score. These then result in a bronze rating. Silver and gold ratings build on the bronze rating to demonstrate improved accessibility. General information about guidelines is available in How-To documents.

    +

    The core structure has inter-relationships with supporting documents and the scoring process. Functional needs inform both outcomes and functional categories. The tests within methods are used to inform the scores for each outcome. Then outcome scores are aggregated to create scores by functional category and an overall score. These then result in a bronze rating. Silver and gold ratings build on the bronze rating to demonstrate improved accessibility. General information about guidelines is available in How To documents.

    - +
    Documentation and Scoring Structure

    How tos

    The How-To content provides explanatory material for each guideline that applies across technologies. This guidance explains how to apply the concepts presented in the guidelines for non-technical readers. This plain language resource includes information on getting started, who the guideline helps and how, as well information for project managers, designers and developers.  

    - +
    Example screenshot of a How-To for Structured Content

    The example of a How-To for Structured Content provides basic information organized by tabs to help people get started with accessibility for structured content, plan for implementing accessible structured content across a project, design accessible structured content, and basics for developers new to accessibility of structured content. It also includes information on examples, the outcomes for meeting the guideline, and resources.

    From 0948e2dae1efea03407c106392aec9c0d11ec3ec Mon Sep 17 00:00:00 2001 From: francisstorr Date: Mon, 26 Jul 2021 08:33:39 -0700 Subject: [PATCH 19/38] add link to WAI easy checks to test page. --- methods/decorative-images/tests.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/methods/decorative-images/tests.html b/methods/decorative-images/tests.html index 16b4aa9c..82678aa4 100644 --- a/methods/decorative-images/tests.html +++ b/methods/decorative-images/tests.html @@ -8,6 +8,14 @@

    Tests

    + +
    +

    Getting Started

    + +

    To get started with checking images, refer to the WAI Easy Checks — A First Review of Web Accessibility page.

    + +
    +

    Passed

    From b743f478dcd6438225568b8a7b7f91838ed7e10a Mon Sep 17 00:00:00 2001 From: francisstorr Date: Mon, 2 Aug 2021 10:41:09 -0700 Subject: [PATCH 20/38] update proposal - update glossary. - move examples to correct page. - replace examples.html content --- methods/decorative-images/description.html | 2 +- methods/decorative-images/examples.html | 304 +++++++++++++++++---- methods/decorative-images/glossary.html | 75 ++++- methods/decorative-images/tests.html | 279 +++---------------- 4 files changed, 353 insertions(+), 307 deletions(-) diff --git a/methods/decorative-images/description.html b/methods/decorative-images/description.html index 307939a9..922b1674 100644 --- a/methods/decorative-images/description.html +++ b/methods/decorative-images/description.html @@ -24,7 +24,7 @@

    Technology

  • HTML
  • CSS
  • ARIA
    • -
  • ePub
    • +
  • ePub
    • diff --git a/methods/decorative-images/examples.html b/methods/decorative-images/examples.html index 5316e51f..df8b6d41 100644 --- a/methods/decorative-images/examples.html +++ b/methods/decorative-images/examples.html @@ -1,67 +1,261 @@ - Method - Examples + Method - Tests
    -

    Examples

    +

    Tests

    - -
    -

    HTML decorative bitmaps

    -

    In HTML, decorative bitmap images need to have an alt attribute with no value (e.g. alt="" or alt). For example:

    -
    -<img alt="" src="clipart-of-business-people-looking-at-a-computer-screen.jpg">
-<img alt src="clipart-of-someone-smiling-and-eating-a-salad.jpg">
-
    -
    -
    -

    HTML decorative SVG

    -

    In HTML, decorative SVGs need to use the aria-hidden attribute with a value of "true". For example:

    -
    -<button type="button">
-  <svg aria-hidden="true" viewBox="0 0 30 30">
-    <use href="#help-icon" />
+
+      
    
+        
    Getting Started
    
+
+        
    To get started with checking images, refer to the WAI Easy Checks — A First Review of Web Accessibility page.
    
+
+      
    
+
+			
    
+				
    Passed
    
+
+				
    Passed example 1
    
+				
    This img element with an empty alt attribute which is not included in the accessibility tree is purely decorative.
    
+
+
    +
+<p>Happy new year!</p>
+<img src="/test-assets/shared/fireworks.jpg" alt="" />
+
+
    
+
+
    Passed example 2
    
+
    
+<p>Happy new year!</p>
+<img src="/test-assets/shared/fireworks.jpg" aria-hidden="true" role="img" alt="" />
+
+
    
+
+
    Passed example 3
    
+
    This img element that is ignored by assistive technologies because it has an explicit semantic role of none is purely decorative.
    
+
    +
+<p>Happy new year!</p>
+<img src="/test-assets/shared/fireworks.jpg" role="none" alt="ignore me" />
+
+
    
+
+
    Passed example 4
    
+
    This svg element that is ignored by assistive technologies because it has no attribute that would give it an accessible name is purely decorative.
    
+
    +<p>Happy new year!</p>
+<svg height="200" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
+</svg>
+
+
    
+
+
    Passed example 5
    
+
    This canvas element that is ignored by assistive technologies because it has no attribute that would give it an accessible name is purely decorative.
    
+
    +
+<p>Happy new year!</p>
+<canvas id="newyear" width="200" height="200"></canvas>
+<script>
+  const ctx = document.querySelector('#newyear').getContext('2d')
+  ctx.fillStyle = 'yellow'
+  ctx.beginPath()
+  ctx.moveTo(100, 10)
+  ctx.lineTo(40, 180)
+  ctx.lineTo(190, 60)
+  ctx.lineTo(10, 60)
+  ctx.lineTo(160, 180)
+  ctx.fill()
+</script>
+
+
    				
+
    
+
+
    
+	
    Failed
    
+
+	
    Failed example 1
    
+
+	
    This img element with an empty ("") alt is not purely decorative.
    
+
+
    +
+<img src="/test-assets/shared/w3c-logo.png" alt="" />
+
+
    
+	
+	
    Failed example 2
    
+
+	
    This img element which is not included in the accessibility tree because it has an explicit semantic role of none is not purely decorative.
    
+
+
    +
+<img src="/test-assets/shared/w3c-logo.png" aria-hidden="true" alt="W3C logo" />
+
+
    
+
+
    Failed example 3
    
+
    This img element which is not included in the accessibility tree because it has an explicit semantic role of none is not purely decorative.
    
+
+
    +
+<img src="/test-assets/shared/w3c-logo.png" role="none" alt="W3C logo" />
+
+
    
+
+
    Failed example 4
    
+
    This svg element which has a semantic role of graphics-document and an empty ("") accessible name is not purely decorative.
    
+
+
    +<p>Best W3C logo:</p>
+<svg viewBox="0 0 512 512">
+  <path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
+  <path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
+  <path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
+  <path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
+  <path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
+</svg>
+
+
    
+
+
    Failed example 5
    
+
    This canvas element which has no semantic role and an empty ("") accessible name is not purely decorative.
    
+
    +
+<canvas id="w3c" width="200" height="60"></canvas>
+<script>
+  const ctx = document.querySelector('#w3c').getContext('2d')
+  ctx.font = '30px Arial'
+  ctx.fillText"('WCAG Rules!', 20, 40)
+</script>
+
+
    
+
    
+
+
    
+
+	
    Inapplicable
    
+
+	
    Inapplicable example 1
    
+
+	
    This img element is included in the accessibility tree because the alt attribute is not empty ("").
    
+
    +
+  <img src="/test-assets/shared/w3c-logo.png" alt>="W3C" />
+
+
    
+
+
    Inapplicable example 2
    
+
+
    This img element is neither visible nor included in the accessibility tree.
    
+
+
    +<img src="/test-assets/shared/w3c-logo.png" style="display:none" alt="" />
+
+
    
+
+
    Inapplicable example 3
    
+
+
    This img element is not visible because it is positioned off screen.
    
+
+
    +
+<style>
+  img {
+    position: absolute;
+    top: -9999em;
+  }
+</style>
+<img src="/test-assets/shared/fireworks.jpg" alt="" />
+
+
    
+
+
    Inapplicable example 4
    
+
    This svg element is ignored because it is a child of a link that provides its accessible name.
    
+
+
    +
+<a href="https://example.org" aria-label="SVG star">
+  <svg height="200" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
   </svg>
-  <span>Help</span>
-</button>
-
    
-			
    
-			
    
-				
    CSS
    
-				
    The CSS Generated Content Module Level 3 Working Draft includes support for alternative text for generated content. Alternative text with an empty value is specified as "". In the following example, if the pseudo-element is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element. Here the ARIA attribute will be spoken as collapsed. Without the empty string alt value, the content would also be spoken as Black right-pointing pointer.  
    
-
    -.expandable::before {
- content: "\25BA" / "";
-/* a.k.a. ► */
-}
-
    
-			
    
-			
    
-				
    ePub
    
-				
    If a decorative image is placed in an ePub document using HTML, it needs to have an alt attribute with no value and a role attribute with a value of presentation:
    
-
    -<img alt="" role="presentation" src="images/decorative-edge.png" /> 
-
    
-				
    Adding the role attribute with a value of presentation will hide a decorative SVG in an ePub document: 
    
-
    -<svg lang="en" role="presentation" xml:lang="en" xmlns="http://www.w3.org/2000/svg">
-   ...
-</svg>
-
    
-			
    
-			
    
-				
    PDF
    
-				
    Tagging PDFs for accessibility is covered in WCAG 2’s PDF4 Hiding decorative images with the Artifact tag in PDF documents.
    
-			
    
+</a>
+    
+
    + +

    Inapplicable example 5

    +

    This svg element has a semantic role of img and an accessible name from its aria-label attribute.

    + +
    +
+<svg viewBox="0 0 512 512" role="img" aria-label="HTML 5 logo">
+  <path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6" />
+  <path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
+  <path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
+  <path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
+  <path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
+</svg>
+
+
    + +

    Inapplicable example 6

    +

    This canvas element is not visible because it is completely transparent.

    + +
    <canvas width="200" height="200"></canvas>
    + +

    Inapplicable example 7

    +

    This canvas element has a semantic role of img and an accessible name from its aria-label attribute.

    + +
    +
+<canvas id="w3c" width="200" height="60" role="img" aria-label="WCAG Rules!"></canvas>
+<script>
+  const ctx = document.querySelector('#w3c').getContext('2d')
+  ctx.font = '30px Arial'
+  ctx.fillText('WCAG Rules!', 20, 40)
+</script>
+
+
    + +

    Inapplicable example 8

    +

    This img element is visible but included in the accessibility tree.

    + +

    Note: While it might be better for the PDF icon to be ignored by assistive technologies, because assistive technologies will announce “PDF” twice, the image is not purely decorative. Having assistive technologies ignore it is not required by Success Criterion 1.1.1 Non-text content.

    + +
    +
+<img src="/test-assets/shared/pdf-icon.png" alt="PDF" /> PDF document
+
+
    + +

    Inapplicable example 9

    +

    This is a div element with a background image. Background images must be tested separate from this rule.

    + +
    <p>Happy new year!</p>
+<div
+  style="
+  width: 260px;
+  height: 260px;
+  background:url(/test-assets/shared/fireworks.jpg) no-repeat;"
+></div>
+
+
    + +

    Inapplicable example 10

    +

    This img element has an src attribute which will cause the image request state to be Broken.

    + +
    +
+<img src="/test-assets/does-not-exist.png" alt="" />
+
+
    + +
    \ No newline at end of file diff --git a/methods/decorative-images/glossary.html b/methods/decorative-images/glossary.html index 76ab1008..32cf5ec0 100644 --- a/methods/decorative-images/glossary.html +++ b/methods/decorative-images/glossary.html @@ -14,8 +14,12 @@

    Accessible Name

    The accessible name is calculated using the accessible name and description computation.

    For native markup languages, such as HTML and SVG, additional information on how to calculate the accessible name can be found in HTML Accessibility API Mappings 1.0, Accessible Name and Description Computation (working draft) and SVG Accessibility API Mappings, Name and Description (working draft).

    For more details, see ACT’s examples of accessible name.

    -

    Note: As per the accessible name and description computation, each element always has an accessible name. When no accessible name is provided, the element will nonetheless be assigned an empty ("") one.

    -

    Note: As per the accessible name and description computation, accessible names are flat string trimmed of leading and trailing whitespace. Notably, it is not possible for a non-empty accessible name to be composed only of whitespace since these must be trimmed.

    +
    +

    Note: As per the accessible name and description computation, each element always has an accessible name. When no accessible name is provided, the element will nonetheless be assigned an empty ("") one.

    +
    +
    +

    Note: As per the accessible name and description computation, accessible names are flat string trimmed of leading and trailing whitespace. Notably, it is not possible for a non-empty accessible name to be composed only of whitespace since these must be trimmed.

    +
    @@ -46,14 +50,29 @@

    Accessibility Support For Explicit Semantic Role

    Accessibility Support For Implicit Semantic Role

    Images with an empty alt attribute should have an implicit role of presentation, according to the HTML Accessibility API Mapping (work in progress). However, there are several popular browsers that do not treat images with empty alt attribute as having a role of presentation. Instead, they add the img element to the accessibility tree with a role of either img or graphic.

    + +
    +

    Ancestor

    +

    An object A is called an ancestor of an object B if and only if B is a descendant of A.

    +
    + +
    +

    Current Request

    +

    An img element has a current request and a pending request. The current request is initially set to a new image request. The pending request is initially set to null.

    +
    -
    +

    Explicit Semantic Role

    The explicit semantic role of an element is determined by its role attribute (if any).

    The role attribute takes a list of tokens. The explicit semantic role is the first valid role in this list. The valid roles are all non-abstract roles from WAI-ARIA Specifications. If the element has no role attribute, or if it has one with no valid role, then this element has no explicit semantic role.

    Other roles may be added as they become available. Not all roles will be supported in all assistive technologies. Testers are encouraged to adjust which roles are allowed according to the accessibility support base line. For the purposes of executing test cases in all rules, it should be assumed that all roles are supported by assistive technologies so that none of the roles fail due to lack of accessibility support.

    +
    +

    Flat Tree

    +

    While Selectors operates on the DOM tree as the host language presents it, with separate trees that are unreachable via the standard parent/child relationship, the rest of CSS needs a single unified tree structure to work with. This is called the flattened element tree (or flat tree)

    +
    +

    Focusable

    Elements that can become the target of keyboard input as described in the HTML specification of focusable and HTML specification of can be focused.

    @@ -70,6 +89,24 @@

    Hidden State

    In any other case, the element’s hidden state is “false”.

    + +
    +

    Image Request State

    + +

    An image request has a state, current URL, and image data. An image request's state is one of the following:

    + +
    +
    Unavailable
    +
    The user agent hasn't obtained any image data, or has obtained some or all of the image data but hasn't yet decoded enough of the image to get the image dimensions.
    +
    Partially available
    +
    The user agent has obtained some of the image data and at least the image dimensions are available.
    +
    Completely available
    +
    The user agent has obtained all of the image data and at least the image dimensions are available.
    +
    Broken
    +
    The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).
    +
    + +

    Implicit Semantic Role

    @@ -82,7 +119,10 @@

    Included In The Accessibility Tree

    Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet the requirements of the individual user.

    The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are included in the accessibility tree can be found in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

    For more details, see ACT’s examples of included in the accessibility tree.

    -

    Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

    +
    +

    Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

    +
    +
    @@ -96,6 +136,11 @@

    Marked As Decorative

    Elements can also be ignored by assistive technologies if their hidden state is true. This is different from marking the element as decorative and does not convey the same intention. Notably, the hidden state of an element may change as users interact with the page (showing and hiding elements) while being marked as decorative should stay the same through all states of the page.

    +
    +

    Roles Supporting Name from Author

    +

    All roles support name from author with two exceptions. The roles that do not support name from author are presentation and none.

    +
    +

    Outcome

    An outcome is a conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

    @@ -107,8 +152,21 @@

    Outcome

    Failed:
    A test target does not meet all expectations
    -

    Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

    -

    Note: Implementations using the EARL 1.0 Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such “interim” results can be expressed with the incomplete outcome.

    +
    +

    Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

    +
    +
    +

    Note: Implementations using the EARL 1.0 Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such “interim” results can be expressed with the incomplete outcome.

    +
    + +
    + +
    +

    Pure Decoration

    +

    serving only an aesthetic purpose, providing no information, and having no functionality.

    +
    +

    Note: Text is only purely decorative if the words can be rearranged or substituted without changing their purpose.

    +
    @@ -140,7 +198,10 @@

    WAI-ARIA Specifications

  • WAI-ARIA Graphics Module 1.0
  • Digital Publishing WAI-ARIA Module 1.0
    • -

    Note: depending on the type of content being evaluated, part of the specifications might be irrelevant and should be ignored.

    + +
    +

    Note: depending on the type of content being evaluated, part of the specifications might be irrelevant and should be ignored.

    +
    diff --git a/methods/decorative-images/tests.html b/methods/decorative-images/tests.html index 82678aa4..92363aa9 100644 --- a/methods/decorative-images/tests.html +++ b/methods/decorative-images/tests.html @@ -9,253 +9,44 @@

    Tests

    -
    -

    Getting Started

    - -

    To get started with checking images, refer to the WAI Easy Checks — A First Review of Web Accessibility page.

    +
    +

    Summary

    +

    This test checks that visible img, svg and canvas elements that are ignored by assistive technologies are decorative.

    + +
    +

    Applicability

    + +

    This outcome applies to any img, canvas or svg element that is visible and for which one of the following is true:

    + +
    +
    excluded:
    +
    The element is not included in the accessibility tree; or
    +
    ignored svg:
    +
    The element is an svg with an empty ("") accessible name and a semantic role of graphics-document; or
    +
    ignored canvas:
    +
    The element is a canvas with an empty ("") accessible name and no explicit semantic role; or
    +
    Exception: This outcome never applies to elements for which one of the following is true:
    +
    The element has an ancestor in the flat tree that is named from author; or
    +
    The element is an img element where the current request's state is not completely available.
    +
    + +
    +

    Note: An example of an image ignored because of an ancestor with named from author is when the image is a descendant of a button element that uses aria-label for its accessible name.

    +
    +
    + +
    +

    Expectation

    + +

    Each test target is purely decorative.

    + +
    +

    Note: It is relatively common for an informative image such as an icon to be marked up as decorative, if the text alternative is adjacent to the image. This is a conforming alternative version for the image. This fails the rule but meets conformance requirement 1 of WCAG 2.1.

    +
    +
    -
    -

    Passed

    - -

    Passed example 1

    -

    This img element with an empty alt attribute which is not included in the accessibility tree is purely decorative.

    - -
    -
-<p>Happy new year!</p>
-<img src="/test-assets/shared/fireworks.jpg" alt="" />
-
-
    - -

    Passed example 2

    -
    
-<p>Happy new year!</p>
-<img src="/test-assets/shared/fireworks.jpg" aria-hidden="true" role="img" alt="" />
-
-
    - -

    Passed example 3

    -

    This img element that is ignored by assistive technologies because it has an explicit semantic role of none is purely decorative.

    -
    -
-<p>Happy new year!</p>
-<img src="/test-assets/shared/fireworks.jpg" role="none" alt="ignore me" />
-
-
    - -

    Passed example 4

    -

    This svg element that is ignored by assistive technologies because it has no attribute that would give it an accessible name is purely decorative.

    -
    -<p>Happy new year!</p>
-<svg height="200" xmlns="http://www.w3.org/2000/svg">
-  <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
-</svg>
-
-
    - -

    Passed example 5

    -

    This canvas element that is ignored by assistive technologies because it has no attribute that would give it an accessible name is purely decorative.

    -
    -
-<p>Happy new year!</p>
-<canvas id="newyear" width="200" height="200"></canvas>
-<script>
-  const ctx = document.querySelector('#newyear').getContext('2d')
-  ctx.fillStyle = 'yellow'
-  ctx.beginPath()
-  ctx.moveTo(100, 10)
-  ctx.lineTo(40, 180)
-  ctx.lineTo(190, 60)
-  ctx.lineTo(10, 60)
-  ctx.lineTo(160, 180)
-  ctx.fill()
-</script>
-
-
    -
    - -
    -

    Failed

    - -

    Failed example 1

    - -

    This img element with an empty ("") alt is not purely decorative.

    - -
    -
-<img src="/test-assets/shared/w3c-logo.png" alt="" />
-
-
    - -

    Failed example 2

    - -

    This img element which is not included in the accessibility tree because it has an explicit semantic role of none is not purely decorative.

    - -
    -
-<img src="/test-assets/shared/w3c-logo.png" aria-hidden="true" alt="W3C logo" />
-
-
    - -

    Failed example 3

    -

    This img element which is not included in the accessibility tree because it has an explicit semantic role of none is not purely decorative.

    - -
    -
-<img src="/test-assets/shared/w3c-logo.png" role="none" alt="W3C logo" />
-
-
    - -

    Failed example 4

    -

    This svg element which has a semantic role of graphics-document and an empty ("") accessible name is not purely decorative.

    - -
    -<p>Best W3C logo:</p>
-<svg viewBox="0 0 512 512">
-  <path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
-  <path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
-  <path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
-  <path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
-  <path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
-</svg>
-
-
    - -

    Failed example 5

    -

    This canvas element which has no semantic role and an empty ("") accessible name is not purely decorative.

    -
    -
-<canvas id="w3c" width="200" height="60"></canvas>
-<script>
-  const ctx = document.querySelector('#w3c').getContext('2d')
-  ctx.font = '30px Arial'
-  ctx.fillText"('WCAG Rules!', 20, 40)
-</script>
-
-
    -
    - -
    - -

    Inapplicable

    - -

    Inapplicable example 1

    - -

    This img element is included in the accessibility tree because the alt attribute is not empty ("").

    -
    -
-  <img src="/test-assets/shared/w3c-logo.png" alt>="W3C" />
-
-
    - -

    Inapplicable example 2

    - -

    This img element is neither visible nor included in the accessibility tree.

    - -
    -<img src="/test-assets/shared/w3c-logo.png" style="display:none" alt="" />
-
-
    - -

    Inapplicable example 3

    - -

    This img element is not visible because it is positioned off screen.

    - -
    -
-<style>
-  img {
-    position: absolute;
-    top: -9999em;
-  }
-</style>
-<img src="/test-assets/shared/fireworks.jpg" alt="" />
-
-
    - -

    Inapplicable example 4

    -

    This svg element is ignored because it is a child of a link that provides its accessible name.

    - -
    -
-<a href="https://example.org" aria-label="SVG star">
-  <svg height="200" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
-  </svg>
-</a>
-
-
    - -

    Inapplicable example 5

    -

    This svg element has a semantic role of img and an accessible name from its aria-label attribute.

    - -
    -
-<svg viewBox="0 0 512 512" role="img" aria-label="HTML 5 logo">
-  <path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6" />
-  <path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" />
-  <path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
-  <path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" />
-  <path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" />
-</svg>
-
-
    - -

    Inapplicable example 6

    -

    This canvas element is not visible because it is completely transparent.

    - -
    <canvas width="200" height="200"></canvas>
    - -

    Inapplicable example 7

    -

    This canvas element has a semantic role of img and an accessible name from its aria-label attribute.

    - -
    -
-<canvas id="w3c" width="200" height="60" role="img" aria-label="WCAG Rules!"></canvas>
-<script>
-  const ctx = document.querySelector('#w3c').getContext('2d')
-  ctx.font = '30px Arial'
-  ctx.fillText('WCAG Rules!', 20, 40)
-</script>
-
-
    - -

    Inapplicable example 8

    -

    This img element is visible but included in the accessibility tree.

    - -

    Note: While it might be better for the PDF icon to be ignored by assistive technologies, because assistive technologies will announce “PDF” twice, the image is not purely decorative. Having assistive technologies ignore it is not required by Success Criterion 1.1.1 Non-text content.

    - -
    -
-<img src="/test-assets/shared/pdf-icon.png" alt="PDF" /> PDF document
-
-
    - -

    Inapplicable example 9

    -

    This is a div element with a background image. Background images must be tested separate from this rule.

    - -
    <p>Happy new year!</p>
-<div
-  style="
-  width: 260px;
-  height: 260px;
-  background:url(/test-assets/shared/fireworks.jpg) no-repeat;"
-></div>
-
-
    - -

    Inapplicable example 10

    -

    This img element has an src attribute which will cause the image request state to be Broken.

    - -
    -
-<img src="/test-assets/does-not-exist.png" alt="" />
-
-
    - -
    \ No newline at end of file From 896ae2a748c9b41b8e13b9d9ea7859d85281883d Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 8 Sep 2021 13:40:01 -0400 Subject: [PATCH 21/38] fix mislabel of Examples Examples was mis-named as Tests and a section that belonged in tests.html was in examples.html. I fixed the label and moved the Get Started section to tests.html --- methods/decorative-images/examples.html | 10 ++-------- methods/decorative-images/tests.html | 8 +++++++- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/methods/decorative-images/examples.html b/methods/decorative-images/examples.html index df8b6d41..99bf1844 100644 --- a/methods/decorative-images/examples.html +++ b/methods/decorative-images/examples.html @@ -1,20 +1,14 @@ - Method - Tests + Method - Examples
    -

    Tests

    +

    Examples

    -
    -

    Getting Started

    - -

    To get started with checking images, refer to the WAI Easy Checks — A First Review of Web Accessibility page.

    - -

    Passed

    diff --git a/methods/decorative-images/tests.html b/methods/decorative-images/tests.html index 92363aa9..45ced656 100644 --- a/methods/decorative-images/tests.html +++ b/methods/decorative-images/tests.html @@ -9,7 +9,13 @@

    Tests

    -
    +
    +

    Get Started

    + +

    To get started with checking images, refer to the WAI Easy Checks — A First Review of Web Accessibility page.

    + +
    +

    Summary

    This test checks that visible img, svg and canvas elements that are ignored by assistive technologies are decorative.

    From fe2314ed3436837e908dbb5c590a2d2c2a81442b Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 8 Sep 2021 18:04:31 -0400 Subject: [PATCH 22/38] Update templates Remove intro and resource files. Add glossary. Update sections in each file. Update index file --- .../{resources.html => background.html} | 15 +++++- methods/template/description.html | 38 +++++++++++---- methods/template/examples.html | 25 ++++++++++ methods/template/glossary.html | 17 +++++++ methods/template/index.html | 10 ++-- methods/template/intro.html | 33 ------------- methods/template/tests.html | 46 ++++++++----------- 7 files changed, 107 insertions(+), 77 deletions(-) rename methods/template/{resources.html => background.html} (58%) create mode 100644 methods/template/glossary.html delete mode 100644 methods/template/intro.html diff --git a/methods/template/resources.html b/methods/template/background.html similarity index 58% rename from methods/template/resources.html rename to methods/template/background.html index f568527a..7000032b 100644 --- a/methods/template/resources.html +++ b/methods/template/background.html @@ -1,11 +1,11 @@ - Method - Resources + Method - Background
    -

    Resources

    +

    Background

    @@ -20,6 +20,17 @@

    Non-W3C Resources

  • {related resources}
    • +
    +

    Accessibility Support

    +

    +

    +
    +
    +

    Assumptions

    +
      +
    • [assumptions]
      • +
    +
    \ No newline at end of file diff --git a/methods/template/description.html b/methods/template/description.html index 40d5adda..81b7ea6d 100644 --- a/methods/template/description.html +++ b/methods/template/description.html @@ -1,27 +1,47 @@ - Method - Description + Method - Introduction
    -

    Description

    +

    Introduction

    Outcome

    This method supports the outcome {Outcome short name}.

    -
    -

    Detailed description

    - {detailed description of the method, including instructions to implement that don't depend on examples} +
    +

    Platform

    +
      +
    • {list of platform(s)}
      • +
    +
    +
    +

    Technology

    +
      +
    • {List of technology(ies)}
      • +
    -
    -

    Dependencies

    +
    +

    Input aspects for testing

      -

    • None.

      • +
    • [technical sources for input, such as DOM tree, Accessibility tree and CSS styling]
    +
    +

    Summary

    +

    {Summary of how to apply this method}

    +
    +
    +

    How it solves user need

    +

    {Description of how method relates to the outcome}

    +
    +
    +

    When to use

    +

    {when the method should or should not be used}

    +
    - \ No newline at end of file + diff --git a/methods/template/examples.html b/methods/template/examples.html index 3f599d14..131c0700 100644 --- a/methods/template/examples.html +++ b/methods/template/examples.html @@ -11,6 +11,8 @@

    Examples

    • {list of examples, unless using sub-sections, then delete this list}
    +
    +

    Passed

    {Example Name}

    {Use a copy of this section for each example if not using a bullet list of examples} @@ -19,6 +21,29 @@

    {Example Name}

    <
    +
    +
    +

    Failed

    +
    +

    {Example Name}

    + {Use a copy of this section for each example if not using a bullet list of examples} +

    {explanation}

    +
    +< 
+
    +
    +
    +
    +

    Inapplicable

    +
    +

    {Example Name}

    + {Use a copy of this section for each example if not using a bullet list of examples} +

    {explanation}

    +
    +< 
+
    +
    +
    \ No newline at end of file diff --git a/methods/template/glossary.html b/methods/template/glossary.html new file mode 100644 index 00000000..cec72de5 --- /dev/null +++ b/methods/template/glossary.html @@ -0,0 +1,17 @@ + + + + Method - Glossary + + +
    +

    Glossary

    +
    +
    +
    +

    [term]

    +

    definition

    +
    +
    + + \ No newline at end of file diff --git a/methods/template/index.html b/methods/template/index.html index 1a6178ec..ad985a8b 100644 --- a/methods/template/index.html +++ b/methods/template/index.html @@ -10,11 +10,11 @@

    {Method Name}

    diff --git a/methods/template/intro.html b/methods/template/intro.html deleted file mode 100644 index 9266ca62..00000000 --- a/methods/template/intro.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - Method - Introduction - - -
    -

    Introduction

    -
    -
    -
    -

    Platform

    -
      -
    • {list of platform(s)}
      • -
    -
    -
    -

    Technology

    -
      -
    • {List of technology(ies)}
      • -
    -
    -
    -

    Summary

    -

    {Summary of how to apply this method}

    -
    -
    -

    How it solves user need

    -

    {Description of how method relates to the outcome}

    -
    -
    - - diff --git a/methods/template/tests.html b/methods/template/tests.html index d0972f9b..1b8d5289 100644 --- a/methods/template/tests.html +++ b/methods/template/tests.html @@ -8,35 +8,25 @@

    Tests

    -
    -

    Atomic Tests

    -
      -
    • {list of links to tests}
      • -
    -
    - {Use copies of this section for WCAG 2-style tests} -

    Unit Tested:

    -

    Measurement:

    -

    Test Name

    -
    -

    Test Procedure

    -
      -
    1. Step 1
      2. -
    2. Step 2
      3. -
    -
    -
    -

    Expected Results

    -

    Check #2 is true.

    -
    -
    +
    +

    Get Started

    +

    Tips or link to information for beginners in testing

    -
    -

    Holistic Tests

    -
      - -
    • Still to be developed. We will include this in a future working draft.
      • -
    +
    +

    Summary

    +

    [overview of the test]

    +
    +
    +

    Applicability

    +

    This outcome applies to any [element names] element that is [condition] and for which one of the following is true: +

    +
    {excluded, ignored, exception}
    +
    [element] +
    +
    +
    +

    Expectations

    +

    [detail of the expectation]

    From 8abd26415d21a85f8a5cbb225f7bfb4a31f7af59 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Tue, 21 Sep 2021 19:24:59 -0400 Subject: [PATCH 23/38] Images of Text update Index --- methods/images-of-text/index.html | 10 +++++----- methods/images-of-text/intro.html | 6 +++++- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/methods/images-of-text/index.html b/methods/images-of-text/index.html index 8f465464..b4ca01ab 100644 --- a/methods/images-of-text/index.html +++ b/methods/images-of-text/index.html @@ -10,11 +10,11 @@

    Method: Text Alternatives for Images of Text

    diff --git a/methods/images-of-text/intro.html b/methods/images-of-text/intro.html index 49d8d85e..0a709012 100644 --- a/methods/images-of-text/intro.html +++ b/methods/images-of-text/intro.html @@ -8,6 +8,10 @@

    Introduction

    +
    +

    Outcome

    +

    This method supports the outcome Text alternatives for available.

    +

    Platform

      @@ -22,7 +26,7 @@

      Technology

    Summary

    -

    Text alternatives for images of text makes information conveyed by non-text content accessible through the use of a text alternative. Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech. A person who cannot hear an audio file can have the text alternative displayed so that he or she can read it. In the future, text alternatives will also allow information to be more easily translated into sign language or into a simpler form of the same language.

    +

    Text alternatives for images of text makes information conveyed by non-text content accessible through the use of a text alternative. Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech. A person who cannot hear an audio file can have the text alternative displayed so that he or she can read it. In the future, text alternatives will also allow information to be more easily translated into sign language or into a simpler form of the same language.

    How it solves user need

    From 4256946ff7709a58bcc945a889fefb8db1df68f0 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 22 Sep 2021 07:10:42 -0400 Subject: [PATCH 24/38] update descriptions of images of text moved old sections from description to Intro. Overwrote description with revised intro. Updated title and h1. Added new sections. --- methods/images-of-text/description.html | 41 +++++++++++++++++++++---- methods/images-of-text/intro.html | 10 ++++-- 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/methods/images-of-text/description.html b/methods/images-of-text/description.html index ad77ac04..b58bf027 100644 --- a/methods/images-of-text/description.html +++ b/methods/images-of-text/description.html @@ -12,8 +12,27 @@

    Description

    Outcome

    This method supports the outcome Text alternatives for available.

    -
    -

    Detailed description

    +
    +

    Platform

    +
      +
    • Any platform supporting HTML
      • +
    +
    +
    +

    Technology

    +
      +
    • HTML
      • +
    +
    +
    +

    Input aspects for testing

    +
      +
    • To be completed. [technical sources for input, such as DOM tree, Accessibility tree and CSS styling]
      • +
    +
    +
    +

    Summary

    +

    Text alternatives for images of text makes information conveyed by non-text content accessible through the use of a text alternative. Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech. A person who cannot hear an audio file can have the text alternative displayed so that he or she can read it. In the future, text alternatives will also allow information to be more easily translated into sign language or into a simpler form of the same language.

    • Images of text display text that is intended to be read. With the current CSS capabilities in most web browsers, it is good design practice to use actual text that is styled with CSS rather than image-based text presentation. Genuine text is much more flexible than images: It can be resized without losing clarity, and background and text colors can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized. In those rare situations where images of text must be used, the text alternative must contain the same text presented in the image.
    • When using the img element, specify a short text alternative with the alt attribute. Note: The value of this attribute is referred to as alt text.
      • @@ -21,10 +40,20 @@

      Detailed description

    • Sometimes, an image only contains text, and the purpose of the image is to display text using visual effects and /or fonts. It is strongly recommended that text styled using CSS be used, but if this is not possible, provide the same text in the alt attribute as is in the image.
    -
    -

    Dependencies

    -

    None

    +
    +

    How it solves user need

    +
      +
    • People using screen readers: The text alternative can be read aloud or rendered as Braille.
      • +
    • People using speech input software: Users can put the focus onto a button or linked image with a single voice command.
      • +
    • People browsing speech-enabled websites: The text alternative can be read aloud.
      • +
    • Mobile web users: Images can be turned off, especially for data-roaming.
      • +
    • Search engine optimization: Images become indexable by search engines.
      • +
    +
    +
    +

    When to use

    +

    To be completed [when the method should or should not be used]

    - \ No newline at end of file + diff --git a/methods/images-of-text/intro.html b/methods/images-of-text/intro.html index 0a709012..6360469c 100644 --- a/methods/images-of-text/intro.html +++ b/methods/images-of-text/intro.html @@ -1,11 +1,11 @@ - Method - Introduction + Method - Description
    -

    Introduction

    +

    Description

    @@ -27,6 +27,12 @@

    Technology

    Summary

    Text alternatives for images of text makes information conveyed by non-text content accessible through the use of a text alternative. Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech. A person who cannot hear an audio file can have the text alternative displayed so that he or she can read it. In the future, text alternatives will also allow information to be more easily translated into sign language or into a simpler form of the same language.

    +
      +
    • Images of text display text that is intended to be read. With the current CSS capabilities in most web browsers, it is good design practice to use actual text that is styled with CSS rather than image-based text presentation. Genuine text is much more flexible than images: It can be resized without losing clarity, and background and text colors can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized. In those rare situations where images of text must be used, the text alternative must contain the same text presented in the image.
      • +
    • When using the img element, specify a short text alternative with the alt attribute. Note: The value of this attribute is referred to as alt text.
      • +
    • When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.
      • +
    • Sometimes, an image only contains text, and the purpose of the image is to display text using visual effects and /or fonts. It is strongly recommended that text styled using CSS be used, but if this is not possible, provide the same text in the alt attribute as is in the image.
      • +

    How it solves user need

    From 09faa4c222d858693037b760c7ad8ce0ea4b5cdd Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 22 Sep 2021 07:19:02 -0400 Subject: [PATCH 25/38] Background added new sections. Renamed as background --- methods/images-of-text/background.html | 39 ++++++++++++++++++++++++++ methods/images-of-text/resources.html | 11 ++++++++ 2 files changed, 50 insertions(+) create mode 100644 methods/images-of-text/background.html diff --git a/methods/images-of-text/background.html b/methods/images-of-text/background.html new file mode 100644 index 00000000..5a1b7210 --- /dev/null +++ b/methods/images-of-text/background.html @@ -0,0 +1,39 @@ + + + + Method - Background + + +
    +

    Background

    +
    +
    +
    +

    W3C Resources

    + +
    +
    +

    Non-W3C Resources

    +
      +
    • None
      • +
    +
    +
    +

    Accessibility Support

    +

    To be completed. +

    +
    +
    +

    Assumptions

    +
      +
    • To be completed. [assumptions]
      • +
    +
    +
    + + \ No newline at end of file diff --git a/methods/images-of-text/resources.html b/methods/images-of-text/resources.html index 1c95d68d..acf1ebab 100644 --- a/methods/images-of-text/resources.html +++ b/methods/images-of-text/resources.html @@ -23,6 +23,17 @@

    Non-W3C Resources

  • None
    • +
    +

    Accessibility Support

    +

    +

    +
    +
    +

    Assumptions

    +
      +
    • [assumptions]
      • +
    +
    \ No newline at end of file From 3c71e8a3eb6e769f1d9251e1c0c0019cfdfb8404 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 22 Sep 2021 07:30:49 -0400 Subject: [PATCH 26/38] added failure examples Added new heading and sections for passed, failed, and not applicable. Added new failure examples from subgroup. --- methods/images-of-text/examples.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/methods/images-of-text/examples.html b/methods/images-of-text/examples.html index 01547eb5..1e1328ae 100644 --- a/methods/images-of-text/examples.html +++ b/methods/images-of-text/examples.html @@ -8,6 +8,9 @@

    Examples

    +
    +

    Passed

    +
    +
    +
    +

    Failed

    +
    +

    Failure example 1 due to not updating text alternative when changes to non-text content occur

    + {Use a copy of this section for each example if not using a bullet list of examples} +

    The objective of this failure condition is to address situations where the non-text content is updated, but the text alternative is not updated at the same time. If the text in the text alternative cannot still be used in place of the non-text content without losing information or function, then it fails because it is no longer a text alternative for the non-text content.

    +
    +
    +

    Failure example 2 due to using text alternatives that are not alternatives (e.g. filenames or placeholder text)

    +

    This describes a failure condition for all techniques involving text alternatives. If the text in the "text alternative" cannot be used in place of the non-text content without losing information or function then it fails because it is not, in fact, an alternative to the non-text content.

    +

    Examples of text that are not text alternatives include:

    +
      +
    • placeholder text such as " " or "spacer" or "image" or "picture" etc that are put into the 'text alternative' location on images or pictures.
      • +
    • programming references that do not convey the information or function of the non-text content such as "picture 1", "picture 2" or "0001", "0002" or "Intro#1", "Intro#2".
      • +
    • filenames that are not valid text alternatives in their own right such as "Oct.jpg" or "Chart.jpg" or "sales\\oct\\top3.jpg"
      • +
    +
    +
    +

    Inapplicable

    +
    +

    {Example Name}

    +

    to be completed, if appropriate

    +
    +
    \ No newline at end of file From d69f9344007b5cbac40395c6b0cf523cd01743cf Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 22 Sep 2021 08:17:03 -0400 Subject: [PATCH 27/38] tests update Moved sections around. Added ednote for Scoring changes. --- methods/images-of-text/tests.html | 76 +++++++++++++++---------------- 1 file changed, 36 insertions(+), 40 deletions(-) diff --git a/methods/images-of-text/tests.html b/methods/images-of-text/tests.html index ef3e6086..5da36c1c 100644 --- a/methods/images-of-text/tests.html +++ b/methods/images-of-text/tests.html @@ -8,22 +8,14 @@

    Tests

    -
    -

    Atomic Tests

    - -
    -

    Automated test for all images

    -

    Unit Tested: All Images

    -

    Measurement: Percentage (# passed/total # of img elements for all images)

    -
      -
    • This test is measured by the number of img elements in the HTML document or the number of images in non-HTML content being tested.
      • -
    • The percentage test result is the number passed divided by the total number of img elements or images.
      • -
    -
    -

    Procedure for HTML

    +
    +

    Get Started

    +

    W3C Easy Checks - Image text alternatives - this W3C Web Accessibility Initiative resource explains basic testing for accessibility of images

    +
    +
    +

    Summary

    +
    +

    Procedure for HTML

    1. Run an automated test that displays the text alternative (or accessible name) for images.
    2. Check that functional, informative, and images of text have alternative text that serves an equivalent purpose of the image @@ -40,7 +32,7 @@

      Expected Results

      Check #2 and #3 are true.

    -

    Procedure for Technology Agnostic

    +

    Procedure for Technology Agnostic

    1. Examine each image in the content.
    2. Check that each image that conveys meaning has its text alternative.
      3. @@ -54,38 +46,42 @@

      Expected Results

      Checks #2 and #3, or #2 and #4, or #2 and #5 are true.

    +

    These sections related to scoring are expected to change significantly as the revised Scoring proposal is developed.

    +
    +

    Automated test for all images

    +

    Unit Tested: All Images

    +

    Measurement: Percentage (# passed/total # of img elements for all images)

    +
      +
    • This test is measured by the number of img elements in the HTML document or the number of images in non-HTML content being tested.
      • +
    • The percentage test result is the number passed divided by the total number of img elements or images.
      • +
    +

    Manual Test of Images of Text

    • Unit Tested: All Images of Text
    • Measurement: Percentage (# passed/total # of img elements for “Images of Text”)The percentage test result is the number passed divided by the total number of img elements or images.
    -
    -

    Procedure [for HTML]

    -
      -
    1. Examine each img element in the content that contains text within the image.
      2. -
    2. Check that each image which conveys meaning contains a text alternative.
      3. -
    3. Check that each img element that contains text that is not purely decorative has a text alternative that serves an equivalent purpose.
      4. -
    -
    -
    -

    Procedure for Technology Agnostic version

    -
      -
    1. Examine each image in the content that contains text within the image
      2. -
    2. Check that each image which conveys meaning contains a text alternative.
      3. -
    3. Check that each img element that contains text that is not purely decorative has a text alternative that serves an equivalent purpose.
      4. -
    -
    -
    -

    Expected Results

    -

    Check #2 and #3 are true.

    -
    +
    +

    Applicability

    +

    To be completed. See:

    + +

    This outcome applies to any [element names] element that is [condition] and for which one of the following is true: +

    +
    {excluded, ignored, exception}
    +
    [element] +
    -
    -

    Holistic Tests

    +
    +

    Expectations

    +

    To be completed. See:

    From 1880964611c6e9d61bf9c1ed183fdf6066831304 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 22 Sep 2021 19:59:48 -0400 Subject: [PATCH 28/38] Added Glossary files added glossary.html to Images of Text and Caption Reflow --- methods/caption-reflow/glossary.html | 17 +++++++++++++++++ methods/images-of-text/glossary.html | 17 +++++++++++++++++ methods/template/glossary.html | 2 +- 3 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 methods/caption-reflow/glossary.html create mode 100644 methods/images-of-text/glossary.html diff --git a/methods/caption-reflow/glossary.html b/methods/caption-reflow/glossary.html new file mode 100644 index 00000000..b152331b --- /dev/null +++ b/methods/caption-reflow/glossary.html @@ -0,0 +1,17 @@ + + + + Method - Glossary + + +
    +

    Glossary

    +
    +
    +
    +

    [term]

    +

    [definition] To be completed.

    +
    +
    + + \ No newline at end of file diff --git a/methods/images-of-text/glossary.html b/methods/images-of-text/glossary.html new file mode 100644 index 00000000..b152331b --- /dev/null +++ b/methods/images-of-text/glossary.html @@ -0,0 +1,17 @@ + + + + Method - Glossary + + +
    +

    Glossary

    +
    +
    +
    +

    [term]

    +

    [definition] To be completed.

    +
    +
    + + \ No newline at end of file diff --git a/methods/template/glossary.html b/methods/template/glossary.html index cec72de5..b152331b 100644 --- a/methods/template/glossary.html +++ b/methods/template/glossary.html @@ -10,7 +10,7 @@

    Glossary

    [term]

    -

    definition

    +

    [definition] To be completed.

    From 11aa3ed7e2256f2a629a8260fa1a97519a9c3a45 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 22 Sep 2021 20:10:37 -0400 Subject: [PATCH 29/38] description of caption reflow Changed Intro to description. Moved sections --- methods/caption-reflow/description.html | 44 ++++++++++++++++++------- methods/caption-reflow/intro.html | 15 +++++++++ 2 files changed, 48 insertions(+), 11 deletions(-) diff --git a/methods/caption-reflow/description.html b/methods/caption-reflow/description.html index c363ffef..2335dc6e 100644 --- a/methods/caption-reflow/description.html +++ b/methods/caption-reflow/description.html @@ -13,24 +13,46 @@

    Outcome and Functional Categories

    This method supports the outcome Conveys information about the sound.

    Applies to immersive environments that support text equivalents (such as captions or transcripts) of audio track.

    -
    -

    Detailed description

    -
    -

    Maintaining reflow context in XR for Captions

    +
    +

    Platform

    +
      +
    • Media players
      • +
    • Immersive technology engines
      • +
    +
    +
    +

    Technology

    +
      +
    • Media
      • +
    • XR
      • +
    +
    +
    +

    Input aspects for testing

    +
      +
    • To be completed. [technical sources for input, such as DOM tree, Accessibility tree and CSS styling]
      • +
    +
    +
    +

    Summary

    +

    Users with vision impairments may need to resize or reflow captions, + subtitling or other text. It is important that caption, subtitling or text can reflow (in context) + within an XR environment without loss of information, context or functionality. +

    Content should not lose its context. This means that when captioning is related to speech they maintain their relationship with the source. If captioned text within the environment needs to be moved there is a persistent parent / child relationship between the related source and the related caption that enables either to be moved or other transformations to take place.

    See https://github.com/w3c/silver/issues/139 for example of traditional content in XR environment

    -
    -
    -

    Anti-Aliasing or use of vector graphics of Captions

    Depending on the environment - Captions should be resized without loss of quality. This may mean anti-aliasing options need to be available in XR or requiring the use of vector style graphics for captions and other text, which means they will resize more easily without loss of quality.

    -
    -

    Dependencies

    +
    +

    How it solves user need

    +

    People can choose a font format or size of their choice or use a mechanism with accessible affordances. This will allow them to resize and reflow text without either hiding or obscuring the content or substantial loss of context. The means of choice can be via (choose at least one):

      -

    • None.

      • +
    • user preference
      • +
    • personalization
      • +
    • other customisation setting
    - \ No newline at end of file + diff --git a/methods/caption-reflow/intro.html b/methods/caption-reflow/intro.html index 103aac65..c9e59254 100644 --- a/methods/caption-reflow/intro.html +++ b/methods/caption-reflow/intro.html @@ -8,6 +8,11 @@

    Introduction

    +
    +

    Outcome and Functional Categories

    +

    This method supports the outcome Conveys information about the sound.

    +

    Applies to immersive environments that support text equivalents (such as captions or transcripts) of audio track.

    +

    Platform

      @@ -22,12 +27,22 @@

      Technology

    • XR
    +
    +

    Input aspects for testing

    +
      +
    • To be completed. [technical sources for input, such as DOM tree, Accessibility tree and CSS styling]
      • +
    +

    Summary

    Users with vision impairments may need to resize or reflow captions, subtitling or other text. It is important that caption, subtitling or text can reflow (in context) within an XR environment without loss of information, context or functionality.

    +

    Content should not lose its context. This means that when captioning is related to speech they maintain their relationship with the source. If captioned text within the environment needs to be moved there is a persistent parent / child relationship between the related source and the related caption that enables either to be moved or other transformations to take place.

    +

    See https://github.com/w3c/silver/issues/139 for example of traditional content in XR environment

    +

    Depending on the environment - Captions should be resized without loss of quality. This may mean anti-aliasing options need to be available in XR or requiring the use of vector style graphics for captions and other text, which means they will resize more easily without loss of quality.

    +

    How it solves user need

    From 09d8391e80c40b997670b59f5bdaaa9f9f0e7988 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 22 Sep 2021 20:58:39 -0400 Subject: [PATCH 30/38] updated index with new tabs and updated status. --- methods/caption-reflow/description.html | 2 +- methods/caption-reflow/index.html | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/methods/caption-reflow/description.html b/methods/caption-reflow/description.html index 2335dc6e..5f12eeae 100644 --- a/methods/caption-reflow/description.html +++ b/methods/caption-reflow/description.html @@ -9,7 +9,7 @@

    Description

    -

    Outcome and Functional Categories

    +

    Outcome

    This method supports the outcome Conveys information about the sound.

    Applies to immersive environments that support text equivalents (such as captions or transcripts) of audio track.

    diff --git a/methods/caption-reflow/index.html b/methods/caption-reflow/index.html index 5934a7dc..09925179 100644 --- a/methods/caption-reflow/index.html +++ b/methods/caption-reflow/index.html @@ -10,11 +10,12 @@

    Caption reflow

    @@ -26,6 +27,7 @@

    Status

    Change Log

    • 2020-09-10: Draft
      • +
    • 2021-09-22: Reformatted to ACT Method design
    From 99078c86dca860977b2fe3fe2168201d30da1f16 Mon Sep 17 00:00:00 2001 From: Michael Cooper Date: Fri, 24 Sep 2021 11:11:46 -0400 Subject: [PATCH 31/38] filename to match content --- methods/template/index.html | 2 +- methods/template/{description.html => introduction.html} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename methods/template/{description.html => introduction.html} (100%) diff --git a/methods/template/index.html b/methods/template/index.html index ad985a8b..4ff58e1d 100644 --- a/methods/template/index.html +++ b/methods/template/index.html @@ -10,7 +10,7 @@

    {Method Name}

      -
    • Description
      • +
    • Introduction
    • Background
    • Examples
    • Tests
      • diff --git a/methods/template/description.html b/methods/template/introduction.html similarity index 100% rename from methods/template/description.html rename to methods/template/introduction.html From fd69f13a3317caf6b43639c2108c9376e6d03831 Mon Sep 17 00:00:00 2001 From: Michael Cooper Date: Fri, 24 Sep 2021 11:21:48 -0400 Subject: [PATCH 32/38] picked up from act method proposal --- methods/template/glossary.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/methods/template/glossary.html b/methods/template/glossary.html index b152331b..cec72de5 100644 --- a/methods/template/glossary.html +++ b/methods/template/glossary.html @@ -10,7 +10,7 @@

      Glossary

      [term]

      -

      [definition] To be completed.

      +

      definition

      From 860f05302dd60b6fbe94c6e0bb4221a9185ce016 Mon Sep 17 00:00:00 2001 From: Michael Cooper Date: Fri, 24 Sep 2021 11:36:59 -0400 Subject: [PATCH 33/38] Update TOCs --- methods/audio-metadata/index.html | 6 +++--- methods/caption-reflow/index.html | 10 +++++----- methods/clear-words/index.html | 6 +++--- methods/decorative-images/index.html | 2 +- methods/font-characteristics-contrast/index.html | 6 +++--- methods/functional-images/index.html | 6 +++--- methods/headings-in-html/index.html | 6 +++--- methods/images-of-text/index.html | 10 +++++----- methods/informative-images/index.html | 6 +++--- methods/relevant-headings/index.html | 6 +++--- methods/text-alternative-editable/index.html | 6 +++--- methods/text-equiv/index.html | 6 +++--- methods/visually-distinct/index.html | 7 +++---- 13 files changed, 41 insertions(+), 42 deletions(-) diff --git a/methods/audio-metadata/index.html b/methods/audio-metadata/index.html index 93910f14..bee815ae 100644 --- a/methods/audio-metadata/index.html +++ b/methods/audio-metadata/index.html @@ -10,11 +10,11 @@

      Provides visual equivalent of speech and non-speech audio metadata

      diff --git a/methods/caption-reflow/index.html b/methods/caption-reflow/index.html index 09925179..14ecd2ad 100644 --- a/methods/caption-reflow/index.html +++ b/methods/caption-reflow/index.html @@ -10,11 +10,11 @@

      Caption reflow

      diff --git a/methods/clear-words/index.html b/methods/clear-words/index.html index f24bb392..08eaddf5 100644 --- a/methods/clear-words/index.html +++ b/methods/clear-words/index.html @@ -10,11 +10,11 @@

      Clear words

      diff --git a/methods/decorative-images/index.html b/methods/decorative-images/index.html index f5832fe4..418b9a7b 100644 --- a/methods/decorative-images/index.html +++ b/methods/decorative-images/index.html @@ -10,7 +10,7 @@

      Decorative images

        -
      • Description
        • +
      • Introduction
      • Background
      • Examples
      • Tests
        • diff --git a/methods/font-characteristics-contrast/index.html b/methods/font-characteristics-contrast/index.html index 4e5f99b2..8882906e 100644 --- a/methods/font-characteristics-contrast/index.html +++ b/methods/font-characteristics-contrast/index.html @@ -10,11 +10,11 @@

        Font Characteristics Contrast

        diff --git a/methods/functional-images/index.html b/methods/functional-images/index.html index 5944c044..a72f1dd0 100644 --- a/methods/functional-images/index.html +++ b/methods/functional-images/index.html @@ -10,11 +10,11 @@

        Text Alternatives for Functional Images

        diff --git a/methods/headings-in-html/index.html b/methods/headings-in-html/index.html index a8aedf7c..3961affe 100644 --- a/methods/headings-in-html/index.html +++ b/methods/headings-in-html/index.html @@ -10,11 +10,11 @@

        Headings in HTML

        diff --git a/methods/images-of-text/index.html b/methods/images-of-text/index.html index b4ca01ab..e68262e3 100644 --- a/methods/images-of-text/index.html +++ b/methods/images-of-text/index.html @@ -10,11 +10,11 @@

        Method: Text Alternatives for Images of Text

        diff --git a/methods/informative-images/index.html b/methods/informative-images/index.html index 4344e8dd..a0e15e50 100644 --- a/methods/informative-images/index.html +++ b/methods/informative-images/index.html @@ -10,11 +10,11 @@

        Informative Images

        diff --git a/methods/relevant-headings/index.html b/methods/relevant-headings/index.html index 0a471c39..cf25d7c2 100644 --- a/methods/relevant-headings/index.html +++ b/methods/relevant-headings/index.html @@ -10,11 +10,11 @@

        Relevant Headings

        diff --git a/methods/text-alternative-editable/index.html b/methods/text-alternative-editable/index.html index b1a3d76f..14efe74f 100644 --- a/methods/text-alternative-editable/index.html +++ b/methods/text-alternative-editable/index.html @@ -10,11 +10,11 @@

        Author control of text alternatives

        diff --git a/methods/text-equiv/index.html b/methods/text-equiv/index.html index bc712a7f..bae45f9b 100644 --- a/methods/text-equiv/index.html +++ b/methods/text-equiv/index.html @@ -11,11 +11,11 @@

        Provides text equivalents of speech and non-speech audio

        diff --git a/methods/visually-distinct/index.html b/methods/visually-distinct/index.html index ebd18344..a9d5b6d7 100644 --- a/methods/visually-distinct/index.html +++ b/methods/visually-distinct/index.html @@ -10,12 +10,11 @@

        Method: Visually distinct headings

        From b1df89192ad6ba2e0fc6e2d2536d29f5c8183833 Mon Sep 17 00:00:00 2001 From: Michael Cooper Date: Tue, 28 Sep 2021 07:53:52 -0400 Subject: [PATCH 34/38] introduction (back) to description --- methods/audio-metadata/index.html | 2 +- methods/caption-reflow/index.html | 2 +- methods/clear-words/index.html | 2 +- methods/decorative-images/index.html | 2 +- methods/font-characteristics-contrast/index.html | 2 +- methods/functional-images/index.html | 2 +- methods/headings-in-html/index.html | 2 +- methods/images-of-text/index.html | 2 +- methods/informative-images/index.html | 2 +- methods/relevant-headings/index.html | 2 +- methods/template/index.html | 2 +- methods/text-alternative-editable/index.html | 2 +- methods/text-equiv/index.html | 2 +- methods/visually-distinct/index.html | 2 +- 14 files changed, 14 insertions(+), 14 deletions(-) diff --git a/methods/audio-metadata/index.html b/methods/audio-metadata/index.html index bee815ae..e8351e08 100644 --- a/methods/audio-metadata/index.html +++ b/methods/audio-metadata/index.html @@ -10,7 +10,7 @@

        Provides visual equivalent of speech and non-speech audio metadata

          -
        • Introduction
          • +
        • Description
        • Background
        • Examples
        • Tests
          • diff --git a/methods/caption-reflow/index.html b/methods/caption-reflow/index.html index 14ecd2ad..e9c732d3 100644 --- a/methods/caption-reflow/index.html +++ b/methods/caption-reflow/index.html @@ -10,7 +10,7 @@

          Caption reflow

            -
          • Introduction
            • +
          • Description
          • Background
          • Examples
          • Tests
            • diff --git a/methods/clear-words/index.html b/methods/clear-words/index.html index 08eaddf5..a0a6c96d 100644 --- a/methods/clear-words/index.html +++ b/methods/clear-words/index.html @@ -10,7 +10,7 @@

            Clear words

              -
            • Introduction
              • +
            • Description
            • Background
            • Examples
            • Tests
              • diff --git a/methods/decorative-images/index.html b/methods/decorative-images/index.html index 418b9a7b..f5832fe4 100644 --- a/methods/decorative-images/index.html +++ b/methods/decorative-images/index.html @@ -10,7 +10,7 @@

              Decorative images

                -
              • Introduction
                • +
              • Description
              • Background
              • Examples
              • Tests
                • diff --git a/methods/font-characteristics-contrast/index.html b/methods/font-characteristics-contrast/index.html index 8882906e..37fead23 100644 --- a/methods/font-characteristics-contrast/index.html +++ b/methods/font-characteristics-contrast/index.html @@ -10,7 +10,7 @@

                Font Characteristics Contrast

                  -
                • Introduction
                  • +
                • Description
                • Background
                • Examples
                • Tests
                  • diff --git a/methods/functional-images/index.html b/methods/functional-images/index.html index a72f1dd0..3223a8f8 100644 --- a/methods/functional-images/index.html +++ b/methods/functional-images/index.html @@ -10,7 +10,7 @@

                  Text Alternatives for Functional Images

                    -
                  • Introduction
                    • +
                  • Description
                  • Background
                  • Examples
                  • Tests
                    • diff --git a/methods/headings-in-html/index.html b/methods/headings-in-html/index.html index 3961affe..b194eda5 100644 --- a/methods/headings-in-html/index.html +++ b/methods/headings-in-html/index.html @@ -10,7 +10,7 @@

                    Headings in HTML

                      -
                    • Introduction
                      • +
                    • Description
                    • Background
                    • Examples
                    • Tests
                      • diff --git a/methods/images-of-text/index.html b/methods/images-of-text/index.html index e68262e3..6cc6c44b 100644 --- a/methods/images-of-text/index.html +++ b/methods/images-of-text/index.html @@ -10,7 +10,7 @@

                      Method: Text Alternatives for Images of Text

                        -
                      • Introduction
                        • +
                      • Description
                      • Background
                      • Examples
                      • Tests
                        • diff --git a/methods/informative-images/index.html b/methods/informative-images/index.html index a0e15e50..934cfe71 100644 --- a/methods/informative-images/index.html +++ b/methods/informative-images/index.html @@ -10,7 +10,7 @@

                        Informative Images

                          -
                        • Introduction
                          • +
                        • Description
                        • Background
                        • Examples
                        • Tests
                          • diff --git a/methods/relevant-headings/index.html b/methods/relevant-headings/index.html index cf25d7c2..7b1a04f9 100644 --- a/methods/relevant-headings/index.html +++ b/methods/relevant-headings/index.html @@ -10,7 +10,7 @@

                          Relevant Headings

                            -
                          • Introduction
                            • +
                          • Description
                          • Background
                          • Examples
                          • Tests
                            • diff --git a/methods/template/index.html b/methods/template/index.html index 4ff58e1d..5d65e95e 100644 --- a/methods/template/index.html +++ b/methods/template/index.html @@ -10,7 +10,7 @@

                            {Method Name}

                              -
                            • Introduction
                              • +
                            • Description
                            • Background
                            • Examples
                            • Tests
                              • diff --git a/methods/text-alternative-editable/index.html b/methods/text-alternative-editable/index.html index 14efe74f..fbe244cb 100644 --- a/methods/text-alternative-editable/index.html +++ b/methods/text-alternative-editable/index.html @@ -10,7 +10,7 @@

                              Author control of text alternatives

                                -
                              • Introduction
                                • +
                              • Description
                              • Background
                              • Examples
                              • Tests
                                • diff --git a/methods/text-equiv/index.html b/methods/text-equiv/index.html index bae45f9b..2ce282d5 100644 --- a/methods/text-equiv/index.html +++ b/methods/text-equiv/index.html @@ -11,7 +11,7 @@

                                Provides text equivalents of speech and non-speech audio

                                  -
                                • Introduction
                                  • +
                                • Description
                                • Background
                                • Examples
                                • Tests
                                  • diff --git a/methods/visually-distinct/index.html b/methods/visually-distinct/index.html index a9d5b6d7..23ec5b1d 100644 --- a/methods/visually-distinct/index.html +++ b/methods/visually-distinct/index.html @@ -10,7 +10,7 @@

                                  Method: Visually distinct headings

                                    -
                                  • Introduction
                                    • +
                                  • Description
                                  • Background
                                  • Examples
                                  • Tests
                                    • From 4af1703624630bea7cdde7ac75d3085d8d940550 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Tue, 28 Sep 2021 21:20:57 -0400 Subject: [PATCH 35/38] renamed resources to background, added new sections --- .../{resources.html => background.html} | 12 ++++++++++++ 1 file changed, 12 insertions(+) rename methods/caption-reflow/{resources.html => background.html} (70%) diff --git a/methods/caption-reflow/resources.html b/methods/caption-reflow/background.html similarity index 70% rename from methods/caption-reflow/resources.html rename to methods/caption-reflow/background.html index b8c2aca9..87806d15 100644 --- a/methods/caption-reflow/resources.html +++ b/methods/caption-reflow/background.html @@ -24,6 +24,18 @@

                                    Non-W3C Resources

                                  • Enhancing Subtitles - BBC
    +
    +

    Accessibility Support

    +

    to be written +

    +
    +
    +

    Assumptions

    +
      +
    • To be written [assumptions]
      • +
    +
    + \ No newline at end of file From 319d4cdcd666235fa1ff295cfb4dd4a21f84e53c Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Tue, 28 Sep 2021 21:26:01 -0400 Subject: [PATCH 36/38] Updated examples --- methods/caption-reflow/examples.html | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/methods/caption-reflow/examples.html b/methods/caption-reflow/examples.html index 94c3a663..c7bb3d74 100644 --- a/methods/caption-reflow/examples.html +++ b/methods/caption-reflow/examples.html @@ -8,15 +8,29 @@

    Examples

    -
    -

    Example 1

    +
    +

    Passed

    +
    +

    Example 1

    A conversation is taking place between a group of people at a virtual meeting and a deaf user is tracking this discussion - there may be colour coding to distinguish the speakers and the caption colours may be related.

    The deaf user may later wish to explore the environment or look at some thing - and therefore move focus from the speakers but dock the captions, or keep them in some bespoke view. Therefore the speaker source and ‘their’ captions relationship can be maintained.

    This relationship maybe as simple as a text saying ‘Speaker name: Lorraine’, ‘Speaker name: Ruairi’ or similar. Or could be provided in markup. Providing the association of ‘source/caption’ in markup would allow greater movement, and further potential transformations.

    - -
    +
    +
    +
    +

    Failed

    +
    +

    To be written

    +
    +
    +
    +

    Inapplicable

    +
    +

    To be written

    +
    +
    \ No newline at end of file From 170223a8a3f757328ba992c1ddb7b52806c27104 Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Tue, 28 Sep 2021 21:29:45 -0400 Subject: [PATCH 37/38] Update tests for reflow captions --- methods/caption-reflow/tests.html | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/methods/caption-reflow/tests.html b/methods/caption-reflow/tests.html index 8db7d897..7ca36456 100644 --- a/methods/caption-reflow/tests.html +++ b/methods/caption-reflow/tests.html @@ -8,8 +8,25 @@

    Tests

    -
    -

    Atomic Tests

    +
    +

    Get Started

    +

    To be written

    +
    +
    +

    Summary

    +

    To be written [overview of the test]

    +
    +
    +

    Applicability

    +

    To be written: This outcome applies to any [element names] element that is [condition] and for which one of the following is true: +

    +
    {excluded, ignored, exception}
    +
    [element] +
    +
    +
    +

    Expectations

    +

    To be written. [detail of the expectation] Tests from First Public Working Draft:

    • Check that there is support for captioning and subtitling of multimedia content.
    • Check that there is support for reflow of captions and other text.
      • @@ -17,13 +34,6 @@

      Atomic Tests

    • Check that there are semantics present that define context and relationships between related captions, subtitles and their source.
    • Check that where captions and other text may be placed on a second screen, context and source information is maintained.
    -
    -
    -

    Holistic Tests

    -
      -
    • Still to be developed. We will include this in a future working draft.
      • -
    -
    \ No newline at end of file From 7ba7e9f5092043f9db9387887080416cb945d0cc Mon Sep 17 00:00:00 2001 From: Jeanne Spellman Date: Wed, 29 Sep 2021 09:57:00 -0400 Subject: [PATCH 38/38] Update Clear Words --- methods/clear-words/intro.html | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/methods/clear-words/intro.html b/methods/clear-words/intro.html index 407585af..0ab507d4 100644 --- a/methods/clear-words/intro.html +++ b/methods/clear-words/intro.html @@ -1,13 +1,17 @@ - Method - Introduction + Method - Description
    -

    Introduction

    +

    Description

    +
    +

    Outcome

    +

    This method supports the outcome: Common clear words

    +

    Platform

      @@ -23,11 +27,26 @@

      Technology

      Summary

      Clear words help create more accessible content for people with cognitive and learning disabilities. Use words or phrases that are most-frequently used for the current context, unless it will result in a loss of meaning or clarity.

      + +

      Clear and common words: Use words or phrases that are most-frequently used for the current context, unless it will result in a loss of meaning or clarity. This includes not using abbreviations, words, or phrases, unless they are the common form to refer to concepts for beginners. Where word frequencies are known for the context, they can be used. An example would be the Merriam Webster 3000 Core English Vocabulary Words.

      +

      Even languages with a small number of users have published lists of most-frequent words (such as Hebrew). If there is a natural language that does not have such a list, algorithms exist that calculate these lists for languages, or for specific contexts. Testing content against these word lists can be done manually.

      +

      Define unusual words: It is best to define technical or jargon words in context so that the user does not have to navigate away from the text to a glossary in a different location. There are a variety of possible solutions for defining words in context, including the use of a pop-up definition.

      +

      Provide a glossary: A glossary is typically an alphabetical list of terms related to a given set of content.

      How it solves user need

      Using clear and common words makes content easier to read and to understand.

      +
      +

      Input aspects for testing

      +
        +
      • Not written [technical sources for input, such as DOM tree, Accessibility tree and CSS styling]
        • +
      +
      +
      +

      When to use

      +

      Not written yet {when the method should or should not be used}

      +