diff --git a/guidelines/terms/20/accessibility-supported.html b/guidelines/terms/20/accessibility-supported.html index e2dbd97904..1b788aef8c 100644 --- a/guidelines/terms/20/accessibility-supported.html +++ b/guidelines/terms/20/accessibility-supported.html @@ -1,111 +1,71 @@ -
obsługiwana dostępność
+
wsparcie dostępności
-

obsługiwana przez technologie wspomagające oraz przez przeglądarki i inne programy użytkownika

- - +

wspieranie dostępności przez technologie wspomagające oraz przez przeglądarki i inne programy użytkownika

- Żeby zakwalifikować użycie technologii tworzenia treści internetowych jako obsługiwane przez dostępność, muszą być spełnione oba poniższe warunki: + Żeby zakwalifikować użycie technologii tworzenia treści internetowych jako wspierające dostępność, muszą być spełnione oba poniższe warunki:

-
    -
  1. -

    - Technologia treści internetowych musi współpracować z technologiami wspomagającymi. Oznacza to, że sposoby wykorzystywania tej technologii zostały przetestowane pod kątem współdziałania z technologiami wspomagającymi i umożliwiają odczytywanie treści w języku naturalnym + Technologia treści internetowych musi współpracować z technologiami wspomagającymi. Oznacza to, że zastosowania tej technologii zostały przetestowane pod kątem współdziałania z technologiami wspomagającymi i umożliwiają odczytywanie treści w języku naturalnym;

    -

    ORAZ

    -
  2. -
  3. -

    Muszą istnieć łatwo osiągalne przez użytkowników narzędzia obsługujące tę technologię. Oznacza to, że co najmniej jedno z czterech poniższych stwierdzeń jest prawdziwe:

    -
      -
    1. -

      - Taka technologia z założenia jest powszechnie obsługiwana przez programy użytkownika, które również obsługują dostępność (tak jak HTML i CSS); + Taka technologia z założenia jest powszechnie obsługiwana w programach użytkownika, które wspierają również dostępność (tak jak HTML i CSS);

      -

      LUB

    2. -
    3. - Technologia jest obsługiwana za pomocą szeroko rozpowszechnionej wtyczki, która również obsługuje dostępność; + Technologia jest obsługiwana za pomocą szeroko rozpowszechnionej wtyczki, która również wspiera dostępność;

      -

      LUB

    4. -
    5. - Treść strony jest dostępna dla zamkniętych środowisk, takich jak środowisko uniwersyteckie lub sieć korporacyjna, gdzie wymagany przez tę technologię program użytkownika i użyty do treści internetowych także obsługuje dostępność; + Treść strony jest dostępna dla zamkniętych środowisk, takich jak środowisko uniwersyteckie lub sieć korporacyjna, gdzie program użytkownika wymagany przez tę technologię i użyty do tworzenia treści internetowych także wspiera dostępność;

      -

      LUB

    6. -
    7. - Programy użytkownika obsługujące technologię, obsługują dostępność i można je z łatwością pobrać lub zakupić w następujący sposób: + Programy użytkownika obsługujące tę technologię, wspierają dostępność i można je z łatwością pobrać lub zakupić w następujący sposób:

      - -
        - +
        • osób z niepełnosprawnością nie kosztuje to więcej niż osoby pełnosprawne oraz oraz
        • -
        • są równie łatwe do znalezienia i nabycia przez osoby z niepełnosprawnością, jak i pełnosprawne.
        • -
        - -
    -
  4. -
-

- Grupa Robocza WCAG i W3C nie precyzują ani sposobu, ani poziomu obsługi technologii treści internetowych przez technologie wspomagające, aby móc uznać dane technologie internetowe za obsługujące dostępność. Czytaj więcej: Level of Assistive Technology Support Needed for "Accessibility Support" (Poziom wsparcia technologii wspomagających potrzebny do „obsługi dostępności”). + Grupa Robocza WCAG i W3C nie precyzują ani sposobu, ani poziomu wsparcia dla technologii internetowych przez technologie wspomagające, aby można uznać dane technologie internetowe za wspierające dostępność. Zobacz: Level of Assistive Technology Support Needed for "Accessibility Support" (Poziom wsparcia technologii wspomagających potrzebny do „wsparcia dostępności”).

-

- Technologie internetowe mogą być wykorzystywane, nawet jeśli nie obsługują dostępności, dopóki nie są uwzględniane w ocenie dostępności, a strona jako całość będzie zgodna z wymogami, w tym z Wymogiem zgodności: 4. Użycie technologii obsługujących dostępność oraz Wymogiem zgodności 5. Brak zakłóceń. + Technologie internetowe mogą być wykorzystywane, nawet jeśli nie wspierają dostępności, dopóki nie są uwzględniane w ocenie dostępności, a strona jako całość będzie zgodna z wymogami, w tym z Wymogiem zgodności: 4. Użycie technologii obsługujących dostępność oraz Wymogiem zgodności 5. Brak zakłóceń.

-

- Kiedy technologia używana jest w sposób obsługujący dostępność, nie oznacza to, że wszystkie jej komponenty i ich użycie będą obsługiwały dostępność. Większość technologii, w tym HTML, nie obsługuje dostępności w co najmniej jednym ze swoich komponentów lub sposobie użycia. Strony są zgodne z wytycznymi WCAG tylko wówczas, kiedy użycie technologii obsługującej dostępność, może być uwzględniane jako podstawa oceny zgodności z WCAG. + Gdy technologia używana jest w sposób, który wspiera dostępność, nie oznacza to, że wszystkie jej komponenty i wszystkie sposoby ich użycia wspierają dostępność. Większość technologii, w tym HTML, nie wspiera dostępności w co najmniej jednym ze swoich komponentów lub sposobie użycia. Strony są zgodne z wytycznymi WCAG tylko wówczas, kiedy użycie technologii wspierającej dostępność, może być uwzględniane jako podstawa oceny zgodności z WCAG.

-

- Opierając się na technologiach tworzenia treści internetowych, które mają wiele wersji, należy określić, która wersja obsługuje dostępność. + Jeżeli używamy technologii tworzenia treści internetowych, które mają wiele wersji, należy określić, która wersja wspiera dostępność.

-

- Jednym ze sposobów dotarcia przez twórców treści internetowych do zastosowań technologii, które obsługują dostępność, jest zapoznanie się z zestawieniami zastosowań udokumentowanych jako obsługujące dostępność (zobacz: Understanding Accessibility-Supported Web Technology Uses - Zrozumieć zastosowania technologii internetowych obsługujących dostępność). Autorzy, firmy, sprzedawcy technologii i inni mogą dokumentować sposoby korzystania z technologii treści internetowych obsługujące dostępność. Jednak dokumentacja wszystkich sposobów i metod zastosowania tych technologii w dokumentacji musiałyby odpowiadać powyższej definicji technologii treści WWW obsługujących dostępność. + Jednym ze sposobów na znalezienie zastosowań technologii, które wspierają dostępność, jest zapoznanie się z zestawieniami, które są udokumentowane jako wspierane pod względem dostępności (zobacz: Understanding Accessibility-Supported Web Technology Uses - Zrozumieć zastosowania technologii internetowych wspierających dostępność). Autorzy, firmy, sprzedawcy technologii i inni mogą dokumentować sposoby korzystania z technologii treści internetowych wspierające dostępność. Ale wszystkie sposoby wykorzystania technologii wskazane w dokumentacji muszą spełniać powyższą definicję technologii internetowych wspierających.

-
- diff --git "a/understanding/20/bez-ogranicze\305\204-czasowych.html" "b/understanding/20/bez-ogranicze\305\204-czasowych.html" new file mode 100644 index 0000000000..becc2a9d2d --- /dev/null +++ "b/understanding/20/bez-ogranicze\305\204-czasowych.html" @@ -0,0 +1,133 @@ + + + + + Understanding No Timing + + + +

Understanding No Timing

+ + +
+

Intent of No Timing

+ + +

The intent of this Success Criterion is to minimize the occurrence of content that + requires timed interaction. This enables people with blindness, low vision, cognitive + limitations, or motor impairments to interact with content. This differs from the + Level A Success Criterion in that the only exception is for real-time events. +

+ +
+ +

Video only, such as sign language, is covered in + Guideline 1.1. + +

+ +
+ + +
+
+

Benefits of No Timing

+ + + + +
+ +
+

Examples of No Timing

+ + + + +
+ +
+

Resources for No Timing

+ + +
+ +
+

Techniques for No Timing

+ + +
+

Sufficient Techniques for No Timing

+ + +
    + +
  1. + + Allowing users to complete an activity without any time limit + +
  2. + +
+ +
+ +
+

Additional Techniques (Advisory) for No Timing

+ + +
+ +
+

Failures for No Timing

+ + +
+ +
+ + + diff --git "a/understanding/20/bez-pu\305\202apki-na-klawiatur\304\231.html" "b/understanding/20/bez-pu\305\202apki-na-klawiatur\304\231.html" new file mode 100644 index 0000000000..bad290ef95 --- /dev/null +++ "b/understanding/20/bez-pu\305\202apki-na-klawiatur\304\231.html" @@ -0,0 +1,153 @@ + + + + + Understanding No Keyboard Trap + + + +

Understanding No Keyboard Trap

+ + +
+

Intent of No Keyboard Trap

+ + +

The intent of this Success Criterion is to ensure that that content does not "trap" + keyboard focus within subsections of content on a Web page. This is a common problem + when multiple formats are combined within a page and rendered using plug-ins or embedded + applications. +

+ +

There may be times when the functionality of the Web page restricts the focus to a + subsection of the content, as long as the user knows how to leave that state and "untrap" + the focus. +

+ + +
+
+

Benefits of No Keyboard Trap

+ + + + +
+ +
+

Examples of No Keyboard Trap

+ + + + +
+ +
+

Resources for No Keyboard Trap

+ + +
+ +
+

Techniques for No Keyboard Trap

+ + +
+

Sufficient Techniques for No Keyboard Trap

+ + +
    + +
  1. + + Ensuring that users are not trapped in content + +
  2. + +
+ +
+ +
+

Additional Techniques (Advisory) for No Keyboard Trap

+ + +
+ +
+

Failures for No Keyboard Trap

+ + + + +
+ +
+ + + diff --git "a/understanding/20/cel-\305\202\304\205cza-w-kontek\305\233cie.html" "b/understanding/20/cel-\305\202\304\205cza-w-kontek\305\233cie.html" new file mode 100644 index 0000000000..1bcc4250c0 --- /dev/null +++ "b/understanding/20/cel-\305\202\304\205cza-w-kontek\305\233cie.html" @@ -0,0 +1,474 @@ + + + + + Understanding Link Purpose (In Context) + + + +

Understanding Link Purpose (In Context)

+ + +
+

Intent of Link Purpose (In Context)

+ + +

The intent of this Success Criterion is to help users understand the purpose of each + link so they can decide whether they want to follow the link. Whenever possible, provide + link text that identifies the purpose of the link without needing additional context. + Assistive technology has the ability to provide users with a list of links that are + on the Web page. Link text that is as meaningful as possible will aid users who want + to choose from this list of links. Meaningful link text also helps those who wish + to tab from link to link. Meaningful links help users choose which links to follow + without requiring complicated strategies to understand the page. +

+ +

The text of, or associated with, the link is intended to describe the purpose of the + link. In cases where the link takes one to a document or a web application, the name + of the document or web application would be sufficient to describe the purpose of + the link (which is to take you to the document or web application). Note that it is + not required to use the name of the document or web application; other things may + also describe the purpose of the link. +

+ +

+ + Success Criterion 2.4.2 deals with the titles of pages. Here also, the name of a document or web application + being presented on the page would be sufficient to describe the purpose of the page. + Having the link and the title agree, or be very similar, is good practice and provides + continuity between the link 'clicked on' and the web page that the user lands on. + +

+ +

In some situations, authors may want to provide part of the description of the link + in logically related text that provides the context for the link. In this case the + user should be able to identify the purpose of the link without moving focus from + the link. In other words, they can arrive on a link and find out more about it without + losing their place. This can be achieved by putting the description of the link in + the same sentence, paragraph, list item, or table cell as the link, or in the table header cell for a link in a data table, because these are directly associated with the link itself. Alternatively, authors may choose to use an ARIA technique to associate additional + text on the page with the link. +

+ +

This context will be most usable if it precedes the link. (For instance, if you must + use ambiguous link text, it is better to put it at the end of the sentence that describes + its destination, rather than putting the ambiguous phrase at the beginning of the + sentence.) If the description follows the link, there can be confusion and difficulty + for screen reader users who are reading through the page in order (top to bottom). + +

+ +

It is a best practice for links with the same destination to have consistent text + (and this is a requirement per + Success Criterion 3.2.4 for pages in a set). It is also a best practice for links with different purposes + and destinations to have different link text. +

+ +

A best practice for links to conforming alternate versions is to ensure that the link text to the conforming alternate version indicates in link text that the page it leads to represents the more accessible version. This information may also be provided in text - the goal is to ensure that the end user knows what the purpose of the link is.

+ +

The Success Criterion includes an exception for links for which the purpose of the + link cannot be determined from the information on the Web page. In this situation, + the person with the disability is not at a disadvantage; there is no additional context + available to understand the link purpose. However, whatever amount of context is available + on the Web page that can be used to interpret the purpose of the link must be made + available in the link text or programmatically associated with the link to satisfy + the Success Criterion. +

+ +
+ +

There may be situations where the purpose of the link is is supposed to be unknown + or obscured. For instance, a game may have links identified only as door #1, door + #2, and door #3. This link text would be sufficient because the purpose of the links + is to create suspense for all users. +

+ +
+ +

See also + 2.4.9: Link Purpose (Link Only). +

+ + +
+
+

Benefits of Link Purpose (In Context)

+ + + + +
+ +
+

Examples of Link Purpose (In Context)

+ + + + +
+ +
+

Resources for Link Purpose (In Context)

+ + + + +
+ +
+

Techniques for Link Purpose (In Context)

+ + +
+

Sufficient Techniques for Link Purpose (In Context)

+ + +
    + +
  1. + + Providing link text that describes the purpose of a link + +
  2. + +
  3. + + Providing link text that describes the purpose of a link for anchor elements + +
  4. + +
  5. + + Providing a text alternative for the area element + +
  6. + + +
  7. + +

    Allowing the user to choose short or long link text using one of the techniques below:

    + + + +
  8. + +
  9. + + Identifying the purpose of a link using link text combined with the text of the enclosing + sentence + + +
  10. + +
  11. + +

    Providing a supplemental description of the purpose of a link using one of the following + techniques: +

    + + + +
  12. + +
  13. + +

    + Identifying the purpose of a link using link text combined with programmatically determined + link context using one of the following techniques: + +

    + + + +
  14. + +
  15. + +

    + + Providing link text that describes the purpose of a link + + AND Semantically indicating links using one of the following techniques: +

    + +
      + +
    • + + + +
    • + +
    • + + + +
    • + +
    + +
  16. + +
+ +
+ +
+

Additional Techniques (Advisory) for Link Purpose (In Context)

+ + + + +
+ +
+

Failures for Link Purpose (In Context)

+ + + + +
+ +
+ + + diff --git "a/understanding/20/cel-\305\202\304\205cza-z-samego-\305\202\304\205cza.html" "b/understanding/20/cel-\305\202\304\205cza-z-samego-\305\202\304\205cza.html" new file mode 100644 index 0000000000..c7edc76406 --- /dev/null +++ "b/understanding/20/cel-\305\202\304\205cza-z-samego-\305\202\304\205cza.html" @@ -0,0 +1,333 @@ + + + + + Understanding Link Purpose (Link Only) + + + +

Understanding Link Purpose (Link Only)

+ + +
+

Intent of Link Purpose (Link Only)

+ + +

The intent of this Success Criterion is to help users understand the purpose of each + link in the content, so they can decide whether they want to follow it. Best practice + is that links with the same destination would have the same descriptions, but links + with different purposes and destinations would have different descriptions (see also + + Success Criterion 3.2.4 which calls for consistency in identifying components that have the same functionality). + Because the purpose of a link can be identified from its link text, links can be understood + when they are out of context, such as when the user agent provides a list of all the + links on a page. +

+ +

The text in the link is intended to describe the purpose of the link. In cases where + the link takes one to a document or a web application, the name of the document or + web application would be sufficient to describe the purpose of the link (which is + to take you to the document or web application). Note that it is not required to use + the name of the document or web application; other things may also describe the purpose + of the link. +

+ +

+ + Success Criterion 2.4.2 deals with the titles of pages. Here also, the name of a document or web application + being presented on the page would be sufficient to describe the purpose of the page. + Having the link and the title agree, or be very similar, is good practice and provides + continuity between the link 'clicked on' and the web page that the user lands on. + +

+ +

The Success Criterion includes an exception for links for which the purpose of the + link cannot be determined from the information on the Web page. In this situation, + the person with the disability is not at a disadvantage; there is no additional context + available to understand the link purpose. However, whatever amount of context is available + on the Web page that can be used to interpret the purpose of the link must be made + available in the link text to satisfy the Success Criterion. +

+ +

The word "mechanism" is used to allow authors to either make all links fully understandable + out of context by default or to provide a way to make them this way. This is done + because for some pages, making the links all unambiguous by themselves makes the pages + easier for some users and harder for others. Providing the ability to make the links + unambiguous (by them selves) or not provides both users with disabilities with the + ability to use the page in the format that best meets their needs. +

+ +

For example: A page listing 100 book titles along with links to download the books + in HTML, PDF, DOC, TXT, MP3, or AAC might ordinarily be viewed as the title of the + book as a link with the words "in HTML" after it. then the sentence "Also available + in: " followed by a series of short links with text of "HTML", "PDF", "DOC", "TXT", + "MP3", and "AAC". At Level 3, some users could opt to view the page this way - because + they would find the page harder to understand or slower to use if the full title of + the book were included in each of the links. Others could opt to view the page with + the full title as part of each of the links so that each link was understandable in + itself. Both the former and the latter groups could include people with visual or + cognitive disabilities that used different techniques to browse or that had different + types or severities of disability. +

+ + +
+
+

Benefits of Link Purpose (Link Only)

+ + + + +
+ +
+

Examples of Link Purpose (Link Only)

+ + + + +
+ +
+

Resources for Link Purpose (Link Only)

+ + + + +
+ +
+

Techniques for Link Purpose (Link Only)

+ + +
+

Sufficient Techniques for Link Purpose (Link Only)

+ + +
    + +
  1. + + + +
  2. + +
  3. + + Providing link text that describes the purpose of a link + +
  4. + +
  5. + + Providing link text that describes the purpose of a link for anchor elements + +
  6. + +
  7. + + Providing a text alternative for the area element + +
  8. + + +
  9. + +

    Allowing the user to choose short or long link text using one of the techniques below:

    + + + +
  10. + +
  11. + +

    Providing a supplemental description of the purpose of a link using one of the following + techniques: +

    + + + +
  12. + +
  13. + +

    Semantically indicating links using one of the following techniques:

    + +
      + +
    • + + + +
    • + +
    • + + + +
    • + +
    + + +
  14. + +
+ +
+ +
+

Additional Techniques (Advisory) for Link Purpose (Link Only)

+ + + + +
+ +
+

Failures for Link Purpose (Link Only)

+ + + + +
+ +
+ + + diff --git a/understanding/20/identyfikacja-bledu.html b/understanding/20/identyfikacja-bledu.html new file mode 100644 index 0000000000..f66850f499 --- /dev/null +++ b/understanding/20/identyfikacja-bledu.html @@ -0,0 +1,314 @@ + + + + + Understanding Error Identification + + + +

Understanding Error Identification

+ + +
+

Intent of Error Identification

+ + +

The intent of this Success Criterion is to ensure that users are aware that an error + has occurred and can determine what is wrong. The error message should be as specific + as possible. + In the case of an unsuccessful form submission, re-displaying the form and indicating + the fields in error is insufficient for some users to perceive that an error has occurred. + Screen reader users, for example, will not know there was an error until they encounter + one of the indicators. They may abandon the form altogether before encountering the + error indicator, thinking that the page simply is not functional. Per the definition in WCAG 2.0, an "input error" is information provided by the user + that is not accepted. This includes: +

+ + + +

For example:

+ + + +
+ +

If a user enters a value that is too high or too low, and the coding on the page automatically + changes that value to fall within the allowed range, the user's error would still + need to be described to them as required by the success criterion. Such an error description + telling the person of the changed value would meet both this success criterion (Error + Identification) and + Success Criterion 3.3.3 (Error Suggestion). +

+ +
+ +

The identification and description of an error can be combined with programmatic information + that user agents or assistive technologies can use to identify an error and provide + error information to the user. For example, certain technologies can specify that + the user's input must not fall outside a specific range, or that a form field is required. + Currently, few technologies support this kind of programmatic information, but the + Success Criterion does not require, nor prevent it. + +

+ +

It is perfectly acceptable to indicate the error in other ways such as image, color + etc, in addition to the text description. + +

+ +

See also + 3.3.3: Error Suggestion. +

+ + +
+
+

Benefits of Error Identification

+ + + + +
+ +
+

Examples of Error Identification

+ + + + +
+ +
+

Resources for Error Identification

+ + + +
+ +
+

Techniques for Error Identification

+ + +
+

Sufficient Techniques for Error Identification

+ + +
+ +

Situation A: If a form contains fields for which information from the user is mandatory.

+ +
    + +
  1. + + Providing a text description that identifies the field as mandatory + +
  2. + +
  3. + + + +
  4. + +
  5. + + Providing client-side validation and alert + +
  6. + +
  7. + + + +
  8. + +
+ +
+ +
+ +

Situation B: If information provided by the user is required to be in a specific data + format or of certain values. +

+ +
    + +
  1. + + + +
  2. + +
  3. + + + +
  4. + +
  5. + + + +
  6. + +
  7. + + G84: Providing a text description when the user provides information that is not in + the list of allowed values + + +
  8. + +
  9. + + Providing a text description when user input falls outside the required format or + values + + +
  10. + +
  11. + + Providing client-side validation and alert + +
  12. + +
  13. + + Providing client-side validation and adding error text via the DOM + +
  14. + +
  15. + + + +
  16. + +
+ +
+ +
+ +
+

Additional Techniques (Advisory) for Error Identification

+ + + + +
+ +
+

Failures for Error Identification

+ + +
+ +
+ + + diff --git "a/understanding/20/j\304\231zyk-cz\304\231\305\233ci.html" "b/understanding/20/j\304\231zyk-cz\304\231\305\233ci.html" new file mode 100644 index 0000000000..323c179299 --- /dev/null +++ "b/understanding/20/j\304\231zyk-cz\304\231\305\233ci.html" @@ -0,0 +1,198 @@ + + + + + Understanding Language of Parts + + + +

Understanding Language of Parts

+ +
+

Intent of Language of Parts

+ + +

The intent of this Success Criterion is to ensure that user agents can correctly present + content written in multiple languages. This makes it possible for user agents and + assistive technologies to present content according to the presentation and pronunciation + rules for that language. This applies to graphical browsers as well as screen readers, + braille displays, and other voice browsers. +

+ +

Both assistive technologies and conventional user agents can render text more accurately + if the language of each passage of text is identified. Screen readers can use the + pronunciation rules of the language of the text. Visual browsers can display characters + and scripts in appropriate ways. This is especially important when switching between + languages that read from left to right and languages that read from right to left, + or when text is rendered in a language that uses a different alphabet. Users with + disabilities who know all the languages used in the Web page will be better able to + understand the content when each passage is rendered appropriately. +

+ +

When no other language has been specified for a phrase or passage of text, its human + language is the default human language of the Web page (see Success Criterion 3.1.1). So the human language of all content in single language documents can be programmatically + determined. +

+ +

Individual words or phrases in one language can become part of another language. For + example, "rendezvous" is a French word that has been adopted in English, appears in + English dictionaries, and is properly pronounced by English screen readers. Hence + a passage of English text may contain the word "rendezvous" without specifying that + its human language is French and still satisfy this Success Criterion. Frequently, + when the human language of text appears to be changing for a single word, that word + has become part of the language of the surrounding text. Because this is so common + in some languages, single words should be considered part of the language of the surrounding + text unless it is clear that a change in language was intended. If there is doubt + whether a change in language is intended, consider whether the word would be pronounced + the same (except for accent or intonation) in the language of the immediately surrounding + text. +

+ +

Most professions require frequent use of technical terms which may originate from + a foreign language. Such terms are usually not translated to all languages. The universal + nature of technical terms also facilitate communication between professionals. +

+ +

Some common examples of technical terms include: Homo sapiens, Alpha Centauri, hertz, + and habeas corpus. +

+ +

Identifying changes in language is important for a number of reasons:

+ + + + +
+
+

Benefits of Language of Parts

+ +

This Success Criterion helps:

+ + + +
+ +
+

Examples of Language of Parts

+ +
    +
  1. +

    + A German phrase in an English sentence. +

    +

    In the sentence, "He maintained that the DDR (German Democratic Republic) was just + a 'Treppenwitz der Weltgeschichte'," the German phrase 'Treppenwitz der Weltgeschichte' is marked as German. Depending on the markup language, English may either be marked + as the language for the entire document except where specified, or marked at the paragraph + level. When a screen reader encounters the German phrase, it changes pronunciation + rules from English to German to pronounce the word correctly. +

    +
  2. +
  3. +

    + Alternative language links +

    +

    An HTML Web page includes links to versions of the page in other languages (e.g., + Deutsch, Français, Nederlands, Catalan, etc.). The text of each link is the name of the language, in that language. The language of each link is indicated via a lang attribute. +

    +
  4. +
  5. +

    + "Podcast" used in a French sentence. +

    +

    Because "podcast" is part of the vernacular of the immediately surrounding text in + the following excerpt, "À l'occasion de l'exposition "Energie éternelle. 1500 ans d'art indien", le Palais des Beaux-Arts de Bruxelles a lancé son premier podcast. Vous pouvez télécharger ce podcast au format M4A et MP3", no indication of language change is required. +

    +
  6. +
+
+ +
+

Resources for Language of Parts

+ + + +
+ +
+

Techniques for Language of Parts

+ +
+

Sufficient Techniques for Language of Parts

+ +
    +
  1. + Using the lang attribute to identify changes in the human language. +
  2. +
  3. + Specifying the language for a passage or phrase with the Lang entry in PDF documents. +
  4. +
+ +
+ +
+

Additional Techniques (Advisory) for Language of Parts

+ +
+ +
+

Failures for Language of Parts

+ +
+ +
+ + + diff --git "a/understanding/20/j\304\231zyk-strony.html" "b/understanding/20/j\304\231zyk-strony.html" new file mode 100644 index 0000000000..1316529f94 --- /dev/null +++ "b/understanding/20/j\304\231zyk-strony.html" @@ -0,0 +1,176 @@ + + + + + Understanding Language of Page + + + +

Understanding Language of Page

+ + +
+

Intent of Language of Page

+ + +

+ The intent of this Success Criterion is to ensure that content developers provide + information in the Web page that user agents need to present text and other linguistic + content correctly. Both assistive technologies and conventional user agents can render + text more accurately when the language of the Web page is identified. Screen readers + can load the correct pronunciation rules. Visual browsers can display characters and + scripts correctly. Media players can show captions correctly. As a result, users with + disabilities will be better able to understand the content. + +

+ +

The default human language of the Web page is the default text-processing language + as discussed in + Internationalization Best Practices: Specifying Language in XHTML & HTML Content. When a Web page uses several languages, the default text-processing language is + the language which is used most. (If several languages are used equally, the first + language used should be chosen as the default human language.) + +

+ +
+ +

+ For multilingual sites targeting Conformance Level A, the Working Group strongly encourages + developers to follow Success Criterion 3.1.2 as well even though that is a Level AA + Success Criterion. + + +

+ +
+ + +
+
+

Benefits of Language of Page

+ + +

This Success Criterion helps:

+ + + +
+ +
+

Examples of Language of Page

+ + + + +
+ +
+

Resources for Language of Page

+ + + + +
+ +
+

Techniques for Language of Page

+ + +
+

Sufficient Techniques for Language of Page

+ + +
    + +
  1. + + Using the lang attribute of the html element + +
  2. + +
  3. + + + +
  4. + +
  5. + + + +
  6. + +
+ +
+ +
+

Additional Techniques (Advisory) for Language of Page

+ + + + +
+ +
+

Failures for Language of Page

+ + +
+ +
+ + + diff --git "a/understanding/20/klawiatura-bez-wyj\304\205tk\303\263w.html" "b/understanding/20/klawiatura-bez-wyj\304\205tk\303\263w.html" new file mode 100644 index 0000000000..e48e209dea --- /dev/null +++ "b/understanding/20/klawiatura-bez-wyj\304\205tk\303\263w.html" @@ -0,0 +1,57 @@ + + + + + Understanding Keyboard (No Exception) + + + +

Understanding Keyboard (No Exception)

+ + +
+

Intent of Keyboard (No Exception)

+ + +

The intent of this Success Criterion is to ensure that + all content is operable from the keyboard. This is the same as Success Criterion 2.1.1, + except that no exceptions are allowed. This does not mean that content where the underlying + function requires input that depends on the path of the user's movement and not just + the endpoints (excluded from the requirements of 2.1.1) must be made keyboard accessible. + Rather, it means that content that uses path-dependent input cannot conform to this + Success Criterion and therefore cannot meet Guideline 2.1 at Level AAA. +

+ +
+ +
+

Examples of Keyboard (No Exception)

+ + +
+ +
+

Resources for Keyboard (No Exception)

+ + +
+ +
+

Techniques for Keyboard (No Exception)

+ + +
+

Sufficient Techniques for Keyboard (No Exception)

+ + +

No additional techniques exist for this Success Criterion. Follow + techniques for Success Criterion 2.1.1. If that is not possible because there is a requirement for path-dependent input, + then it is not possible to meet this Level AAA Success Criterion. +

+ +
+ +
+ + + diff --git "a/understanding/20/kolejno\305\233\304\207-fokusu.html" "b/understanding/20/kolejno\305\233\304\207-fokusu.html" new file mode 100644 index 0000000000..103b02ea7f --- /dev/null +++ "b/understanding/20/kolejno\305\233\304\207-fokusu.html" @@ -0,0 +1,292 @@ + + + + + Understanding Focus Order + + + +

Understanding Focus Order

+ + +
+

Intent of Focus Order

+ + +

The intent of this Success Criterion is to ensure that when users navigate sequentially + through content, they encounter information in an order that is consistent with the + meaning of the content and can be operated from the keyboard. This reduces confusion + by letting users form a consistent mental model of the content. There may be different + orders that reflect logical relationships in the content. For example, moving through + components in a table one row at a time or one column at a time both reflect the logical + relationships in the content. Either order may satisfy this Success Criterion. +

+ +

The way that sequential navigation order is determined in Web content is defined by + the technology of the content. For example, simple HTML defines sequential navigation + via the notion of tabbing order. Dynamic HTML may modify the navigation sequence using + scripting along with the addition of a tabindex attribute to allow focus to additional + elements. If no scripting or tabindex attributes are used, the navigation order is + the order that components appear in the content stream. (See HTML 4.01 Specification, + section 17.11, "Giving focus to an element"). +

+ +

An example of keyboard navigation that is not the sequential navigation addressed + by this Success Criterion is using arrow key navigation to traverse a tree component. + The user can use the up and down arrow keys to move from tree node to tree node. Pressing + the right arrow key may expand a node, then using the down arrow key, will move into + the newly expanded nodes. This navigation sequence follows the expected sequence for + a tree control - as additional items get expanded or collapsed, they are added or + removed from the navigation sequence. +

+ +

The focus order may not be identical to the programmatically determined reading order + (see Success Criterion 1.3.2) as long as the user can still understand and operate + the Web page. Since there may be several possible logical reading orders for the content, + the focus order may match any of them. However, when the order of a particular presentation + differs from the programmatically determined reading order, users of one of these + presentations may find it difficult to understand or operate the Web page. Authors + should carefully consider all these users as they design their Web pages. +

+ +

For example, a screen reader user interacts with the programmatically determined reading + order, while a sighted keyboard user interacts with the visual presentation of the + Web page. Care should be taken so that the focus order makes sense to both of these + sets of users and does not appear to either of them to jump around randomly. +

+ +

For clarity:

+ +
    + +
  1. Focusable components need to receive focus in an order that preserves meaning and + operability only when navigation sequences affect meaning and operability. +
  2. + +
  3. In those cases where it is required, there may be more than one order that will preserve + meaning and operability. +
  4. + +
  5. If there is more than one order that preserves meaning and operability, only one of + them needs to be provided. +
  6. + +
+ + +
+
+

Benefits of Focus Order

+ + +

These techniques benefit keyboard users who navigate documents sequentially and expect + the focus order to be consistent with the sequential reading order. +

+ + + +
+ +
+

Examples of Focus Order

+ + +
    + +
  1. On a web page that contains a tree of interactive controls, the user can use the up + and down arrow keys to move from tree node to tree node. Pressing the right arrow + key expands a node, then using the down arrow key moves into the newly expanded nodes. +
  2. + +
  3. A Web page implements modeless dialogs via scripting. When the trigger button is activated, + a dialog opens. The interactive elements in the dialog are inserted in the focus order + immediately after the button. When the dialog is open, the focus order goes from the + button to the elements of the dialog, then to the interactive element following the + button. When the dialog is closed, the focus order goes from the button to the following + element. +
  4. + +
  5. A Web page implements modal dialogs via scripting. When the trigger button is activated, + a dialog opens and focus is set to the first interactive element in the dialog. As + long as the dialog is open, focus is limited to the elements of the dialog. When the + dialog is dismissed, focus returns to the button or the element following the button. +
  6. + +
  7. + +

    An HTML Web page is created with the left hand navigation occurring in the HTML after + the main body content, and styled with CSS to appear on the left hand side of the + page. This is done to allow focus to move to the main body content first without requiring + tabIndex attributes or JavaScript. +

    + +
    + +

    While this example passes the Success Criterion, it is not necessarily true that all + CSS positioning would. More complex positioning examples may or may not preserve meaning + and operability +

    + +
    + +
  8. + +
  9. + +

    The following example + fails to meet the Success Criterion: +

    + +

    A company's Web site includes a form that collects marketing data and allows users + to subscribe to several newsletters published by the company. The section of the form + for collecting marketing data includes fields such as name, street address, city, + state or province, and postal code. Another section of the form includes several checkboxes + so that users can indicate newsletters they want to receive. However, the tab order + for the form skips between fields in different sections of the form, so that focus + moves from the name field to a checkbox, then to the street address, then to another + checkbox. +

    + +
  10. + +
+ +
+ +
+

Resources for Focus Order

+ + +
+ +
+

Techniques for Focus Order

+ + +
+

Sufficient Techniques for Focus Order

+ + +
    + +
  1. + + Placing the interactive elements in an order that follows sequences and relationships + within the content + + +
  2. + +
  3. + +

    Giving focus to elements in an order that follows sequences and relationships within + the content using one of the following techniques: +

    + + + +
  4. + +
  5. + +

    Changing a Web page dynamically using one of the following techniques:

    + + + +
  6. + +
+ +
+ +
+

Additional Techniques (Advisory) for Focus Order

+ +
+ +
+

Failures for Focus Order

+ + + + +
+ +
+ + + diff --git "a/understanding/20/kompatybilno\305\233\304\207.html" "b/understanding/20/kompatybilno\305\233\304\207.html" index 62d5a61c0f..4d6452f3c6 100644 --- "a/understanding/20/kompatybilno\305\233\304\207.html" +++ "b/understanding/20/kompatybilno\305\233\304\207.html" @@ -20,8 +20,7 @@

Cel Kompatybilności

Techniki pomocnicze dla Kompatybilności

- - +
diff --git "a/understanding/20/kontrola-odtwarzania-d\305\272wi\304\231ku.html" "b/understanding/20/kontrola-odtwarzania-d\305\272wi\304\231ku.html" new file mode 100644 index 0000000000..e6df75988f --- /dev/null +++ "b/understanding/20/kontrola-odtwarzania-d\305\272wi\304\231ku.html" @@ -0,0 +1,149 @@ + + + + + Understanding Audio Control + + + +

Understanding Audio Control

+ + +
+

Intent of Audio Control

+ + +

Individuals who use screen reading software can find it hard to hear the speech output + if there is other audio playing at the same time. This difficulty is exacerbated when + the screen reader's speech output is software based (as most are today) and is controlled + via the same volume control as the sound. Therefore, it is important that the user + be able to turn off the background sound. Note: Having control of the volume includes + being able to reduce its volume to zero. +

+ +
+ +

Playing audio automatically when landing on a page may affect a screen reader user's + ability to find the mechanism to stop it because they navigate by listening and automatically + started sounds might interfere with that navigation. Therefore, we discourage the + practice of automatically starting sounds (especially if they last more than 3 seconds), + and encourage that the sound be + started by an action initiated by the user after they reach the page, rather than requiring + that the sound be + stopped by an action of the user after they land on the page. +

+ +
+ +

See also + 1.4.2: Low or No Background Audio. +

+ + +
+
+

Benefits of Audio Control

+ + + + +
+ +
+

Examples of Audio Control

+ + + + +
+ +
+

Resources for Audio Control

+ + +
+ +
+

Techniques for Audio Control

+ + +
+

Sufficient Techniques for Audio Control

+ + +
    + +
  1. + + Playing a sound that turns off automatically within three seconds + +
  2. + +
  3. + + Providing a control near the top of the Web page that turns off sounds that play automatically + +
  4. + +
  5. + + Playing sounds only on user request + +
  6. + +
+ +
+ +
+

Additional Techniques (Advisory) for Audio Control

+ + +
+ +
+

Failures for Audio Control

+ + + + +
+ +
+ + + diff --git "a/understanding/20/mozliwo\305\233\304\207-odczytania.html" b/understanding/20/mozliwosc-odczytania.html similarity index 100% rename from "understanding/20/mozliwo\305\233\304\207-odczytania.html" rename to understanding/20/mozliwosc-odczytania.html diff --git "a/understanding/20/mo\305\274liwo\305\233\304\207-adaptacji.html" "b/understanding/20/mo\305\274liwo\305\233\304\207-adaptacji.html" new file mode 100644 index 0000000000..95cda1c505 --- /dev/null +++ "b/understanding/20/mo\305\274liwo\305\233\304\207-adaptacji.html" @@ -0,0 +1,59 @@ + + + + + Objaśnienie wytycznej Możliwość adaptacji + + + +

Objaśnienie wytycznej Możliwość adaptacji

+ + +
+

Intent of Adaptable

+ + +

The purpose of this guideline is to ensure that all information is available in a + form that can be perceived by all users, for example, spoken aloud, or presented in + a simpler visual layout. If all of the information is available in a form that can + be determined by software, then it can be presented to users in different ways (visually, + audibly, tactilely etc.). If information is embedded in a particular presentation + in such a way that the structure and information cannot be programmatically determined + by the assistive technology, then it cannot be rendered in other formats as needed + by the user. +

+ +

The Success Criteria under this guideline all seek to ensure that different types + of information that are often encoded in presentation are also available so that they + can be presented in other modalities. +

+ + + +
+ + + + + + + \ No newline at end of file diff --git "a/understanding/20/mo\305\274liwo\305\233\304\207-pomini\304\231cia-blok\303\263w.html" "b/understanding/20/mo\305\274liwo\305\233\304\207-pomini\304\231cia-blok\303\263w.html" new file mode 100644 index 0000000000..961e0c218b --- /dev/null +++ "b/understanding/20/mo\305\274liwo\305\233\304\207-pomini\304\231cia-blok\303\263w.html" @@ -0,0 +1,260 @@ + + + + + Understanding Bypass Blocks + + + +

Understanding Bypass Blocks

+ + +
+

Intent of Bypass Blocks

+ + +

The intent of this Success Criterion is to allow people who navigate sequentially + through content more direct access to the primary content of the Web page. Web pages + and applications often have content that appears on other pages or screens. Examples + of repeated blocks of content include but are not limited to navigation links, heading + graphics, and advertising frames. Small repeated sections such as individual words, + phrases or single links are not considered blocks for the purposes of this provision. + + +

+ +

This is in contrast to a sighted user's ability to ignore the repeated material either + by focusing on the center of the screen (where main content usually appears) or a + mouse user's ability to select a link with a single mouse click rather than encountering + every link or form control that comes before the item they want. +

+ +

It is not the intent of this Success Criterion to require authors to provide methods + that are redundant to functionality provided by the user agent. Most web browsers + provide keyboard shortcuts to move the user focus to the top of the page, so if a + set of navigation links is provided at the bottom of a web page providing a "skip" + link may be unnecessary. +

+ +
+ +

Although this Success Criterion deals with blocks of content that are repeated on + multiple pages, we also strongly promote structural markup on individual pages as + per Success Criteria 1.3.1. + +

+ +
+ +

Although the success criterion does not specifically use the term “within a set of + web pages”, the concept of the pages belonging to a set is implied. An author would + not be expected to avoid any possible duplication of content in any two pages that + are not in some way related to each other; that are not "Web pages that share a common + purpose and that are created by the same author, group or organization” (the definition + of set of web pages). +

+ +
+ +

Even for web pages that are not in a set, if a web page has blocks of text that are + repeated within the page it may be helpful (but not required) to provide a means to + skip over them. +

+ +
+ + +
+
+

Benefits of Bypass Blocks

+ +

When this Success Criterion is not satisfied, it may be difficult for people with + some disabilities to reach the main content of a Web page quickly and easily:

+ + +
+ +
+

Examples of Bypass Blocks

+ + + + +
+ +
+

Resources for Bypass Blocks

+ + + + +
+ +
+

Techniques for Bypass Blocks

+ + +
+

Sufficient Techniques for Bypass Blocks

+ + +
    + +
  1. + +

    Creating links to skip blocks of repeated material using one of the following techniques:

    + + + +
  2. + +
  3. + +

    Grouping blocks of repeated material in a way that can be skipped, using one of the + following techniques: +

    + + + +
  4. + +
+ +
+ +
+

Additional Techniques (Advisory) for Bypass Blocks

+ + + + +
+ +
+

Failures for Bypass Blocks

+ + +
+ +
+ + + diff --git "a/understanding/20/nag\305\202\303\263wki-i-etykiety.html" "b/understanding/20/nag\305\202\303\263wki-i-etykiety.html" new file mode 100644 index 0000000000..6b1578fd7c --- /dev/null +++ "b/understanding/20/nag\305\202\303\263wki-i-etykiety.html" @@ -0,0 +1,218 @@ + + + + + Understanding Headings and Labels + + + +

Understanding Headings and Labels

+ + +
+

Intent of Headings and Labels

+ +

The intent of this Success Criterion is to help users understand what information + is contained in Web pages and how that information is organized. When headings are + clear and descriptive, users can find the information they seek more easily, and they + can understand the relationships between different parts of the content more easily. + Descriptive labels help users identify specific components within the content. +

+ +

Labels and headings do not need to be lengthy. A word, or even a single character, + may suffice if it provides an appropriate cue to finding and navigating content. +

+ +

This Success Criterion does not require headings or labels. This Success Criterion + requires that if headings or labels are provided, they be descriptive. This Success Criterion also + does not require that content acting as a heading or label be correctly marked up or + identified - this aspect is covered separately by + 1.3.1: Info and Relationships. It is possible for content + to pass this Success Criterion (providing descriptive content that acts as headings or labels) while failing + Success Criterion 1.3.1 (if the headings or labels aren't correctly marked up/identified). Conversely, + it is also possible for content to pass Success Criterion 1.3.1 (with headings or labels correctly + marked up or identified), while failing this Success Criterion (if those headings or labels are not + sufficiently clear or descriptive). +

+

Further, in the case of labels, this Success Criterion does not take into consideration whether or not + alternative methods of providing an accessible name for form controls and inputs has been + used - this aspect is covered separately by 4.1.2: Name, Role and Value. It is possible + for controls and inputs to have an appropriate accessible name (e.g. using aria-label="...") + and therefore pass Success Criterion 4.1.2, but to still fail this Success Criterion (if the label is not + sufficiently clear or descriptive). +

+

This success criterion does not require the use of labels; however, it does require that if labels are present, they must be sufficiently clear or descriptive. Please see 3.3.2: Labels or Instructions for more information on the use of labels. +

+ +
+
+

Benefits of Headings and Labels

+ + + +
+ +
+

Examples of Headings and Labels

+ + + + +
+ +
+

Resources for Headings and Labels

+ + + + +
+ +
+

Techniques for Headings and Labels

+ + +
+

Sufficient Techniques for Headings and Labels

+ + +
    + +
  1. + + Providing descriptive headings + +
  2. + +
  3. + + Providing descriptive labels + +
  4. + +
+ +
+ +

+ Headings and labels must be programmatically determined, per + Success Criterion 1.3.1 + + . +

+ +
+ +
+ +
+

Additional Techniques (Advisory) for Headings and Labels

+ +
+ +
+

Failures for Headings and Labels

+ + +
+ +
+ + + diff --git "a/understanding/20/nag\305\202\303\263wki-sekcji.html" "b/understanding/20/nag\305\202\303\263wki-sekcji.html" new file mode 100644 index 0000000000..ba92e59ae0 --- /dev/null +++ "b/understanding/20/nag\305\202\303\263wki-sekcji.html" @@ -0,0 +1,144 @@ + + + + + Understanding Section Headings + + + +

Understanding Section Headings

+ + +
+

Intent of Section Headings

+ + +

The intent of this Success Criterion is to provide headings for sections of a Web + page, when the page is organized into sections. For instance, long documents are often + divided into a variety of chapters, chapters have subtopics and subtopics are divided + into various sections, sections into paragraphs, etc. When such sections exist, they + need to have headings that introduce them. This clearly indicates the organization + of the content, facilitates navigation within the content, and provides mental "handles" + that aid in comprehension of the content. Other page elements may complement headings + to improve presentation (e.g., horizontal rules and boxes), but visual presentation + is not sufficient to identify document sections. +

+ +

This provision is included at Level AAA because it cannot be applied to all types + of content and it may not always be possible to insert headings. For example, when + posting a pre-existing document to the Web, headings that an author did not include + in the original document cannot be inserted. Or, a long letter would often cover different + topics, but putting headings into a letter would be very strange. However, if a document + can be broken up into sections with headings, it facilitates both understanding and + navigation. +

+ + +
+
+

Benefits of Section Headings

+ + + + +
+ +
+

Examples of Section Headings

+ + + + +
+ +
+

Resources for Section Headings

+ + + + +
+ +
+

Techniques for Section Headings

+ + +
+

Sufficient Techniques for Section Headings

+ + +
    + +
  1. + + Organizing a page using headings + +
  2. + +
  3. + + Providing heading elements at the beginning of each section of content + +
  4. + +
+ +
+ +
+

Additional Techniques (Advisory) for Section Headings

+ +
+ +
+

Failures for Section Headings

+ + +
+ +
+ + + diff --git "a/understanding/20/nazwa-rola-warto\305\233\304\207.html" "b/understanding/20/nazwa-rola-warto\305\233\304\207.html" new file mode 100644 index 0000000000..1e5867062b --- /dev/null +++ "b/understanding/20/nazwa-rola-warto\305\233\304\207.html" @@ -0,0 +1,385 @@ + + + + + Understanding Name, Role, Value + + + +

Understanding Name, Role, Value

+ + +
+

Intent of Name, Role, Value

+ + +

The intent of this Success Criterion is to ensure that Assistive Technologies (AT) + can gather information about, activate (or set) and keep up to date on the status of + user interface controls in the content. +

+ +

When standard controls from accessible technologies are used, this process is straightforward. + If the user interface elements are used according to specification the conditions + of this provision will be met. (See examples of Success Criterion 4.1.2 below) +

+ +

If custom controls are created, however, or interface elements are programmed (in + code or script) to have a different role and/or function than usual, then additional + measures need to be taken to ensure that the controls provide important information + to assistive technologies and allow themselves to be controlled by assistive technologies. +

+ +

A particularly important state of a user interface control is whether or not it has + focus. The focus state of a control can be programmatically determined, and notifications + about change of focus are sent to user agents and assistive technology. Other examples + of user interface control state are whether or not a checkbox or radio button has + been selected, or whether or not a collapsible tree or list node is expanded or collapsed. +

+ +
+ +

Success Criterion 4.1.2 requires a programmatically determinable name for all user + interface components. Names may be visible or invisible. Occasionally, the name must + be visible, in which case it is identified as a label. Refer to the definition of + name and label in the glossary for more information. +

+ +
+ + +
+
+

Benefits of Name, Role, Value

+ + + + +
+ +
+

Examples of Name, Role, Value

+ + + + +
+ +
+

Resources for Name, Role, Value

+ + + + +
+ +
+

Techniques for Name, Role, Value

+ + +
+

Sufficient Techniques for Name, Role, Value

+ + +
+ +

Situation A: If using a standard user interface component in a markup language (e.g., + HTML): +

+ +
    + +
  1. + + + +
  2. + +
  3. + + + +
  4. + +
  5. + +

    + + Using markup features to expose the name and role, allow user-settable properties + to be directly set, and provide notification of changes + using technology-specific techniques below: +

    + + + +
  6. + +
+ +
+ +
+ +

Situation B: If using script or code to re-purpose a standard user interface component + in a markup language: +

+ +
    + +
  1. + +

    Exposing the names and roles, allowing user-settable properties to be directly set, + and providing notification of changes using one of the following techniques: +

    + +
      + +
    • + + + +
    • + +
    + +
  2. + +
+ +
+ +
+ +

Situation C: If using a standard user interface component in a programming technology:

+ +
    + +
  1. + +

    + + Using the accessibility API features of a technology to expose the names and roles, + allow user-settable properties to be directly set, and provide notification of changes + using technology-specific techniques below: + +

    + +
      + +
    • + + + +
    • + +
    • + + + +
    • + +
    + +
  2. + +
+ +
+ +
+ +

Situation D: If creating your own user interface component in a programming language:

+ +
    + +
  1. + +

    + + Creating components using a technology that supports the accessibility API features + of the platforms on which the user agents will be run to expose the names and roles, + allow user-settable properties to be directly set, and provide notification of changes + using technology-specific techniques below: + +

    + +
      + +
    • + + + +
    • + +
    • + + + +
    • + +
    • + + + +
    • + +
    + +
  2. + +
+ +
+ +
+ +
+

Additional Techniques (Advisory) for Name, Role, Value

+ +
+ +
+

Failures for Name, Role, Value

+ + + + +
+ +
+ + + diff --git "a/understanding/20/nietypowe-s\305\202owa.html" "b/understanding/20/nietypowe-s\305\202owa.html" new file mode 100644 index 0000000000..2d880d9fe2 --- /dev/null +++ "b/understanding/20/nietypowe-s\305\202owa.html" @@ -0,0 +1,352 @@ + + + + + Understanding Unusual Words + + + +

Understanding Unusual Words

+ + +
+

Intent of Unusual Words

+ + +

Certain disabilities make it difficult to understand nonliteral word usage and specialized + words or usage. Certain disabilities make it difficult to understand figurative language + or specialized usage. Providing such mechanisms is vital for these audiences. Specialized + information intended for non-specialist readers is encouraged to satisfy this Success + Criterion, even when claiming only Single-A or Double-A conformance. + + +

+ + +
+
+

Benefits of Unusual Words

+ + +

This Success Criterion may help people with cognitive, language and learning disabilities + who: +

+ + + +

It would also help people with visual disabilities who:

+ + + +
+ +
+

Examples of Unusual Words

+ + + + +
+ +
+

Resources for Unusual Words

+ + +
+ +

The inclusion of a product or vendor name in the list below does not constitute an + endorsement by the Web Content Accessibility Guidelines Working Group or the Web Accessibility + Initiative of the World Wide Web Consortium. This list is provided simply for convenience + and to give users an idea of what resources may be available +

+ +
+ + + +
+ +
+

Techniques for Unusual Words

+ + +
+

Sufficient Techniques for Unusual Words

+ + +
+ +

Situation A: If the word or phrase has a unique meaning within the Web page:

+ +
    + +
  1. + +

    + + Providing the definition of a word or phrase used in an unusual or restricted way for the first occurrence of the word or phrase in a Web page using one of the following + techniques: + +

    + + + +
  2. + +
  3. + +

    + + Providing the definition of a word or phrase used in an unusual or restricted way for each occurrence of the word or phrase in a Web page using one of the following + techniques: + +

    + + + +
  4. + +
+ +
+ +
+ +

Situation B: If the word or phrase means different things within the same Web page:

+ +
    + +
  1. + +

    + + Providing the definition of a word or phrase used in an unusual or restricted way for each occurrence of the word or phrase in a Web page using one of the following + techniques: + +

    + + + +
  2. + +
+ +
+ +
+ +
+

Additional Techniques (Advisory) for Unusual Words

+ + +
+ +
+

Failures for Unusual Words

+ + +
+ +
+ + + diff --git "a/understanding/20/niska-g\305\202o\305\233nosc-lub-bez-dzwiekow-w-tle.html" "b/understanding/20/niska-g\305\202osnosc-lub-bez-dzwiekow-w-tle.html" similarity index 100% rename from "understanding/20/niska-g\305\202o\305\233nosc-lub-bez-dzwiekow-w-tle.html" rename to "understanding/20/niska-g\305\202osnosc-lub-bez-dzwiekow-w-tle.html" diff --git "a/understanding/20/niska-g\305\202o\305\233no\305\233\304\207-lub-bez-d\305\272wi\304\231k\303\263w-w-tle.html" "b/understanding/20/niska-g\305\202o\305\233no\305\233\304\207-lub-bez-d\305\272wi\304\231k\303\263w-w-tle.html" new file mode 100644 index 0000000000..5f54e60ae0 --- /dev/null +++ "b/understanding/20/niska-g\305\202o\305\233no\305\233\304\207-lub-bez-d\305\272wi\304\231k\303\263w-w-tle.html" @@ -0,0 +1,103 @@ + + + + + Understanding Low or No Background Audio + + + +

Understanding Low or No Background Audio

+ + +
+

Intent of Low or No Background Audio

+ + +

The intent of this Success Criterion is to ensure that any non-speech sounds are low + enough that a user who is hard of hearing can separate the speech from background + sounds or other noise foreground speech content. + + +

+ +

The value of 20 dB was chosen based on Large area assistive listening systems (ALS): + Review and recommendations [[LAALS]] and In-the-ear measurements of interference in hearing aids from digital wireless + telephones [[HEARING-AID-INT]] + +

+ + +
+
+

Benefits of Low or No Background Audio

+ + + + +
+ +
+

Examples of Low or No Background Audio

+ + +
+ +
+

Resources for Low or No Background Audio

+ + + + +
+ +
+

Techniques for Low or No Background Audio

+ + +
+

Sufficient Techniques for Low or No Background Audio

+ + +
    + +
  1. + + Mixing audio files so that non-speech sounds are at least 20 decibels lower than the + speech audio content + + +
  2. + +
+ +
+ +
+

Additional Techniques (Advisory) for Low or No Background Audio

+ +
+ +
+

Failures for Low or No Background Audio

+ + +
+ +
+ + + diff --git a/understanding/20/obrazy-tekstu-bez-wyjatkow.html b/understanding/20/obrazy-tekstu-bez-wyjatkow.html new file mode 100644 index 0000000000..815f5a5a37 --- /dev/null +++ b/understanding/20/obrazy-tekstu-bez-wyjatkow.html @@ -0,0 +1,304 @@ + + + + + Understanding Images of Text (No Exception) + + + +

Understanding Images of Text (No Exception)

+ + +
+

Intent of Images of Text (No Exception)

+ + +

The intent of this Success Criterion is to enable people who require a particular + visual presentation of text to be able to adjust the text presentation as required. + This includes people who require the text in a particular font size, foreground and + background color, font family, line spacing or alignment. +

+ +

This means implementing the text in a manner that allows its presentation to be changed + or providing a mechanism by which users can select an alternate presentation. Using + images of text is an example of an implementation that does not allow users to alter + the presentation of the text within it. +

+ +

In some situations, a particular visual presentation of the text is essential to the + information being conveyed. This means that information would be lost without that + particular visual presentation. In this case implementing the text in a manner that + allows its presentation to be changed is not required. This includes text that demonstrates + a particular visual aspect of the text, such as a particular font family, or text + that conveys an identity, such as text within a company logo. +

+ +

Text that is decorative does not require implementing the text in a manner that allows + its presentation to be changed. +

+ +

The definition of image of text contains the note: Note: This does not include text that is part of a picture that contains significant + other visual content. Examples of such pictures include graphs, screenshots, and diagrams which visually + convey important information through more than just text. +

+ + +
+
+

Benefits of Images of Text (No Exception)

+ + + + +
+ +
+

Examples of Images of Text (No Exception)

+ + + + +
+ +
+

Resources for Images of Text (No Exception)

+ + + + +
+ +
+

Techniques for Images of Text (No Exception)

+ + +
+

Sufficient Techniques for Images of Text (No Exception)

+ + +
    + +
  1. + + Using CSS to control visual presentation of text + +
  2. + +
  3. + + Using CSS to replace text with images of text and providing user interface controls + to switch + + +
  4. + +
  5. + + Separating information and structure from presentation so that Web pages can be presented + different ways without losing information + + +
  6. + +
  7. + + + +
  8. + +
+ +
+ +
+

Additional Techniques (Advisory) for Images of Text (No Exception)

+ + +

CSS Techniques

+ + + + +
+ +
+

Failures for Images of Text (No Exception)

+ + +
+ +
+ + + diff --git "a/understanding/20/ponowne-potwierdzenie-autentyczno\305\233ci.html" "b/understanding/20/ponowne-potwierdzenie-autentyczno\305\233ci.html" new file mode 100644 index 0000000000..d9dd8e0814 --- /dev/null +++ "b/understanding/20/ponowne-potwierdzenie-autentyczno\305\233ci.html" @@ -0,0 +1,206 @@ + + + + + Understanding Re-authenticating + + + +

Understanding Re-authenticating

+ + +
+

Intent of Re-authenticating

+ + +

The intent of this Success Criterion is to allow all users to complete authenticated + transactions that have inactivity time limits or other circumstances that would cause + a user to be logged out while in the midst of completing the transaction. +

+ +

For security reasons, many sites implement an authentication time limit after a certain + period of inactivity. These time limits may cause problems for persons with disabilities + because it may take longer for them to complete the activity. +

+ +

Other sites will log a person out of a session if a person logs in on the Web site + from another computer or if other activities arise that make the site suspicious of + whether the person is still the same legitimate person who logged in originally. When + users are logged out while still in the midst of a transaction - it is important that + they be given the ability to re-authenticate and continue with the transaction without + the loss of any data already entered. + +

+ + +
+
+

Benefits of Re-authenticating

+ + + + +
+ +
+

Examples of Re-authenticating

+ + + + +
+ +
+

Resources for Re-authenticating

+ + +
+ +
+

Techniques for Re-authenticating

+ + +
+

Sufficient Techniques for Re-authenticating

+ + +
    + +
  1. + +

    + Providing options to continue without loss of data using one of the following techniques: +

    + + + +
  2. + +
+ +
+ +

Refer to + Techniques for Addressing Success Criterion 2.2.1 for techniques related to providing notifications about time limits. + +

+ +
+ +
+ +
+

Additional Techniques (Advisory) for Re-authenticating

+ + +
+ +
+

Failures for Re-authenticating

+ + + + +
+ +
+ + + diff --git a/understanding/20/poprawnosc-kodu-przestarzale-i-usuniete.html b/understanding/20/poprawnosc-kodu-przestarzale-i-usuniete.html new file mode 100644 index 0000000000..64d32e53df --- /dev/null +++ b/understanding/20/poprawnosc-kodu-przestarzale-i-usuniete.html @@ -0,0 +1,199 @@ + + + + + Understanding Parsing + + + +

Understanding Parsing

+ + +
+

Intent of Parsing

+ +
+

This criterion has been removed from WCAG 2.2.

+ +

The intent of this Success Criterion was to ensure that user-agents, including assistive technologies, can accurately interpret and parse content. Since WCAG 2.0 was published, the specifications (such as HTML) and browsers have improved their handling of parsing errors. It is also the case that assistive technology used to do their own parsing of markup, but now rely on the browser. For that reason this success criterion has been removed. Many issues that would have failed this criterion will fail Info and Relationships or Name, Role, Value. Other issues are excepted by the "except where the specification allow these features" part of the criterion.

+ +

The following content is left for historical purposes to show the original intent.

+ +
+ +
+

Success Criterion 4.1.1 Parsing (Level A): In content implemented using markup languages, elements have complete start and end + tags, elements are nested according to their specifications, elements do not contain + duplicate attributes, and any IDs are unique, except where the specifications allow + these features. +

+

Start and end tags that are missing a critical character in their formation, such + as a closing angle bracket or a mismatched attribute value quotation mark are not + complete. +

+
+
+ +

+ The intent of this Success Criterion is to ensure that user agents, including assistive technologies, can accurately interpret and parse content. If the content cannot be parsed into a data structure, then different user agents may present it differently or be completely unable to parse it. Some user agents use "repair techniques" to render poorly coded content. +

+ +

Since repair techniques vary among user agents, authors cannot assume that content + will be accurately parsed into a data structure or that it will be rendered correctly + by specialized user agents, including assistive technologies, unless the content is + created according to the rules defined in the formal grammar for that technology. + In markup languages, errors in element and attribute syntax and + failure to provide properly nested start/end tags lead to errors that + prevent user agents from parsing the content reliably. + Therefore, the Success Criterion requires that the content can be parsed using only + the rules of the formal grammar. + +

+ +
+ +

The concept of "well formed" is close to what is required here. However, exact parsing + requirements vary amongst markup languages, and most non XML-based languages do not + explicitly define requirements for well formedness. Therefore, it was necessary to + be more explicit in the Success Criterion in order to be generally applicable to markup + languages. Because the term "well formed" is only defined in XML, and (because end + tags are sometimes optional) valid HTML does not require well formed code, the term + is not used in this Success Criterion. +

+ +

With the exception of one Success Criterion ( + 1.4.4: Resize Text, which specifically mentions that the effect specified by the Success Criterion must + be achieved without relying on an assistive technology) authors can meet the Success + Criteria with content that assumes use of an assistive technology (or access features + in use agents) by the user, where such assistive technologies (or access features + in user agents) exist and are available to the user. +

+ +
+ + +
+
+

Benefits of Parsing

+ + + + +
+ +
+

Examples of Parsing

+ + +
+ +
+

Resources for Parsing

+ + +
+ +
+

Techniques for Parsing

+ + +
+

Sufficient Techniques for Parsing

+ + +
    + +
  1. + + Validating Web pages + +
  2. + +
  3. + + Fully conforming to specifications + +
  4. + +
  5. + + Using (X)HTML according to spec + +
  6. + +
  7. + +

    Ensuring that Web pages can be parsed by using one of the following techniques:

    + + + +
  8. + +
+ +
+ +
+

Additional Techniques (Advisory) for Parsing

+ + +
+ +
+

Failures for Parsing

+ + + + +
+ +
+ + + diff --git "a/understanding/20/poprawno\305\233\304\207-kodu-przestarza\305\202e-i-usuni\304\231te.html" "b/understanding/20/poprawno\305\233\304\207-kodu-przestarza\305\202e-i-usuni\304\231te.html" new file mode 100644 index 0000000000..64d32e53df --- /dev/null +++ "b/understanding/20/poprawno\305\233\304\207-kodu-przestarza\305\202e-i-usuni\304\231te.html" @@ -0,0 +1,199 @@ + + + + + Understanding Parsing + + + +

Understanding Parsing

+ + +
+

Intent of Parsing

+ +
+

This criterion has been removed from WCAG 2.2.

+ +

The intent of this Success Criterion was to ensure that user-agents, including assistive technologies, can accurately interpret and parse content. Since WCAG 2.0 was published, the specifications (such as HTML) and browsers have improved their handling of parsing errors. It is also the case that assistive technology used to do their own parsing of markup, but now rely on the browser. For that reason this success criterion has been removed. Many issues that would have failed this criterion will fail Info and Relationships or Name, Role, Value. Other issues are excepted by the "except where the specification allow these features" part of the criterion.

+ +

The following content is left for historical purposes to show the original intent.

+ +
+ +
+

Success Criterion 4.1.1 Parsing (Level A): In content implemented using markup languages, elements have complete start and end + tags, elements are nested according to their specifications, elements do not contain + duplicate attributes, and any IDs are unique, except where the specifications allow + these features. +

+

Start and end tags that are missing a critical character in their formation, such + as a closing angle bracket or a mismatched attribute value quotation mark are not + complete. +

+
+
+ +

+ The intent of this Success Criterion is to ensure that user agents, including assistive technologies, can accurately interpret and parse content. If the content cannot be parsed into a data structure, then different user agents may present it differently or be completely unable to parse it. Some user agents use "repair techniques" to render poorly coded content. +

+ +

Since repair techniques vary among user agents, authors cannot assume that content + will be accurately parsed into a data structure or that it will be rendered correctly + by specialized user agents, including assistive technologies, unless the content is + created according to the rules defined in the formal grammar for that technology. + In markup languages, errors in element and attribute syntax and + failure to provide properly nested start/end tags lead to errors that + prevent user agents from parsing the content reliably. + Therefore, the Success Criterion requires that the content can be parsed using only + the rules of the formal grammar. + +

+ +
+ +

The concept of "well formed" is close to what is required here. However, exact parsing + requirements vary amongst markup languages, and most non XML-based languages do not + explicitly define requirements for well formedness. Therefore, it was necessary to + be more explicit in the Success Criterion in order to be generally applicable to markup + languages. Because the term "well formed" is only defined in XML, and (because end + tags are sometimes optional) valid HTML does not require well formed code, the term + is not used in this Success Criterion. +

+ +

With the exception of one Success Criterion ( + 1.4.4: Resize Text, which specifically mentions that the effect specified by the Success Criterion must + be achieved without relying on an assistive technology) authors can meet the Success + Criteria with content that assumes use of an assistive technology (or access features + in use agents) by the user, where such assistive technologies (or access features + in user agents) exist and are available to the user. +

+ +
+ + +
+
+

Benefits of Parsing

+ + + + +
+ +
+

Examples of Parsing

+ + +
+ +
+

Resources for Parsing

+ + +
+ +
+

Techniques for Parsing

+ + +
+

Sufficient Techniques for Parsing

+ + +
    + +
  1. + + Validating Web pages + +
  2. + +
  3. + + Fully conforming to specifications + +
  4. + +
  5. + + Using (X)HTML according to spec + +
  6. + +
  7. + +

    Ensuring that Web pages can be parsed by using one of the following techniques:

    + + + +
  8. + +
+ +
+ +
+

Additional Techniques (Advisory) for Parsing

+ + +
+ +
+

Failures for Parsing

+ + + + +
+ +
+ + + diff --git "a/understanding/20/poziom-umiej\304\231tno\305\233ci-czytania.html" "b/understanding/20/poziom-umiej\304\231tno\305\233ci-czytania.html" new file mode 100644 index 0000000000..f2b301cfd5 --- /dev/null +++ "b/understanding/20/poziom-umiej\304\231tno\305\233ci-czytania.html" @@ -0,0 +1,427 @@ + + + + + Understanding Reading Level + + + +

Understanding Reading Level

+ + +
+

Intent of Reading Level

+ + +

+ Content should be written as clearly and simply as possible. The intent of this Success + Criterion is: +

+ + + +

This Success Criterion helps people with reading disabilities while also allowing + authors to publish difficult or complex Web content. Text difficulty is described + in terms of the level of education required to read the text. Education levels are + defined according to the International Standard Classification of Education [[UNESCO]], which was created to allow international comparison among systems of education. + +

+ +

Difficult or complex text may be appropriate for most members of the intended audience + (that is, most of the people for whom the content has been created). But there are + people with disabilities, including reading disabilities, even among highly educated + users with specialized knowledge of the subject matter. It may be possible to accommodate + these users by making the text more readable. If the text cannot be made more readable, + then supplemental content is needed. Supplemental content is required when text demands + reading ability more advanced than the lower secondary education level—that is, more + than nine years of school. Such text presents severe obstacles to people with reading + disabilities and is considered difficult even for people without disabilities who + have completed upper secondary education. +

+ +

Reading disabilities such as dyslexia make it difficult to recognize written or printed + words and associate them with the correct sounds. This is called "decoding" the text. + Decoding must be automatic in order for people to read fluently. The act of decoding + text word by word consumes much of the mental energy that most people are able to + use for understanding what they read. + Text that uses short, common words and short sentences is easier to decode and usually + requires less advanced reading ability than text that uses long sentences and long + or unfamiliar words. +

+ +

The education level required to read text content (also called "readability") is measured + by analyzing selected passages of text from the Web page. If the Web page includes + text written for different purposes or different styles are used, the selected passages + include samples of the types of content in the Web page and the different styles in + which the content is written. (In many cases, the Web page contains only one kind + of text content—e.g., technical documentation, a legal notice, marketing material, + etc.—and all the content uses the same style.) +

+ +

Educators can also measure the education level required to read text content. For + example, qualified teachers can evaluate text according to local education standards + to determine if it requires reading ability beyond what is expected for students in + the last year of lower secondary education. +

+ +

Because people's names, the names of cities or other proper names cannot be changed + to shorter names with fewer syllables, and because doing so or just referring to everyone + by pronouns can make sentences harder to understand, the success criterion specifies + that proper names can be ignored or removed from the text before assessing whether + it meets the reading ability requirement. Titles refer to the name of documents, books, + movies, etc. Titles are removed or ignored for the analysis because changing the words + in titles might make the titles easier to read but would make it impossible to understand + the item to which the title refers. This would make it harder to read and understand + the content. (e.g., a book, academic paper, article, etc.). Therefore, titles are + also exempted specifically. +

+ +

When a Web page contains multiple languages, a readability result should be calculated + for each language that constitutes at least 5% of the content and that is used in + full sentences or paragraphs (not just individual words or phrases). The overall readability + of the page should be judged on the language that yields the worst readability results. + +

+ +

The readability of content may also be determined by applying a readability formula + to the selected passage. Many (though not all) readability formulas base their calculations + on passages of 100 words. Such formulas have been developed for many languages. The + number of words in the passage is counted and the length of the words is determined + by counting either the number of syllables or the number of characters. Most readability + formulas also count the number and length of sentences. The average length of words + and sentences in the content is then used to calculate a readability score. (Some + languages, such as Japanese, may include multiple scripts within the same passage. + Readability formulas for these languages may use the number and length of such "runs" + in their calculations.) The result may be presented as a number (for example, on + a scale from 0-100) or as a grade level. These results can then be interpreted using + the education levels described in the International Standard Classification of Education. + Readability formulas are available for at least some languages when running the spell + checkers in popular software if you specify in the options of this engine that you + want to have the statistics when it has finished checking your documents. + + +

+ + Levels of education + + + Primary education + Lower secondary education + Upper secondary education + Advanced education + + + First 6 years of school + 7-9 years of school + 10-12 years of school + More than 12 years of school + + + + +

Adapted from International Standard Classification of Education + [[UNESCO]] + +

+ +
+ +

According to the Open Society Mental Health Initiative, the concept of Easy to Read + cannot be universal, and it will not be possible to write a text that will suit the + abilities of all people with literacy and comprehension problems. Using the clearest + and simplest language appropriate is highly desirable, but the WCAG Working Group + could not find a way to test whether this had been achieved. The use of reading level + is a way to introduce testability into a Success Criterion that encourages clear writing. + Supplementary content can be a powerful technique for people with some classes of + cognitive disability. + +

+ +
+ + +
+
+

Benefits of Reading Level

+ + +

This Success Criterion may help people who:

+ + + +
+ +
+

Examples of Reading Level

+ + +
    + +
  1. + +

    + + A scientific journal including readable summaries of complex research articles + +

    + +

    A scientific journal includes articles written in highly technical language aimed + at specialists in the field. The journal's Table of Contents page includes a plain-language + summary of each article. The summaries are intended for a general audience with eight + years of school. The metadata for the journal uses the Dublin Core specification to + identify the education level of the articles' intended audience as "advanced," and + the education level of the intended audience for the summaries as "lower secondary + education." +

    + +
  2. + +
  3. + +

    + + Medical information for members of the public. + +

    + +

    A medical school operates a Web site that explains recent medical and scientific discoveries. + The articles on the site are written for people without medical training. Each article + uses the Dublin Core metadata specification to identify the education level of the + intended audience as "lower secondary education" and includes the Flesch Reading Ease + score for the article. A link on each page displays the education level and other + metadata. No supplemental content is required because people who read at the lower + secondary education level can read the articles. +

    + +
  4. + +
  5. + +

    + + An e-learning application. + +

    + +

    An on-line course about Spanish cultural history includes a unit on Moorish architecture. + The unit includes text written for students with different reading abilities. Photographs + and drawings of buildings illustrate architectural concepts and styles. Graphic organizers + are used to illustrate complex relationships, and an audio version using synthetic + speech is available. The metadata for each version describes the academic level of + the content and includes a readability score based on formulas developed for Spanish-language + text. The learning application uses this metadata and metadata about the students + to provide versions of instructional content that match the needs of individual students. +

    + +
  6. + +
  7. + +

    + + Science information that requires a reading ability at the lower secondary education + level. + + +

    + +

    The text below (116 words total) requires a reading ability of grade 4.2 in the United + States according to the Flesch-Kincaid formula. In the US, grade 4.2 is at the primary + education level. +

    + +

    Science is about testing — and about looking closely. Some scientists use microscopes + to take a close look. We're going to use a simple piece of paper. +

    + +

    Here's what you do: Print this page and cut out the square to make a "window" one + inch square. (It's easiest to fold the page in half before you cut.) +

    + +

    Choose something interesting: a tree trunk, a leaf, flower, the soil surface, or a + slice of soil from a shovel. +

    + +

    Put your window over the thing and look at it closely. Take your time — this is not + a race. +

    + +

    To help you see more details, draw a picture of what's inside your square.

    + +

    Now let's think about what you've found.

    + +

    + (Source: Howard Hughes Medical Institute "CoolScience for Kids" Project) + +

    + +
  8. + +
+ +
+ +
+

Resources for Reading Level

+ + + + +
+ +
+

Techniques for Reading Level

+ + +
+

Sufficient Techniques for Reading Level

+ + +
    + +
  1. + + Providing a text summary that requires reading ability less advanced than the upper + secondary education level + + +
  2. + +
  3. + + Providing visual illustrations, pictures, and symbols to help explain ideas, events, + and processes + + +
  4. + +
  5. + + Providing a spoken version of the text + +
  6. + +
  7. + + Making the text easier to read + +
  8. + +
  9. + + Providing sign language versions of information, ideas, and processes that must be + understood in order to use the content + + +
  10. + +
+ +
+ +

Different sites may address this Success Criterion in different ways. An audio version + of the content may be helpful to some users. For some people who are deaf, a sign + language version of the page may be easier to understand than a written language version + since sign language may be their first language. + Some sites may decide to do both or other combinations. No technique will help all + users who have difficulty. So different techniques are provided as sufficient techniques + here for authors trying to make their sites more accessible. Any numbered technique + or combination above can be used by a particular site and it is considered sufficient + by the Working Group. +

+ +
+ +
+ +
+

Additional Techniques (Advisory) for Reading Level

+ +
+ +
+

Failures for Reading Level

+ + +
+ +
+ + + diff --git "a/understanding/20/rozr\303\263\305\274nialno\305\233\304\207.html" "b/understanding/20/rozr\303\263\305\274nialno\305\233\304\207.html" new file mode 100644 index 0000000000..8fd90be4e8 --- /dev/null +++ "b/understanding/20/rozr\303\263\305\274nialno\305\233\304\207.html" @@ -0,0 +1,35 @@ + + + + + Understanding Distinguishable + + + +

Understanding Distinguishable

+ + +
+

Intent of Distinguishable

+ + +

While some guidelines are focused on making information available in a form that can + be presented in alternate formats, this guideline is concerned with making the default + presentation as easy to perceive as possible to people with disabilities. The primary + focus is on making it easier for users to separate foreground information from the + background. For visual presentations this involves making sure that information presented + on top of a background contrasts sufficiently with the background. For audio presentations + this involves making sure that foreground sounds are sufficiently louder than the + background sounds. Individuals with visual and hearing disabilities have much greater + difficulty separating foreground and background information. +

+ +
+ +
+

Additional Techniques (Advisory) for Distinguishable

+ +
+ + + diff --git "a/understanding/20/skr\303\263ty.html" "b/understanding/20/skr\303\263ty.html" new file mode 100644 index 0000000000..e4990162e2 --- /dev/null +++ "b/understanding/20/skr\303\263ty.html" @@ -0,0 +1,360 @@ + + + + + Understanding Abbreviations + + + +

Understanding Abbreviations

+ + +
+

Intent of Abbreviations

+ + +

The intent of this Success Criterion is to ensure that users can access the expanded + form of abbreviations. +

+ + +
+
+

Benefits of Abbreviations

+ + +

This Success Criterion may help people who:

+ + + +

+ Abbreviations may confuse some readers in different ways: +

+ + + +

It would also help people with visual disabilities who:

+ + + +
+ +
+

Examples of Abbreviations

+ + + + +
+ +
+

Resources for Abbreviations

+ + + + +
+ +
+

Techniques for Abbreviations

+ + +
+

Sufficient Techniques for Abbreviations

+ + +
+ +

Situation A: If the abbreviation has only one meaning within the Web page: + +

+ +
    + +
  1. + +

    + + Providing the expansion or explanation of an abbreviation for the first occurrence of the abbreviation in a Web page using one of the following + techniques: + +

    + + + +
  2. + +
  3. + +

    + + Providing the expansion or explanation of an abbreviation for all occurrences of the abbreviation in a Web page using one of the following + techniques: + +

    + + + +
  4. + +
+ +
+ +
+ +

Situation B: If the abbreviation means different things within the same Web page: + +

+ +
    + +
  1. + +

    + + Providing the expansion or explanation of an abbreviation for all occurrences of abbreviations in a Web page using one of the following techniques: + +

    + + + +
  2. + +
+ +
+ +
+ +
+

Additional Techniques (Advisory) for Abbreviations

+ + +
+ +
+

Failures for Abbreviations

+ + +
+ +
+ + + diff --git "a/understanding/20/sp\303\263jna-identyfikacja.html" "b/understanding/20/sp\303\263jna-identyfikacja.html" new file mode 100644 index 0000000000..5ebe5fdfb9 --- /dev/null +++ "b/understanding/20/sp\303\263jna-identyfikacja.html" @@ -0,0 +1,286 @@ + + + + + Understanding Consistent Identification + + + +

Understanding Consistent Identification

+ + +
+

Intent of Consistent Identification

+ + +

The intent of this Success Criterion is to ensure consistent identification of functional + components that appear repeatedly within a set of Web pages. A strategy that people + who use screen readers use when operating a Web site is to rely heavily on their familiarity + with functions that may appear on different Web pages. If identical functions have + different labels (or, more generally, a different accessible name) + on different Web pages, the site will be considerably more difficult + to use. It may also be confusing and increase the cognitive load for people with cognitive + limitations. Therefore, consistent labeling will help. +

+ +

This consistency extends to the text alternatives. If icons or other non-text items + have the same functionality, then their text alternatives should be consistent as + well. +

+ +

If there are two components on a web page that both have the same functionality as + a component on another page in a set of web pages, then all 3 must be consistent. + Hence the two on the same page will be consistent. +

+ +

While it is desirable and best practice always to be consistent within a single web + page, 3.2.4 only addresses consistency within a set of web pages where something is + repeated on more than one page in the set. +

+ + +
+
+

Benefits of Consistent Identification

+ + + + +
+ +
+

Examples of Consistent Identification

+ + + + +
+ +
+

Resources for Consistent Identification

+ + +
+ +
+

Techniques for Consistent Identification

+ + +
+

Sufficient Techniques for Consistent Identification

+ + +
    + +
  1. + + Using consistent labels, names, and text alternatives for content that has the same + functionality. + + + AND following the + sufficient techniques for Success Criterion 1.1.1 and + sufficient techniques for Success Criterion 4.1.2 for providing labels, names, and text alternatives. +
  2. + +
+ +
+ +

Text alternatives that are "consistent" are not always "identical." For instance, + you may have a graphical arrow at the bottom of a Web page that links to the next + Web page. The text alternative may say "Go to page 4." Naturally, it would not be + appropriate to repeat this exact text alternative on the next Web page. It would be + more appropriate to say "Go to page 5". Although these text alternatives would not + be identical, they would be consistent, and therefore would satisfy this Success Criterion. +

+ +

A single non-text-content-item may be used to serve different functions. In such + cases, different text alternatives are necessary and should be used. Examples can + be commonly found with the use of icons such as check marks, cross marks, and traffic + signs. Their functions can be different depending on the context of the Web page. + A check mark icon may function as "approved", "completed", or "included", to name + a few, depending on the situation. Using "check mark" as text alternative across all + Web pages does not help users understand the function of the icon. Different text + alternatives can be used when the same non-text content serves multiple functions. +

+ +
+ +
+ +
+

Additional Techniques (Advisory) for Consistent Identification

+ +
+ +
+

Failures for Consistent Identification

+ + + + +
+ +
+ + + diff --git "a/understanding/20/sp\303\263jna-nawigacja.html" "b/understanding/20/sp\303\263jna-nawigacja.html" new file mode 100644 index 0000000000..4693bb9413 --- /dev/null +++ "b/understanding/20/sp\303\263jna-nawigacja.html" @@ -0,0 +1,221 @@ + + + + + Understanding Consistent Navigation + + + +

Understanding Consistent Navigation

+ + +
+

Intent of Consistent Navigation

+ + +

The intent of this Success Criterion is to encourage the use of consistent presentation + and layout for users who interact with repeated content within + a set of Web pages and need to locate specific information or functionality more than + once. + Individuals with low vision who use screen magnification to display a small portion + of the screen at a time often use visual cues and page boundaries to quickly locate + repeated content. + Presenting repeated content in the same order is also important for visual users who + use spatial memory or visual cues within the design to locate repeated content. + +

+ +

It is important to note that the use of the phrase "same order" in this section is + not meant to imply that subnavigation menus cannot be used or that blocks of secondary + navigation or page structure cannot be used. Instead, this Success Criterion is intended + to assist users who interact with repeated content across Web pages to be able to + predict the location of the content they are looking for and find it more quickly + when they encounter it again. + +

+ +

Users may initiate a change in the order by using adaptive user agents or by setting + preferences so that the information is presented in a way that is most useful to them. + + + +

+ + +
+
+

Benefits of Consistent Navigation

+ + + + +
+ +
+

Examples of Consistent Navigation

+ + + + +
+ +
+

Resources for Consistent Navigation

+ + + + +
+ +
+

Techniques for Consistent Navigation

+ + +
+

Sufficient Techniques for Consistent Navigation

+ + +
    + +
  1. + + Presenting repeated components in the same relative order each time they appear + +
  2. + +
+ +
+ +
+

Additional Techniques (Advisory) for Consistent Navigation

+ + + + +
+ +
+

Failures for Consistent Navigation

+ + + + +
+ +
+ + + diff --git "a/understanding/20/sugestie-korekty-b\305\202\304\231d\303\263w.html" "b/understanding/20/sugestie-korekty-b\305\202\304\231d\303\263w.html" new file mode 100644 index 0000000000..9a2dcb5875 --- /dev/null +++ "b/understanding/20/sugestie-korekty-b\305\202\304\231d\303\263w.html" @@ -0,0 +1,313 @@ + + + + + Understanding Error Suggestion + + + +

Understanding Error Suggestion

+ + +
+

Intent of Error Suggestion

+ + +

The intent of this Success Criterion is to ensure that users receive appropriate suggestions + for correction of an input error if it is possible. The WCAG 2.0 definition of "input + error" says that it is "information provided by the user that is not accepted" by + the system. Some examples of information that is not accepted include information + that is required but omitted by the user and information that is provided by the user + but that falls outside the required data format or allowed values. +

+ +

Success Criterion 3.3.1 provides for notification of errors. However, persons with + cognitive limitations may find it difficult to understand how to correct the errors. + People with visual disabilities may not be able to figure out exactly how to correct + the error. In the case of an unsuccessful form submission, users may abandon the form + because they may be unsure of how to correct the error even though they are aware + that it has occurred. +

+ +

The content author may provide the description of the error, or the user agent may + provide the description of the error based on technology-specific, programmatically + determined information. + +

+ + +
+
+

Benefits of Error Suggestion

+ + + + +
+ +
+

Examples of Error Suggestion

+ + + + +
+ +
+

Resources for Error Suggestion

+ + +
+ +
+

Techniques for Error Suggestion

+ + +
+ +

+ In some cases, more than one of these situations may apply. For example, when a mandatory + field also requires the data to be in a specific format. + + +

+ +
+ +
+

Sufficient Techniques for Error Suggestion

+ + +
+ +

Situation A: If a mandatory field contains no information:

+ +
    + +
  1. + + Providing a text description that identifies the field as mandatory + +
  2. + +
  3. + + ARIA2: Identifying required fields with the "required" property + +
  4. + +
  5. + + + +
  6. + +
+ + +
+ +
+ +

Situation B: If information for a field is required to be in a specific data format:

+ +
    + +
  1. + + + +
  2. + +
  3. + + Providing a text description when user input falls outside the required format or + values + + +
  4. + +
  5. + + Providing suggested correction text + +
  6. + +
  7. + + SCR18: Providing client-side validation and alert + +
  8. + +
  9. + + Providing client-side validation and adding error text via the DOM + +
  10. + +
  11. + + + +
  12. + +
+ +
+ +
+ +

Situation C: Information provided by the user is required to be one of a limited set + of values: +

+ +
    + +
  1. + + + +
  2. + +
  3. + + Providing a text description when the user provides information that is not in list + of allowed values + + +
  4. + +
  5. + + Providing suggested correction text + +
  6. + +
  7. + + SCR18: Providing client-side validation and alert + +
  8. + +
  9. + + Providing client-side validation and adding error text via the DOM + +
  10. + +
  11. + + + +
  12. + +
+ +
+ +
+ +
+

Additional Techniques (Advisory) for Error Suggestion

+ + + + +
+ +

Client-Side Scripting Techniques (Advisory)

+ + + +
+ +
+ +
+

Failures for Error Suggestion

+ + +
+ +
+ + + diff --git "a/understanding/20/trzy-b\305\202yski-lub-warto\305\233ci-poni\305\274ej-progu.html" "b/understanding/20/trzy-b\305\202yski-lub-warto\305\233ci-poni\305\274ej-progu.html" new file mode 100644 index 0000000000..7be90c24d1 --- /dev/null +++ "b/understanding/20/trzy-b\305\202yski-lub-warto\305\233ci-poni\305\274ej-progu.html" @@ -0,0 +1,237 @@ + + + + + Understanding Three Flashes or Below Threshold + + + +

Understanding Three Flashes or Below Threshold

+ + +
+

Intent of Three Flashes or Below Threshold

+ + +

The intent of this Success Criterion is to allow users to access the full content + of a site without inducing seizures due to photosensitivity. +

+ +

Individuals who have photosensitive seizure disorders can have a seizure triggered + by content that flashes at certain frequencies for more than a few flashes. People + are even more sensitive to red flashing than to other colors, so a special test is + provided for saturated red flashing. These guidelines were originally based on guidelines for + the broadcasting industry as adapted for desktop monitors, where content is viewed + from a closer distance (using a larger angle of vision). +

+ +

Flashing can be caused by the display, the computer rendering the image or by the + content being rendered. The author has no control of the first two. They can be addressed + by the design and speed of the display and computer. The intent of this criterion + is to ensure that flicker that violates the flash thresholds is not caused by the + content itself. For example, the content could contain a video clip or animated image + of a series of strobe flashes, or close-ups of rapid-fire explosions. + +

+ +

This Success Criterion replaces a much more restrictive criterion in WCAG 1.0 that + did not allow any flashing (even of a single pixel) within a broad frequency range + (3 to 50 Hz). This Success Criterion is based on existing specifications in use in + the UK and by others for television broadcast and has been adapted for computer display + viewing. In WCAG 2.0, a 1024 x 768 screen was used as the reference screen resolution for the + evaluation. The 341 x 256 pixel block represents a 10 degree viewport at a typical + viewing distance. (The 10 degree field is taken from the original specifications and + represents the central vision portion of the eye, where people are most susceptible + to photo stimuli.) +

+

With the proliferation of devices of varying screen sizes (from small hand-helds to large living room displays), as well as the adoption of CSS pixels as a density-independent unit of measurement, the prior assessment criteria may seem outdated. However, an image of a consistent size uses up relatively the same percentage of a user's visual field on any device. On a large screen, the image takes up less size, but the large screen takes up a larger part of the visual field. On a mobile screen, the image may take up most or all of the screen; however, the mobile screen itself takes up a smaller portion of the user's visual field. So the same dimension of the flashing content, represented in CSS pixels can still provide a consistent means of assessment. Substituting CSS pixels for the original pixel block means that the combined area of flashing becomes 341 x 256 CSS pixels, or a flashing area of 87,296 CSS pixels.

+ +

Content should be analyzed at the largest scale at which a user may view the content, and at the standard zoom level of the user agent. For example, with a video that may play in an area of a web page and also at full screen, the video should be analyzed for risks at full screen.

+ +

Where video content is provided in color spaces other than sRGB, the version provided with the highest dynamic range should be tested. In such cases the industry standard definition of a general flash is a change in luminance of 20 cd/m2 or more where the darker image is below 160 cd/m2. (ITU-R BT.1702.) This is applicable for standard dynamic range (SDR) and high dynamic range (HDR) content. For HDR content when the darker state is 160 cd/m2 or more, a general flash is one where the Michelson contrast is 1/17 or greater — where the Michelson contrast is calculated as (LHigh - LLow) / (LHigh + LLow), and where LHigh and LLow are the luminance of the high and low luminance states, respectively.

+ +

For short clips that might be looped (such as GIF animations), the content should be analyzed while looping.

+ +

The specification cannot account for the actual viewing distance that a person chooses. Users that are closer to their screens than the idealized viewing distance will be affected by flashing areas that normatively pass. The same problem applies to users who rely on zoom or screen magnification. Conversely, users who are further away from the screen than the idealized distance should be able to tolerate flashing areas that are larger than the threshold.

+ +

The combined area of flashes occurring concurrently and contiguously means the total + area that is actually flashing at the same time. It is calculated by adding up the + contiguous area that is flashing simultaneously within any 10 degree angle of view. +

+ +
+ +

The terms "blinking" and "flashing" can sometimes refer to the same content.

+ + + +
+ +
+

The new (in WCAG 2.2) working definition in the field for "pair of opposing transitions involving a saturated red" is a pair of opposing transitions where, one transition is either to or from a state with a value R/(R + G + B) that is greater than or equal to 0.8, and the difference between states is more than 0.2 (unitless) in the CIE 1976 UCS chromaticity diagram. [ISO 9241-391]

+

The chromaticity difference is calculated as:

+ +

where u'1 and v'1 are chromaticity coordinates of State 1 and u'2 and v'2 are chromaticity coordinates of State 2. The 1976 UCS chromaticity coordinates of u' and v' are calculated as:

+ +

where X, Y, and Z are the tristimulus values of a color in the CIE XYZ colorspace, which can be calculated as:

+ +

where R, G, & B are values that range from 0-1 as specified in “relative luminance” definition.

+
+ + +
+
+

Benefits of Three Flashes or Below Threshold

+ + + + +
+ +
+

Examples of Three Flashes or Below Threshold

+ + + + +
+ +
+

Resources for Three Flashes or Below Threshold

+ + + + +
+ +
+

Techniques for Three Flashes or Below Threshold

+ + +
+

Sufficient Techniques for Three Flashes or Below Threshold

+ + +
    + +
  1. + + Ensuring that no component of the content flashes more than three times in any one + second period + + +
  2. + +
  3. + + Keeping the flashing area small enough + +
  4. + +
  5. + + Using a tool to ensure that content does not violate the general flash threshold or + red flash threshold + + +
  6. + +
+ +
+ +
+

Additional Techniques (Advisory) for Three Flashes or Below Threshold

+ +
+ +
+

Failures for Three Flashes or Below Threshold

+ + +
+ +
+ + + diff --git "a/understanding/20/trzy-b\305\202yski.html" "b/understanding/20/trzy-b\305\202yski.html" new file mode 100644 index 0000000000..6ac39c87ba --- /dev/null +++ "b/understanding/20/trzy-b\305\202yski.html" @@ -0,0 +1,160 @@ + + + + + Understanding Three Flashes + + + +

Understanding Three Flashes

+ + +
+

Intent of Three Flashes

+ + +

The purpose of this Success Criterion is to further reduce the chance of seizures. + Seizures cannot be completely eliminated since some people are so sensitive. However, + by eliminating all 3-per-second flashing over any area of the screen, the chances + of a person having a seizure are further reduced than when just meeting the measures + ordinarily used today in standards internationally, as we do at Level A. + +

+ +

Whereas + Success Criterion 2.3.1 allows flashing if it is dim enough or has a small enough area, Success Criterion + 2.3.2 does not allow flashing greater than 3 per second, regardless of brightness + or size. As a result, even a single flashing pixel would violate this criterion. The + intent is to guard against flashing larger than a single pixel, but since an unknown + amount of magnification or high contrast setting may be applied, the prohibition is + against any flashing. +

+ +
+ +

In some cases, what we refer to as "blinking" and what we refer to as "flashing" may + overlap slightly. We are using different terms for the two because "blinking" causes + a distraction problem which you can allow for a short time as long as it stops (or + can be stopped) whereas "flashing" is a seizure trigger and cannot be allowed or it + will cause a seizure. The seizure would occur faster than most users could turn it + off. "Blink" therefore refers to slow repeating changes that would distract. "Flash" + refers to changes that could cause a seizure if they were bright enough or persisted + long enough. Blinking usually doesn't occur at speeds of 3 per second or more so blink + and flash do not overlap. However, blinking can occur faster than 3 per second so + there could be an overlap. See + 2.2.2: Pause, Stop, Hide for more information on blink. + +

+ +
+ + +
+
+

Benefits of Three Flashes

+ + + + +
+ +
+

Examples of Three Flashes

+ + + + +
+ +
+

Resources for Three Flashes

+ + + + +
+ +
+

Techniques for Three Flashes

+ + +
+

Sufficient Techniques for Three Flashes

+ + +
    + +
  1. + + Ensuring that no component of the content flashes more than three times in any one + second period + + +
  2. + +
+ +
+ +
+

Additional Techniques (Advisory) for Three Flashes

+ +
+ +
+

Failures for Three Flashes

+ + +
+ +
+ + + diff --git "a/understanding/20/tytu\305\202-strony.html" "b/understanding/20/tytu\305\202-strony.html" new file mode 100644 index 0000000000..b4899ddb3f --- /dev/null +++ "b/understanding/20/tytu\305\202-strony.html" @@ -0,0 +1,252 @@ + + + + + Understanding Page Titled + + + +

Understanding Page Titled

+ + +
+

Intent of Page Titled

+ + +

The intent of this Success Criterion is to help users find content and orient themselves + within it by ensuring that each Web page has a descriptive title. Titles identify + the current location without requiring users to read or interpret page content. When + titles appear in site maps or lists of search results, users can more quickly identify + the content they need. User agents make the title of the page easily available to + the user for identifying the page. For instance, a user agent may display the page + title in the window title bar or as the name of the tab containing the page. +

+ +

In cases where the page is a document or a web application, the name of the document + or web application would be sufficient to describe the purpose of the page. Note that + it is not required to use the name of the document or web application; other things + may also describe the purpose or the topic of the page. +

+ +

+ + Success Criteria 2.4.4 and + 2.4.9 deal with the purpose of links, many of which are links to web pages. Here also, + the name of a document or web application being linked to would be sufficient to describe + the purpose of the link. Having the link and the title agree, or be very similar, + is good practice and provides continuity between the link 'clicked on' and the web + page that the user lands on. +

+ + +
+
+

Benefits of Page Titled

+ + + + +
+ +
+

Examples of Page Titled

+ + + + +
+ +
+

Resources for Page Titled

+ + + + +
+ +
+

Techniques for Page Titled

+ + +
+

Sufficient Techniques for Page Titled

+ + +
    + +
  1. + +

    + + Providing descriptive titles for Web pages + + AND associating a title with a Web page using one of the following techniques: + +

    + + + +
  2. + +
+ +
+ +
+

Additional Techniques (Advisory) for Page Titled

+ + + + +
+ +
+

Failures for Page Titled

+ + + + +
+ +
+ + + diff --git "a/understanding/20/u\305\274ycie-koloru.html" "b/understanding/20/u\305\274ycie-koloru.html" new file mode 100644 index 0000000000..7a8bf82a65 --- /dev/null +++ "b/understanding/20/u\305\274ycie-koloru.html" @@ -0,0 +1,334 @@ + + + + + Understanding Use of Color + + + +

Understanding Use of Color

+ + +
+

Intent of Use of Color

+ + +

The intent of this Success Criterion is to ensure that all sighted users can access information + that is conveyed by color differences, that is, by the use of color where each color + has a meaning assigned to it. If the information is conveyed through color differences + in an image (or other non-text format), the color may not be seen by users with color + deficiencies. In this case, providing the information conveyed with color through + another visual means ensures users who cannot see color can still perceive the information. +

+ +

Color is an important asset in design of Web content, enhancing its aesthetic appeal, + its usability, and its accessibility. However, some users have difficulty perceiving + color. People with partial sight often experience limited color vision, and many older + users do not see color well. In addition, people using limited-color or + monochrome displays and browsers will be unable to access information that is presented + only in color. +

+ +

Examples of information conveyed by color differences: “required fields are red", + “error is shown in red", and “Mary's sales are in red, Tom's are in blue". Examples + of indications of an action include: using color to indicate that a link will open + in a new window or that a database entry has been updated successfully. An example + of prompting a response would be: using highlighting on form fields to indicate that + a required field had been left blank. +

+ +
+ +

This should not in any way discourage the use of color on a page, or even color coding if it is complemented by other visual indication. +

+ +
+ + +
+ +

If content is conveyed through the use of colors that differ not only in their hue, + but that also have a significant difference in lightness, then this counts as an additional + visual distinction, as long as the difference in relative luminance between the colors leads + to a contrast ratio of 3:1 or greater. + For example, a light green and a dark red differ both by color (hue) + and by lightness, so they would pass if the contrast ratio is at least 3:1. + Similarly, if content is distinguished by inverting an element's foreground and background colors, + this would pass (again, assuming that the foreground and background colors have a sufficient contrast). +

+

However, if content relies on the user's ability to accurately perceive or differentiate a particular color + an additional visual indicator will be required regardless of the contrast ratio between those colors. For example, + knowing whether an outline is green for valid or red for invalid. +

+ +
+ +
+ +

This criterion does not directly address the needs of users with assistive technologies. + It aims to ensure that sighted users who cannot distinguish between some colors can still + understand content. + How information is conveyed to assistive technology users is covered separately in other + criteria, including (but not limited to) + 1.1.1 Non-text Content, + 1.3.1 Info and Relationships, and + 4.1.2 Name, Role, Value. +

+

Conversely, even if information that is conveyed by color differences is appropriately conveyed + to assistive technologies, it does not necessarily pass this criterion, as sighted users who cannot + distinguish between certain color may not necessarily be using any assistive technologies. This + criterion requires a visible alternative to color. +

+ +
+ + +
+
+

Benefits of Use of Color

+ + + + +
+ +
+

Examples of Use of Color

+ + + + +
+ +
+

Resources for Use of Color

+ + + + +
+ +
+

Techniques for Use of Color

+ + +
+

Sufficient Techniques for Use of Color

+ + +
+ +

Situation A: If the color of particular words, backgrounds, or other content is used + to indicate information: +

+ +
    + +
  1. + + Ensuring that information conveyed by color differences is also available in text + +
  2. + +
  3. + + Including a text cue whenever color cues are used + +
  4. + +
  5. + + Ensuring that additional visual cues are available when text color differences are + used to convey information + + +
  6. + +
  7. + + Using a contrast ratio of 3:1 with surrounding text and providing additional visual + cues on focus for links or controls where color alone is used to identify them + + +
  8. + +
+ +
+ +
+ +

Situation B: If color is used within an image to convey information:

+ +
    + +
  1. + + Using color and pattern + +
  2. + +
  3. + + Ensuring that information conveyed by color differences is also available in text + +
  4. + +
+ +
+ +
+ +
+

Additional Techniques (Advisory) for Use of Color

+ + + + +
+ +
+

Failures for Use of Color

+ + + + +
+ +
+ + + diff --git "a/understanding/20/wiele-dr\303\263g.html" "b/understanding/20/wiele-dr\303\263g.html" new file mode 100644 index 0000000000..1b4a349813 --- /dev/null +++ "b/understanding/20/wiele-dr\303\263g.html" @@ -0,0 +1,222 @@ + + + + + Understanding Multiple Ways + + + +

Understanding Multiple Ways

+ + +
+

Intent of Multiple Ways

+ + +

The intent of this Success Criterion is to make it possible for users to locate content + in a manner that best meets their needs. Users may find one technique easier or more + comprehensible to use than another. +

+ +

Even small sites should provide users some means of orientation. For a three or four + page site, with all pages linked from the home page, it may be sufficient simply to + provide links from and to the home page where the links on the home page can also + serve as a site map. +

+ + +
+
+

Benefits of Multiple Ways

+ + + + +
+ +
+

Examples of Multiple Ways

+ + + + +
+ +
+

Resources for Multiple Ways

+ + +
+ +
+

Techniques for Multiple Ways

+ + +
+

Sufficient Techniques for Multiple Ways

+ + +
    + +
  1. + +

    Using two or more of the following techniques:

    + + + +
  2. + +
+ +
+ +
+

Additional Techniques (Advisory) for Multiple Ways

+ + + + +
+ +
+

Failures for Multiple Ways

+ + +
+ +
+ + + diff --git "a/understanding/20/wlasciwosci-zmys\305\202owe.html" b/understanding/20/wlasciwosci-zmyslowe.html similarity index 100% rename from "understanding/20/wlasciwosci-zmys\305\202owe.html" rename to understanding/20/wlasciwosci-zmyslowe.html diff --git "a/understanding/20/wla\305\233ciwo\305\233ci-zmys\305\202owe.html" "b/understanding/20/wla\305\233ciwo\305\233ci-zmys\305\202owe.html" new file mode 100644 index 0000000000..7e1b610056 --- /dev/null +++ "b/understanding/20/wla\305\233ciwo\305\233ci-zmys\305\202owe.html" @@ -0,0 +1,179 @@ + + + + + Understanding Sensory Characteristics + + + +

Understanding Sensory Characteristics

+ + +
+

Intent of Sensory Characteristics

+ +

The intent of this Success Criterion is to ensure that all users can access instructions + for using the content, even when they cannot perceive shape or size or use information + about spatial location or orientation. + Some content relies on knowledge of the shape or position of objects that are not + available from the structure of the content (for example, "round button" or "button + to the right"). + Some users with disabilities are not able to perceive shape or position due to the + nature of the assistive technologies they use. + This Success Criterion requires that additional information be provided to clarify + instructions that are dependent on this kind of information. +

+ +

Providing information using shape and/or location, however, is an effective method + for many users including those with cognitive limitations. + This provision should not discourage those types of cues as long as the information + is also provided in other ways. +

+ +

In some languages, it is commonly understood that "above" refers to the content previous + to that point in the content and "below" refers to the content after that point. In + such languages, if the content being referenced is in the appropriate place in the + reading order and the references are unambiguous, statements such as "choose one of + the links below" or "all of the above" would conform to this Success Criterion. +

+ +

WCAG was designed to apply only to controls that were displayed on a web page. The + intent was to avoid describing controls solely via references to visual or auditory + cues. When applying this to instructions for operating physical hardware controls + (e.g. a web kiosk with dedicated content), tactile cues on the hardware might be described + (e.g. the arrow shaped key, the round key on the right side). This success criterion + is not intended to prevent the use of tactile cues in instructions. +

+ +
+
+

Benefits of Sensory Characteristics

+ + + + +
+ +
+

Examples of Sensory Characteristics

+ + + + +
+ +
+

Resources for Sensory Characteristics

+ + +
+ +
+

Techniques for Sensory Characteristics

+ + +
+

Sufficient Techniques for Sensory Characteristics

+ + +
    + +
  1. + + Providing textual identification of items that otherwise rely only on shape and/or + position to be understood + + +
  2. + +
+ +
+ +
+

Additional Techniques (Advisory) for Sensory Characteristics

+ +
+ +
+

Failures for Sensory Characteristics

+ + + + +
+ +
+ + + diff --git "a/understanding/20/zapobieganie-b\305\202\304\231dom-prawnym-finansowym-w-danych.html" "b/understanding/20/zapobieganie-b\305\202\304\231dom-prawnym-finansowym-w-danych.html" new file mode 100644 index 0000000000..8c9eade510 --- /dev/null +++ "b/understanding/20/zapobieganie-b\305\202\304\231dom-prawnym-finansowym-w-danych.html" @@ -0,0 +1,237 @@ + + + + + Understanding Error Prevention (Legal, Financial, Data) + + + +

Understanding Error Prevention (Legal, Financial, Data)

+ + +
+

Intent of Error Prevention (Legal, Financial, Data)

+ + +

The intent of this Success Criterion is to help users with disabilities avoid serious + consequences as the result of a mistake when performing an action that cannot be reversed. + For example, purchasing non-refundable airline tickets or submitting an order to purchase + stock in a brokerage account are financial transactions with serious consequences. + If a user has made a mistake on the date of air travel, he or she could end up with + a ticket for the wrong day that cannot be exchanged. If the user made a mistake on + the number of stock shares to be purchased, he or she could end up purchasing more + stock than intended. Both of these types of mistakes involve transactions that take + place immediately and cannot be altered afterwards, and can be very costly. Likewise, + it may be an unrecoverable error if users unintentionally modify or delete data stored + in a database that they later need to access, such as their entire travel profile + in a travel services web site. When referring to modification or deletion of 'user + controllable' data, the intent is to prevent mass loss of data such as deleting a + file or record. It is not the intent to require a confirmation for each save command + or the simple creation or editing of documents, records or other data. +

+ +

Users with disabilities may be more likely to make mistakes. People with reading disabilities + may transpose numbers and letters, and those with motor disabilities may hit keys + by mistake. Providing the ability to reverse actions allows users to correct a mistake + that could result in serious consequences. Providing the ability to review and correct + information gives the user an opportunity to detect a mistake before taking an action + that has serious consequences. +

+ +

User-controllable data is user-viewable data that the user can change and/or delete + through an intentional action. Examples of the user controlling such data would be + updating the phone number and address for the user's account, or deleting a record + of past invoices from a website. It does not refer such things as internet logs and + search engine monitoring data that the user can't view or interact with directly. + +

+ + +
+
+

Benefits of Error Prevention (Legal, Financial, Data)

+ + + + +
+ +
+

Examples of Error Prevention (Legal, Financial, Data)

+ + + + +
+ +
+

Resources for Error Prevention (Legal, Financial, Data)

+ + +
+ +
+

Techniques for Error Prevention (Legal, Financial, Data)

+ + +
+

Sufficient Techniques for Error Prevention (Legal, Financial, Data)

+ + + + + + + + +
+ +
+

Additional Techniques (Advisory) for Error Prevention (Legal, Financial, Data)

+ + + + +
+ +
+

Failures for Error Prevention (Legal, Financial, Data)

+ + +
+ +
+ + + diff --git "a/understanding/20/zapobieganie-b\305\202\304\231dom-wszystkim.html" "b/understanding/20/zapobieganie-b\305\202\304\231dom-wszystkim.html" new file mode 100644 index 0000000000..ee4537a2bb --- /dev/null +++ "b/understanding/20/zapobieganie-b\305\202\304\231dom-wszystkim.html" @@ -0,0 +1,82 @@ + + + + + Understanding Error Prevention (All) + + + +

Understanding Error Prevention (All)

+ + +
+

Intent of Error Prevention (All)

+ + +

The intent of this Success Criterion is to help users with disabilities avoid consequences + that may result from making a mistake when submitting form data. This criterion builds + on + Success Criterion 3.3.4 in that it applies to all forms that require users to submit information. +

+ +

Users with disabilities may be more likely to make mistakes and may have more difficulty + detecting or recovering from mistakes. People with reading disabilities may transpose + numbers and letters, and those with motor disabilities may hit keys by mistake. Providing + the ability to reverse actions allows users to correct a mistake. Providing the ability + to review and correct information gives the user an opportunity to detect a mistake + before taking an action. +

+ + +
+
+

Benefits of Error Prevention (All)

+ + + + +
+ +
+

Examples of Error Prevention (All)

+ + +
+ +
+

Resources for Error Prevention (All)

+ + +
+ +
+

Techniques for Error Prevention (All)

+ + +
+

Sufficient Techniques for Error Prevention (All)

+ + +
    + +
  1. + Following the + sufficient techniques for Success Criterion 3.3.4 for all forms that require the user to submit information. +
  2. + +
+ +
+ +
+ + + diff --git "a/understanding/20/zmiana-na-\305\274\304\205danie.html" "b/understanding/20/zmiana-na-\305\274\304\205danie.html" new file mode 100644 index 0000000000..2e3e18616e --- /dev/null +++ "b/understanding/20/zmiana-na-\305\274\304\205danie.html" @@ -0,0 +1,340 @@ + + + + + Understanding Change on Request + + + +

Understanding Change on Request

+ + +
+

Intent of Change on Request

+ + +

The intent of this Success Criterion is to encourage design of Web content that gives + users full control of changes of context. + This Success Criterion aims to eliminate potential confusion that may be caused by + unexpected changes of context such as automatic launching of new windows, automatic + submission of forms after selecting an item from a list, etcetera. + Such unexpected changes of context may cause difficulties for people with motor impairments, + people with low vision, people who are blind, and people with certain cognitive limitations. + +

+ +

Some types of change of context are not disruptive to some users, or actively benefit + some users. For example, single-switch users rely on context changes that are animated + by the system, and the preferences of low-vision users may vary depending on how much + of the content they can see at once and how much of the session structure they can + retain in working memory. Some types of content, such as slide shows, require the + ability to change context in order to provide the intended user experience. Content + that initiates changes of context automatically only when user preferences allow can + conform to this Success Criterion. + +

+ +
+ +

It is possible for more than one change of context to occur simultaneously. For example, + clicking on a link which automatically opens a new window is an example of two separate + changes of context related to the change in content and to the change in the viewport + (window). The change in the content in this case is initiated by user request when + they click on the link, but unless the user can be aware that the link will open in + a new window then that change of context cannot be regarded as user-initiated. +

+ +
+ + +
+
+

Benefits of Change on Request

+ + + + +
+ +
+

Examples of Change on Request

+ + + + +
+ +
+

Resources for Change on Request

+ + + + +
+ +
+

Techniques for Change on Request

+ + +
+

Sufficient Techniques for Change on Request

+ + +
+ +

Situation A: If the Web page allows automatic updates:

+ +
    + +
  1. + + Providing a mechanism to request an update of the content instead of updating automatically + +
  2. + +
+ +
+ +
+ +

Situation B: If automatic redirects are possible:

+ +
    + +
  1. + + Implementing automatic redirects on the server side instead of on the client side + +
  2. + +
  3. + +

    + + Using an instant client-side redirect using one of the following techniques: +

    + + + +
  4. + +
+ +
+ +
+ +

Situation C: If the Web page uses pop-up windows:

+ +
    + +
  1. + +

    Including pop-up windows using one of the following techniques:

    + + + +
  2. + +
+ +
+ +
+ +

Situation D: If using an onchange event on a select element:

+ +
    + +
  1. + + Using an onchange event on a select element without causing a change of context + +
  2. + +
+ +
+ +
+ +
+

Additional Techniques (Advisory) for Change on Request

+ + + + +
+ +
+

Failures for Change on Request

+ + + + +
+ +
+ + + diff --git "a/understanding/20/zrozumia\305\202a-kolejno\305\233\304\207.html" "b/understanding/20/zrozumia\305\202a-kolejno\305\233\304\207.html" new file mode 100644 index 0000000000..5932226c47 --- /dev/null +++ "b/understanding/20/zrozumia\305\202a-kolejno\305\233\304\207.html" @@ -0,0 +1,234 @@ + + + + + Understanding Meaningful Sequence + + + +

Understanding Meaningful Sequence

+ + +
+

Intent of Meaningful Sequence

+ + +

The intent of this Success Criterion is to enable a user agent to provide an alternative + presentation of content while preserving the reading order needed to understand the + meaning. It is important that it be possible to programmatically determine at least + one sequence of the content that makes sense. Content that does not meet this Success + Criterion may confuse or disorient users when assistive technology reads the content + in the wrong order, or when alternate style sheets or other formatting changes are + applied. + +

+ +

A sequence is + meaningful if the order of content in the sequence cannot be changed without affecting its meaning. + + For example, if a page contains two independent articles, the relative order of the + articles may not affect their meaning, as long as they are not interleaved. In such + a situation, the articles themselves may have meaningful sequence, but the container + that contains the articles may not have a meaningful sequence. +

+ +

The semantics of some elements define whether or not their content is a meaningful + sequence. For instance, in HTML, text is always a meaningful sequence. Tables and + ordered lists are meaningful sequences, but unordered lists are not. +

+ +

The order of content in a sequence is not always meaningful. For example, the relative + order of the main section of a Web page and a navigation section does not affect their + meaning. They could occur in either order in the programmatically determined reading + sequence. As another example, a magazine article contains several callout sidebars. + The order of the article and the sidebars does not affect their meaning. In these + cases there are a number of different reading orders for a Web page that can satisfy + the Success Criterion. + +

+ +

For clarity:

+ +
    + +
  1. Providing a particular linear order is only required where it affects meaning.
  2. + +
  3. There may be more than one order that is "correct" (according to the WCAG 2.0 definition).
  4. + +
  5. Only one correct order needs to be provided.
  6. + +
+ + +
+
+

Benefits of Meaningful Sequence

+ + + + +
+ +
+

Examples of Meaningful Sequence

+ + + + +
+ +
+

Resources for Meaningful Sequence

+ + +
+ +
+

Techniques for Meaningful Sequence

+ + +
+

Sufficient Techniques for Meaningful Sequence

+ + +
    + +
  1. + + Ordering the content in a meaningful sequence for all the content in the Web page + +
  2. + +
  3. + +

    Marking sequences in the content as meaningful using one of the following techniques + + AND + + Ordering the content in a meaningful sequence for those sequences +

    + + + +
  4. + +
  5. + + Making the DOM order match the visual order + +
  6. + +
  7. + + + +
  8. + +
+ +
+ +
+

Additional Techniques (Advisory) for Meaningful Sequence

+ +
+ +
+

Failures for Meaningful Sequence

+ + + + +
+ +
+ + + diff --git a/understanding/21/aktywowanie-ruchem.html b/understanding/21/aktywowanie-ruchem.html new file mode 100644 index 0000000000..aadf8fb2f8 --- /dev/null +++ b/understanding/21/aktywowanie-ruchem.html @@ -0,0 +1,74 @@ + + + + + Understanding Motion Actuation + + + +

Motion Actuation +
+ Understanding SC 2.6.1 +

+
+

Intent of this Success Criterion

+

The intent of this success criterion is to ensure that functions triggered by moving a device (for example, shaking or tilting) or by gesturing towards the device (so that sensors like a camera can pick up and interpret the gesturing), can also be operated by more conventional user interface components.

+

This criterion concerns input through sensors which respond directly to motions such as gesturing towards, tilting or shaking a device. It does not cover the movement of users through space as registered by geolocation sensors or beacons, or events observed by the device other than intentional gesturing by the user. It also does not cover incidental motion associated with operating a keyboard, pointer, or assistive technology.

+

Devices often have sensors that can act as inputs, such as accelerometer and gyroscope sensors on a phone or tablet device. These sensors can allow the user to control something by simply changing the orientation or moving the device in particular ways. In other situations, web content can interpret user gestures via the camera or other sensors to actuate functions. For example, shaking the device might issue an "Undo" command, or a gentle hand wave might be used to move forward or backward in a sequence of pages. Some users with disabilities are not able to operate these device sensors (either not at all, or not precisely enough) because the device is on a fixed mount (perhaps a wheelchair) or due to motor impairments. Therefore, functionality offered through motion must also be available by another mechanism.

+

In addition, some users may accidentally activate sensors due to tremors or other motor impairments. The user must have the ability to turn off motion actuation to prevent such accidental triggering of functions. Applications may be able to meet this requirement by supporting operating system settings which allow the user to disable motion detection at the system level.

+

There is an exception where motion is essential for the function or not using motions or gestures would invalidate the activity. Some applications are specifically created to use device sensor data. Examples of content that are exempt from this requirement include a pedometer that relies on device motion to count steps.

+ + +
+

Benefits

+ + +
+
+
+

Examples of Success Criterion 2.6.1

+ + +
+ +
+

Related Resources

+ +
+ +
+

Techniques

+
+

Sufficient

+ +
+
+

Advisory

+ +
+
+

Failure

+ +
+
+ + diff --git a/understanding/21/animation-from-interactions.html b/understanding/21/animacja-po-interakcji.html similarity index 100% rename from understanding/21/animation-from-interactions.html rename to understanding/21/animacja-po-interakcji.html diff --git a/understanding/21/dopasowanie-do-ekranu.html b/understanding/21/dopasowanie-do-ekranu.html new file mode 100644 index 0000000000..6d273acfa9 --- /dev/null +++ b/understanding/21/dopasowanie-do-ekranu.html @@ -0,0 +1,121 @@ + + + + + Understanding Reflow + + + + +

Understanding Reflow

+
+

Intent of this Success Criterion

+

The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

+

For people with low vision, enlarged text with reflow enables reading. It is critical. Enlargement enables perception of characters. Reflow enables tracking. Tracking is following along lines of text, including getting from the end of one line to the beginning of the next line.

+

Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling significantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

+
+

How reflow works

+

User agents for technologies such as HTML/CSS, PDF, and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

+

Supporting the reflow of content is also known as 'Responsive Web Design'. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page.

+

In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

+
+
+

Viewing distance and display resolution

+

The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve. This value lines up with the reported viewport width of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. It should be noted that 400% applies to the dimension, not the area. It means four times the default width and four times the default height.

+
Diagram showing the size of character needed by viewing distance to make the same image on the retina with small screen devices close, large screen devices further away. +
A letter of the same CSS pixel size on different displays with different resolutions
+
+

When we read, the size of the print is not as important as the image it projects on the retina of our eye. Phones are designed for close viewing while desktops are designed for viewing farther away. As a consequence 16px print on a phone is physically smaller than 16px print on a desktop. This is not a problem because both print sizes cast the same image on our retina if they are viewed at their intended distance.

+
+
+

Visibility and availability of content

+

How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.

+

The Success Criterion is met as long as all content and functionality are still fully available - either directly, or revealed via accessible controls, or accessible via direct links.

+
+
+ +

Content exceptions for reflow

+

Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this Success Criterion. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. It is acceptable to provide two-dimensional scrolling for such parts of the content. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

+

Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This Success Criterion therefore does not apply to whole data tables, and it is acceptable to provide two-dimensional scrolling for them. However, cells within data tables should fit within the size requirement unless the cell contains types of content that also requires two-dimensional layout for usage or meaning.

+

Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g., horizontally in a vertically scrolling page). This Success Criterion therefore does not apply to interfaces which provide toolbars.

+
+
+

Responsive web design and other ways to meet this Success Criterion

+

Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. Each variation (CSS break point) of the page at the same URL should conform (compare Conformance for WCAG 2.1).

+

For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.

+
+
+

Avoiding scrolling in horizontally and vertically written languages

+

The success Criterion applies to both horizontally and vertically written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

+
+
+

The relation of Reflow to the Success Criterion 1.4.4 Resize Text

+

The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. Success Criterion 1.4.4 Resize Text also applies, so it should be possible to increase the size of all text to at least 200% while simultaneously meeting the reflow requirement. For most implementations, the text is expected to continue to enlarge as the magnification increases, so that users can magnify text up to (and beyond) 400%. In an implementation where text does not consistently increase its size as people zoom in (such as when it is tranformed based on a media query to adapt to small-screen usage), it must still be possible to get to 200% enlargement in order to satisfy the Resize Text criterion.

+

For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280px wide, the same 20px at 200% zoom would mean a text size of 200%. At 400% zoom, the author may decide to set the text size to 10px: the text would now still be enlarged to 200% compared to the default browser setting of 100% zoom. It is not required to achieve 200% text enlargement at every breakpoint, but it should be possible to get 200% text enlargement in some way.

+
+
+

Browsers on mobile operating systems

+

Most browsers on mobile operating systems do not combine reflow and zoom in the same way as on desktop browsers. These mobile browsers normally support reflow when changing the orientation of the device -- content will be adjusted to the new viewport width. However, these mobile browsers can only magnify content to achieve 1.4.4. Resize Text in manners which do not constrain reflow to a single dimension, for example by using a pinch gesture to scale up content or a double tap on a particular column to make it fill the viewport width. This means that zoomed content in most mobile browsers involves two-dimensional scrolling regardless of what an author does.

+

Mobile user agents can offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of magnified reflow support in browsers on mobile operating systems can therefore be regarded as a user agent support issue.

+
+
+ +
+

Specific Benefits of Success Criterion 1.4.10

+ +
+ +
+

Examples

+
+

Example 1: Responsive Design

+

+

Note that as the zoom percentage increases, the navigation changes first to hide options behind a "More" dropdown menu. As zooming continues, most navigation options are eventually behind a "hamburger" menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling.

+
+
+
+

Resources

+ +
+
+

Techniques for Success Criterion 1.4.10: Reflow

+
+

Sufficient Techniques

+ +
+
+

Advisory Techniques

+ + +
+
+

Failures

+ +
+
+ + diff --git a/understanding/21/etykieta-w-nazwie.html b/understanding/21/etykieta-w-nazwie.html new file mode 100644 index 0000000000..2273526225 --- /dev/null +++ b/understanding/21/etykieta-w-nazwie.html @@ -0,0 +1,125 @@ + + + + + Understanding Label in Name + + + +

Understanding Label in Name

+
+

Intent

+

The intent of this Success Criterion is to ensure that the words which visually label a component are also the words associated with the component programmatically. This helps ensure that people with disabilities can rely on visible labels as a means to interact with the components.

+

Most controls are accompanied by a visible text label. Those same controls have a programmatic name, also known as the Accessible Name. Users typically have a much better experience if the words and characters in the visible label of a control match or are contained within the accessible name. When these match, speech-input users (i.e., users of speech recognition applications) can navigate by speaking the visible text labels of components, such as menus, links, and buttons, that appear on the screen. Sighted users who use text-to-speech (e.g., screen readers) will also have a better experience if the text they hear matches the text they see on the screen.

+

Note that where a visible text label does not exist for a component, this Success Criterion does not apply to that component.

+

Where text labels exist and are properly linked to the user interface components through established authoring practices, the label and name will normally match. When they don't match, speech-input users who attempt to use the visible text label as a means of navigation or selection (e.g., "move to Password") will be unsuccessful. The speech-based navigation fails because the visible label spoken by the users does not match (or is not part of) the accessible name that is enabled as a speech-input command. In addition, when the accessible name is different from the visible label, it may function as a hidden command that can be accidentally activated by speech-input users.

+

Mismatches between visible labels and programmatic names for controls are even more of an issue for speech-input and text-to-speech users who also have cognitive challenges. Mismatches create an extra cognitive load for speech-input users, who must remember to say a speech command that is different from the visible label they see on a control. It also creates extra cognitive load for a text-to-speech user to absorb and understand speech output that does not match the visible label.

+

Identifying label text for components

+

In order for the label text and accessible name to be matched, it is first necessary to determine which text on the screen should be considered a label for any given control. There are often multiple text strings in a user interface that may be relevant to a control. However, there are reasons why it is best to conservatively interpret the label as being only the text in close proximity.

+

Conventionally the label for user interface components is the adjacent text string. The typical positioning for left to right languages is:

+ +

The rationale for some of these conventions is explained in G162: Positioning labels to maximize predictability of relationships. +

+

It is important to bias towards treating only the adjacent text as a label because liberal interpretations of what constitutes a text label can jeopardize the value of this Success Criterion (SC) by lessening predictability. Isolating the label to the single string in close proximity to the component makes it easier for developers, testers, and end users to identify the label targeted for evaluation in this SC. Predictable interpretation of labeling allows users of speech recognition technologies to interact with the element via its conventionally positioned label, and allows users of screen reading technologies to enjoy consistency between the nearby visible label and the announced name of the component.

+

Note that placeholder text within an input field is not considered an appropriate means of providing a label. The HTML5 specification states The placeholder attribute should not be used as an alternative to a <label>. However, it is worth noting that "label" in that HTML5 statement is in code brackets and links to the label element. For the purposes of this Label in Name Success Criterion, "label" is not used in such a programmatic sense but is simply referring to a text string in close visual proximity to a component. As such, in the absence of any other nearby text string (as described in the preceding list), if an input contains placeholder text, such text may be a candidate for Label in Name. This is supported both through the accessible name calculation (discussed later) and from the practical sense that where a visible label is not otherwise provided, it is likely that a speech-input user may attempt to use the placeholder text value as a means of interacting with the input.

+
+

Text labels "express something in human language"

+
+

Symbolic text characters

+

For the purposes of this SC, text should not be considered a visible label if it is used in a symbolic manner, rather than directly expressing something in human language as per the definition of text in WCAG. For example, 1.4.5 Images of Text describes considerations for "symbolic text characters." In the images of text example "B", "I", and "ABC" appear on icons in a text editor, where they are meant to symbolize the functions for Bold, Italics, and Spelling, respectively. In such a case, the accessible name should be the function the button serves (e.g., "Spell check" or "Check spelling"), not the visible symbolic characters. A similar text editor is shown in the figure below.

+
+ Icons for transforming text, including heading, bold, italic, quote, code, and link, along with icons for ordered and unordered lists and other controls +
A detail of the rich text editor in Github, showing a variety of unlabeled icons, including icons resembling text characters.
+
+

Likewise, where an author has used a greater-than symbol (">") to mimic the appearance of the right-facing arrow, the text does not convey something in human language. It is a symbol, in this scenario likely meant to mimic the icons used for a "Play" button or a "Next" arrow.

+

Punctuation and capitalization

+
+
+

The use of punctuation and capitalization in labels may also be considered optional for the same reason. For example, the colon conventionally added at the end of input labels does not express something in human language, and capitals on the first letter of each word in a label do not normally alter the words' meaning. This is particularly relevant in the context of this SC, since it is primarily aimed at users of speech recognition; capitals and most punctuation are frequently ignored when a user speaks a label as a means of interacting with a control.

+

While it is certainly not an error to include the colon and capitalization in the accessible name, a computed name of "First name" should not be considered a failure of "First Name:".
+
+Likewise, "Next…" visibly shown on a button could have "Next" as the accessible name. When in doubt, where a meaningful visible label exists, match the string exactly for the accessible name.
+

+
+
+ +

Mathematical expressions and formulae

+

Mathematical expressions are an exception to the previous subsection about symbolic characters. Math symbols can be used as labels; for example "11×3=33" and "A>B" convey meaning. The label should not be overwritten in the accessible name, and substitutions of words where a formula is used should be avoided since there are multiple ways to express the same equation. For example, making the name "eleven multiplied by three is equivalent to thirty-three" might mean a user who said "eleven times three equals thirty-three" may not match. It is best to leave the formulas as used in the label and count on the user's familiarity with their speech software to achieve a match. Further, converting a mathematical formula label into an accessible name that is a spelled-out equivalent may create issues for translation. The name should match the label's formula text. Note that a consideration for authors is to use the proper symbol in the formula. For instance 11x3 (with a lower or upper case letter X), 11*3 (with the asterisk symbol), and 11×3 (with the &times; symbol) are all easy for sighted users to interpret as meaning the same formula, but may not all be matched to "11 times 3" by the speech recognition software. The proper operator symbol (in this case the times symbol) should be used.
+ + + +

+
+
+
+ +

Accessible Name and Description Computation specification

+

It is important to understand how the accessible name is derived. The Accessible Name and Description Computation 1.1 and the HTML Accessibility API Mappings 1.0 describe how the accessible name is computed, including which attributes are considered in its calculation, and in what order of preference. If a component has multiple possible attribute values that could be used for its accessible name, only the most preferred of those values will be computed. None of the other, less preferred values will be part of the name. For the most part, existing established programmatic relationships between labels and controls are reinforced by the specification.

+

Other text displayed on the screen that is correctly coded to meet 1.3.1: Info and Relationships is not normally factored into the calculation for the accessible name of a UI component without author intervention (via ARIA labeling techniques). The most common of these are:

+ +

Such textual information may constitute part of the component's description. So from both a programmatic viewpoint, and from the conservative tactic of only considering a label to be "adjacent text," neither headings, instructions, nor group 'labels' should normally be considered labels for the purpose of this Success Criterion.

+

It is important to note that the specification allows authors to override the name calculated through native semantics. Both aria-label and aria-labelledby take precedence in the name calculation, overriding the visible text as the accessible name even when the visible text label is programmatically associated with the control. For this reason, when a visible label already exists, aria-label should be avoided or used carefully, and aria-labelledby should be used as a supplement with care.

+

Finally, aria-describedby is not included in the Accessible Name computation (instead it is part of the Accessible Description computation). By convention, text associated with a control through aria-describedby is announced immediately after the accessible name by screen readers. Therefore, the context of headings, instructions, and group labels can be provided through the accessible description to assist users of screen readers without affecting the experience of those who navigate using speech recognition software.

+
+
+ + +
+

Benefits

+ +
+
+

Examples

+ +
+
+

Related Resources

+ +
+
+

Techniques

+
+

Sufficient Techniques

+ +
+
+

Advisory Techniques

+

Although not required for conformance, the following additional techniques should + be considered in order to make content more accessible. Not all techniques can be + used or would be effective in all situations. +

+ +
+
+

Failure Techniques

+ +
+
+ + diff --git a/understanding/21/jednoznakowe-skroty-klawiaturowe.html b/understanding/21/jednoznakowe-skroty-klawiaturowe.html new file mode 100644 index 0000000000..69c95fd7b8 --- /dev/null +++ b/understanding/21/jednoznakowe-skroty-klawiaturowe.html @@ -0,0 +1,75 @@ + + + + + WCAG 2.0 Understanding Page + + + +

Understanding Character Key Shortcuts

+
+

Intent

+

The intent of this Success Crition is to reduce accidental activation of keyboard shortcuts. Character key shortcuts work well for many keyboard users, but are inappropriate and frustrating for speech input users — whose means of input is strings of letters — and for keyboard users who are prone to accidentally hit keys. +To rectify this issue, authors need to allow users to turn off or reconfigure shortcuts that are made up of only character keys. +

+

Note that this success criterion doesn't affect components such as listboxes and drop-down menus. Although these components contain values (words) that may be selected by one or more character keys, the shortcuts are only active when the components have focus. Other components such as menus may be accessed or opened with a single non-character shortcut (e.g., Alt or Alt+F) before pressing a single character key to select an item. This makes the full path to invoking a menu a two-step shortcut that includes a non-printable key. Accesskeys are also not affected because they include modifier keys.

+

Background on the mechanics of speech input:

  +

Speech Input users generally work in a single mode where they can use a mix of dictation and speech commands. This works well because the user knows to pause before and after commands, and commands are usually at least two words long. So, for instance, a user might say a bit of dictation, such as "the small boat", then pause, and say a command to delete that dictation, such as "Delete Line". In contrast, if the user were to say the two phrases together without a pause, the whole phrase would come out as dictation (i.e., "the small boat delete line"). Although speech input programs often include modes that listen only for dictation or only for commands, most speech users use the all-encompassing mode all the time because it is a much more efficient workflow. It could decrease command efficiency significantly if users were to change to command mode and back before and after issuing each command.

+

Speech users can also speak most keyboard commands (e.g., "press Control Foxtrot") without any problems. If the website or app is keyboard enabled, the speech user can also write a native speech macro that calls the keyboard command, such as "This Print" to carry out Ctrl+P.

+

Single-key shortcuts are the exception. While using single letter keys as controls might be appropriate and efficient for many keyboard users, single-key shortcuts are disastrous for speech users. The reason for this is that when only a single key is used to trip a command, a spoken word can become a barrage of single-key commands if the cursor focus happens to be in the wrong place.

+

For example, a speech-input user named Kim has her cursor focus in the main window of a web mail application that uses common keyboard shortcuts to navigate ("k"), archive ("y") and mute messages ("m"). A coworker named Mike enters her office and says "Hey Kim" and her microphone picks that up. The Y of "hey" archives the current message. K in "Kim" moves down one conversation and M mutes a message or thread. And, if Kim looks up and says "Hey Mike" without remembering to turn off the microphone, the same three things happen in a different sequence.

+

A user interacting with a webpage or web app that doesn't use single-character shortcuts doesn't have this problem. Inadvertent strings of characters from the speech application are not interpreted as shortcuts if a modifier key is required. A speech user filling in a text input form may find that a phrase that is accidentally picked up by the speech microphone results in stray text being entered into the field, but that is easily seen and undone. The Resources section of this page contains links to videos demonstrating these types of issues.

+
+

Benefits

+ +
+
+
+

Examples

+
+ +

Disable Shortcuts

+

A mechanism is provided to allow users to disable character-key shortcuts. The character key shortcuts are not the only way to carry out these commands. A speech user disables the shortcuts and can prevent words that are picked up by the microphone from triggering single-key shortcuts.

+
+
+ +

Alternate Control

+ +

A keyboard-only user is in a long issues thread. While reading the thread she accidentally hits the S key, which moves focus to the search bar at the top of the document. This causes her to lose her place and her train of thought. However, a mechanism is provided to allow users to change character-key shortcuts. She changes the shortcut to include another key so she can avoid future interruptions.

+
+ +
+
+

Resources

+

Web apps that use character-key shortcuts and allow users to disable and/or change these shortcuts:

+ +

Videos of speech user trouble with single character key shortcuts:

+ +
+
+

Techniques

+
+

Sufficient

+ +
+
+

Failure

+ +
+
+ + diff --git "a/understanding/21/jednoznakowe-skr\303\263ty-klawiaturowe.html" "b/understanding/21/jednoznakowe-skr\303\263ty-klawiaturowe.html" new file mode 100644 index 0000000000..69c95fd7b8 --- /dev/null +++ "b/understanding/21/jednoznakowe-skr\303\263ty-klawiaturowe.html" @@ -0,0 +1,75 @@ + + + + + WCAG 2.0 Understanding Page + + + +

Understanding Character Key Shortcuts

+
+

Intent

+

The intent of this Success Crition is to reduce accidental activation of keyboard shortcuts. Character key shortcuts work well for many keyboard users, but are inappropriate and frustrating for speech input users — whose means of input is strings of letters — and for keyboard users who are prone to accidentally hit keys. +To rectify this issue, authors need to allow users to turn off or reconfigure shortcuts that are made up of only character keys. +

+

Note that this success criterion doesn't affect components such as listboxes and drop-down menus. Although these components contain values (words) that may be selected by one or more character keys, the shortcuts are only active when the components have focus. Other components such as menus may be accessed or opened with a single non-character shortcut (e.g., Alt or Alt+F) before pressing a single character key to select an item. This makes the full path to invoking a menu a two-step shortcut that includes a non-printable key. Accesskeys are also not affected because they include modifier keys.

+

Background on the mechanics of speech input:

  +

Speech Input users generally work in a single mode where they can use a mix of dictation and speech commands. This works well because the user knows to pause before and after commands, and commands are usually at least two words long. So, for instance, a user might say a bit of dictation, such as "the small boat", then pause, and say a command to delete that dictation, such as "Delete Line". In contrast, if the user were to say the two phrases together without a pause, the whole phrase would come out as dictation (i.e., "the small boat delete line"). Although speech input programs often include modes that listen only for dictation or only for commands, most speech users use the all-encompassing mode all the time because it is a much more efficient workflow. It could decrease command efficiency significantly if users were to change to command mode and back before and after issuing each command.

+

Speech users can also speak most keyboard commands (e.g., "press Control Foxtrot") without any problems. If the website or app is keyboard enabled, the speech user can also write a native speech macro that calls the keyboard command, such as "This Print" to carry out Ctrl+P.

+

Single-key shortcuts are the exception. While using single letter keys as controls might be appropriate and efficient for many keyboard users, single-key shortcuts are disastrous for speech users. The reason for this is that when only a single key is used to trip a command, a spoken word can become a barrage of single-key commands if the cursor focus happens to be in the wrong place.

+

For example, a speech-input user named Kim has her cursor focus in the main window of a web mail application that uses common keyboard shortcuts to navigate ("k"), archive ("y") and mute messages ("m"). A coworker named Mike enters her office and says "Hey Kim" and her microphone picks that up. The Y of "hey" archives the current message. K in "Kim" moves down one conversation and M mutes a message or thread. And, if Kim looks up and says "Hey Mike" without remembering to turn off the microphone, the same three things happen in a different sequence.

+

A user interacting with a webpage or web app that doesn't use single-character shortcuts doesn't have this problem. Inadvertent strings of characters from the speech application are not interpreted as shortcuts if a modifier key is required. A speech user filling in a text input form may find that a phrase that is accidentally picked up by the speech microphone results in stray text being entered into the field, but that is easily seen and undone. The Resources section of this page contains links to videos demonstrating these types of issues.

+
+

Benefits

+ +
+
+
+

Examples

+
+ +

Disable Shortcuts

+

A mechanism is provided to allow users to disable character-key shortcuts. The character key shortcuts are not the only way to carry out these commands. A speech user disables the shortcuts and can prevent words that are picked up by the microphone from triggering single-key shortcuts.

+
+
+ +

Alternate Control

+ +

A keyboard-only user is in a long issues thread. While reading the thread she accidentally hits the S key, which moves focus to the search bar at the top of the document. This causes her to lose her place and her train of thought. However, a mechanism is provided to allow users to change character-key shortcuts. She changes the shortcut to include another key so she can avoid future interruptions.

+
+ +
+
+

Resources

+

Web apps that use character-key shortcuts and allow users to disable and/or change these shortcuts:

+ +

Videos of speech user trouble with single character key shortcuts:

+ +
+
+

Techniques

+
+

Sufficient

+ +
+
+

Failure

+ +
+
+ + diff --git a/understanding/21/komunikaty-o-stanie.html b/understanding/21/komunikaty-o-stanie.html new file mode 100644 index 0000000000..fafd4a879a --- /dev/null +++ b/understanding/21/komunikaty-o-stanie.html @@ -0,0 +1,178 @@ + + + + + WCAG 2.0 Understanding Page + + + +

Status Messages
+ Understanding SC 3.2.6

+
+

Intent of this Success Criterion

+

The intent of this Success Criterion is to make users aware of important changes in content that are not given focus, and to do so in a way that doesn't unnecessarily interrupt their work.

+

The intended beneficiaries are blind and low vision users of assistive technologies with screen reader capabilities. An additional benefit is that assistive technologies for users with cognitive disabilities may achieve an alternative means of indicating (or even delaying or supressing) status messages, as preferred by the user.

+

The scope of this Success Criterion is specific to changes in content that involve status messages. A status message is a defined term in WCAG. There are two main criteria that determine whether something meets the definition of a status message:

+
    +
  1. the message provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors;
  2. +
  3. the message is not delivered via a change in context.
  4. +
+

Information can be added to pages which does not meet the definition of a status message. For example, the list of results obtained from a search are not considered a status update and thus are not covered by this Success Criterion. However, brief text messages displayed about the completion or status of the search, such as "Searching...", "18 results returned" or "No results returned" would be status updates if they do not take focus. Examples of status messages are given in the section titled Status Message Examples below.

+ +

This Success Criterion specifically addresses scenarios where new content is added to the page without changing the user's context. Changes of context, by their nature, interrupt the user by taking focus. They are already surfaced by assistive technologies, and so have already met the goal to alert the user to new content. As such, messages that involve changes of context do not need to be considered and are not within the scope of this Success Criterion. Examples of scenarios that add new content by changing the context are given in the section titled Examples of Changes That Are Not Status Messages below.

+ +
+

Benefits

+ +
+
+
+

Examples of Success Criterion 3.2.6

+ +
+

Status Message Examples

+
    +
  1. After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader announces, "Five results returned".
  2. +
  3. After a user presses an Add to Shopping Cart button, a section of content near the Shopping Cart icon adds the text "5 items". A screen reader announces "Five items" or "Shopping cart, five items".
  4. +
  5. After a user enters incorrect text in an input called Postal Code, a message appears above the input reading "Invalid entry". The screen reader announces, "Invalid entry" or "Postal code, invalid entry".
  6. +
  7. After a user activates a process, an icon symbolizing 'busy' appears on the screen. The screen reader announces "application busy".
  8. +
  9. An application displays a progressbar to indicate the status of an upgrade. The element is assigned a suitable role. The screen reader provides intermittent announcements of the progress.
  10. +
  11. After a user submits a form, text is added to the existing form which reads, "Your form was successfully submitted." The screen reader announces the same message.
  12. +
  13. After a user unsuccessfully fills in a form because some of the data is in the incorrect format, text is added to the existing form which reads "5 errors on page". The screen reader announces the same message.
  14. +
  15. After a user puts a photo in an album in an online photo app, a snackbar displays the message "Saved in 'Wedding' album", which is also read by a screen reader.
  16. +
+
+
+

Examples of Status Messages that Do Not Add New Text to the Screen

+

This Success Criterion was intentionally worded to apply primarily when visible text is added to (or becomes visible on) the page. The reason for this is that where new text is displayed, it is intended to be visible to all users. By providing a programmatic means of ensuring the text is also surfaced through assistive technologies, the Success Criterion provides the same information to users who cannot or may not see it. However, not all changes to content involve the addition of text to the screen. The following are all considerations relevant to this Success Criterion:

+ +
+

Non-displayed text specific to AT users

+ +

There may be cases where the addition of visible text does not by itself convey sufficient information to the user of assistive technology. For example, the proximity of new content to other pieces of information on the screen may provide a visual context that is lacking in the text alone.

+

In such cases, authors may wish to designate additional content for inclusion in the status message, including non-displayed text which can be provided to the assistive technologies, for added context. Important considerations regarding the appropriate use of such techniques are further discussed in the Sufficient Techniques.

+
+
+

Modification of status text

+

If a status message persists on the page, modifications to this text are usually equivalent to a new status message. An example would be a shopping cart which updates text from reading "0 items" to "3 items". Typical methods of writing such changes in the page content result in the entire modified text string being considered a new change, and thus read by assistive technologies. However, where only the number in this string was coded as an updated chunk of content, the resulting experience for screen reader users could be to only hear "three", which may not be sufficient information to provide context for the user. In such situations, marking the entire "3 items" string as the status text would normally be a better solution. See Sufficient Techniques for more discussion, including the use of aria-atomic. In this case it would also be a courtesy to add offscreen text such as "in shopping cart" to the message.

+
+
+

Removal of status text

+

In situations where status text is entirely removed, its absence may itself convey information about the status. The most obvious example of this is where a message is displayed that the system is "busy" or "waiting". For a sighted user, when this text disappears, it is normally an indication that the state is now available. However non-sighted users would be unaware of this change, unless the end of the waiting state results in a change of context for the user. Where updating the visible message (e.g., to "system available") is not feasible, the use of a non-visible status message, such as "system available", ensures equivalent status information is provided. See Sufficient Techniques for more discussion.

+
+
+

Non-textual status content

+

Changes in content are not restricted to text changes. Where an icon or sound indicates a status message, this information will be surfaced by the screen reader through a combination of two things: 1) existing WCAG requirements governing text alternatives (under SC 1.1.1 Non-Text Content), and 2) the requirement of this current Success Criterion to supply an appropriate role.

+
+
+ +
+

Examples of Changes That Are Not Status Messages

+ +

The following examples identify situations where no additional author action is necessary. All cases are excepted from this Success Criterion since they do not meet the definition of "status messages."

+ +
+
+

Other uses of live regions or alerts

+ +

Live regions and alerts can be usefully applied in many situations where a change of content takes place which does not constitute a status message, as defined in this Success Criterion. However, there is a risk of making an application too "chatty" for a screen reader user. User testing should be carried out to ensure the appropriate level of feedback is achieved. The Advisory Techniques provide examples of how alerts or live regions can enhance the user experience.

+

The purpose of this success criterion is not to force authors to generate new status messages. Its intent is to ensure that when status messages are displayed, they are programmatically identified in a way that allows assistive technologies to present them to the user.

+ +
+
+ + +
+

Techniques

+
+

Sufficient

+
+ +

Situation A: If a status message advises on the success or results of an action, or the state of an application:

+ +
+ +
+ +

Situation B: If a status message conveys a suggestion, or a warning on the existence of an error:

+ + +

Not all examples in the preceding general techniques use status messages to convey warnings or errors to users. A role of "alert" is only necessary where a change of context does not take place.

+ +
+
+ +

Situation C: If a status message conveys information on the progress of a process:

+ +
+
+
+

Advisory

+ + +
+
+

Failure

+ +
+
+ + diff --git a/understanding/21/kontrast-elementow-nietekstowych.html b/understanding/21/kontrast-elementow-nietekstowych.html new file mode 100644 index 0000000000..b235dbafd3 --- /dev/null +++ b/understanding/21/kontrast-elementow-nietekstowych.html @@ -0,0 +1,535 @@ + + + + + Understanding Non-text Contrast + + + +

Understanding Non-text Contrast

+
+

Intent

+ + +

The intent of this Success Criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision. The requirements and rationale are similar to those for large text in 1.4.3 Contrast (Minimum).

+ +

Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality of the webpage then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology.

+ +
+

The 3:1 contrast ratios referenced in this Success Criterion is intended to be treated as threshold values. When comparing the computed contrast ratio to the Success Criterion ratio, the computed values should not be rounded (e.g. 2.999:1 would not meet the 3:1 threshold).

+
+ +
+

Active User Interface Components

+ +

For active controls any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. Also, any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.

+ +

This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.

+ +

Boundaries

+ +

This success criterion does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button or placeholder text inside a text input is visible and there is no visual indication of the hit area then the Success Criterion is passed. If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)). Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.

+ +
+ Two buttons, the first with no visual indicator except text saying 'button'. The second is the same but with an added grey border. +
A button (active control) without a visual boundary, and the same button with a focus indicator that is a defined visual boundary of grey (#949494) adjacent to white.
+
+ +

Adjacent colors

+

For user interface components 'adjacent colors' means the colors adjacent to the component. For example, if an input has a white internal background, dark border, and white external background the 'adjacent color' to the component would be the white external background.

+
+ Standard text input with a label, white internal and external background with a dark border. +
A standard text input with a grey border (#767676) and white adjacent color outside the component
+
+ +

If components use several colors, any color which does not interfere with identifying the component can be ignored for the purpose of measuring contrast ratio. For example, a 3D drop-shadow on an input, or a dark border line between contrasting backgrounds is considered to be subsumed into the color closest in brightness (perceived luminance).

+ +

The following example shows an input that has a light background on the inside and a dark background around it. The input also has a dark grey border which is considered to be subsumed into the dark background. The border does not interfere with identifying the component, so the contrast ratio is taken between the white background and dark blue background.

+ +
+ A text box with a dark background and light border, with a white background. +
The contrast of the input background (white) and color adjacent to the control (dark blue #003366) is sufficient. There is also a border (silver) on the component that is not required to contrast with either.
+
+ +

For visual information required to identify a state, such as the check in a checkbox or the thumb of a slider, that part might be within the component so the adjacent color might be another part of the component.

+ +
+ A purple box with a light grey check. +
A customized checkbox with light grey check (#E5E5E5), which has a contrast ratio of 5.6:1 with the purple box (#6221EA).
+
+ +

It is possible to use a flat design where the status indicator fills the component and does not contrast with the component, but does contrast with the colors adjacent to the component.

+ + +
+ Four radio buttons, the first is a plain circle labelled 'Not selected'. The second shows the circle filled with a darker color than the border. The third is filled with the same color as the border. The fourth has an inner filled circle with a gap between it and the outer border. +
The first radio button shows the default state with a grey (#949494) circle. The second and third show the radio button selected and filled with a color that contrasts with the color adjacent to the component. The last example shows the state indicator contrasting with the component colors.
+
+ + + +

The Use of Color success criterion addresses changing only the color (hue) of an object or text without otherwise altering the object's form. The principle is that contrast ratio (the difference in brightness) can be used to distinguish text or graphics. For example, G183 is a technique to use a contrast ratio of 3:1 with surrounding text to distinguish links and controls. In that case the Working Group regards a link color that meets the 3:1 contrast ratio relative to the non-linked text color as satisfying the Success Criterion 1.4.1 Use of color since it is relying on contrast ratio as well as color (hue) to convey that the text is a link.

+ +

Non-text information within controls that uses a change of hue alone to convey the value or state of an input, such as a 1-5 star indicator with a black outline for each star filled with either yellow (full) or white (empty) is likely to fail the Use of color criterion rather than this one.

+ +
+ Two star ratings, one uses a black outline (on white) with a black fill to indicate it is checked. The second has a yellow fill and a thicker dark border. +
+ Two examples which pass this success criterion, using either a solid fill to indicate a checked-state that has contrast, or a thicker border as well as yellow fill. +
+
+
+ Two star ratings, the first uses 5 stars with a black outline and a yellow or white fill, where yellow indicates checked. The second uses only pale yellow stars on white. +
+ Two examples which fail a success criterion, the first fails the Use of color criterion due to relying on yellow and white hues. The second example fails the Non-text contrast criterion due to the yellow (#FFF000) to white contrast ratio of 1.2:1. +
+
+ +

Using a change of contrast for focus and other states is a technique to differentiate the states. This is the basis for G195: Using an author-supplied, highly visible focus indicator, and more techniques are being added.

+ + + + +

In combination with 2.4.7 Focus Visible, the visual focus indicator for a component must have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.

+ +

Most focus indicators appear outside the component - in that case it needs to contrast with the background that the component is on. Other cases include focus indicators which are:

+ + + +
+ Three blue buttons, the middle has a thick yellow outline well inside the border of the button. +
+ The internal yellow indicator (#FFFF00) contrasts with the blue button background (#4189B9), passing the criterion. +
+
+ + +
+ Three blue buttons on a white background, the middle has a light yellow outline outside of the botton's non-focused boundary. +
+ The external yellow indicator (#FFFF00) does not contrast with the white background (#FFF) which the component is on, failing the criterion. +
+
+ +
+ Three blue buttons on a white background, the middle has a dark green outline outside of the botton's non-focused boundary. +
+ The external green indicator (#008000) does contrast with the white background (#FFF) which the component is on, passing the criterion. It does not need to contrast with both the component background and the component. +
+
+

Although the figure above with a dark outline passes non-text contrast, it is not a good indicator unless it is very thick. There is a criterion in WCAG 2.2 that addresses this aspect, Focus Appearance.

+ +

If an indicator is partly inside and partly outside the component, either part of the indicator could provide contrast.

+ +
+ Three blue buttons on a white background, the middle has the outline of a yellow rectangle that is partly inside the button's boundary, and partly outside on the white background. +
+ The focus indicator is partially inside, partially outside the button. The internal part of the yellow indicator (#FFFF00) contrasts with the blue button background (#4189B9), passing the criterion. +
+
+ +

If the focus indicator changes the border of the component within the visible boundary it must contrast with the component. Typically an outline goes around (outside) the visible boundary of the component, in this case changing the border is just inside the visible edge of the component.

+ +
+ Three blue buttons on a white background, the center button has a green border exactly on the outer boundary of the button. +
+ The border of the control changes from blue (#4189B9) to green (#4B933A). This is within the component and does not contrast with the inside background of the component therefore fails non-text contrast. +
+
+ +
+ Three blue buttons with a black border on a white background, the center button has a green border inside, adjacent to the inner background and black border. +
+ An inner border of dark green (#008000) does contrast with the black border, but does not contrast with the blue component background, therefore fails non-text contrast. +
+
+ +
+ Three blue buttons with a black border on a white background, the center button has a white border inside, adjacent to the inner background and black border. +
+ An inner border of white contrasts with the black border and the blue component background, therefore passes non-text contrast. +
+
+ +

Note that this Success Criterion does not directly compare the focused and unfocused states of a control - if the focus state relies on a change of color (e.g., changing only the background color of a button), this Success Criterion does not define any requirement for the difference in contrast between the two states.

+ +
+ Three blue buttons, the center button is a lighter blue than the others. +
+ The change of background within the component is not in scope of non-text contrast. However, this would not pass Use of color. +
+
+ +
+

Active User Interface Component Examples

+

For designing focus indicators, selection indicators and user interface components that need to be perceived clearly, the following are examples that have sufficient contrast.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Active User Interface Component Examples +
TypeDescriptionExamples
Link TextDefault link text is in the scope of 1.4.3 Contrast (Minimum), and the underline is sufficient to indicate the link.A browser-default styled link, blue with an underline.
Default focus styleLinks are required to have a focus indicator by 2.4.7 Focus Visible. Where the user agent's default appearance of interactive controls (such as links, form fields or buttons) is not adjusted, the default focus style is sufficient.A browser-default styled link, with a black dotted outline around the link.
ButtonsA button which has a distinguishing indicator such as position, text style, or context does not need a contrasting visual indicator to show that it is a button, although some users are likely to identify a button with an outline that meets contrast requirements more easily.Button with a faint blue background.
Text input (minimal)Where a text-input has a visual indicator to show it is an input, such as a bottom border (#767676), that indicator must meet 3:1 contrast ratio. + A label with a text input shown by a bottom border and faint grey background. +
Text inputWhere a text-input has an indicator such as a complete border (#767676), that indicator must meet 3:1 contrast ratio. + A label with a text input shown by a complete border. +
Text input focus styleA focus indicator is required. While in this case the additional gray (#CCC) outline has an insufficient contrast of 1.6:1 against the white (#FFF) background, the cursor/caret which is displayed when the input receives focus does provide a sufficiently strong visual indication. + A label with a text input with a faint gray outline and a visible cursor/caret. +
Text input using background colorText inputs that have no border and are differentiated only by a background color must have a 3:1 contrast ratio to the adjacent background (#043464). + A label with a text input shown by a dark blue page background, and white box. +
Toggle buttonThe toggle button's internal background (#070CD5) has a good contrast with the external white background. Also, the round toggle within (#7AC2FF) contrasts with the internal background.Dark blue oval toggle button with light blue internal indicator.
Dropdown indicatorThe down-arrow is required to understand that there is drop-down functionality, it has a contrast of 4.7:1 for the white icon on dark gray (#6E747B).Button with the word Menu, and a down-arrow icon next to it.
Dropdown indicatorThe down-arrow is required to understand that there is drop-down functionality, it has a contrast of 21:1 for the black icon on white.Text with the word Menu, and a down-arrow icon next to it.
Checkbox - emptyA black border on a white background indicates the checkbox.Black square border with a text label.
Checkbox - checkedA black border on a white background indicates the checkbox, the black tick shape indicates the state of checked.Black square border with a tick inside, and a text label.
Checkbox - FailThe grey border color of the checkbox (#9D9D9D) has a contrast ratio of 2.7:1 with the white background, which is not sufficient for the visual information required to identify the checkbox.Grey box on a white background with a black tick in the middle.
Checkbox - Subtle hover styleA black border on a white background indicates the checkbox, when the mouse pointer activates the subtle hover state adds a grey background (#DEDEDE). The black border has a 15:1 contrast ratio with the grey background.Blackbox on a circular grey background next to a text label.
Checkbox - Subtle focus style - failA focus indicator is required. If the focus indicator is styled by the author, it must meet the 3:1 contrast ratio with adjacent colors. In this case, the gray (#AAA) indicator has an insufficient ratio of 2.3:1 with the white (#FFF) adjacent background. + Unchecked checkbox with a thick gray additional outline as focus indication. +
+ +
+
+

Inactive User Interface Components

+ +

User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements in WCAG 2.1. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.

+
+ Grey button with non-contrasting grey text. +
An inactive button using default browser styles
+
+

Inactive components, such as disabled controls in HTML, are not available for user interaction. The decision to exempt inactive controls from the contrast requirements was based on a number of considerations. Although it would be benefitial to some people to discern inactive controls, a one-size-fits-all solution has been very difficult to establish. A method of varying the presentation of disabled controls, such as adding an icon for disabled controls, based on user preferences is anticipated as an advancement in the future.

+
+
+ + +
+

Graphical Objects

+ + +

The term "graphical object" applies to stand-alone icons such as a print icon (with no text), and the important parts of a more complex diagram such as each line in a graph. For simple graphics such as single-color icons the entire image is a graphical object. Images made up of multiple lines, colors and shapes will be made of multiple graphical objects, some of which are required for understanding.

+ +

Not every graphical object needs to contrast with its surroundings - only those that are required for a user to understand what the graphic is conveying. Gestalt principles such as the "law of continuity" can be used to ignore minor overlaps with other graphical objects or colors.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ImageNotes
An orange circle with a white telephone icon in the middle.

The phone icon is a simple shape within the orange (#E3660E) circle. The meaning can be understood from that icon alone, the background behind the circle is irrelevant. The orange background and the white icon have a contrast ration greater than 3:1, which passes.

+

The graphical object is the white phone icon.

+
A red magnet with grey tips and a black outline.

A magnet can be understood by the "U" shape with lighter colored tips. Therefore to understand this graphic you should be able to discern the overall shape (against the background) and the lighter colored tips (against the rest of the U shape and the background).

+

The graphical objects are the "U" shape (by outline or by the solid red color #D0021B), and each tip of the magnet.

+
A yellow arrow pointing down with a pound sign (currency) in the middle.

The symbol to show a currency (the £) going down can be understood with recognition of the shape (down arrow) and the currency symbol (pound icon with the shape which is part of the graphic). To understand this graphic you need to discern the arrow shape against the white background, and the pound icon against the yellow background (#F5A623).

+

The graphical objects are the shape and the currency symbol.

+
+ A line chart of votes across a region, with 4 lines of different colors tracking over time.

In order to understand the graph you need to discern the lines and shapes for each condition. To perceive the values of each line along the chart you need to discern the grey lines marking the graduated 100 value increments.

+

The graphical objects are the lines in the graph, including the background lines for the values, and the colored lines with shapes.

+

The lines should have 3:1 contrast against their background, but as there is little overlap with other lines they do not need to contrast with each other or the graduated lines. (See the testing principles below.)

+
A pie chart with small gaps between each slice showing the white background, and a dark outline around light colored slices.

To understand the pie chart you have to discern each slice of the pie chart from the others.

+

The graphical objects are the slices of the pie (chart).

+

Note: If the values of the pie chart slices were also presented in a conforming manner (see the Pie Charts example for details), the slices would not be required for understanding.

+
+ +

Taking the magnet image above as an example, the process for establishing the graphical object(s) is to:

+ + +

Due to the strong contrast of the red and white, it would also be possible to only put the outline around the white tips of the magnet and it would still conform.

+ +
+

Required for Understanding

+ +

The term "required for understanding" is used in the Success Criterion as many graphics do not need to meet the contrast requirements. If a person needs to perceive a graphic, or part of a graphic (a graphical object) in order to understand the content it should have sufficient contrast. However, that is not a requirement when:

+
    +
  • +

    A graphic with text embedded or overlayed conveys the same information, such as labels and values on a chart.

    +

    Text within a graphic must meet 1.4.3 Contrast (Minimum).

    +
  • +
  • The graphic is for aesthetic purposes that does not require the user to see or understand it to understand the content or use the functionality.
  • +
  • The information is available in another form, such as in a table that follows the graph, which becomes visible when a "Long Description" button is pressed.
  • +
  • The graphic is part of a logo or brand name (which is considered "essential" to its presentation).
  • +
+
+
+

Gradients

+ +

Gradients can reduce the apparent contrast between areas, and make it more difficult to test. The general principles is to identify the graphical object(s) required for understanding, and take the central color of that area. If you remove the adjacent color which does not have sufficient contrast, can you still identify and understand the graphical object?

+
+ Two versions of a blue circle with an 'i' indicating information. The first example has a blue gradient background, the second is missing the upper half of the background which obscures the i. +
Removing the background which does not have sufficient contrast highlights that the graphical object (the "i") is not then understandable.
+
+
+

Dynamic Examples

+ +

Some graphics may have interactions that either vary the contrast, or display the information as text when you mouseover/tap/focus each graphical object. In order for someone to discern the graphics exist at all, the unfocused default version must already have sufficiently contrasting colors or text. For the area that receives focus, information can then be made available dynamically as pop-up text, or be foregrounded dynamically by increasing the contrast.

+ + +
+ A pie chart with one slice highlighted and a box hovering next to it that shows the data and indicates the source in the key. +
A dynamic chart where the current 'slice' is hovered or focused, which activates the associated text display of the values and highlights the series
+
+
+
+

Infographics

+ +

Infographics can mean any graphic conveying data, such as a chart or diagram. On the web it is often used to indicate a large graphic with lots of statements, pictures, charts or other ways of conveying data. In the context of graphics contrast, each item within such an infographic should be treated as a set of graphical objects, regardless of whether it is in one file or separate files.

+ +

Infographics often fail to meet several WCAG level AA criteria including:

+ + + +

An infographic can use text which meets the other criteria to minimise the number of graphical objects required for understanding. For example, using text with sufficient contrast to provide the values in a chart. A long description would also be sufficient because then the infograph is not relied upon for understanding.

+ +
+
+

Essential Exception

+ +

Graphical objects do not have to meet the contrast requirements when "a particular presentation of graphics is essential to the information being conveyed". The Essential exception is intended to apply when there is no way of presenting the graphic with sufficient contrast without undermining the meaning. For example:

+
    +
  • Logotypes and flags: The brand logo of an organization or product is the representation of that organization and therefore exempt. Flags may not be identifiable if the colors are changed to have sufficient contrast.
  • +
  • Sensory: There is no requirement to change pictures of real life scenes such as photos of people or scenery.
  • +
  • Representing other things: If you cannot represent the graphic in any other way, it is essential. Examples include: + +
  • +
+
+ +
+

Testing Principles

+

A summary of the high-level process for finding and assessing non-text graphics on a web page:

+
    +
  • Identify each user-interface component (link, button, form control) on the page and: +
      +
    • Identify the visual (non-text) indicators of the component that are required to identify that a control exists, and indicate the current state. In the default (on page load) state, test the contrast ratio against the adjacent colors.
    • +
    • Test those contrast indicators in each state.
    • +
    +
  • +
  • Identify each graphic on the page that includes information required for understanding the content (i.e. excluding graphics which have visible text for the same information, or are decorative) and: +
      +
    • Check the contrast of the graphical object against its adjacent colors;
    • +
    • If there are multiple colors and/or a gradient, choose the least contrasting area to test;
    • +
    • If it passes, move to the next graphical object;
    • +
    • If the least-contrasting area is less than 3:1, assume that area is invisible, is the graphical object still understandable?
    • +
    • If there is enough of the graphical object to understand, it passes, else fail.
    • +
    +
  • +
+

The techniques below each have testing criteria, and the related criteria for Focus visible (2.4.7), Use of color (1.4.1), and Contrast minimum also have techniques.

+
+ +
+ +
+ +
+

Benefits

+

People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness difference) of 3:1 or greater can make these items more distinguishable when the person does not see a full range of colors.

+
+ +
+

Graphical Object Examples

+ +
+

Pie Charts

+

Pie charts make a good case study for the graphical objects part of this success criterion, the following pie charts are intended to convey the proportion of market share each browser has. Please Note: The actual figures are made up, these are not actual market shares.

+
+ Failing pie chart +
+

Fail: The pie chart has labels for each slice (so passes 1.4.1 Use of Color), but in order to understand the proportions of the slices you must discern the edges of the slices (the graphical objects conveying essential information), and the contrast between the slices is not 3:1 or greater.

+
+
+
+ Not applicable pie chart +
+

Not applicable: The pie chart has visible labels and values that convey equivalent information to the graphical objects (the pie slices).

+
+
+
+ Passing pie chart +
+

Pass: The pie chart has visible labels, and sufficient contrast around and between the slices of the pie chart (the graphical objects). A darker border has been added around the yellow slice in order to achieve the contrast level.

+
+
+
+
+

Infographics

+
+ An infographic showing lightly colored circles of various sizes to indicate the size of five different social networks +
+

Fail: Discerning the circles is required to understand the size of network and discerning the icons in each circle is required to identify which network it shows.

+
+
+

The graphical objects are the circles (measured against the background) and the icons in each circle (measured against the circle's background).

+
+ The same infographic with contrasting text, dark borders around the circles, and contrasting icons. +
+

Pass: The circles have contrasting borders and the icons are a contrasting dark color against the light circle backgrounds.

+
+
+

There are many possible solutions to ensuring contrast, the example shows the use of borders. Other techniques are to use darker colors for the circle backgrounds, or to add text labels & values for each item.

+
+
+ + +
+

Resources

+ +
+
+

Techniques

+
+

Sufficient

+
+

Situation A: Color is used to identify user interface components or used to identify user interface component states

+ +
+
+

Situation B: Color is required to understand graphical content

+ +
+ +
+
+

Failures

+ +
+
+ + diff --git "a/understanding/21/kontrast-element\303\263w-nietekstowych.html" "b/understanding/21/kontrast-element\303\263w-nietekstowych.html" new file mode 100644 index 0000000000..b235dbafd3 --- /dev/null +++ "b/understanding/21/kontrast-element\303\263w-nietekstowych.html" @@ -0,0 +1,535 @@ + + + + + Understanding Non-text Contrast + + + +

Understanding Non-text Contrast

+
+

Intent

+ + +

The intent of this Success Criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision. The requirements and rationale are similar to those for large text in 1.4.3 Contrast (Minimum).

+ +

Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality of the webpage then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology.

+ +
+

The 3:1 contrast ratios referenced in this Success Criterion is intended to be treated as threshold values. When comparing the computed contrast ratio to the Success Criterion ratio, the computed values should not be rounded (e.g. 2.999:1 would not meet the 3:1 threshold).

+
+ +
+

Active User Interface Components

+ +

For active controls any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. Also, any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.

+ +

This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.

+ +

Boundaries

+ +

This success criterion does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button or placeholder text inside a text input is visible and there is no visual indication of the hit area then the Success Criterion is passed. If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)). Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.

+ +
+ Two buttons, the first with no visual indicator except text saying 'button'. The second is the same but with an added grey border. +
A button (active control) without a visual boundary, and the same button with a focus indicator that is a defined visual boundary of grey (#949494) adjacent to white.
+
+ +

Adjacent colors

+

For user interface components 'adjacent colors' means the colors adjacent to the component. For example, if an input has a white internal background, dark border, and white external background the 'adjacent color' to the component would be the white external background.

+
+ Standard text input with a label, white internal and external background with a dark border. +
A standard text input with a grey border (#767676) and white adjacent color outside the component
+
+ +

If components use several colors, any color which does not interfere with identifying the component can be ignored for the purpose of measuring contrast ratio. For example, a 3D drop-shadow on an input, or a dark border line between contrasting backgrounds is considered to be subsumed into the color closest in brightness (perceived luminance).

+ +

The following example shows an input that has a light background on the inside and a dark background around it. The input also has a dark grey border which is considered to be subsumed into the dark background. The border does not interfere with identifying the component, so the contrast ratio is taken between the white background and dark blue background.

+ +
+ A text box with a dark background and light border, with a white background. +
The contrast of the input background (white) and color adjacent to the control (dark blue #003366) is sufficient. There is also a border (silver) on the component that is not required to contrast with either.
+
+ +

For visual information required to identify a state, such as the check in a checkbox or the thumb of a slider, that part might be within the component so the adjacent color might be another part of the component.

+ +
+ A purple box with a light grey check. +
A customized checkbox with light grey check (#E5E5E5), which has a contrast ratio of 5.6:1 with the purple box (#6221EA).
+
+ +

It is possible to use a flat design where the status indicator fills the component and does not contrast with the component, but does contrast with the colors adjacent to the component.

+ + +
+ Four radio buttons, the first is a plain circle labelled 'Not selected'. The second shows the circle filled with a darker color than the border. The third is filled with the same color as the border. The fourth has an inner filled circle with a gap between it and the outer border. +
The first radio button shows the default state with a grey (#949494) circle. The second and third show the radio button selected and filled with a color that contrasts with the color adjacent to the component. The last example shows the state indicator contrasting with the component colors.
+
+ + + +

The Use of Color success criterion addresses changing only the color (hue) of an object or text without otherwise altering the object's form. The principle is that contrast ratio (the difference in brightness) can be used to distinguish text or graphics. For example, G183 is a technique to use a contrast ratio of 3:1 with surrounding text to distinguish links and controls. In that case the Working Group regards a link color that meets the 3:1 contrast ratio relative to the non-linked text color as satisfying the Success Criterion 1.4.1 Use of color since it is relying on contrast ratio as well as color (hue) to convey that the text is a link.

+ +

Non-text information within controls that uses a change of hue alone to convey the value or state of an input, such as a 1-5 star indicator with a black outline for each star filled with either yellow (full) or white (empty) is likely to fail the Use of color criterion rather than this one.

+ +
+ Two star ratings, one uses a black outline (on white) with a black fill to indicate it is checked. The second has a yellow fill and a thicker dark border. +
+ Two examples which pass this success criterion, using either a solid fill to indicate a checked-state that has contrast, or a thicker border as well as yellow fill. +
+
+
+ Two star ratings, the first uses 5 stars with a black outline and a yellow or white fill, where yellow indicates checked. The second uses only pale yellow stars on white. +
+ Two examples which fail a success criterion, the first fails the Use of color criterion due to relying on yellow and white hues. The second example fails the Non-text contrast criterion due to the yellow (#FFF000) to white contrast ratio of 1.2:1. +
+
+ +

Using a change of contrast for focus and other states is a technique to differentiate the states. This is the basis for G195: Using an author-supplied, highly visible focus indicator, and more techniques are being added.

+ + + + +

In combination with 2.4.7 Focus Visible, the visual focus indicator for a component must have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.

+ +

Most focus indicators appear outside the component - in that case it needs to contrast with the background that the component is on. Other cases include focus indicators which are:

+ + + +
+ Three blue buttons, the middle has a thick yellow outline well inside the border of the button. +
+ The internal yellow indicator (#FFFF00) contrasts with the blue button background (#4189B9), passing the criterion. +
+
+ + +
+ Three blue buttons on a white background, the middle has a light yellow outline outside of the botton's non-focused boundary. +
+ The external yellow indicator (#FFFF00) does not contrast with the white background (#FFF) which the component is on, failing the criterion. +
+
+ +
+ Three blue buttons on a white background, the middle has a dark green outline outside of the botton's non-focused boundary. +
+ The external green indicator (#008000) does contrast with the white background (#FFF) which the component is on, passing the criterion. It does not need to contrast with both the component background and the component. +
+
+

Although the figure above with a dark outline passes non-text contrast, it is not a good indicator unless it is very thick. There is a criterion in WCAG 2.2 that addresses this aspect, Focus Appearance.

+ +

If an indicator is partly inside and partly outside the component, either part of the indicator could provide contrast.

+ +
+ Three blue buttons on a white background, the middle has the outline of a yellow rectangle that is partly inside the button's boundary, and partly outside on the white background. +
+ The focus indicator is partially inside, partially outside the button. The internal part of the yellow indicator (#FFFF00) contrasts with the blue button background (#4189B9), passing the criterion. +
+
+ +

If the focus indicator changes the border of the component within the visible boundary it must contrast with the component. Typically an outline goes around (outside) the visible boundary of the component, in this case changing the border is just inside the visible edge of the component.

+ +
+ Three blue buttons on a white background, the center button has a green border exactly on the outer boundary of the button. +
+ The border of the control changes from blue (#4189B9) to green (#4B933A). This is within the component and does not contrast with the inside background of the component therefore fails non-text contrast. +
+
+ +
+ Three blue buttons with a black border on a white background, the center button has a green border inside, adjacent to the inner background and black border. +
+ An inner border of dark green (#008000) does contrast with the black border, but does not contrast with the blue component background, therefore fails non-text contrast. +
+
+ +
+ Three blue buttons with a black border on a white background, the center button has a white border inside, adjacent to the inner background and black border. +
+ An inner border of white contrasts with the black border and the blue component background, therefore passes non-text contrast. +
+
+ +

Note that this Success Criterion does not directly compare the focused and unfocused states of a control - if the focus state relies on a change of color (e.g., changing only the background color of a button), this Success Criterion does not define any requirement for the difference in contrast between the two states.

+ +
+ Three blue buttons, the center button is a lighter blue than the others. +
+ The change of background within the component is not in scope of non-text contrast. However, this would not pass Use of color. +
+
+ +
+

Active User Interface Component Examples

+

For designing focus indicators, selection indicators and user interface components that need to be perceived clearly, the following are examples that have sufficient contrast.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Active User Interface Component Examples +
TypeDescriptionExamples
Link TextDefault link text is in the scope of 1.4.3 Contrast (Minimum), and the underline is sufficient to indicate the link.A browser-default styled link, blue with an underline.
Default focus styleLinks are required to have a focus indicator by 2.4.7 Focus Visible. Where the user agent's default appearance of interactive controls (such as links, form fields or buttons) is not adjusted, the default focus style is sufficient.A browser-default styled link, with a black dotted outline around the link.
ButtonsA button which has a distinguishing indicator such as position, text style, or context does not need a contrasting visual indicator to show that it is a button, although some users are likely to identify a button with an outline that meets contrast requirements more easily.Button with a faint blue background.
Text input (minimal)Where a text-input has a visual indicator to show it is an input, such as a bottom border (#767676), that indicator must meet 3:1 contrast ratio. + A label with a text input shown by a bottom border and faint grey background. +
Text inputWhere a text-input has an indicator such as a complete border (#767676), that indicator must meet 3:1 contrast ratio. + A label with a text input shown by a complete border. +
Text input focus styleA focus indicator is required. While in this case the additional gray (#CCC) outline has an insufficient contrast of 1.6:1 against the white (#FFF) background, the cursor/caret which is displayed when the input receives focus does provide a sufficiently strong visual indication. + A label with a text input with a faint gray outline and a visible cursor/caret. +
Text input using background colorText inputs that have no border and are differentiated only by a background color must have a 3:1 contrast ratio to the adjacent background (#043464). + A label with a text input shown by a dark blue page background, and white box. +
Toggle buttonThe toggle button's internal background (#070CD5) has a good contrast with the external white background. Also, the round toggle within (#7AC2FF) contrasts with the internal background.Dark blue oval toggle button with light blue internal indicator.
Dropdown indicatorThe down-arrow is required to understand that there is drop-down functionality, it has a contrast of 4.7:1 for the white icon on dark gray (#6E747B).Button with the word Menu, and a down-arrow icon next to it.
Dropdown indicatorThe down-arrow is required to understand that there is drop-down functionality, it has a contrast of 21:1 for the black icon on white.Text with the word Menu, and a down-arrow icon next to it.
Checkbox - emptyA black border on a white background indicates the checkbox.Black square border with a text label.
Checkbox - checkedA black border on a white background indicates the checkbox, the black tick shape indicates the state of checked.Black square border with a tick inside, and a text label.
Checkbox - FailThe grey border color of the checkbox (#9D9D9D) has a contrast ratio of 2.7:1 with the white background, which is not sufficient for the visual information required to identify the checkbox.Grey box on a white background with a black tick in the middle.
Checkbox - Subtle hover styleA black border on a white background indicates the checkbox, when the mouse pointer activates the subtle hover state adds a grey background (#DEDEDE). The black border has a 15:1 contrast ratio with the grey background.Blackbox on a circular grey background next to a text label.
Checkbox - Subtle focus style - failA focus indicator is required. If the focus indicator is styled by the author, it must meet the 3:1 contrast ratio with adjacent colors. In this case, the gray (#AAA) indicator has an insufficient ratio of 2.3:1 with the white (#FFF) adjacent background. + Unchecked checkbox with a thick gray additional outline as focus indication. +
+ +
+
+

Inactive User Interface Components

+ +

User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements in WCAG 2.1. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.

+
+ Grey button with non-contrasting grey text. +
An inactive button using default browser styles
+
+

Inactive components, such as disabled controls in HTML, are not available for user interaction. The decision to exempt inactive controls from the contrast requirements was based on a number of considerations. Although it would be benefitial to some people to discern inactive controls, a one-size-fits-all solution has been very difficult to establish. A method of varying the presentation of disabled controls, such as adding an icon for disabled controls, based on user preferences is anticipated as an advancement in the future.

+
+
+ + +
+

Graphical Objects

+ + +

The term "graphical object" applies to stand-alone icons such as a print icon (with no text), and the important parts of a more complex diagram such as each line in a graph. For simple graphics such as single-color icons the entire image is a graphical object. Images made up of multiple lines, colors and shapes will be made of multiple graphical objects, some of which are required for understanding.

+ +

Not every graphical object needs to contrast with its surroundings - only those that are required for a user to understand what the graphic is conveying. Gestalt principles such as the "law of continuity" can be used to ignore minor overlaps with other graphical objects or colors.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ImageNotes
An orange circle with a white telephone icon in the middle.

The phone icon is a simple shape within the orange (#E3660E) circle. The meaning can be understood from that icon alone, the background behind the circle is irrelevant. The orange background and the white icon have a contrast ration greater than 3:1, which passes.

+

The graphical object is the white phone icon.

+
A red magnet with grey tips and a black outline.

A magnet can be understood by the "U" shape with lighter colored tips. Therefore to understand this graphic you should be able to discern the overall shape (against the background) and the lighter colored tips (against the rest of the U shape and the background).

+

The graphical objects are the "U" shape (by outline or by the solid red color #D0021B), and each tip of the magnet.

+
A yellow arrow pointing down with a pound sign (currency) in the middle.

The symbol to show a currency (the £) going down can be understood with recognition of the shape (down arrow) and the currency symbol (pound icon with the shape which is part of the graphic). To understand this graphic you need to discern the arrow shape against the white background, and the pound icon against the yellow background (#F5A623).

+

The graphical objects are the shape and the currency symbol.

+
+ A line chart of votes across a region, with 4 lines of different colors tracking over time.

In order to understand the graph you need to discern the lines and shapes for each condition. To perceive the values of each line along the chart you need to discern the grey lines marking the graduated 100 value increments.

+

The graphical objects are the lines in the graph, including the background lines for the values, and the colored lines with shapes.

+

The lines should have 3:1 contrast against their background, but as there is little overlap with other lines they do not need to contrast with each other or the graduated lines. (See the testing principles below.)

+
A pie chart with small gaps between each slice showing the white background, and a dark outline around light colored slices.

To understand the pie chart you have to discern each slice of the pie chart from the others.

+

The graphical objects are the slices of the pie (chart).

+

Note: If the values of the pie chart slices were also presented in a conforming manner (see the Pie Charts example for details), the slices would not be required for understanding.

+
+ +

Taking the magnet image above as an example, the process for establishing the graphical object(s) is to:

+ + +

Due to the strong contrast of the red and white, it would also be possible to only put the outline around the white tips of the magnet and it would still conform.

+ +
+

Required for Understanding

+ +

The term "required for understanding" is used in the Success Criterion as many graphics do not need to meet the contrast requirements. If a person needs to perceive a graphic, or part of a graphic (a graphical object) in order to understand the content it should have sufficient contrast. However, that is not a requirement when:

+
    +
  • +

    A graphic with text embedded or overlayed conveys the same information, such as labels and values on a chart.

    +

    Text within a graphic must meet 1.4.3 Contrast (Minimum).

    +
  • +
  • The graphic is for aesthetic purposes that does not require the user to see or understand it to understand the content or use the functionality.
  • +
  • The information is available in another form, such as in a table that follows the graph, which becomes visible when a "Long Description" button is pressed.
  • +
  • The graphic is part of a logo or brand name (which is considered "essential" to its presentation).
  • +
+
+
+

Gradients

+ +

Gradients can reduce the apparent contrast between areas, and make it more difficult to test. The general principles is to identify the graphical object(s) required for understanding, and take the central color of that area. If you remove the adjacent color which does not have sufficient contrast, can you still identify and understand the graphical object?

+
+ Two versions of a blue circle with an 'i' indicating information. The first example has a blue gradient background, the second is missing the upper half of the background which obscures the i. +
Removing the background which does not have sufficient contrast highlights that the graphical object (the "i") is not then understandable.
+
+
+

Dynamic Examples

+ +

Some graphics may have interactions that either vary the contrast, or display the information as text when you mouseover/tap/focus each graphical object. In order for someone to discern the graphics exist at all, the unfocused default version must already have sufficiently contrasting colors or text. For the area that receives focus, information can then be made available dynamically as pop-up text, or be foregrounded dynamically by increasing the contrast.

+ + +
+ A pie chart with one slice highlighted and a box hovering next to it that shows the data and indicates the source in the key. +
A dynamic chart where the current 'slice' is hovered or focused, which activates the associated text display of the values and highlights the series
+
+
+
+

Infographics

+ +

Infographics can mean any graphic conveying data, such as a chart or diagram. On the web it is often used to indicate a large graphic with lots of statements, pictures, charts or other ways of conveying data. In the context of graphics contrast, each item within such an infographic should be treated as a set of graphical objects, regardless of whether it is in one file or separate files.

+ +

Infographics often fail to meet several WCAG level AA criteria including:

+ + + +

An infographic can use text which meets the other criteria to minimise the number of graphical objects required for understanding. For example, using text with sufficient contrast to provide the values in a chart. A long description would also be sufficient because then the infograph is not relied upon for understanding.

+ +
+
+

Essential Exception

+ +

Graphical objects do not have to meet the contrast requirements when "a particular presentation of graphics is essential to the information being conveyed". The Essential exception is intended to apply when there is no way of presenting the graphic with sufficient contrast without undermining the meaning. For example:

+
    +
  • Logotypes and flags: The brand logo of an organization or product is the representation of that organization and therefore exempt. Flags may not be identifiable if the colors are changed to have sufficient contrast.
  • +
  • Sensory: There is no requirement to change pictures of real life scenes such as photos of people or scenery.
  • +
  • Representing other things: If you cannot represent the graphic in any other way, it is essential. Examples include: + +
  • +
+
+ +
+

Testing Principles

+

A summary of the high-level process for finding and assessing non-text graphics on a web page:

+
    +
  • Identify each user-interface component (link, button, form control) on the page and: +
      +
    • Identify the visual (non-text) indicators of the component that are required to identify that a control exists, and indicate the current state. In the default (on page load) state, test the contrast ratio against the adjacent colors.
    • +
    • Test those contrast indicators in each state.
    • +
    +
  • +
  • Identify each graphic on the page that includes information required for understanding the content (i.e. excluding graphics which have visible text for the same information, or are decorative) and: +
      +
    • Check the contrast of the graphical object against its adjacent colors;
    • +
    • If there are multiple colors and/or a gradient, choose the least contrasting area to test;
    • +
    • If it passes, move to the next graphical object;
    • +
    • If the least-contrasting area is less than 3:1, assume that area is invisible, is the graphical object still understandable?
    • +
    • If there is enough of the graphical object to understand, it passes, else fail.
    • +
    +
  • +
+

The techniques below each have testing criteria, and the related criteria for Focus visible (2.4.7), Use of color (1.4.1), and Contrast minimum also have techniques.

+
+ +
+ +
+ +
+

Benefits

+

People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness difference) of 3:1 or greater can make these items more distinguishable when the person does not see a full range of colors.

+
+ +
+

Graphical Object Examples

+ +
+

Pie Charts

+

Pie charts make a good case study for the graphical objects part of this success criterion, the following pie charts are intended to convey the proportion of market share each browser has. Please Note: The actual figures are made up, these are not actual market shares.

+
+ Failing pie chart +
+

Fail: The pie chart has labels for each slice (so passes 1.4.1 Use of Color), but in order to understand the proportions of the slices you must discern the edges of the slices (the graphical objects conveying essential information), and the contrast between the slices is not 3:1 or greater.

+
+
+
+ Not applicable pie chart +
+

Not applicable: The pie chart has visible labels and values that convey equivalent information to the graphical objects (the pie slices).

+
+
+
+ Passing pie chart +
+

Pass: The pie chart has visible labels, and sufficient contrast around and between the slices of the pie chart (the graphical objects). A darker border has been added around the yellow slice in order to achieve the contrast level.

+
+
+
+
+

Infographics

+
+ An infographic showing lightly colored circles of various sizes to indicate the size of five different social networks +
+

Fail: Discerning the circles is required to understand the size of network and discerning the icons in each circle is required to identify which network it shows.

+
+
+

The graphical objects are the circles (measured against the background) and the icons in each circle (measured against the circle's background).

+
+ The same infographic with contrasting text, dark borders around the circles, and contrasting icons. +
+

Pass: The circles have contrasting borders and the icons are a contrasting dark color against the light circle backgrounds.

+
+
+

There are many possible solutions to ensuring contrast, the example shows the use of borders. Other techniques are to use darker colors for the circle backgrounds, or to add text labels & values for each item.

+
+
+ + +
+

Resources

+ +
+
+

Techniques

+
+

Sufficient

+
+

Situation A: Color is used to identify user interface components or used to identify user interface component states

+ +
+
+

Situation B: Color is required to understand graphical content

+ +
+ +
+
+

Failures

+ +
+
+ + diff --git a/understanding/21/metody-obslugi.html b/understanding/21/metody-obslugi.html new file mode 100644 index 0000000000..1ec9c79016 --- /dev/null +++ b/understanding/21/metody-obslugi.html @@ -0,0 +1,31 @@ + + + + + + Understanding Guideline 2.5 | Understanding WCAG 2.1 + + + +

Pointer Accessible:
+Understanding Guideline 2.1 +

+
+

Intent of Guideline 2.5

+

All functionality should be accessible via pointer input devices, for example, via a mouse pointer, a finger interacting with a touch screen, an electronic pencil/stylus, or a laser pointer.

+

People operating pointer input devices may not be able to carry out timed or complex gestures. Examples are drag-and-drop gestures and on touch screens, swiping gestures, split taps, or long presses. This Guideline does not discourage the provision of complex and timed gestures by authors. However, where they are used, an alternative method of input should be provided to enable users with motor impairments to interact with content via single untimed pointer gestures.

+

Often, people use devices that offer several input methods, for example, mouse input, touch input, keyboard input, and speech input. These should be supported concurrently as users may at any time swich preferred input methods due to situational circumstances, for example, the availability of a flat support for mouse operation, or situational impediments through motion or changes of ambient light.

+

A common requirement for pointer interaction is the ability of users to position the pointer over the target. With touch input, the pointer (the finger) is larger and less precise than a mouse cursor. For people with motor impairments, a larger target makes it easier to successfully position the pointer and activate the target.

+
+ +
+

Success Criteria for this Guideline

+ +
+ + diff --git a/understanding/21/odstepy-w-tekscie.html b/understanding/21/odstepy-w-tekscie.html new file mode 100644 index 0000000000..b899d9f315 --- /dev/null +++ b/understanding/21/odstepy-w-tekscie.html @@ -0,0 +1,149 @@ + + + + + Understanding Text Spacing + + + +

Understanding Text Spacing

+
+

Intent

+

The intent of this Success Criterion (SC) is to ensure that when people override author specified text spacing to improve their reading experience, content is still readable and operable. Each of the requirements stipulated in the SC's four bullets helps ensure text styling can be adapted by the user to suit their needs.

+

The specified metrics set a minimum baseline. The values in between the author's metrics and the metrics specified in this SC should not have loss of content or functionality.

+

This SC focuses on the adaptability of content to an increase in spacing between lines, words, letters, and paragraphs. Any combination of these may assist a user with effectively reading text. As well, ensuring that content correctly adapts when users override author settings for spacing also significantly increases the likelihood other style preferences can be set by the user. For example, a user may need to change to a wider font family than the author has set in order to effectively read text.

+
+

Author Responsibility

+

This SC does not dictate that authors must set all their content to the specified metrics. Rather, it specifies that an author's content has the ability to be set to those metrics without loss of content or functionality. The author requirement is both to not interfere with a user's ability to override the author settings, and to ensure that content thus modified does not break content in the manners shown in figures 1 through 3 in Effects of Not Allowing for Spacing Override. The values in the SC are a baseline. Authors are encouraged to surpass the values specified, not see them as a ceiling to build to. If the user chooses to go beyond the metrics specified any resulting loss of content or functionality is the user's responsibility.

+

Further, this SC is not concerned with how users change the line height and spacing metrics. It does not require that content implement its own mechanisms to allow users to do this. It is not a failure of the content if a user agent or platform does not provide a way for users to do this. Content does not fail this SC if the method chosen by the user - for instance, the use of an extension or bookmarklet - fails to correctly set the line height and spacing text properties on the content (provided that the content is not actively and purposely preventing the properties from being added).

+
+

Applicability

+

If the markup-based technologies being used are capable of overriding text to the Success Criterion's metrics, then this SC is applicable. For instance Cascading Style Sheet/HTML technologies are quite able to allow for the specified spacing metrics. Plugin technologies would need to have a built-in ability to modify styles to the specified metrics. Currently, this SC does not apply to PDF as it is not implemented using markup.

+

Examples of text that are typically not affected by style properties and not expected to adapt are:

+
    +
  • Video captions embedded directly into the video frames and not provided as an associated caption file
  • +
  • Images of text
  • +
+

For this SC, canvas implementations of text are considered to be images of text.

+
+
+
+

User Responsibility

+

The ability to read and derive meaning from the overridden spacing rests with the user. The user may choose to exceed the spacing adjustments in the SC. If the increased spacing causes loss of content or functionality, the user will adjust or return to the author’s original spacing or spacing within the bounds of the SC. Regardless, the user needs the flexibility to adjust spacing within the bounds set in the SC without loss of content or functionality. Such changes may be achieved via user stylesheet, bookmarklet, extension, or application.

+
+ +
+

Effects of Not Allowing for Spacing Override

+

The following images show some types of failures when authors do not take into consideration that users may override spacing to the metrics specified in this Success Criterion.

+
+

Text Cut Off

+

The bottom portion of the words "Your Needs" is cut off in a heading making that text unreadable in Figure 1. It should read "We Provide a Mobile Application Service to Meet Your Needs."

+
+
Vertical text cut off is a failure.
+ Heading text truncated vertically. +
+

In Figure 2 the last portion of text is cut off in 3 side-by-side headings. The 1st heading should read "A cog in the wheel." But it reads "A cog in the whe". Only half of the second "e" is visible and the letter "l" is completely missing. The 2nd heading should read "A penny for your thoughts". But it reads "A penny for your". The 3rd should read "Back to the drawing board." But it reads "Back to the drawi".

+
+
Horizontal text cut off is a failure.
+ 3 side-by-side headings with truncated text. +
+
+
+

Text Overlap

+

In Figure 3 the last 3 words "Groups and Programs" of the heading "Technologists Seeking Input from Groups and Programs" overlap the following sentence. That sentence should read, "You are invited to share ideas and areas of interest related to the integration of technology from a group or program perspective." But the words "You are invited to share ideas" are obscured and unreadable.

+
+
Overlapping text is a failure.
+ Heading text overlaps part of paragraph text. +
+
+
+ +
+
+

Benefits

+ +
+
+

Examples

+

When spacing is being overridden to the SC's metrics:

+
    +
  1. Text fits within the bounds of its containing box without being cut off.
  2. +
  3. Text fits within the bounds of its containing box without overlapping other boxes.
  4. +
+
+
+

Resources

+
+

Research

+

The grounds for this SC are based on research. The metrics chosen as measures are based on the McLeish study. She ran from .04 to .25 em tests. McLeish found an increasing curve in reading speed of actual materials up to .25, but it started to flatten at .20. Previous studies that reported no improvement started at .5em. Right at the flat point. Wayne E. Dick, Ph.D. analyzed the McLeish study and translated from points. Dr. Dick recommended the metrics that the Working Group adopted.

+
+

Languages and Scripts

+

Roughly 480 different languages and scripts have been tested. Maximum spacing adjustments allowed by the SC were set on the following 3 pages:

+
    +
  1. Languages in their own writing systems
  2. +
  3. Online Encyclopedia of writing systems and languages – language names
  4. +
  5. Universal Declaration of Human Rights (Article 1)
  6. +
+
+
+

Results

+

No adverse effects occurred. The following are the specific findings:

+
+
Character Spacing
+
Individual characters in words remained intact though they were spaced a bit further apart.
+
Word Spacing
+
Words were spaced farther apart. In languages that do not have words (e.g. Japanese) applying word spacing had no effect. This is expected.
+
Line Height
+
Changing line height did not separate diacritics from characters, nor did it adversely impact ascenders or descenders.
+
+

As previously discussed, the ability to read text with adjusted spacing is a user responsibility. This is true no matter the language.

+

The SC's exception addresses cases where a text style property is not used in a language or script. In such cases, authors are only required to ensure relevant properties do not break the layout.

+
+
+
+

Other references

+ +
+
+
+

Techniques

+
+

Sufficient

+ +
+
+

Advisory

+ +
+
+

Failure

+ +
+
+ + diff --git "a/understanding/21/odst\304\231py-w-tek\305\233cie.html" "b/understanding/21/odst\304\231py-w-tek\305\233cie.html" new file mode 100644 index 0000000000..b899d9f315 --- /dev/null +++ "b/understanding/21/odst\304\231py-w-tek\305\233cie.html" @@ -0,0 +1,149 @@ + + + + + Understanding Text Spacing + + + +

Understanding Text Spacing

+
+

Intent

+

The intent of this Success Criterion (SC) is to ensure that when people override author specified text spacing to improve their reading experience, content is still readable and operable. Each of the requirements stipulated in the SC's four bullets helps ensure text styling can be adapted by the user to suit their needs.

+

The specified metrics set a minimum baseline. The values in between the author's metrics and the metrics specified in this SC should not have loss of content or functionality.

+

This SC focuses on the adaptability of content to an increase in spacing between lines, words, letters, and paragraphs. Any combination of these may assist a user with effectively reading text. As well, ensuring that content correctly adapts when users override author settings for spacing also significantly increases the likelihood other style preferences can be set by the user. For example, a user may need to change to a wider font family than the author has set in order to effectively read text.

+
+

Author Responsibility

+

This SC does not dictate that authors must set all their content to the specified metrics. Rather, it specifies that an author's content has the ability to be set to those metrics without loss of content or functionality. The author requirement is both to not interfere with a user's ability to override the author settings, and to ensure that content thus modified does not break content in the manners shown in figures 1 through 3 in Effects of Not Allowing for Spacing Override. The values in the SC are a baseline. Authors are encouraged to surpass the values specified, not see them as a ceiling to build to. If the user chooses to go beyond the metrics specified any resulting loss of content or functionality is the user's responsibility.

+

Further, this SC is not concerned with how users change the line height and spacing metrics. It does not require that content implement its own mechanisms to allow users to do this. It is not a failure of the content if a user agent or platform does not provide a way for users to do this. Content does not fail this SC if the method chosen by the user - for instance, the use of an extension or bookmarklet - fails to correctly set the line height and spacing text properties on the content (provided that the content is not actively and purposely preventing the properties from being added).

+
+

Applicability

+

If the markup-based technologies being used are capable of overriding text to the Success Criterion's metrics, then this SC is applicable. For instance Cascading Style Sheet/HTML technologies are quite able to allow for the specified spacing metrics. Plugin technologies would need to have a built-in ability to modify styles to the specified metrics. Currently, this SC does not apply to PDF as it is not implemented using markup.

+

Examples of text that are typically not affected by style properties and not expected to adapt are:

+
    +
  • Video captions embedded directly into the video frames and not provided as an associated caption file
  • +
  • Images of text
  • +
+

For this SC, canvas implementations of text are considered to be images of text.

+
+
+
+

User Responsibility

+

The ability to read and derive meaning from the overridden spacing rests with the user. The user may choose to exceed the spacing adjustments in the SC. If the increased spacing causes loss of content or functionality, the user will adjust or return to the author’s original spacing or spacing within the bounds of the SC. Regardless, the user needs the flexibility to adjust spacing within the bounds set in the SC without loss of content or functionality. Such changes may be achieved via user stylesheet, bookmarklet, extension, or application.

+
+ +
+

Effects of Not Allowing for Spacing Override

+

The following images show some types of failures when authors do not take into consideration that users may override spacing to the metrics specified in this Success Criterion.

+
+

Text Cut Off

+

The bottom portion of the words "Your Needs" is cut off in a heading making that text unreadable in Figure 1. It should read "We Provide a Mobile Application Service to Meet Your Needs."

+
+
Vertical text cut off is a failure.
+ Heading text truncated vertically. +
+

In Figure 2 the last portion of text is cut off in 3 side-by-side headings. The 1st heading should read "A cog in the wheel." But it reads "A cog in the whe". Only half of the second "e" is visible and the letter "l" is completely missing. The 2nd heading should read "A penny for your thoughts". But it reads "A penny for your". The 3rd should read "Back to the drawing board." But it reads "Back to the drawi".

+
+
Horizontal text cut off is a failure.
+ 3 side-by-side headings with truncated text. +
+
+
+

Text Overlap

+

In Figure 3 the last 3 words "Groups and Programs" of the heading "Technologists Seeking Input from Groups and Programs" overlap the following sentence. That sentence should read, "You are invited to share ideas and areas of interest related to the integration of technology from a group or program perspective." But the words "You are invited to share ideas" are obscured and unreadable.

+
+
Overlapping text is a failure.
+ Heading text overlaps part of paragraph text. +
+
+
+ +
+
+

Benefits

+ +
+
+

Examples

+

When spacing is being overridden to the SC's metrics:

+
    +
  1. Text fits within the bounds of its containing box without being cut off.
  2. +
  3. Text fits within the bounds of its containing box without overlapping other boxes.
  4. +
+
+
+

Resources

+
+

Research

+

The grounds for this SC are based on research. The metrics chosen as measures are based on the McLeish study. She ran from .04 to .25 em tests. McLeish found an increasing curve in reading speed of actual materials up to .25, but it started to flatten at .20. Previous studies that reported no improvement started at .5em. Right at the flat point. Wayne E. Dick, Ph.D. analyzed the McLeish study and translated from points. Dr. Dick recommended the metrics that the Working Group adopted.

+
+

Languages and Scripts

+

Roughly 480 different languages and scripts have been tested. Maximum spacing adjustments allowed by the SC were set on the following 3 pages:

+
    +
  1. Languages in their own writing systems
  2. +
  3. Online Encyclopedia of writing systems and languages – language names
  4. +
  5. Universal Declaration of Human Rights (Article 1)
  6. +
+
+
+

Results

+

No adverse effects occurred. The following are the specific findings:

+
+
Character Spacing
+
Individual characters in words remained intact though they were spaced a bit further apart.
+
Word Spacing
+
Words were spaced farther apart. In languages that do not have words (e.g. Japanese) applying word spacing had no effect. This is expected.
+
Line Height
+
Changing line height did not separate diacritics from characters, nor did it adversely impact ascenders or descenders.
+
+

As previously discussed, the ability to read text with adjusted spacing is a user responsibility. This is true no matter the language.

+

The SC's exception addresses cases where a text style property is not used in a language or script. In such cases, authors are only required to ensure relevant properties do not break the layout.

+
+
+
+

Other references

+ +
+
+
+

Techniques

+
+

Sufficient

+ +
+
+

Advisory

+ +
+
+

Failure

+ +
+
+ + diff --git "a/understanding/21/okre\305\233lenie-po\305\274\304\205danej-warto\305\233ci.html" "b/understanding/21/okre\305\233lenie-po\305\274\304\205danej-warto\305\233ci.html" new file mode 100644 index 0000000000..ed2da831e4 --- /dev/null +++ "b/understanding/21/okre\305\233lenie-po\305\274\304\205danej-warto\305\233ci.html" @@ -0,0 +1,66 @@ + + + + + Identify Input Purpose - Understanding WCAG 2.1 + + + +

Understanding Identify Input Purpose

+
+

Intent of this Success Criterion

+ +

The intent of this Success Criterion is to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities. The ability to programmatically declare the specific kind of data expected in a particular field makes filling out forms easier, especially for people with cognitive disabilities.

+

Appropriate visible labels and instruction can help users understand the purpose of form input fields, but users may benefit from having fields that collect specific types of information be rendered in an unambiguous, consistent, and possibly customized way for different modalities - either through defaults in their user agent, or through the aid of assistive technologies.

+

For some input fields, the type attribute already offers a way to broadly specify the intention of the input field, for example, input type="tel", input type="email", or input type="password". However, these are only very broad categories, describing the type of input, but not necessarily its purpose, especially as it relates to user-specific input fields. As an example, type="email" indicates that the field is for an e-mail address but does not clarify if the purpose is for entering the user's e-mail address or some other person's e-mail.

+

This success criterion defines the types of user interface component input purposes, found in Section 7 of the WCAG 2.1 Recommendation, that must be programmatically identifiable. When these user input purposes are present, and if the technology supports doing so, the field purpose must be programmatically identifiable.

+

The HTML autocomplete attribute only accepts a certain number of specific well-defined fixed values. This allows a more fine-grained definition or identification of purpose than the type attribute, for example, by allowing the author to specify a specific type of name: Name (autocomplete="name”), Given Name (autocomplete="given-name”), Family Name (autocomplete="family-name”), as well as Username (autocomplete="username”), and Nickname (autocomplete="nickname”).

+

By adopting and repurposing this predefined taxonomy of definitions, user agents and assistive technologies can now present the purpose of the inputs to users in different modalities. For example, assistive technologies may display familiar icons next to input fields to help users who have difficulties reading. An icon of a birthday cake may be shown in front of an input field with autocomplete="bday", or the icon of a telephone in front of an input field with autocomplete="tel".

+

In addition to repurposing this taxonomy, when the autocomplete attribute technique is used to meet this Success Criterion, browsers and other user agents can suggest and 'autofill' the right content by autocompleting these fields based on past user input stored in the browser. By defining more granular definitions of common input purposes, for example “Birthday” (autocomplete=”bday”), browsers can store personalized values for each of these fields (the user's birthday date). The user is relieved of having to type the information and can instead confirm or, if needed, change the value of the field, a significant benefit for users with memory issues, dyslexia, and other disabilities. Because the autocomplete values are independent of language, users that may not be familiar with the text used to visually identify user input fields (the label) can still have that purpose consistently identified to them due to the fixed taxonomy of terms.

+

If an input field accepts two different types of input purpose (as in combined user name/user email fields) and the technology used does not allow multiple purpose values to be defined, it is valid to provide either one or the other value or leave out the designation of input purpose altogether.

+

When the user agent and assistive technology support for other metadata formats matures, metadata schemes like the Personalization Semantics Content Module may be used in addition or instead of the HTML autocomplete attribute to identify the purpose of input fields. They can also support automated adaptations that identify and match author-provided input labels to defined vocabularies or symbols that are used instead for labelling inputs.

+
+ +
+

Specific Benefits of Success Criterion 1.3.5:

+ +
+ +
+

Examples of Success Criterion 1.3.5

+ +
+ +
+

Related Resources

+ +
+ +
+

Techniques and Failures for Success Criterion 1.3.5

+ +
+

Sufficient Techniques

+ + +
+
+

Failure Techniques

+ + +
+
+ + diff --git "a/understanding/21/okre\305\233lenie-przeznaczenia.html" "b/understanding/21/okre\305\233lenie-przeznaczenia.html" new file mode 100644 index 0000000000..92e517a4e8 --- /dev/null +++ "b/understanding/21/okre\305\233lenie-przeznaczenia.html" @@ -0,0 +1,81 @@ + + + + + Understanding Identify Purpose + + + +

Understanding Identify Purpose

+
+

Intent

+

The intent of this Success Criterion is to ensure that the purpose of many elements on a page can be programmatically determined, so that user agents can extract and present that purpose to users using different modalities.

+

Many users with limited vocabularies rely on familiar terms or symbols in order to use the web. However, what is familiar to one user may not be familiar to another. When authors indicate the purpose, users can take advantage of personalization and user preferences to load a set of symbols or vocabulary familiar to them.

+ +

This Success Criterion requires the author to programmatically associate the purpose of icons, regions and components (such as buttons, links, and fields) so that user agents can determine the purpose of each and adapt indicators or terminology to make them understandable for the user. It is achieved by adding semantics or metadata that provide this context. It is similar to adding role information (as required by 4.1.2) but instead of providing information about what the UI component is (such as an image) it provides information about what the component represents (such as a link to the home page).

+ +

Identifying regions of the page allows people to remove or highlight regions with their user agent.

+ +

Products for people who are non-vocal often use symbols to help users communicate. These symbols are in fact people's language. Unfortunately, many of these symbols are both subject to copyright and not interoperable. That means end users can only use one device, and cannot use content, apps, or assistive technologies that have not been made by a single company.

+ +

This Success Criterion enables symbols to be interoperable so that symbol users can understand different content that was not just made by one company. When users' symbols are mapped to the same nodes, then user agents can load the user-understandable symbol. People can then buy the symbols and use them across different devices or applications. (Note that the symbols would still be proprietary, but they could then be interoperable.)

+ +
+
+

Benefits

+ +

People who benefit have many different cognitive disabilities including:

+ + +

Meeting this Success Criterion helps users who need extra support or a familiar interface, including the need for:

+ + +
+
+

Examples

+ +
+
+

Resources

+ + +
+
+

Techniques

+
+

Sufficient

+ +
+
+

Advisory

+ +
+
+ + diff --git a/understanding/21/orientacja.html b/understanding/21/orientacja.html new file mode 100644 index 0000000000..37dbbeb87b --- /dev/null +++ b/understanding/21/orientacja.html @@ -0,0 +1,87 @@ + + + + + WCAG 2.1 Understanding Orientation + + + +

+ Orientation +
+ Understanding + SC + 2.6.2 +

+
+

Intent of this Success Criterion

+

The intent of this Success Criterion is to ensure that content displays in the orientation (portrait or landscape) preferred by the user. Some websites and applications automatically set and restrict the screen to a particular display orientation and expect + that users will respond by rotating their device to match, but this can create problems. Some users have their devices mounted + in a fixed orientation (e.g. on the arm of a power wheelchair). Therefore, websites and applications need to support both orientations + by not restricting the orientation. Changes in content or functionality due to the size of display are not covered by this criterion which is focused on restrictions of orientation.

+ +

Historically, devices tended to have a fixed-orientation display, and all content was created to match that display orientation. Today, most handhelds and many other devices (e.g., monitors) have a hardware-level ability to dynamically adjust default display orientation based on sensor information. The goal of this Success Criterion is that authors should never restrict content's orientation, thus ensuring that it always match the device display orientation.

+ +

Locking a device to an orientation

+ +

It is important to distinguish between an author's responsibility not to restrict content to a specific orientation, and device-specific settings governing the locking of display orientation.

+ +

Many hand-held devices offer a mechanical switch or a system setting (or both) to allow the user to lock the device display to a specific orientation. Where a user decides to lock their entire device to an orientation, all applications are expected to pick up that setting and to display content accordingly.

+ +

This Success Criterion complements device "lock orientation" settings. A web page that does not restrict its display orientation will always support the system-level orientation setting, since the system setting is picked up by the user agent. Alternatively, where a device-level orientation lock is not in place, the user agent should display the page according to the orientation of the device (either its default, or the current orientation determined by any device sensors).

+ +

The exception for things considered essential is aimed at situations where the content would only be understood in a particular orientation, or where the technology restricts the possible orientations. If content is aimed at a specific environment which is only available in one orientation (such as a television) then the content can restrict the orientation. Technologies such as virtual reality use screens within goggles that cannot change orientation relative to the user's eyes.

+ +
+

Benefits

+ +
+
+
+

Examples

+ +
+
+

Related Resources

+ +
+
+

Techniques

+
+

Sufficient

+ +
+
+

Failure

+ +
+
+ + diff --git a/understanding/21/ostrzezenie-o-limicie-czasu.html b/understanding/21/ostrzezenie-o-limicie-czasu.html new file mode 100644 index 0000000000..1f62a9131a --- /dev/null +++ b/understanding/21/ostrzezenie-o-limicie-czasu.html @@ -0,0 +1,59 @@ + + + + + WCAG 2.0 Understanding Page + + + +

Understanding Timeouts

+
+

Intent

+

The intent of this Success Criterion is to ensure that when a timeout is used, users know what duration of inactivity will cause the page to time out and result in lost data. The use of timed events can present significant barriers for users with cognitive disabilities, as these users may require more time to read content or to perform functions, such as completing an online form.

+

During the completion of an online process, such as to reserve a hotel room or purchase a plane ticket, a user with a cognitive impairment may become overwhelmed with lengthy instructions and data input required to complete the process. The user may not be able to complete the process in one sitting and may need to take a break. Users should be able to leave a process without losing their current place within the process, and without losing information that has already been entered. If users cannot take a break and check their work, many will often be unable to complete a task correctly.

+

This Success Criterion works in tandem with Success Criterion 2.2.1 Timing Adjustable, but is specifically focused on notification of timeouts related to user inactivity.

+

The best way to conform to this success criterion is to keep the user data for at least 20 hours. This enables the user with disabilities and the aging community to start and finish a task, taking breaks as needed. However, when it is not practical to save the user data the author must warn the user about the duration of inactivity which will result in a timeout. Timeouts should be displayed to the user once at the beginning of the related task or process and not at each step.

+

This success criterion only applies to timeouts that are within the content provider's knowledge or control. For example, if the user closes a web browser or device and loses content in an open page that has not yet been submitted, the success criterion has not been violated.

+ +
+
+

Benefits

+

This Success Criterion helps users by ensuring they are notified about timeouts related to inactivity.

+

When a user knows how much time they are allowed for a task, they will know whether they can take a needed break and resume their work without needing to start again. This enables many users to complete tasks online that they otherwise could not do. If a situation exists where a timeout is necessary, the user is warned at the start of the task about the length of inactivity that would generate a timeout. The user can then decide if they can manage this task or not in the given time, or if they need to prepare materials in advance of starting a process. This will reduce the frustration of losing work due to a timeout.

+ +

This Success Criterion helps people with many different cognitive disabilities, including people with:

+ +
+
+

Examples

+ +
+
+

Related Resources

+ +
+
+

Techniques

+
+

Sufficient

+ +
+
+ + diff --git "a/understanding/21/ostrze\305\274enie-o-limicie-czasu.html" "b/understanding/21/ostrze\305\274enie-o-limicie-czasu.html" new file mode 100644 index 0000000000..1f62a9131a --- /dev/null +++ "b/understanding/21/ostrze\305\274enie-o-limicie-czasu.html" @@ -0,0 +1,59 @@ + + + + + WCAG 2.0 Understanding Page + + + +

Understanding Timeouts

+
+

Intent

+

The intent of this Success Criterion is to ensure that when a timeout is used, users know what duration of inactivity will cause the page to time out and result in lost data. The use of timed events can present significant barriers for users with cognitive disabilities, as these users may require more time to read content or to perform functions, such as completing an online form.

+

During the completion of an online process, such as to reserve a hotel room or purchase a plane ticket, a user with a cognitive impairment may become overwhelmed with lengthy instructions and data input required to complete the process. The user may not be able to complete the process in one sitting and may need to take a break. Users should be able to leave a process without losing their current place within the process, and without losing information that has already been entered. If users cannot take a break and check their work, many will often be unable to complete a task correctly.

+

This Success Criterion works in tandem with Success Criterion 2.2.1 Timing Adjustable, but is specifically focused on notification of timeouts related to user inactivity.

+

The best way to conform to this success criterion is to keep the user data for at least 20 hours. This enables the user with disabilities and the aging community to start and finish a task, taking breaks as needed. However, when it is not practical to save the user data the author must warn the user about the duration of inactivity which will result in a timeout. Timeouts should be displayed to the user once at the beginning of the related task or process and not at each step.

+

This success criterion only applies to timeouts that are within the content provider's knowledge or control. For example, if the user closes a web browser or device and loses content in an open page that has not yet been submitted, the success criterion has not been violated.

+ +
+
+

Benefits

+

This Success Criterion helps users by ensuring they are notified about timeouts related to inactivity.

+

When a user knows how much time they are allowed for a task, they will know whether they can take a needed break and resume their work without needing to start again. This enables many users to complete tasks online that they otherwise could not do. If a situation exists where a timeout is necessary, the user is warned at the start of the task about the length of inactivity that would generate a timeout. The user can then decide if they can manage this task or not in the given time, or if they need to prepare materials in advance of starting a process. This will reduce the frustration of losing work due to a timeout.

+ +

This Success Criterion helps people with many different cognitive disabilities, including people with:

+ +
+
+

Examples

+ +
+
+

Related Resources

+ +
+
+

Techniques

+
+

Sufficient

+ +
+
+ + diff --git a/understanding/21/rezygnacja-ze-wskazania.html b/understanding/21/rezygnacja-ze-wskazania.html new file mode 100644 index 0000000000..a84ad6ccb6 --- /dev/null +++ b/understanding/21/rezygnacja-ze-wskazania.html @@ -0,0 +1,95 @@ + + + + + Understanding Pointer Cancellation + + + +

Understanding Pointer Cancellation

+
+

Intent

+

The intent of this success criterion is to make it easier for users to prevent accidental or erroneous pointer input. People with various disabilities can inadvertently initiate touch or mouse events with unwanted results. Each of the following subsections roughly aligns with the bullets of this Success Criterion, and outlines a means of allowing users to cancel pointer operations.

+
+

Up-Event activation or completion

+

The most accessible way to incorporate pointer cancellation is to make activation occur on the up-event.

+ +

Up-event activation refers to the activation of a target when the pointer is released. In a touchscreen interaction, when the finger touches a target, the up-event activation only occurs when the finger is lifted while still being within the target boundary. Similarly in mouse interaction, the up-event occurs when the mouse button is released while the cursor is still within the boundary of the initial target set when the mouse button was pressed.

+

Authors can reduce the problem of users inadvertently triggering an action by using generic platform activation/click events that activate functionality on the up-event. For example, the click event in JavaScript triggers on release of the primary mouse button, and is an example of an implicit up-event. Despite its name, the click event is device-independent and also works for touch and keyboard interaction.

+

The preference for up-events is implicit in the Success Criterion wording of the first bullet: The down-event of the pointer is not used to execute any part of the function. Authors meet the first bullet by using only the up-event.

+
+
+

Up-Event Abort or Undo

+

Where the interaction is equivalent to a simple "click", up-event activation has a built-in ability to cancel. There is a distinction between when someone touches a screen and when they remove their finger. Similarly, in mouse interaction, there is a difference between pressing and releasing the mouse button. When activation occurs only as the pointer is released, users have the opportunity to Abort (cancel) the activation. Users who have difficulty accurately using a mouse or touchscreen benefit greatly from this basic behaviour. They normally receive visual feedback when an item is pressed. If they discover they have selected the wrong item, they can cancel the action by moving their pointer or finger away from the target before releasing.

+ +

For more complex interactions, such as drag and drop, the down- and up-events may initiate and end a series of actions to complete a process. For example, with drag and drop, the item may be:

+
    +
  1. selected with a press (down-event),
  2. +
  3. moved to a new location, while still being depressed, and
  4. +
  5. released (up-event) to conclude the drop action.
  6. +
+

In such a complex action, the need for an Abort or Undo function increases. Designers may elect to confirm the move through something like a confirmation dialog or an undo button, giving the user the ability to Undo the process just completed. Alternatively, the ability to Abort the action can be acheived if, before completing step 3, the user returns the selected item to its original location and concludes the process there. If other parts of the screen disallow a move, the user can conclude the drag and drop there, effectively nullifying the operation.

+
+
+

Up Reversal

+

In other interactions, the down-event may trigger a behaviour which can be reversed when the up-event concludes. Examples of this include press-and-hold actions such as where a transient popup appears (or a video plays) when the user presses on an object (down-event), but the popup (or video) disappears as soon as the user releases the pointer (up-event). Since the up-event reverses the preceding down event, the user is returned to their prior point, and has effectively cancelled the operation.

+
+
+

Down-Event

+

Completing the function on the down-event is only permitted when it is essential that the up-event not be used.

+

The most prevalent essential down-event activation occurs in keyboard emulation. On a physical keyboard, keys by default activate on the down-event -- a letter appears when the key is pressed. If a software keyboard emulator tried to override this expected behaviour by making letters appear when the key is released, the behaviour would be unexpected and would adversely affect expected interaction.

+

Note that a keyboard has a built-in Backspace or Delete button, which effectively provides an Undo option. Undo is not a requirement of the down-event Essential exception; however, providing an easy way for users to undo any action is a recommended practice (and may be a functional necessity), even where it is not a requirement of this Success Criterion.

+

Other examples where the timing of an activation is essential and requires the down-event would be:

+ +
+
+
+

Benefits

+ +
+
+

Examples

+ +
+
+

Resources

+ +
+
+

Techniques

+
+

Sufficient

+ +
+ +
+

Failure

+ +
+
+ + diff --git a/understanding/21/rownolegly-mechanizm-wprowadzania-danych.html b/understanding/21/rownolegly-mechanizm-wprowadzania-danych.html new file mode 100644 index 0000000000..b6a168d730 --- /dev/null +++ b/understanding/21/rownolegly-mechanizm-wprowadzania-danych.html @@ -0,0 +1,62 @@ + + + + + WCAG 2.0 Understanding Page + + + +

Understanding Concurrent Input Mechanisms

+
+

Intent

+

The intent of this Success Criterion is to ensure that people can use and switch between different modes of input when interacting with web content. Users may employ a variety of input mechanisms when interacting with web content. These may be a combination of mechanisms such as a keyboard or keyboard-like interfaces and pointer devices like a mouse, stylus or touchscreen.

+

Even though a device may have a primary input mechanism, the user may choose to employ alternative input mechanisms when interacting with the device. For example, the primary mechanism for mobile phones and tablets is the touchscreen. The user of these devices may choose to use a paired mouse or external keyboard as an alternative to using the touchscreen.

+

Users should be able to switch input mechanisms at any point should the user determine that certain tasks and interactions are more easily accomplished by using an alternative input mechanism. Content must not limit the user's interaction to any particular input mechanism unless the restriction is essential, or is required to ensure the security of the content or to respect user settings.

+

Note: A touch-typing web application, which teaches users how to touch-type on a keyboard and/or measures their proficiency and speed, would be an example of an essential limitation to a particular input mechanism.

+
+
+

Benefits

+ +
+
+

Examples

+ +
+
+

Resources

+ +
+
+

Techniques

+
+

Sufficient

+ +
+
+

Failure

+ +
+
+ + diff --git a/understanding/21/rozmiar-celu-rozszerzone.html b/understanding/21/rozmiar-celu-rozszerzone.html new file mode 100644 index 0000000000..f1ce7499f8 --- /dev/null +++ b/understanding/21/rozmiar-celu-rozszerzone.html @@ -0,0 +1,82 @@ + + + + + Understanding Target Size (Enhanced) + + + +

Understanding SC 2.5.5 Target Size (Enhanced)

+
+

Intent

+

The intent of this success criterion is to help users who may have trouble activating a small target because of hand tremors, limited dexterity or other reasons. If the target is too small, it may be difficult to aim at the target. Mice and similar pointing devices can be hard to use for these users, and a larger target will help them greatly in having positive outcomes on the web page.

+

Touch is particularly problematic as it is an input mechanism with coarse precision. Users lack the same level of fine control as on inputs such as a mouse or stylus. A finger is larger than a mouse pointer, and generally obstructs the user's view of the precise location on the screen that is being touched/activated.

+

The issue can be further complicated for responsive/mobile sites which need to accommodate different types of fine and coarse inputs (e.g. a site that can be accessed both on a traditional desktop/laptop with a mouse, as well as on a tablet or mobile phone with a touch screen).

+

While this criterion defines a minimum target size, it is recommended that larger sizes are used to reduce the possibility of unintentional actions. This is particularly relevant if any of the following are true:

+ +
+

Benefits

+ +
+
+
+

Examples

+ +
+
+

Resources

+

+ +
+
+

Techniques

+

Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.

+
+

Sufficient

+

Techniques that are sufficient to meet the Guideline or Success Criterion.

+
+
    +
  • Ensuring that targets are at least 44 by 44 CSS pixels.
  • +
  • Ensuring inline links provide sufficiently large activation target.
  • +
+
+
+
+

Advisory

+

Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.

+ +
+
+

Failure

+

The following are common mistakes that are considered failures of Success Criterion 2.5.5 by the WCAG Working Group.

+ +
+
+ + diff --git "a/understanding/21/r\303\263wnoleg\305\202y-mechanizm-wprowadzania-danych.html" "b/understanding/21/r\303\263wnoleg\305\202y-mechanizm-wprowadzania-danych.html" new file mode 100644 index 0000000000..b6a168d730 --- /dev/null +++ "b/understanding/21/r\303\263wnoleg\305\202y-mechanizm-wprowadzania-danych.html" @@ -0,0 +1,62 @@ + + + + + WCAG 2.0 Understanding Page + + + +

Understanding Concurrent Input Mechanisms

+
+

Intent

+

The intent of this Success Criterion is to ensure that people can use and switch between different modes of input when interacting with web content. Users may employ a variety of input mechanisms when interacting with web content. These may be a combination of mechanisms such as a keyboard or keyboard-like interfaces and pointer devices like a mouse, stylus or touchscreen.

+

Even though a device may have a primary input mechanism, the user may choose to employ alternative input mechanisms when interacting with the device. For example, the primary mechanism for mobile phones and tablets is the touchscreen. The user of these devices may choose to use a paired mouse or external keyboard as an alternative to using the touchscreen.

+

Users should be able to switch input mechanisms at any point should the user determine that certain tasks and interactions are more easily accomplished by using an alternative input mechanism. Content must not limit the user's interaction to any particular input mechanism unless the restriction is essential, or is required to ensure the security of the content or to respect user settings.

+

Note: A touch-typing web application, which teaches users how to touch-type on a keyboard and/or measures their proficiency and speed, would be an example of an essential limitation to a particular input mechanism.

+
+
+

Benefits

+ +
+
+

Examples

+ +
+
+

Resources

+ +
+
+

Techniques

+
+

Sufficient

+ +
+
+

Failure

+ +
+
+ + diff --git a/understanding/21/tresc-spod-kursora-lub-fokusu.html b/understanding/21/tresc-spod-kursora-lub-fokusu.html new file mode 100644 index 0000000000..cff83df5d1 --- /dev/null +++ b/understanding/21/tresc-spod-kursora-lub-fokusu.html @@ -0,0 +1,137 @@ + + + + + Understanding Content on Hover or Focus + + + +

Understanding Content on Hover or Focus

+
+

Intent

+

Additional content that appears and disappears in coordination with keyboard focus or pointer hover often leads to accessibility issues. Reasons for such issues include:

+
    +
  1. the user may not have intended to trigger the interaction
  2. +
  3. the user may not know new content has appeared
  4. +
  5. the new content may intefere with a user's ability to do a task
  6. +
+ +

Examples of such interactions can include custom tooltips, sub-menus and other nonmodal popups which display on hover and focus. The intent of this success criterion is to ensure that authors who cause additional content to appear and disappear in this manner must design the interaction in such a way that users can:

+ + +

There are usually more predictable and accessible means of adding content to the page, which authors are recommended to employ. If an author does choose to make additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

+ +

Each of these is discussed in a separate section.

+

This SC covers content that appears in addition to the triggering component itself. Therefore, a non-visible component, like a Skip to Main link, that is made visible on keyboard focus (with no additional content beyond the trigger becoming visible) is not covered by the SC. +

+ +
+

Dismissable

+

The intent of this condition is to ensure that the additional content does not interfere with viewing or operating the page's original content. When magnified, the portion of the page visible in the viewport can be significantly reduced. Mouse users frequently move the pointer to pan the magnified viewport and display another portion of the screen. However, almost the entire portion of the page visible in this restricted viewport may trigger the additional content, making it difficult for a user to pan without re-triggering the content. A keyboard means of dismissing the additional content provides a workaround.

+

Alternatively, low vision users who can only navigate via the keyboard do not want the small area of their magnified viewport cluttered with hover text. They need a keyboard method of dismissing something that is obscuring the current focal area.

+

Two methods may be used to satisfy this condition and prevent such interference:

+
    +
  1. Position the additional content so that it does not obscure any other content including the trigger, with the exception of white space and purely decorative content, such as a background graphic which provides no information.
  2. +
  3. Provide a mechanism to easily dismiss the additional content, such as by pressing Escape.
  4. +
+

For most triggers of relatively small size, it is desirable for both methods to be implemented. If the trigger is large, noticing the additional content may be of concern if it appears away from the trigger. In those cases, only the second method may be appropriate.

+

The success criterion allows for input error messages to persist as there are cases that require attention, explicit confirmation or remedial action.

+
+
+

Hoverable

+

The intent of this condition is to ensure that additional content which may appear on hover of a target may also be hovered itself. Content which appears on hover can be difficult or impossible to perceive if a user is required to keep their mouse pointer over the trigger. When the added content is large, magnified views may mean that the user needs to scroll or pan to completely view it, which is impossible unless the user is able to move their pointer off the trigger without the additional content disappearing.

+

Another common situation is when large pointers have been selected via platform settings or assistive technology. Here, the pointer can obscure a significant area of the additional content. A technique to view the content fully in both situations is to move the mouse pointer directly from the trigger onto the new content. This capability also offers significant advantages for users who utilize screen reader feedback on mouse interactions. This condition generally implies that the additional content overlaps or is positioned adjacent to the target.

+
+
+

Persistent

+

The intent of this condition is to ensure users have adequate time to perceive the additional content after it becomes visible. Users with disabilities may require more time for many reasons, such as to change magnification, move the pointer, or simply to bring the new content into their visual field. Once it appears, the content should remain visible until:

+ +
+
+

Additional Notes

+ +
+
+ +
+

Benefits

+ +
+ +
+

Examples

+ +
+

Example 1: Dismissable Tooltip

+
+ Screenshot of a button with a mouse pointer over it, and a tooltip displayed  below the button + Screenshot of a button with a mouse pointer over it, and no tooltip +
A tooltip is displayed below a LVTF button on hover so as not to obscure the button itself. It does however obscure content below the button (the next red button, called ~comment-zoom-content). To meet the Dismissible requirement, a user can press the Escape key to clear the tooltip without moving the mouse, as demonstrated in the second image.
+
+
+ Screenshot of a button with a focus indicator on it, and no tooltip +
The button's tooltip also appears on focus and can be removed with the Escape key. The screen shot shows the same LVTF button with focus, but the tooltip has been dismissed and is no longer visible.
+
+
+ +
+

Example 2: Hoverable Tooltip

+
+ Screenshot of a button with a large mouse pointer over it, and a tooltip displayed  below the button which is obscured by the large pointer + Screenshot of a button with a tooltip below it, and a large mouse pointer at the bottom of the tooltip +
A button's tooltip is displayed directly below it on mouse hover which can easily be obscured by a large pointer. The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.
+
+
+ +
+
+

Resources

+ +
+ +
+

Techniques

+
+

Sufficient

+ +
+ +
+

Failure

+ +
+
+ + diff --git "a/understanding/21/tre\305\233\304\207-spod-kursora-lub-fokusu.html" "b/understanding/21/tre\305\233\304\207-spod-kursora-lub-fokusu.html" new file mode 100644 index 0000000000..cff83df5d1 --- /dev/null +++ "b/understanding/21/tre\305\233\304\207-spod-kursora-lub-fokusu.html" @@ -0,0 +1,137 @@ + + + + + Understanding Content on Hover or Focus + + + +

Understanding Content on Hover or Focus

+
+

Intent

+

Additional content that appears and disappears in coordination with keyboard focus or pointer hover often leads to accessibility issues. Reasons for such issues include:

+
    +
  1. the user may not have intended to trigger the interaction
  2. +
  3. the user may not know new content has appeared
  4. +
  5. the new content may intefere with a user's ability to do a task
  6. +
+ +

Examples of such interactions can include custom tooltips, sub-menus and other nonmodal popups which display on hover and focus. The intent of this success criterion is to ensure that authors who cause additional content to appear and disappear in this manner must design the interaction in such a way that users can:

+ + +

There are usually more predictable and accessible means of adding content to the page, which authors are recommended to employ. If an author does choose to make additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

+ +

Each of these is discussed in a separate section.

+

This SC covers content that appears in addition to the triggering component itself. Therefore, a non-visible component, like a Skip to Main link, that is made visible on keyboard focus (with no additional content beyond the trigger becoming visible) is not covered by the SC. +

+ +
+

Dismissable

+

The intent of this condition is to ensure that the additional content does not interfere with viewing or operating the page's original content. When magnified, the portion of the page visible in the viewport can be significantly reduced. Mouse users frequently move the pointer to pan the magnified viewport and display another portion of the screen. However, almost the entire portion of the page visible in this restricted viewport may trigger the additional content, making it difficult for a user to pan without re-triggering the content. A keyboard means of dismissing the additional content provides a workaround.

+

Alternatively, low vision users who can only navigate via the keyboard do not want the small area of their magnified viewport cluttered with hover text. They need a keyboard method of dismissing something that is obscuring the current focal area.

+

Two methods may be used to satisfy this condition and prevent such interference:

+
    +
  1. Position the additional content so that it does not obscure any other content including the trigger, with the exception of white space and purely decorative content, such as a background graphic which provides no information.
  2. +
  3. Provide a mechanism to easily dismiss the additional content, such as by pressing Escape.
  4. +
+

For most triggers of relatively small size, it is desirable for both methods to be implemented. If the trigger is large, noticing the additional content may be of concern if it appears away from the trigger. In those cases, only the second method may be appropriate.

+

The success criterion allows for input error messages to persist as there are cases that require attention, explicit confirmation or remedial action.

+
+
+

Hoverable

+

The intent of this condition is to ensure that additional content which may appear on hover of a target may also be hovered itself. Content which appears on hover can be difficult or impossible to perceive if a user is required to keep their mouse pointer over the trigger. When the added content is large, magnified views may mean that the user needs to scroll or pan to completely view it, which is impossible unless the user is able to move their pointer off the trigger without the additional content disappearing.

+

Another common situation is when large pointers have been selected via platform settings or assistive technology. Here, the pointer can obscure a significant area of the additional content. A technique to view the content fully in both situations is to move the mouse pointer directly from the trigger onto the new content. This capability also offers significant advantages for users who utilize screen reader feedback on mouse interactions. This condition generally implies that the additional content overlaps or is positioned adjacent to the target.

+
+
+

Persistent

+

The intent of this condition is to ensure users have adequate time to perceive the additional content after it becomes visible. Users with disabilities may require more time for many reasons, such as to change magnification, move the pointer, or simply to bring the new content into their visual field. Once it appears, the content should remain visible until:

+ +
+
+

Additional Notes

+ +
+
+ +
+

Benefits

+ +
+ +
+

Examples

+ +
+

Example 1: Dismissable Tooltip

+
+ Screenshot of a button with a mouse pointer over it, and a tooltip displayed  below the button + Screenshot of a button with a mouse pointer over it, and no tooltip +
A tooltip is displayed below a LVTF button on hover so as not to obscure the button itself. It does however obscure content below the button (the next red button, called ~comment-zoom-content). To meet the Dismissible requirement, a user can press the Escape key to clear the tooltip without moving the mouse, as demonstrated in the second image.
+
+
+ Screenshot of a button with a focus indicator on it, and no tooltip +
The button's tooltip also appears on focus and can be removed with the Escape key. The screen shot shows the same LVTF button with focus, but the tooltip has been dismissed and is no longer visible.
+
+
+ +
+

Example 2: Hoverable Tooltip

+
+ Screenshot of a button with a large mouse pointer over it, and a tooltip displayed  below the button which is obscured by the large pointer + Screenshot of a button with a tooltip below it, and a large mouse pointer at the bottom of the tooltip +
A button's tooltip is displayed directly below it on mouse hover which can easily be obscured by a large pointer. The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.
+
+
+ +
+
+

Resources

+ +
+ +
+

Techniques

+
+

Sufficient

+ +
+ +
+

Failure

+ +
+
+ + diff --git "a/understanding/22/dost\304\231pne-uwierzytelnianie-ulepszone.html" "b/understanding/22/dost\304\231pne-uwierzytelnianie-ulepszone.html" new file mode 100644 index 0000000000..bbe28b7f79 --- /dev/null +++ "b/understanding/22/dost\304\231pne-uwierzytelnianie-ulepszone.html" @@ -0,0 +1,140 @@ + + + + + Understanding Accessible Authentication + + + +

Understanding Accessible Authentication (Enhanced)

+ +
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+ +
+ +

Accessible Authentication Success Criteria text

+
+

AAA

+ + +

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of:

+
+
Alternative
+
Another authentication method that does not rely on a cognitive function test.
+
Mechanism
+
A mechanism is available to assist the user in completing the cognitive function test.
+
+ +
+

Cognitive function test definition

+
+

A task that requires the user to remember, manipulate, or transcribe information. Examples include, but are not limited to:

+ +
+
+ +
+

Intent of Accessible Authentication (Enhanced)

+ +

The purpose of this Success Criterion is to ensure there is an accessible, easy-to-use, and secure method to log in, access content, and undertake tasks. This criterion is the same as Accessible Authentication but without the exceptions for objects and user-provided content.

+ +

Any required step of the authentication process:

+ + +
+
+

Benefits of Accessible Authentication (Enhanced)

+ +

The benefits of this success criterion are the same as Accessible Authentication.

+ +

People with cognitive issues relating to memory, reading (for example, dyslexia), numbers (for example, dyscalculia), or perception-processing limitations will be able to authenticate irrespective of the level of their cognitive abilities.

+ +
+ +
+

Examples of Accessible Authentication (Enhanced)

+

The examples of this success criterion are very similar to the Accessible Authentication.

+ + +
+ + +
+

Techniques for Accessible Authentication (Enhanced)

+ + +
+

Sufficient Techniques for Accessible Authentication

+ + +
    +
  1. + Email link authentication +
  2. +
  3. + Providing a properly marked up email and password inputs (Potential future technique) +
  4. +
  5. + Providing WebAuthn as an alternative to username/password (Potential future technique) +
  6. +
  7. + Providing a 3rd party login using oAuth (Potential future technique) +
  8. +
  9. + Using two techniques to provide 2 factor authentication (Potential future technique) +
  10. +
+ +
+ +
+

Additional Techniques (Advisory) for Accessible Authentication (Enhanced)

+ +
+ +
+

Failures for Accessible Authentication (Enhanced)

+ +
+ +
+
+

Resources

+ + + +
+ + + + diff --git "a/understanding/22/dost\304\231pne-uwierzytelnianie.html" "b/understanding/22/dost\304\231pne-uwierzytelnianie.html" new file mode 100644 index 0000000000..81970ecbb4 --- /dev/null +++ "b/understanding/22/dost\304\231pne-uwierzytelnianie.html" @@ -0,0 +1,192 @@ + + + + + Understanding Accessible Authentication + + + +

Understanding Accessible Authentication

+ +
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+ +
+ +

Accessible Authentication Success Criteria text

+
+

AA

+ +

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of:

+
+
Alternative
+
Another authentication method that does not rely on a cognitive function test.
+
Mechanism
+
A mechanism is available to assist the user in completing the cognitive function test.
+
Object Recognition
+
The cognitive function test is to recognize objects.
+
Personal Content
+
The cognitive function test is to identify non-text content the user provided to the website.
+
+

"Object recognition" and "Personal content" may be represented by images, video, or audio.

+
Examples of mechanisms that satisfy this criterion include: +
    +
  1. support for password entry by password managers to reduce memory need;
  2. +
  3. copy and paste to reduce the cognitive burden of re-typing;
  4. +
  5. Support for on-device biometric authentication.
  6. +
+
+ +
+

Cognitive function test definition

+
+

A task that requires the user to remember, manipulate, recognize, or transcribe information. Examples include, but are not limited to:

+ +
+
+ +
+

While websites that use the recognition of objects or content provided by the user the exception pass this SC, they do not fully support the cognitive accessibility community and should be avoided if possible. Refer to the level AAA understanding document for guidance to be fully inclusive and accessible. This includes recognizing a picture.

+
+ +
+

Intent of Accessible Authentication

+ +

The purpose of this Success Criterion is to ensure there is an accessible, easy-to-use, and secure method to log in. Most web sites rely on usernames and passwords for logging in. Memorizing a username and password (or transcribing it manually) places a very high or impossible burden upon people with certain cognitive disabilities.

+ +

Remembering a site-specific password is a cognitive function test. Such tests are known to be problematic for many people with cognitive disabilities. Whether it is remembering random strings of characters, a pattern gesture to perform on a touch screen, or identifying which images include a particular object, cognitive function tests will exclude some people. When a cognitive function test is used, at least one other authentication method must be available which is not a cognitive function test.

+ +

If there is more than one step in the authentication process, such as with multi-factor authentication, all steps need to comply with this Success Criterion to pass. There needs to be a path through authentication that does not rely on cognitive function tests.

+ +

Being able to recover or change the email and password is an important part of authentication. If the user is authenticating with alternative information in order to recover their account, there needs to be a method that is not a cognitive function test.

+ +

Many organizations are required to use 2-factor authentication that combines independent sources to confirm a user’s identity. These sources can consist of combining authentication through:

+ + + +

Most knowledge-based authentication methods rely on a cognitive function test and so mechanisms to assist users must be available. When authentication relies on performing an action on a separate device, it needs to be possible to complete the action without transcribing information. It may not be possible to know what device-based authentication methods are available to a user; offering a choice of methods can allow them to choose the path that most suits them.

+ +

Web sites can employ username (or email) and password inputs as an authentication method if it enables the user agent (browsers and third-party password managers) to fill in the fields automatically. If the login form meets Success Criterion 1.3.5 Input Purpose, and the form controls have an appropriate accessible name in accordance with Success Criterion 4.1.2 Name, Role, Value, the user agent can reliably recognize the fields and automatically fill them in. However, if the user agent is blocked from filling in the fields by a script then the page would not pass this criterion because it prevents the mechanism from working.

+ +

Copy and paste

+

Copy and paste can be relied on to avoid transcription. Users can copy their login credentials from a local source (such as a standalone third-party password manager) and paste it into the username and password fields on a login form, or into a web-based command line interfaces asking for a password. Blocking people from pasting into authentication fields, or using a different format between the copied text and the input field (for example, "Enter the 3rd, 4th, and 6th character of your password"), would force the user to transcribe information and therefore fail this criterion, unless another method is available.

+ +

Object Recognition

+

If a CAPTCHA is used as part of an authentication process, there must be a method that does not include a cognitive function test, unless it meets the exception. If the test is based on something the website has set such as remembering or transcribing a word, or recognizing a picture the website provided, that would be a cognitive functional test. Recognizing objects, or a picture the user has provided is a cognitive function test; however, it is excepted at the AA level. Some forms of object recognition may require an understanding of a particular culture. For example, taxis can appear differently in different locales. This is an issue for many people, including people with disabilities, but it is not considered an accessibility-specific issue.

+ +

Some CAPTCHAs and cognitive function tests used for authentication may only appear in certain situations, such as when ad blockers are present, or after repeated incorrect password entry. This criterion applies when these tests are used regardless of whether they are used every time or only triggered by specific scenarios.

+ +

There are a number of technologies that can be employed to prevent scripted abuse of the authentication process.

+ + + +

None of these systems are 100% effective. However, they may reduce the likelihood of a CAPTCHA being displayed.

+ +

Another factor that can contribute to cognitive load is hiding characters when typing. Although this criterion requires that users do not have to type in (transcribe) a password, there are scenarios where that is necessary such as creating a password to be saved by a password manager. Providing a feature to optionally show a password can improve the chance of success for some people with cognitive disabilities or those who have difficulties with accurately typing.

+ +

Personal Content

+

Personal content is sometimes used as a second factor for authentication. For example, as part of account creation the user would upload a picture, and when logging in they would be asked to select that picture from several possible alternatives. Care must be taken to provide adequate security in this case, since non-legitimate users might be able to guess the correct personal content when presented with a choice.

+ +

Text-based personal content does not qualify for this exception as it relies on recall (rather than recognition), and transcription (rather than selecting an item). Whilst picture-based personal content will still be a barrier for some people, text based versions tend to be a much larger barrier.

+ +

Hiding characters

+

Another factor that can contribute to cognitive load is hiding characters when typing. Although this criterion requires that users do not have to type in (transcribe) a password, there are non-authentication scenarios where that is necessary. For example, creating a password to be saved by a password manager. Providing a feature to toggle the visibility of password can improve the chance of success for some people with cognitive disabilities or those who have difficulties with accurately typing.

+ + +
+
+

Benefits of Accessible Authentication

+ +

People with cognitive issues relating to memory, reading (for example, dyslexia), numbers (for example, dyscalculia), or perception-processing limitations will be able to authenticate irrespective of the level of their cognitive abilities.

+ +
+ +
+

Examples of Accessible Authentication

+ + + +
+ + +
+

Techniques for Accessible Authentication

+ + +
+

Sufficient Techniques for Accessible Authentication

+ +
    +
  1. + Email link authentication +
  2. +
  3. + Providing properly marked up email and password inputs +
  4. +
  5. + Providing WebAuthn as an alternative to username/password (Potential future technique) +
  6. +
  7. + Providing a 3rd party login using oAuth (Potential future technique) +
  8. +
  9. + Using two techniques to provide 2 factor authentication (Potential future technique) +
  10. +
+ +
+ +
+

Additional Techniques (Advisory) for Accessible Authentication

+ +
+ +
+

Failures for Accessible Authentication

+ +
+ +
+
+

Resources

+ + + +
+ + + diff --git a/understanding/22/nieprzesloniety-fokus-rozszerzony.html b/understanding/22/nieprzesloniety-fokus-rozszerzony.html new file mode 100644 index 0000000000..16ab295e30 --- /dev/null +++ b/understanding/22/nieprzesloniety-fokus-rozszerzony.html @@ -0,0 +1,91 @@ + + + + + Understanding Focus Not Obscured (Enhanced) + + + +

Understanding Focus Not Obscured (Enhanced)

+ +
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+ + +
+ +

Focus Not Obscured Success Criterion text

+
+

When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.

+
+
+ +
+ +

Intent of Focus Not Obscured (Enhanced)

+ +

The purpose of this Success Criterion is to ensure that a component with keyboard focus is visible. This criterion is closely related to Focus Not Obscured (Minimum) but requires that the whole of the component is visible.

+ +
+ +
+

Benefits of Focus Not Obscured (Enhanced)

+ + + +
+ +
+

Examples of Focus Not Obscured (Enhanced)

+ + + +
+ +
+

Resources

+ +
+ + +
+

Techniques for Focus Not Obscured (Enhanced)

+ + +
+

Sufficient Techniques

+ + +
    +
  1. + CSS: Using scroll-padding to ensure a sticky header does not obscure the focused item (Potential future technique). +
  2. +
+ +
+ +
+

Additional Techniques (Advisory)

+ +
+ +
+

Failures

+
    +
  1. + +
  2. +
+
+ +
+ + + \ No newline at end of file diff --git "a/understanding/22/nieprzes\305\202oni\304\231ty-fokus-rozszerzony.html" "b/understanding/22/nieprzes\305\202oni\304\231ty-fokus-rozszerzony.html" new file mode 100644 index 0000000000..16ab295e30 --- /dev/null +++ "b/understanding/22/nieprzes\305\202oni\304\231ty-fokus-rozszerzony.html" @@ -0,0 +1,91 @@ + + + + + Understanding Focus Not Obscured (Enhanced) + + + +

Understanding Focus Not Obscured (Enhanced)

+ +
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+ + +
+ +

Focus Not Obscured Success Criterion text

+
+

When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.

+
+
+ +
+ +

Intent of Focus Not Obscured (Enhanced)

+ +

The purpose of this Success Criterion is to ensure that a component with keyboard focus is visible. This criterion is closely related to Focus Not Obscured (Minimum) but requires that the whole of the component is visible.

+ +
+ +
+

Benefits of Focus Not Obscured (Enhanced)

+ + + +
+ +
+

Examples of Focus Not Obscured (Enhanced)

+ + + +
+ +
+

Resources

+ +
+ + +
+

Techniques for Focus Not Obscured (Enhanced)

+ + +
+

Sufficient Techniques

+ + +
    +
  1. + CSS: Using scroll-padding to ensure a sticky header does not obscure the focused item (Potential future technique). +
  2. +
+ +
+ +
+

Additional Techniques (Advisory)

+ +
+ +
+

Failures

+
    +
  1. + +
  2. +
+
+ +
+ + + \ No newline at end of file diff --git a/understanding/22/nieprzysloniety-fokus-minimum.html b/understanding/22/nieprzysloniety-fokus-minimum.html new file mode 100644 index 0000000000..44cbd3d18c --- /dev/null +++ b/understanding/22/nieprzysloniety-fokus-minimum.html @@ -0,0 +1,118 @@ + + + + + Objaśnienie Fokus niezakryty + + + +

Objaśnienie Fokus niezakryty

+ +
+

Status

+

Ten dokument objaśniający jest częścią projektu roboczej wersji treści WCAG 2.2. Może ulec zmianie lub zostać usunięty przed opublikowaniem ostatecznej wersji WCAG 2.2. +

+
+ + +
+ +

Tekst kryterium sukcesu Fokus niezakryty

+
+

Gdy komponent interfejsu użytkownika otrzymuje fokus klawiatury, komponent nie jest całkowicie zasłaniany przez treść stworzoną przez autora.

+
+
+ + +
+ +

Intencja wymogu Fokus niezakryty

+ +

Dla osób widzących i z niepełnosprawnością ruchową, które korzystają z urządzeń podobnych do klawiatury (np. przełącznik, wejście głosowe), świadomość aktualnego punktu skupienia jest bardzo ważna. W przypadku, gdy inne treści mogą nakładać się na element zogniskowany (element, na którym skupia się uwaga klawiatury), całkowite ukrycie elementu zogniskowanego (sfokusowanego) oznacza, że użytkownik nie będzie widział, gdzie znajduje się punkt skupienia. +

+ +

Typowe rodzaje treści, które mogą nakładać się na elementy zogniskowane to przyklejone stopki, przyklejone nagłówki lub niemodalne okna dialogowe. W miarę jak użytkownik przechodzi przez stronę, te warstwy treści mogą przesłonić zogniskowany (sfokusowany) element, w tym wskaźnik skupienia (wskaźnik fokusu). Jeśli interfejs jest konfigurowalny tak, że użytkownik może przesuwać paski narzędzi i niemodalne okna dialogowe, wtedy przy testowaniu i ocenie zgodności z tym kryterium sukcesu będą brane pod uwagę tylko początkowe pozycje treści poruszanej przez użytkownika. + + +

+ +

To kryterium pozwala na przesłonięcie części elementu zogniskowanego (sfokusowanego), ponieważ mogą istnieć praktyczne powody, dla których część elementu zogniskowanego (sfokusowanego) jest przesłonięta. Dla najlepszej widoczności żaden z elementów lub wskaźnik fokusu (skupienia) nie powinien być ukryty, zobacz również Fokus niezakryty (ulepszone). + +

+ +

Idealnie byłoby unikać nakładania się elementu otrzymującego skupienie (fokus) na inną treść. Jednak ze względu na powszechne obecnie złożone, responsywne projekty, minimalna wersja tego kryterium wymaga jedynie tego, aby tam, gdzie inne treści nakładają się na element otrzymujący fokus, nie nie zasłaniały tego elementu całkowicie. Typowe rodzaje treści, które mogą zachodzić na elementy zogniskowane to przypięte stopki, przypięte nagłówki lub niemodalne okna dialogowe. Gdy użytkownik przechodzi przez stronę, te warstwy treści mogą przesłonić element zogniskowany i jego wskaźnik skupienia (fokusu). +

+ +

Powiadomienie wykonane jako treść przypięta, na przykład baner o ciasteczkach, nie spełni tego kryterium sukcesu, jeśli zasłania element z fokusem. Sposoby na ominięcie tego kryterium obejmują uczynienie banera modalnym, tak aby użytkownik musiał go odrzucić przed nawigacją po stronie, lub użycie scroll padding (przewijania), aby baner nie nachodził na inne treści. Powiadomienia, które nie wymagają działania użytkownika, również mogą spełniać to kryterium poprzez zamykanie (odrzucanie) w przypadku utraty skupienia (fokusu).

+ +

Inną formą przesłaniania mogą być lightboksy lub inne półprzezroczyste efekty nakładające się na element, na którym skupiona jest uwaga. Mimo że mniej niż 100% nieprzezroczystości nie powoduje, że element jest całkowicie ukryty, takie półprzezroczyste nakładki mogą powodować niespełnienie KS 2.4.11 Wygląd fokusu. Gdy wskaźnik fokusu może być zakryty przez półprzezroczysty komponent, zdolność wskaźnika fokusu do spełnienia kryterium 2.4.11 powinna być oceniana (i uznana za spełnioną), gdy wskaźnik fokusu znajduje się pod półprzezroczystym komponentem. Intencją w obu sytuacjach jest to, że element otrzymujący skupienie nigdy nie powinien być przesłonięty do tego stopnia, że użytkownik nie może stwierdzić, który element ma skupienie.

+ +

Jeśli interfejs można skonfigurować w taki sposób, że użytkownik może przesuwać paski narzędzi i niemodalne okna dialogowe, wtedy tylko początkowe pozycje treści, które użytkownik może przenosić, będą brane pod uwagę przy testowaniu i zgodności z tym Kryterium sukcesu. +

+ +
+ +
+

Korzyści z niezakrytergo fokusu

+ + + +
+ +
+

Przykłady niezakrytego fokusu

+ + + +
+ +
+

Zasoby

+ +
+ + +
+

Techniki dla Fokus niezakryty

+ + +
+

Techniki wystarczające

+ + +
    +
  1. + CSS: Using scroll-padding to ensure a sticky header does not entirely obscure the focused item (Potential future technique). + CSS: Użycie przewijania (scroll-padding), aby zapewnić, że przypięty nagłówek nie zasłania całkowicie skupionego elementu (potencjalna przyszła technika). +
  2. +
+ +
+ +
+

Techniki dodatkowe (pomocnicze)

+ +
+ +
+

Błędy

+
    +
  1. + +
  2. +
+
+ +
+ + + diff --git "a/understanding/22/nieprzys\305\202oni\304\231ty-fokus-minimum.html" "b/understanding/22/nieprzys\305\202oni\304\231ty-fokus-minimum.html" new file mode 100644 index 0000000000..44cbd3d18c --- /dev/null +++ "b/understanding/22/nieprzys\305\202oni\304\231ty-fokus-minimum.html" @@ -0,0 +1,118 @@ + + + + + Objaśnienie Fokus niezakryty + + + +

Objaśnienie Fokus niezakryty

+ +
+

Status

+

Ten dokument objaśniający jest częścią projektu roboczej wersji treści WCAG 2.2. Może ulec zmianie lub zostać usunięty przed opublikowaniem ostatecznej wersji WCAG 2.2. +

+
+ + +
+ +

Tekst kryterium sukcesu Fokus niezakryty

+
+

Gdy komponent interfejsu użytkownika otrzymuje fokus klawiatury, komponent nie jest całkowicie zasłaniany przez treść stworzoną przez autora.

+
+
+ + +
+ +

Intencja wymogu Fokus niezakryty

+ +

Dla osób widzących i z niepełnosprawnością ruchową, które korzystają z urządzeń podobnych do klawiatury (np. przełącznik, wejście głosowe), świadomość aktualnego punktu skupienia jest bardzo ważna. W przypadku, gdy inne treści mogą nakładać się na element zogniskowany (element, na którym skupia się uwaga klawiatury), całkowite ukrycie elementu zogniskowanego (sfokusowanego) oznacza, że użytkownik nie będzie widział, gdzie znajduje się punkt skupienia. +

+ +

Typowe rodzaje treści, które mogą nakładać się na elementy zogniskowane to przyklejone stopki, przyklejone nagłówki lub niemodalne okna dialogowe. W miarę jak użytkownik przechodzi przez stronę, te warstwy treści mogą przesłonić zogniskowany (sfokusowany) element, w tym wskaźnik skupienia (wskaźnik fokusu). Jeśli interfejs jest konfigurowalny tak, że użytkownik może przesuwać paski narzędzi i niemodalne okna dialogowe, wtedy przy testowaniu i ocenie zgodności z tym kryterium sukcesu będą brane pod uwagę tylko początkowe pozycje treści poruszanej przez użytkownika. + + +

+ +

To kryterium pozwala na przesłonięcie części elementu zogniskowanego (sfokusowanego), ponieważ mogą istnieć praktyczne powody, dla których część elementu zogniskowanego (sfokusowanego) jest przesłonięta. Dla najlepszej widoczności żaden z elementów lub wskaźnik fokusu (skupienia) nie powinien być ukryty, zobacz również Fokus niezakryty (ulepszone). + +

+ +

Idealnie byłoby unikać nakładania się elementu otrzymującego skupienie (fokus) na inną treść. Jednak ze względu na powszechne obecnie złożone, responsywne projekty, minimalna wersja tego kryterium wymaga jedynie tego, aby tam, gdzie inne treści nakładają się na element otrzymujący fokus, nie nie zasłaniały tego elementu całkowicie. Typowe rodzaje treści, które mogą zachodzić na elementy zogniskowane to przypięte stopki, przypięte nagłówki lub niemodalne okna dialogowe. Gdy użytkownik przechodzi przez stronę, te warstwy treści mogą przesłonić element zogniskowany i jego wskaźnik skupienia (fokusu). +

+ +

Powiadomienie wykonane jako treść przypięta, na przykład baner o ciasteczkach, nie spełni tego kryterium sukcesu, jeśli zasłania element z fokusem. Sposoby na ominięcie tego kryterium obejmują uczynienie banera modalnym, tak aby użytkownik musiał go odrzucić przed nawigacją po stronie, lub użycie scroll padding (przewijania), aby baner nie nachodził na inne treści. Powiadomienia, które nie wymagają działania użytkownika, również mogą spełniać to kryterium poprzez zamykanie (odrzucanie) w przypadku utraty skupienia (fokusu).

+ +

Inną formą przesłaniania mogą być lightboksy lub inne półprzezroczyste efekty nakładające się na element, na którym skupiona jest uwaga. Mimo że mniej niż 100% nieprzezroczystości nie powoduje, że element jest całkowicie ukryty, takie półprzezroczyste nakładki mogą powodować niespełnienie KS 2.4.11 Wygląd fokusu. Gdy wskaźnik fokusu może być zakryty przez półprzezroczysty komponent, zdolność wskaźnika fokusu do spełnienia kryterium 2.4.11 powinna być oceniana (i uznana za spełnioną), gdy wskaźnik fokusu znajduje się pod półprzezroczystym komponentem. Intencją w obu sytuacjach jest to, że element otrzymujący skupienie nigdy nie powinien być przesłonięty do tego stopnia, że użytkownik nie może stwierdzić, który element ma skupienie.

+ +

Jeśli interfejs można skonfigurować w taki sposób, że użytkownik może przesuwać paski narzędzi i niemodalne okna dialogowe, wtedy tylko początkowe pozycje treści, które użytkownik może przenosić, będą brane pod uwagę przy testowaniu i zgodności z tym Kryterium sukcesu. +

+ +
+ +
+

Korzyści z niezakrytergo fokusu

+ + + +
+ +
+

Przykłady niezakrytego fokusu

+ + + +
+ +
+

Zasoby

+ +
+ + +
+

Techniki dla Fokus niezakryty

+ + +
+

Techniki wystarczające

+ + +
    +
  1. + CSS: Using scroll-padding to ensure a sticky header does not entirely obscure the focused item (Potential future technique). + CSS: Użycie przewijania (scroll-padding), aby zapewnić, że przypięty nagłówek nie zasłania całkowicie skupionego elementu (potencjalna przyszła technika). +
  2. +
+ +
+ +
+

Techniki dodatkowe (pomocnicze)

+ +
+ +
+

Błędy

+
    +
  1. + +
  2. +
+
+ +
+ + + diff --git a/understanding/22/rozmiar-celu-minimalny.html b/understanding/22/rozmiar-celu-minimalny.html new file mode 100644 index 0000000000..1ff4e7cb79 --- /dev/null +++ b/understanding/22/rozmiar-celu-minimalny.html @@ -0,0 +1,213 @@ + + + + + Understanding Target Size (Minimum) + + + +

Understanding Target Size (Minimum)

+ +
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+ +
+ +

Target Size (Minimum) Success Criterion text

+
+

Target Size (Minimum)

+ +

AA

+

New

+ +

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:

+ +

Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.

+

For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed top to bottom, the line-height would be horizontal.

+
target offset
+
+

New

+

length of the longest possible line that starts at an edge of a target (A), intersects a second edge of A, and ends at the closest edge of a second target (B). For horizontally aligned targets, target offset is measured with a horizontal line. For vertically aligned targets, target offset is measured with a vertical line. For targets that are neither, target offset is measured diagonally.

+ +

Two targets are horizontally aligned if a horizontal line can be drawn that goes through both targets, but no vertical line can be drawn that goes through both targets. Two targets are vertically aligned if a vertical line can be drawn that goes through both targets, but no horizontal line can be drawn that goes through both targets.

+

The target offset from A to B may be different than the target offset from B to A, if the sizes of these targets differ.

+
+
+
+ +
+

Intent of Target Size (Minimum)

+ +

The intent of this Success Criterion is to help ensure targets can be easily activated without accidentally activating an adjacent target. When targets are small, it is difficult for users with hand tremors and those who have difficulty with fine motor movement to activate them accurately. Providing sufficient size, or sufficient spacing between targets, will reduce the likelihood of accidentally activating the wrong control.

+ +

This Success Criterion defines a minimum size; using larger sizes will help many people use targets more easily. Meeting 2.5.5 Target Size (Enhanced) is recommended whenever possible.

+ +
+

Exceptions

+

The requirement is for targets to be at least 24 by 24 CSS pixels in size. There are five exceptions:

+ +
    +
  1. Spacing: If a target is smaller than 24 by 24 CSS pixels but has sufficient spacing, it passes. The spacing is sufficient if the target offset between targets is at least 24 CSS pixels. Target offset is the length of the longest possible line that starts at an edge of a target (A), intersects a second edge of A, and ends at the closest edge of a second target (B). It is assessed from a target to each other nearby target; the target offset must be at least 24 CSS pixels to all nearby targets to fall under this exception. The line used to measure target offset depends on the sizes, shapes, and relative positions of the two targets. For example, if considering the target offset from a rectangular target (A) to an equally-sized rectangular neighbor target (B) directly to A's right, target offset would be measured with a horizontal line starting from the left edge of A, passing through the right edge of A, and ending at the left edge of B. Note that the target offset from A to B may be different than the target offset from B to A.
  2. +
  3. Equivalent: In cases where a target does not have an size equivalent to 24 by 24 CSS pixels, but there is another control that can achieve the underlying function that does meet the minimum size, the target can be excepted based on the "Equivalent" exception.
  4. +
  5. Inline: The Success Criterion does not apply to inline targets in sentences, bulleted / numbers lists, or where the size of the target is constrained by the line-height of non-target text. This exception is allowed because text reflow based on viewport size makes it impossible for authors to anticipate where links may be positioned relative to one another. When multiple links are embedded in blocks of texts in smaller text sizes, maintaining a 24 CSS pixels offset between links in adjacent lines of text would require a large line height which can be undesirable in many design contexts. Also, inline numeric footnotes common in scientific texts may sometimes have a size well below 24 CSS pixels.
    Note: Stacked links in navigation structure that happen to use list markup do not count as inline links. Authors can anticipate the relative position of these links and provide sufficient target spacing.
  6. +
  7. User agent control: Browsers have default renderings of some controls, such as the days of the month calendar in an input type="date". As long as the author has not modified the user agent default, the target size for a "User agent control" is excepted.
  8. +
  9. Essential: If the spacing of the targets is essential to the information being conveyed, the "Essential" exception applies. For example, in digital maps, the position of pins is analogous to the position of places shown on the map. If there are many pins close together, the offset between pins and neighboring pins will often be below 24 CSS pixels. It is essential to show the pins at the correct map location, therefore the Essential exception applies. As well, some jurisdictions legally require online forms to replicate paper forms, which can impose constraints on the size of targets. In such jurisdictions, any legal requirement to replicate small targets can be considered essential.
  10. +
+
+ +
+

Size requirement

+ +

For a target to be "24 by 24 CSS pixels", it must be possible to draw a solid 24 by 24 CSS pixel (px) square, aligned to the horizontal and vertical axis such that the square is completely within the target (does not extend outside the target's area).

+ +
+ Three square boxes next to each other, each 24px wide. +
Where targets are a 24 by 24px square (and larger is better), they meet the first line of the criterion and pass.
+
+ +

The 24 by 24px square has to be aligned with the page, although the target itself could be skewed.

+ +
+ A skewed rectangle that includes a 24 by 24px square within it. +
So long as there is a solid 24 by 24px square within the target, it meets the first line of the criterion and passes.
+
+ +

If a target does not include a 24 by 24px square but does have space around it, check the Spacing exception (below).

+ +
+ A circle with a diameter of 24px, but not filling up a 24px square. +
The rounded corners of the circle do not fill the 24 by 24px square so does not pass the first line of the criterion. However, depending on the spacing to other targets it may pass by the spacing exception.
+
+ +

The requirement is independent of the zoom factor of the page; when users zoom in the CSS pixel size of elements does not change. This means that authors cannot meet it by claiming that the target will have enough spacing or sufficient size if the user zooms into the page.

+ +

The requirement does not apply to targets while they are obscured by content displayed as a result of a user interaction or scripted behavior of content, for example:

+ + +

The requirement does however apply to targets in any new content that appears on top of other content.

+ +

While the Success Criterion primarily helps touch users by providing target sizing to prevent accidental triggering of adjacent targets, it is also useful for mouse or pen users. It reduces the chances of erroneous activation due to either a tremor or reduced precision, whether because of reduced fine motor control or input imprecision.

+ +
+
+

Spacing versus size

+ +

Spacing, alone and in conjunction with size, can improve user experience. There is less chance of accidentally activating a neighboring target if a target is not immediately adjacent to another. Touchscreen devices and user agents generally have internal heuristics to identify which link or control is closest to a user's touch interaction - this means that sufficient spacing around a target can work as effectively as a larger target size itself.

+ +

The following illustrate a variety of situations using size and spacing of targets. In the top line of icons, the dimensions of each icon target are 44 by 44 CSS pixels with no space in between. This amply passes this Success Criterion and is actually sufficient to meet the AAA requirement for Target Size (Enhanced). In the next row, the dimensions of each icon target are 24 by 24 CSS pixels with no space in between, passing this Success Criterion. In the third row, the same icon targets are only 20 by 20 CSS pixels but they have a 4 CSS pixel space in between, passing this Success Criterion via the spacing exception. In the last row, the same icon targets are only 20 by 20 CSS pixels and have no space in between, failing this Success Criterion.

+ +
+ Four rows of icons with measurements, the first three passing,the last failing the requirement. +
Four rows of targets, illustrating three ways of meeting this Success Criterion and one way of failing it.
+
+

When targets are not 24 by 24 CSS pixels, it is still possible to meet this Success Criterion. The next two illustrations show sets of buttons which are only 20 CSS pixels tall. In the first set, there are no targets immediately above or below the buttons, so they pass. In the second illustration, the buttons have been stacked on top of one another, resulting in a fail.

+
+ A row of buttons which are more that 44px wide and 20 CSS pixels high. There are no targets above or below. +
The widths of the buttons with adjacent neighbors is above 24 CSS pixels, while the height is only 20 CSS pixels. However, the lack of adjacent targets above and below means that the targets pass this Success Criterion.
+
+ +
+ Two rows of buttons only 20 CSS pixels high, with no spacing between them. +
Fail: Two rows of buttons, both with a height of only 20 CSS pixels. The rows are flush, with no gap between them, which means that the offset from the top of the targets in the top row to the top of targets in the row below is below 24px, thus failing the Success Criterion.
+
+

The following two illustrations show how menu items can be adjusted to properly meet this requirement. In the first illustration, the About us menu has been activated, showing that each of the menu item targets (text and padding) has a 24 CSS pixel height. In the second illustration, the same menu is expanded, but the menu items only achieve 20 CSS pixels in height.

+
+ A dropdown menu - a pass example with menu items 24 CSS pixels high, and a fail example with menu items only 20 CSS pixels high. +
A dropdown menu is shown. The PASS example has menu items which are 24 CSS pixels high. In the FAIL example, the menu items are only 20 CSS pixels high.
+
+ + +

Users with different disabilities have different needs for control sizes. It can be beneficial to provide an option to increase the active target area without increasing the visible target size. Another option is to provide a mechanism to control the density of layout and thereby change target size or spacing, or both. This can be beneficial for a wide range of users. For example, users with visual field loss may prefer a more condensed layout with smaller sized controls while users with other forms of low vision may prefer large controls.

+ +

The aim of this Success Criterion is that targets are ideally at least 24 by 24 CSS pixels. However, the Spacing exception allows for smaller targets if there is sufficient spacing around them. Authors should be aware that using smaller targets can have an impact on layouts, as the combined space of the smaller target and the required spacing around it will generally require an overall size that is larger than 24 by 24 CSS pixels.

+ +
+ Illustration showing four 24 by 24 pixel buttons ('play', 'previous', 'next', 'settings') arranged side by side in a row. Another row shows the same buttons, now reduced to a target size of 10 by 10 pixels, with spacing of 14 pixels on all sides of each button. +
Targets that are 24 by 24 pixels or larger can be arranged closely together. Reducing the target size to 10 by 10 pixels requires spacing/clearance of 14 pixels around each target, meaning that the overall space occupied by the four targets is bigger.
+
+ +
+ First diagram: five 24 by 24 pixel targets, arranged in a cross (one target at the center, one target above, one to the right, one below, and one to the left), with no gaps. This passes. Second diagram: reducing the size of the central target to 10 by 10 pixels, while leaving the outer targets unchanged, leads to spacing of only 7 pixels between the central target and the outer targets. This fails. Third diagram: to pass, the outer targets need to be moved further away from the central target 10 by 10 pixel target, with spacing of 14 pixels. +
In this (hypothetical) cross arrangement of five 24 by 24 pixel targets, shrinking the central target to 10 by 10 pixels, with spacing of only 7 pixels to the other targets, will fail the Success Criterion. To pass, the outer targets will need to be moved further out, to achieve a spacing of 14 pixels - leading to an increase of the overall space occupied by the five targets.
+
+ +

The ability to select the central option is reduced in the second version, it is smaller (therefore harder to successfully hit) and there is little spacing around the target. In the third version the center target is still harder to hit, but it is less likely that you'd hit a neighboring target. The measure for target offset works intuitively for most cases, but in some cases, at small sizes, it can cause additional spacing to be required.

+
+
+ +
+

Benefits of Target Size (Minimum)

+

Having targets with sufficient size - or at least sufficient target spacing - can help all users who may have difficulty in confidently targeting or operating small controls. Users who benefit include, but are not limited to:

+ + +
+ +
+

Examples of Target Size (Minimum)

+ + +
+ +
+ +

Resources

+ +
+ +
+

Techniques for Target Size (Minimum)

+ + +
+

Sufficient Techniques for Target Size (Minimum)

+ +
    +
  1. + Using min-height and min-width to ensure sufficient target spacing +
  2. +
+ +
+ +
+

Additional Techniques (Advisory) for Target Size (Minimum)

+ +
+ +
+

Failures for Target Size (Minimum)

+ +
+ +
+ + + diff --git a/understanding/22/ruchy-przeciagania.html b/understanding/22/ruchy-przeciagania.html new file mode 100644 index 0000000000..891b4e094c --- /dev/null +++ b/understanding/22/ruchy-przeciagania.html @@ -0,0 +1,128 @@ + + + + + Understanding Dragging + + + +

Understanding Dragging

+ +
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+ +
+

Dragging Movements

+
+

AA

+ +

All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.

+

This requirement applies to web content that interprets pointer actions (i.e., this does not apply to actions that are required to operate the user agent or assistive technology).

+

Is there an assistive technology that helps people with mobility impairments? The group would like feedback on the frontier between AT & author responsibility.

+
+
+ +
+ +

Intent of Dragging Movements

+ +

The intent of this Success Criterion is to ensure functionality that uses a dragging movement (e.g., sliders, drag-and-drop interfaces) has another single pointer mode of operation without the need for the dexterity required to drag elements.

+ +

Some people cannot perform dragging movements in a precise manner. Others use a specialized or adapted input device, such as a trackball, head pointer, eye-gaze system, or speech-controlled mouse emulator, which may make dragging cumbersome and error-prone.

+ +

When an interface implements functionality that uses dragging movements, users perform four discrete actions:

+ +
    +
  1. tap or click to establish a starting point, then
  2. +
  3. press and hold that contact while...
  4. +
  5. performing a repositioning of the pointer, before...
  6. +
  7. releasing the pointer at the end point.
  8. +
+ +

Not all users can accurately press and hold that contact while also repositioning the pointer. An alternative method must be provided so that users with mobility impairments who use a pointer (mouse, pen, or touch contact) can use the functionality.

+ +

This requirement is separate from keyboard accessibility because people using a touch screen device may not use a physical keyboard. Keyboard specific interactions such as tabbing or arrow keys may not be possible when encountering a drag and drop control. Note, however, that providing a text input can be an acceptable single-pointer alternative to dragging. For example, an input beside a slider could allow any user to enter a precise value for the slider. In such a situation, the on-screen keyboard that appears for touch users offers a single-pointer means of entering an alphanumeric value.

+ +
+ +

Relationship to other requirements

+ +

Success Criteria 2.1.1 Keyboard and 2.1.3 Keyboard (No Exception) require dragging features to be keyboard accessible. However, achieving keyboard equivalence for a dragging operation does not automatically meet this Success Criterion. It is possible to create an interface that works with dragging and keyboard controls that does not work using only clicks or taps. While many designs can be created for a dragging alternative which address both keyboard accessibility and operability by single pointer operation, the two requirements should be assessed independently.

+ +

This Success Criterion applies to dragging movements as opposed to pointer gestures, which are covered in Success Criterion 2.5.1 Pointer Gestures. Pointer gestures include directional path-based as well as multi-point gestures. In contrast, for dragging movements, only the start and end point of the movement matters, not the actual path.

+ +

Additional examples are selection rectangles that set the first x/y rectangle coordinate at the pointer position via a pointer down-event, and the second x/y coordinate, after a dragging movement, at the next up-event. A similar example is a connecting line drawn between two different items on the screen, as in an allocation test where users are required to draw a line between questions and corresponding answers. In these cases, the dragging movement requires an alternative way to accomplish the same action that does not rely on the dragging movement. For example, two separate single tap or click actions may define the rectangle coordinates or the start and end points of a connecting line.

+ +
+ +
+

Alternatives for dragging movements on the same page

+ +

Where functionality can be executed via dragging movements and an equivalent option exists that allows for single-pointer access without dragging, this Success Criterion is passed. It does not have to be the same component, so long as the functionality is equivalent. An example is a color wheel where a color can be changed by dragging an indicator. In addition, text fields for the numerical input of color values allow the definition of a color without requiring dragging movements. (Note that a text input is considered device agnostic; although the purpose is to enter characters, text entry can take place through voice, pointer or keyboard.)

+ +
+ +
+

Distinguishing dragging movements from path-based pointer gestures

+ +

Dragging movements covered in this Success Criterion are pointer interactions where only the start- and endpoints matter. Once the pointer engages with a target, the direction of the dragging movement does not factor into the interaction until the pointer disengages the target. Since the dragging movement does not have an intermediate point, the dragging movement can go in any direction. Path-based gestures are covered in Success Criterion 2.5.1 Pointer Gestures. For more details, refer to Understanding Success Criterion 2.5.1 Pointer Gestures

+ +
+ +
+

Benefits of Dragging Movements

+ + + +
+ +
+

Examples of Dragging Movements with alternatives

+ + + +
+ +
+

Techniques for Dragging

+ +
+

Sufficient Techniques for Dragging Movements

+ +
    +
  1. + Ensuring that a single pointer operable alternative is available for dragging movements that operate on content +
  2. +
+ +
+ +
+

Additional Techniques (Advisory) for Dragging Movements

+ +
+ +
+

Failures for Dragging Movements

+ + +
+ +
+ + + diff --git "a/understanding/22/ruchy-przeci\304\205gania.html" "b/understanding/22/ruchy-przeci\304\205gania.html" new file mode 100644 index 0000000000..891b4e094c --- /dev/null +++ "b/understanding/22/ruchy-przeci\304\205gania.html" @@ -0,0 +1,128 @@ + + + + + Understanding Dragging + + + +

Understanding Dragging

+ +
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+ +
+

Dragging Movements

+
+

AA

+ +

All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.

+

This requirement applies to web content that interprets pointer actions (i.e., this does not apply to actions that are required to operate the user agent or assistive technology).

+

Is there an assistive technology that helps people with mobility impairments? The group would like feedback on the frontier between AT & author responsibility.

+
+
+ +
+ +

Intent of Dragging Movements

+ +

The intent of this Success Criterion is to ensure functionality that uses a dragging movement (e.g., sliders, drag-and-drop interfaces) has another single pointer mode of operation without the need for the dexterity required to drag elements.

+ +

Some people cannot perform dragging movements in a precise manner. Others use a specialized or adapted input device, such as a trackball, head pointer, eye-gaze system, or speech-controlled mouse emulator, which may make dragging cumbersome and error-prone.

+ +

When an interface implements functionality that uses dragging movements, users perform four discrete actions:

+ +
    +
  1. tap or click to establish a starting point, then
  2. +
  3. press and hold that contact while...
  4. +
  5. performing a repositioning of the pointer, before...
  6. +
  7. releasing the pointer at the end point.
  8. +
+ +

Not all users can accurately press and hold that contact while also repositioning the pointer. An alternative method must be provided so that users with mobility impairments who use a pointer (mouse, pen, or touch contact) can use the functionality.

+ +

This requirement is separate from keyboard accessibility because people using a touch screen device may not use a physical keyboard. Keyboard specific interactions such as tabbing or arrow keys may not be possible when encountering a drag and drop control. Note, however, that providing a text input can be an acceptable single-pointer alternative to dragging. For example, an input beside a slider could allow any user to enter a precise value for the slider. In such a situation, the on-screen keyboard that appears for touch users offers a single-pointer means of entering an alphanumeric value.

+ +
+ +

Relationship to other requirements

+ +

Success Criteria 2.1.1 Keyboard and 2.1.3 Keyboard (No Exception) require dragging features to be keyboard accessible. However, achieving keyboard equivalence for a dragging operation does not automatically meet this Success Criterion. It is possible to create an interface that works with dragging and keyboard controls that does not work using only clicks or taps. While many designs can be created for a dragging alternative which address both keyboard accessibility and operability by single pointer operation, the two requirements should be assessed independently.

+ +

This Success Criterion applies to dragging movements as opposed to pointer gestures, which are covered in Success Criterion 2.5.1 Pointer Gestures. Pointer gestures include directional path-based as well as multi-point gestures. In contrast, for dragging movements, only the start and end point of the movement matters, not the actual path.

+ +

Additional examples are selection rectangles that set the first x/y rectangle coordinate at the pointer position via a pointer down-event, and the second x/y coordinate, after a dragging movement, at the next up-event. A similar example is a connecting line drawn between two different items on the screen, as in an allocation test where users are required to draw a line between questions and corresponding answers. In these cases, the dragging movement requires an alternative way to accomplish the same action that does not rely on the dragging movement. For example, two separate single tap or click actions may define the rectangle coordinates or the start and end points of a connecting line.

+ +
+ +
+

Alternatives for dragging movements on the same page

+ +

Where functionality can be executed via dragging movements and an equivalent option exists that allows for single-pointer access without dragging, this Success Criterion is passed. It does not have to be the same component, so long as the functionality is equivalent. An example is a color wheel where a color can be changed by dragging an indicator. In addition, text fields for the numerical input of color values allow the definition of a color without requiring dragging movements. (Note that a text input is considered device agnostic; although the purpose is to enter characters, text entry can take place through voice, pointer or keyboard.)

+ +
+ +
+

Distinguishing dragging movements from path-based pointer gestures

+ +

Dragging movements covered in this Success Criterion are pointer interactions where only the start- and endpoints matter. Once the pointer engages with a target, the direction of the dragging movement does not factor into the interaction until the pointer disengages the target. Since the dragging movement does not have an intermediate point, the dragging movement can go in any direction. Path-based gestures are covered in Success Criterion 2.5.1 Pointer Gestures. For more details, refer to Understanding Success Criterion 2.5.1 Pointer Gestures

+ +
+ +
+

Benefits of Dragging Movements

+ + + +
+ +
+

Examples of Dragging Movements with alternatives

+ + + +
+ +
+

Techniques for Dragging

+ +
+

Sufficient Techniques for Dragging Movements

+ +
    +
  1. + Ensuring that a single pointer operable alternative is available for dragging movements that operate on content +
  2. +
+ +
+ +
+

Additional Techniques (Advisory) for Dragging Movements

+ +
+ +
+

Failures for Dragging Movements

+ + +
+ +
+ + + diff --git a/understanding/22/wyglad-fokusu.html b/understanding/22/wyglad-fokusu.html new file mode 100644 index 0000000000..ab6123739a --- /dev/null +++ b/understanding/22/wyglad-fokusu.html @@ -0,0 +1,519 @@ + + + + + Understanding Focus Visible + + + +

Understanding Focus Appearance

+ +
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+ + +
+ +

Focus Appearance Success Criterion text

+
+

AA

+ +

When the keyboard focus indicator is visible, one or both of the following is true:

+
    +
  1. The entire focus indicator: +
      +
    • encloses the visual presentation of the user interface component, and
    • +
    • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
    • +
    • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.
    • +
    +
  2. +
  3. An area of the focus indicator meets all the following: +
      +
    • is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component, and
    • +
    • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
    • +
    • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.
    • +
    +
  4. +
+ +

Where a user interface component has active sub-components, if a sub-component receives a focus indicator, these requirements may be applied to the sub-component instead.

+ +

Exceptions:

+ + +

Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu. However, it may also be possible to indicate user interaction for such sub-components by relying strictly on a visual indication of which item is selected. Where selectable sub-components have no differentiated focus indicator, the visual indicator for sub-component selection is measured against 1.4.11 Non-text Contrast requirements, not against this Criterion.

+ +

Contrast calculations can be based on colors defined within the technology (such as HTML, CSS and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.

+
+
Focus indicator
+
+ pixels that are changed to visually indicate when a user interface component is in a focused state. +
+
minimum bounding box
+
+ the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie. For components which wrap onto multiple lines as part of a sentence or block of text (such has hypertext links), the bounding box is based on how the component would appear on a single line. +
+
encloses
+
+ solidly bounds or surrounds +
+
perimeter
+
+ continuous line forming the boundary of a shape not including shared pixels, or the minimum bounding box of a complex shape, whichever is shortest. For example, the perimeter calculation for a rectangle is 2h+2w -4, where h is the height and w is the width and the corners are not counted twice. The perimeter of a circle is 2𝜋r. +
+
+
+
+ +
+ +

Intent of Focus Appearance

+ + +

The purpose of this Success Criterion (SC) is to ensure a keyboard focus indicator is clearly visible and discernible. Focus Appearance is closely related to 2.4.7 Focus Visible and 1.4.11 Non-text Contrast. Focus Visible requires a visible focus indicator exists whilst it has keyboard focus, this SC defines a minimum level of visibility. Where Non-text Contrast requires a component to have adequate contrast against the background in each of its states, this SC requires sufficient contrast for the focus indicator itself.

+ +

For sighted people with mobility impairments who use a keyboard or a device that utilizes the keyboard interface (such as a switch or voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of users with low vision, who may also rely on the keyboard.

+ +

A keyboard focus indicator can take different forms. This Success Criterion lists two ways to achieve a sufficient focus appearance. The first involves three primary considerations for the entire focus indicator. A second way of achieving sufficient focus appearance is by meeting similar considerations for an area of the focus indicator. This Understanding document will elaborate on each of the three primary considerations, then address the area considerations, and finally list some user agent exceptions.

+ +
+ +

Encloses

+

The first of the focus indicator bullets states that the focus indicator "encloses" the user interface component. This is defined to mean "solidly bounds or surrounds." Both bounds and surrounds describe optimal and established ways of showing focus. Bounds and its related term "bounding box" generally describe a rectangle drawn around the outside of a user interface component. It is the most common form of focus indication and is sometimes referred to as a "focus rectangle."

+ +
+ 2 blue buttons with a dark 1 pixel thick offset focus rectangle around the second +
Passes: A solid focus rectangle around the second of two buttons.
+
+ +

"Surrounds" also refers to something that solidly encloses a shape. However, a shape can be surrounded in many ways. For instance, the focus indicator may follow the outline of the object being enclosed. The difference between bounds and surrounds is illustrated in the following two images of a set of ratings stars. In both examples, the same three stars have already been selected, and focus is on the third star.

+
+ 3 of 5 stars are selected with a solid-line rectangular focus indicator around the third +
Passes: a solidly bound focus rectangle encloses the third of five stars.
+
+ +
+ Three of 5 stars are selected with a solid-line focus indicator in the shape of a star outlining the third +
Passes: a solid outline indicator surrounds the third of five stars.
+
+ +

Solidly

+

Where the indicator does not "solidly" bound or surround the component, as with a dashed or dotted line, it cannot meet this primary consideration. However, a non-solid line can still pass if it meets the area calculations for the size of the focus indicator (discussed in more detail under Area of focus indicator).

+ +
+ 3 of 5 stars are selected with the whole third star outlined with a 1 pixel thick dashed line +
Fails: the dashed outline does not "solidly bound" the third star and does not meet the size requirements of the focus area calculation.
+
+ +
+ 3 of 5 stars are selected with the whole third star outlined with a 2 pixel thick dashed line +
Passes: the dashed outline does not "solidly bound" the third star; however, the dashed line meets the size requirements of the focus area calculation.
+
+
+ +
+ +

Indicator contrasts between its focused and unfocused states

+ +

The second of the focus indicator bullets states that the indicator "has a contrast ratio of at least 3:1 between its pixels in the focused and unfocused states." The following illustration shows a minimally contrasting focus indicator, where some of the white pixels making up the page background have been altered to a mid-grey, which contrast 3:1 with the original white. Authors are encouraged to exceed the minimum focus appearance. For instance, the dark blue lines in the first two illustrations are much more visible.

+ +
+ Two orange-yellow five-pointed stars, one with a mid-gray focus rectangle +
Passes: Two buttons in the shape of a star, with the second surrounded by a focus indicator whose pixels contrast 3:1 between focused (light grey) and unfocused (white) states.
+
+
+
+

Contrasts at least 3:1 against adjacent colors

+ +

The third of the focus indicator bullets states that the focus indicator must contrast against the pixels on either side. Where the indicator is offset from the shape and does not directly abut the component or any other object -- as in all preceding examples -- it simply needs to contrast at least 3:1 against the page background. Offsetting is the recommended way of creating a more visible focus indicator. However, where authors choose to position the indicator so it is directly next to or overlaps another shape, it must contrast 3:1 against this adjacent shape as well.

+ +
+ Two orange-yellow five-pointed stars, the second with a tightly cropped blue focus outline +
Passes: The second of two stars has a star-shaped blue outline that directly abuts the star, with which it contrasts 3:1, creating a minimally visible focus indicator.
+
+
+ +
+

Component keyboard focus

+

The preamble to this SC is "When a user interface component has keyboard focus..." The keyboard focus is the point of interaction for someone using a keyboard. For environments with a keyboard-operable interface, the keyboard focus can be moved around the interface in order to interact with different components. Whichever component is being interacted with has focus.

+ +

WCAG defines user interface component as "a part of the content that is perceived by users as a single control for a distinct function." Because different users may perceive controls differently, there is a potential for some variation when interpreting what constitutes both a single control and a distinct function. This is particularly the case when something visually presents in a way that may differ from how it is programmatically created under the covers. Where there is not a native HTML component upon which to base designs, there can be great variations in how the components and their focus indicators are portrayed. Further, some components have sub-components that can take focus, such as the menu items on a menu.

+

Nonetheless, consistent results from different testers were obtained for this SC by using the focus indicator itself as the gauge of what constitutes the component being interacted with. For complex components, the three typical focus indicators are as follows:

+ + + +

Each of these will be discussed, using a tablist as a familiar complex component.

+ +

Focus indicator around only the whole component

+
+ Three tab buttons shown with a dark blue rectangle around all three tab buttons. +
A tablist with a focus indicator around only the whole.
+
+ +

When the focus indicator is shown only around the whole tablist, the user is guided to considering the tablist as a single user component. The tab items within it are visually distinguished between selected and unselected states (and visual indicators of selection state must meet the criteria given in 1.4.11 Non-text Contrast).

+ +

Having a focus indicator only around the whole is possible where there is no need to have a selected sub-component while another sub-component has focus. For a tablist which synchronizes its tab panel content with whatever tab is active, only one tab item can be selected at a time, and since whatever tab is selected is considered active, a separate focus indicator is redundant.

+ +

Result: the group focus indicator must meet the requirements of this SC.

+ +

A radio button group and a star-rating widget, which each use only a whole-component focus indicator, provide working examples of different complex components that pass the primary requirements of this SC. In the star ratings example, users can increment the rating by 1/2 stars. Not only is a focus indicator for each 1/2 star unnecessary, but it would actually be difficult to achieve without making the interaction confusing.

+ +

Focus indicators around both the component and subcomponent

+ +
+ Three tab buttons shown with a dark blue rectangle around all three tab buttons, the first tab button also has a dark outline as well as a blue bar indicating it is selected. +
+ The same tab list showing except the first tab is selected, but the second has the focus outline. +
The same tablist in two states. In the first, focus is around both the tablist and the currently selected tab; in the second, focus is around both the tablist and an unselected tab.
+
+ +

For a tablist which does not keep its tab panel content synchronized with whatever tab is selected, there needs to be a focus indicator for the tab item subcomponent. This is because the tab item with focus may be different than the selected item.

+

The user can navigate to the tablist, which in this implementation has a focus rectangle around the whole tablist as well as one around a tab item (conventionally the item that is currently selected). The focus around the whole is helpful in cueing a keyboard user that this is a complex component that has its own interaction. The user can then move focus between the unselected and selected tab items -- each of which in turn has its own focus indicator -- before activating one, which then makes it selected as well as focused, and updates the tab panel to match.

+

In this scenario, either the group focus indicator or the sub-component indicator must meet the requirements of this Success Criterion. To avoid being overly prescriptive, the Success Criterion allows authors to choose which makes the most sense. Generally, if a sub-component focus is necessary, it should be assessed instead of the group indicator.

+ +

Result: the focus indicator for the tab item meets the requirements of this SC. The tablist focus indicator does not need to meet the requirements.

+ +

A slider to pick colors provides a working example of a different complex component that predominantly shows focus for the subcomponent. In this case, the thumb slider sub-component has a focus indicator of sufficient size and contrast to pass the sufficient area calculation. There is also a subtle focus around the whole slider component, but it does not need to be assessed to pass this SC.

+ +

Focus indicator around only the subcomponent

+ +
+ Three tab buttons shown and the first button has a dark outline. +
The same tabs as in the prior set, but the focus indicator around the whole is removed.
+
+ + +

The same unsynchronized tablist can also be implemented as something which only shows focus on the tab items and not on the whole. The behaviour is the same as in the prior example, but there is never a focus indicator placed around the tablist. This interaction is acceptable, but it is not best practice since it demands more understanding from the user with less information. For example, some visual cues for the tablist and tab items (and tab panel) may not be clear. As well, keyboard users may not initially understand the expected keyboard interaction.

+ +

Result: the focus indicator for the tab item must meet the requirements of this SC, judging focus with both selected and unselected tab items.

+ +

A functional example of sub-component-only tab focus has an indicator that is large enough (at least four times the shortest side) with sufficient contrast to pass the focus area language of this SC.

+ +

Where something with focus is not a user interface component

+

Some pages contain very large editing regions, such as web implementations of word processors and code editors. Unlike a textarea element, which is a user interface component, these large editing regions do not typically meet the definition of user interface components; they are not "perceived by users as a single control for a distinct function." Providing focus indicators around such editing regions may still be beneficial to some; however, where the region is not perceived as a single control, it is not covered by this Success Criterion. The web page will still need to provide a insertion point (caret indicator) in such editing regions in order to meet the requirements of 2.4.7 Focus Visible.

+ +

Some non-operable elements can take focus (such as a heading element that is the target of a skip link). However, the preamble of this SC refers to user interface components; it is only when the element with focus is operable by keyboard that this Success Criterion applies.

+
+
+

Area of focus indicator

+

In addition to achieving a minimum keyboard focus appearance using the three primary means described above to assess the entire focus indicator, an author can also meet this SC's requirements by assessing an area of the focus indicator for sufficient size and contrast.

+ +
+

Minimum area

+ +
+
    +
  • is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component, or is at least as large as a 4 CSS pixel thick line along the shortest side of a minimum bounding box of the unfocused component
  • +
+
+ +

The first of these bullets defines a minimum area for the focus indicator using a calculation for perimeter, and a secondary minimum based on the shortest side of the control. It does not restrict where the indicators are placed, it is just providing two methods to calculate a minimum area.

+ +

For the first calculation, the minimum area of the focus indicator must be at least as large as the area of a 1 CSS pixel thick perimeter (border) of the control in its unfocused state. The indicator does not have to be a border, but the indicator's area must be at least as large. For example, if a control is a rectangle of 90px wide and 30px tall, the size of the outer border is 90 + 90 + 30 + 30 = 240 CSS pixels. You then must subtract the 4 corner pixels (which are counted twice, both horizontally and vertically), for a total minimum area of 236 CSS pixels.

+ +

A CSS pixel is what developers use in CSS declarations like “width: 200px”. It is device-independent and not to be confused with device pixels which vary depending on the physical pixel density.
+ The rest of this document notates CSS pixels as "px". +

+ +

The following 3 examples use a 90px wide by 30px tall button, therefore the surface area requirement is 236px (240px minus corner 4 pixels). The middle button is focused in each example.

+ +
+ Three dark blue buttons on a white background. The middle button has a yellow inner border. +
Passes: the inner outline is slightly smaller than the outer edge of the component (236px minus 2px on each side), but using a 2px thick indicator means it is well over the minimum requirement of 236px squared.
+
+ +
+ Three dark blue buttons on a white background. The middle button has a thick yellow line under the text. +
Passes: the thick (3px) yellow underline, at 80px almost as long as the longest edge, multiplied by 3px exceeds the requirement of 236px squared.
+
+ +

If controls change size across different variations of a page (e.g., in a responsive design), it helps to use a proportionally sized indicator such as an outline or background change. In that way you can be sure of meeting the size requirement.

+ +

Another way of achieving the area requirement is to alter the appearance of the entire component, for instance by changing its color. This can be effective in a set of closely placed buttons. The following example using the same set of 5 ratings stars given in the first illustrations in this document, shows how this can be achieved. However, it is much more difficult to detect such a focus indicator when components are not near each other and so cannot be easily compared. For users using magnification, even components relatively close together may be difficult to compare, so it is not considered a best practice.

+
+ 3 of 5 stars are selected with the whole third star altered in color to indicate focus +
Passes: a color change applies to the whole third star to indicate focus.
+
+ +

The Success Criterion includes an alternative size measure of "at least as large as a 4 CSS pixel thick line along the shortest side". This is included to allow for smaller but thick indicators. For example, some controls might be of a fixed height but variable width, in which case this measure, 4×h, allows for a more consistent approach. A button that is 40 CSS pixels high would need to have a focus area of at least 160 CSS pixels (40×4).

+ +
+ Two dark blue buttons on a white background. The left button has a very thick yellow block of color left of the text. +
Passes: the yellow block on the left is along the short side, but very thick.
+
+ +

Typical focus indicators:

+
    +
  • A solid outline around the whole component would pass the size requirement;
  • +
  • A 1 CSS pixel dotted outline around the whole component would not pass the size requirement, as it is roughly 50% of the surface area of a solid line.
  • +
  • Changing the background within a control would pass the size requirement;
  • +
  • A 1px wide vertical line (such as a blinking cursor) would not pass the size requirement; a text input would need a larger or separate focus indicator.
  • +
+

The bigger the visible change when an item receives focus, the easier it is for someone to see. Authors are encouraged to make the change as significant as possible, for example by designing a thick border around the element. If you need to use complex mathematics to work out if a focus indicator is large enough, it is probably a sign that you should use a larger and proportional indicator that will provide a more visible indicator.

+ +
Unusual shapes
+ +

If you have an unusual shape (not rectangular), some mathematics may be required if the focus indicator is on the edge of the size requirement. For example, if the focusable control is a circle with a diameter of 100px, the circumference would be 314 pixels. A 1px (or greater) outline would meet the size criterion.

+ +
+ Two orange circular buttons with an icon in the middle. The right hand circle has a dark outline around the whole circle to indicate focus +
Passes: a circular button in the default state, and then with a focus indicator.
+
+ +

If a focus indicator is an irregular shape, such as a drop shadow under a star icon, it helps if the contrasting area is quite large.

+ +
+ Two yellow star symbols, the second has a dark drop-shadow. +
An unfocused star component beside one using a drop shadow to show focus.
+
+ +

What is the contrasting area of the drop shadow? The quick method is:

+
    +
  • Look at the size of the component, how long is it around the edges?
  • +
  • Look at the (contrasting) area of the focus indicator.
  • +
  • Mentally compare the focus indicator to the border of the component.
  • +
+ +

If it is too close to call, you could extract the contrasting area of the focus indicator and evaluate the surface area.

+
Gradients
+

If a focus indicator has a gradient, the principle is to measure the contrast of the changed area, and ignore the change that does not meet 3:1.

+
+ Three buttons, the middle with a heavy drop-shadow indicating focus. +
When a gradient is used on a focus indicator, the measure of surface area should only include the area that has changed enough to meet the 3:1 contrast ratio.
+
+

If you take some spot-checks on the gradient area and establish what area meets the contrast, it is straightforward to work out if that area is sufficient.

+
+ The middle button with the drop-shadow included, but the subtle grey areas removed to only show the contrasting area. +
Passes: the same focused button with the non-contrasting areas removed, showing that it is a thick indicator that meets the requirements.
+
+

Some of the examples in this document are screen-captured images of elements. Due to loss of resolution in these images, the actual pixel color may not match the original. As such, they are intended to be used for illustrative purposes, and should not be inspected on a pixel-by-pixel basis for sufficient contrast.

+

Some designs have pages with a non-solid background image covering the whole (or part) of the page or make use of parallax scrolling effects which result in a near-infinite number of color combinations if a page is scrolled and/or changes are made to the viewport size.

+

If the contrast of background colors that change are close enough to need to be tested for each combination then they would likely not meet the user need of people with low vision in certain scroll combinations and would likely fail in certain combinations as well. In these cases it would be an easy solution to use a double ring focus indicator or some other mechanism to indicate focus such as a solid box with a border to guarantee there is sufficient contrast across variations of background images or background gradients.

+
Inline links
+

If an inline link is broken over multiple lines, some methods of creating a focus indicator create different results by browsers. CSS outline separately surrounds each part of a link that breaks across multiple lines. It is by far the most common CSS technique for focus indication, and produces a result that satisfies the minimum bounding box definition since each part is solidly bound. CSS border will split the perimeter across the parts of the link, which results in an unenclosed border for each line of the link. The minimum bounding box definition states that link focus can be assessed as if the link was all on one line, so these are also considered to meet the "encloses" language. Therefore, where the contrast requirements are met, each of these methods produces a sufficient focus indicator.

+ + + + +

If authors rely on the text-decoration property of links as a focus indicator (i.e. no text underline by default, then showing a 1px underline when focused), that is likely to meet the minimum size requirement only if the text is more than 9 characters. If the number of characters in the links vary, it is likely some links will fail.

+ +

For example, a 16px tall text link would need a width of four times the shortest side (4 * 16 = 64px). With default browser styles, a 10 character word (e.g. "accessible") is usually over 70px wide, and would therefore pass. However, this is not a focus indicator that would reliably pass this criterion. It would be more visible to retain the browser's default indicator or use a complete perimeter indicator, either of which would pass. The lack of indicator for a link is also likely to fail 1.4.1 Use of Color.

+ + +
+ +
+

Change of contrast

+ +
+
    +
  • has a contrast ratio of at least 3:1 against the same pixels in the unfocused state
  • +
+
+ +

The second of the Area bullets matches the second of the primary considerations about a visual difference between a component with and without focus. The greater the change of contrast between states, the easier it is for users to see it. Authors are encouraged to make the change of color contrast as great as possible.

+ +

When a component changes to include a focus indicator, that change can be measured as a change of color contrast. For example, if a yellow outline is added to a button on a blue background, the change of color is from blue to yellow. This change can be measured whether the focus indicator is on the background around the component, or the background within the component.

+ +
+ Three dark blue buttons on a white background. The middle button has a yellow inner border. +
Passes: adding a yellow outline to a link is a change of color from blue to yellow. That change has a contrast ratio of 12:1.
+
+ + +

Text and non-text contrast measures use adjacent colors; this Success Criterion measures the change in color between non-focused and focused states.

+ +
+ Three buttons with light background and dark border on a white background. The middle button has a light grey outline. +
Fails: the second link has a light-grey (#ccc) focus outline which fails this Success Criterion because the change from white-background to light-grey outline does not meet 3:1.
+
+

Color contrast measurements in WCAG are based on luminance (brightness) regardless of the hue.

+ +

If a control receiving focus changes its background (fill color) to a color that contrasts less than 3:1 with the original background, that would not pass the change of contrast.

+ +
+ Three black buttons with a dark background. The middle button has a dark grey background. +
Fails: the second link has a dark-grey (#555) which fails this Success Criterion because the change from black-background to dark-grey background does not meet 3:1.
+
+

If the background change is sufficient, it is a method of passing the criterion.

+
+ Three black buttons with a dark border and two have a dark background. The middle button has a white background. +
Passes: the second link has a white background (#fff) which passes this Success Criterion because the change from black-background to white-background meets 3:1.
+
+ +

It is possible to use visual patterns such as strips switching places to disguise a change of focus indicator. This is not considered a visible indicator.

+
+
+

Adjacent non-focus-indicator contrast

+ +
+
    +
  • Has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.
  • +
+
+ +

The third of these Area bullets is similar to the third primary consideration -- the focus indicator must contrast with whatever it is next to or it must be thick enough that it is easier to see. Where a control is a solid color, and you add a border or outline of a very similar color, it is difficult to perceive the change to the control.

+ +
+ Three dark buttons, the middle one appears very slightly larger due to a thin dark outline. +
Fails: adding a 1px dark outline around a dark button does not differentiate it. This example fails the Success Criterion.
+
+ +

The requirement is to have an indicator that has a 3:1 contrast ratio with the adjacent colors of the component, or to be separated from the component, or to be at least 2px thick.

+ +
+ Three dark buttons, the middle one appears larger due to a thick dark outline. +
Passes: adding a 2px border around the button helps to differentiate which one is focused.
+
+ +
+ Three dark buttons, the middle one has a outline slightly offset away from the component, so there is a gap between the component's background and the outline. +
Adding an outline that is separated from the button helps to differentiate which one is focused.
+
+ +

If the focus indicator uses several colors, any color which does not contrast 3:1 against adjacent colors can be ignored as long as there is a 2 CSS pixel-thick part of the focus indicator whose pixels all change at least 3:1 between their focused and non-focused states. Practically, this means 3D drop-shadows and other stylings on a focus indicator can likely be ignored when assessing focus appearance.

+ +
+ Two dark blue buttons on a white background. The second one has a dark outline, then a light grey outline on the outside. +
Passes: the 3px thick dark outline also meets the size and change of contrast requirements. The light grey outline can be ignored.
+
+

Where a focus indicator is defined in code as a certain size (e.g. 2px thickness) or color, anti-aliasing can be ignored for the purposes of calculation. Dotted or dashed outlines have various levels of gaps depending on the browser, screen density, and thickness. For example, in most browsers a "dotted" line will have roughly half the number of pixels due to gaps. However, in some sizes or browsers it might be slightly less than half, so increasing the thickness may be required.

+
+ +
+

Relationship to Non-text Contrast

+

In combination with 2.4.7 Focus Visible, 1.4.11 Non-text Contrast requires that the visual focus indicator for a component must have sufficient contrast against the adjacent colors when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.

+ +

However, Non-text Contrast differs in what it assesses. Unlike the current Success Criterion, it does not require that the focus indicator has a change of contrast between the focused and non-focused states. Additionally, there is no size requirement and no exception for user agent default indicators.

+ +
+ Three dark blue buttons, the center button also has a thin dark line around it. +
A 1px dark outline around a dark button would pass 1.4.11 Non-text Contrast, but fails this Success Criterion.
+ +
+ +
+
+
+

Exceptions

+

There are two situations where the focus appearance does not need to be assessed:

+ +
+ + +
+

First exception: the focus indicator cannot be adjusted by the author

+ +

The focus indicator is determined by the user agent and cannot be adjusted by the author

+

Some components or technologies may not allow the author to adjust the focus indicator. This is the case with HTML select elements (both single and multi-select), where the visual treatments for selection and focus cannot be adjusted by the author. In this case the Success Criterion does not apply.

+
+ A country select element with Afghanistan selected and Albani with focus +
Passes: The user agent's default select element presentation cannot be modified by the author, so it passes regardless of the quality of the focus indicator
+
+ +
+
+

Second exception: the default indicator and background are not modified

+

The focus indicator and the indicator's background color are not modified by the author

+

If the focus indicator and the background behind the focus indicator are not modified by the author, the Success Criterion does not apply.

+

The intent of this exception is to reduce burden on authors by allowing them to rely on the default indicators provided by user agents (browsers). If all user agents provided good focus indicators, author would be able to concentrate efforts on other accessibility considerations. Unfortunately, browser default focus indicators vary by component, browser, and across devices and operating systems, and the default focus indicators in some browsers can be difficult to see (such as a 1px dotted outline). For this reason, most authors override browser defaults in order to overcome these deficiencies and create a more uniform user experience, regardless of browser.

+

Some browser makers are improving their default focus indicators to make them more visible. As more browsers adopt defaults that meet the primary bullets of this SC, authors will be able to achieve improved focus indicators without customization.

+ +

Modifying the focus indicator background

+

Browser default focus indicators can be made more difficult to see if the author modifies the page background color, for instance using a blue background in combination with a browser's blue default indicator.

+ +

[Future image set: a button with a default light blue focus indicator; the same buton and focus indicator on a light blue page background]

+ +

As well, if the browser provides an indicator within a component by default, then authors can potentially reduce the visibility by changing the component color. For example, if the default indicator on a button is a bright yellow inner focus rectangle, the authors can negatively affect the focus appearance by making the button yellow or orange. For this reason, this user agent exception can only be met if the author both does not modify the default focus indicator and does not modify its background.

+ + +

[Future image set: a button with a default internal focus indicator; the same button, now with a colour similar to the default internal focus indicator]

+
+
+ +
+

Benefits of Focus Visible

+ + + +
+ +
+

Examples of Focus Visible

+ + + +
+ +
+

Resources

+ +
+ +
+

Techniques for Focus Appearance

+ + +
+

Sufficient Techniques

+ + +
    +
  1. + Using an author-supplied, highly visible focus indicator +
  2. +
  3. + Creating a two-color focus indicator to ensure sufficient contrast +
  4. +
  5. + Creating a contrasting focus indicator inside the component +
  6. +
+ +
+ +
+

Additional Techniques (Advisory)

+ +
+ +
+

Failures

+
    +
  1. + Using a CSS border for inline text which can wrap (Potential future technique) +
  2. +
+
+ +
+ + diff --git "a/understanding/22/wygl\304\205d-fokusu.html" "b/understanding/22/wygl\304\205d-fokusu.html" new file mode 100644 index 0000000000..ab6123739a --- /dev/null +++ "b/understanding/22/wygl\304\205d-fokusu.html" @@ -0,0 +1,519 @@ + + + + + Understanding Focus Visible + + + +

Understanding Focus Appearance

+ +
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+ + +
+ +

Focus Appearance Success Criterion text

+
+

AA

+ +

When the keyboard focus indicator is visible, one or both of the following is true:

+
    +
  1. The entire focus indicator: +
      +
    • encloses the visual presentation of the user interface component, and
    • +
    • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
    • +
    • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.
    • +
    +
  2. +
  3. An area of the focus indicator meets all the following: +
      +
    • is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component, and
    • +
    • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
    • +
    • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.
    • +
    +
  4. +
+ +

Where a user interface component has active sub-components, if a sub-component receives a focus indicator, these requirements may be applied to the sub-component instead.

+ +

Exceptions:

+ + +

Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu. However, it may also be possible to indicate user interaction for such sub-components by relying strictly on a visual indication of which item is selected. Where selectable sub-components have no differentiated focus indicator, the visual indicator for sub-component selection is measured against 1.4.11 Non-text Contrast requirements, not against this Criterion.

+ +

Contrast calculations can be based on colors defined within the technology (such as HTML, CSS and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.

+
+
Focus indicator
+
+ pixels that are changed to visually indicate when a user interface component is in a focused state. +
+
minimum bounding box
+
+ the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie. For components which wrap onto multiple lines as part of a sentence or block of text (such has hypertext links), the bounding box is based on how the component would appear on a single line. +
+
encloses
+
+ solidly bounds or surrounds +
+
perimeter
+
+ continuous line forming the boundary of a shape not including shared pixels, or the minimum bounding box of a complex shape, whichever is shortest. For example, the perimeter calculation for a rectangle is 2h+2w -4, where h is the height and w is the width and the corners are not counted twice. The perimeter of a circle is 2𝜋r. +
+
+
+
+ +
+ +

Intent of Focus Appearance

+ + +

The purpose of this Success Criterion (SC) is to ensure a keyboard focus indicator is clearly visible and discernible. Focus Appearance is closely related to 2.4.7 Focus Visible and 1.4.11 Non-text Contrast. Focus Visible requires a visible focus indicator exists whilst it has keyboard focus, this SC defines a minimum level of visibility. Where Non-text Contrast requires a component to have adequate contrast against the background in each of its states, this SC requires sufficient contrast for the focus indicator itself.

+ +

For sighted people with mobility impairments who use a keyboard or a device that utilizes the keyboard interface (such as a switch or voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of users with low vision, who may also rely on the keyboard.

+ +

A keyboard focus indicator can take different forms. This Success Criterion lists two ways to achieve a sufficient focus appearance. The first involves three primary considerations for the entire focus indicator. A second way of achieving sufficient focus appearance is by meeting similar considerations for an area of the focus indicator. This Understanding document will elaborate on each of the three primary considerations, then address the area considerations, and finally list some user agent exceptions.

+ +
+ +

Encloses

+

The first of the focus indicator bullets states that the focus indicator "encloses" the user interface component. This is defined to mean "solidly bounds or surrounds." Both bounds and surrounds describe optimal and established ways of showing focus. Bounds and its related term "bounding box" generally describe a rectangle drawn around the outside of a user interface component. It is the most common form of focus indication and is sometimes referred to as a "focus rectangle."

+ +
+ 2 blue buttons with a dark 1 pixel thick offset focus rectangle around the second +
Passes: A solid focus rectangle around the second of two buttons.
+
+ +

"Surrounds" also refers to something that solidly encloses a shape. However, a shape can be surrounded in many ways. For instance, the focus indicator may follow the outline of the object being enclosed. The difference between bounds and surrounds is illustrated in the following two images of a set of ratings stars. In both examples, the same three stars have already been selected, and focus is on the third star.

+
+ 3 of 5 stars are selected with a solid-line rectangular focus indicator around the third +
Passes: a solidly bound focus rectangle encloses the third of five stars.
+
+ +
+ Three of 5 stars are selected with a solid-line focus indicator in the shape of a star outlining the third +
Passes: a solid outline indicator surrounds the third of five stars.
+
+ +

Solidly

+

Where the indicator does not "solidly" bound or surround the component, as with a dashed or dotted line, it cannot meet this primary consideration. However, a non-solid line can still pass if it meets the area calculations for the size of the focus indicator (discussed in more detail under Area of focus indicator).

+ +
+ 3 of 5 stars are selected with the whole third star outlined with a 1 pixel thick dashed line +
Fails: the dashed outline does not "solidly bound" the third star and does not meet the size requirements of the focus area calculation.
+
+ +
+ 3 of 5 stars are selected with the whole third star outlined with a 2 pixel thick dashed line +
Passes: the dashed outline does not "solidly bound" the third star; however, the dashed line meets the size requirements of the focus area calculation.
+
+
+ +
+ +

Indicator contrasts between its focused and unfocused states

+ +

The second of the focus indicator bullets states that the indicator "has a contrast ratio of at least 3:1 between its pixels in the focused and unfocused states." The following illustration shows a minimally contrasting focus indicator, where some of the white pixels making up the page background have been altered to a mid-grey, which contrast 3:1 with the original white. Authors are encouraged to exceed the minimum focus appearance. For instance, the dark blue lines in the first two illustrations are much more visible.

+ +
+ Two orange-yellow five-pointed stars, one with a mid-gray focus rectangle +
Passes: Two buttons in the shape of a star, with the second surrounded by a focus indicator whose pixels contrast 3:1 between focused (light grey) and unfocused (white) states.
+
+
+
+

Contrasts at least 3:1 against adjacent colors

+ +

The third of the focus indicator bullets states that the focus indicator must contrast against the pixels on either side. Where the indicator is offset from the shape and does not directly abut the component or any other object -- as in all preceding examples -- it simply needs to contrast at least 3:1 against the page background. Offsetting is the recommended way of creating a more visible focus indicator. However, where authors choose to position the indicator so it is directly next to or overlaps another shape, it must contrast 3:1 against this adjacent shape as well.

+ +
+ Two orange-yellow five-pointed stars, the second with a tightly cropped blue focus outline +
Passes: The second of two stars has a star-shaped blue outline that directly abuts the star, with which it contrasts 3:1, creating a minimally visible focus indicator.
+
+
+ +
+

Component keyboard focus

+

The preamble to this SC is "When a user interface component has keyboard focus..." The keyboard focus is the point of interaction for someone using a keyboard. For environments with a keyboard-operable interface, the keyboard focus can be moved around the interface in order to interact with different components. Whichever component is being interacted with has focus.

+ +

WCAG defines user interface component as "a part of the content that is perceived by users as a single control for a distinct function." Because different users may perceive controls differently, there is a potential for some variation when interpreting what constitutes both a single control and a distinct function. This is particularly the case when something visually presents in a way that may differ from how it is programmatically created under the covers. Where there is not a native HTML component upon which to base designs, there can be great variations in how the components and their focus indicators are portrayed. Further, some components have sub-components that can take focus, such as the menu items on a menu.

+

Nonetheless, consistent results from different testers were obtained for this SC by using the focus indicator itself as the gauge of what constitutes the component being interacted with. For complex components, the three typical focus indicators are as follows:

+ + + +

Each of these will be discussed, using a tablist as a familiar complex component.

+ +

Focus indicator around only the whole component

+
+ Three tab buttons shown with a dark blue rectangle around all three tab buttons. +
A tablist with a focus indicator around only the whole.
+
+ +

When the focus indicator is shown only around the whole tablist, the user is guided to considering the tablist as a single user component. The tab items within it are visually distinguished between selected and unselected states (and visual indicators of selection state must meet the criteria given in 1.4.11 Non-text Contrast).

+ +

Having a focus indicator only around the whole is possible where there is no need to have a selected sub-component while another sub-component has focus. For a tablist which synchronizes its tab panel content with whatever tab is active, only one tab item can be selected at a time, and since whatever tab is selected is considered active, a separate focus indicator is redundant.

+ +

Result: the group focus indicator must meet the requirements of this SC.

+ +

A radio button group and a star-rating widget, which each use only a whole-component focus indicator, provide working examples of different complex components that pass the primary requirements of this SC. In the star ratings example, users can increment the rating by 1/2 stars. Not only is a focus indicator for each 1/2 star unnecessary, but it would actually be difficult to achieve without making the interaction confusing.

+ +

Focus indicators around both the component and subcomponent

+ +
+ Three tab buttons shown with a dark blue rectangle around all three tab buttons, the first tab button also has a dark outline as well as a blue bar indicating it is selected. +
+ The same tab list showing except the first tab is selected, but the second has the focus outline. +
The same tablist in two states. In the first, focus is around both the tablist and the currently selected tab; in the second, focus is around both the tablist and an unselected tab.
+
+ +

For a tablist which does not keep its tab panel content synchronized with whatever tab is selected, there needs to be a focus indicator for the tab item subcomponent. This is because the tab item with focus may be different than the selected item.

+

The user can navigate to the tablist, which in this implementation has a focus rectangle around the whole tablist as well as one around a tab item (conventionally the item that is currently selected). The focus around the whole is helpful in cueing a keyboard user that this is a complex component that has its own interaction. The user can then move focus between the unselected and selected tab items -- each of which in turn has its own focus indicator -- before activating one, which then makes it selected as well as focused, and updates the tab panel to match.

+

In this scenario, either the group focus indicator or the sub-component indicator must meet the requirements of this Success Criterion. To avoid being overly prescriptive, the Success Criterion allows authors to choose which makes the most sense. Generally, if a sub-component focus is necessary, it should be assessed instead of the group indicator.

+ +

Result: the focus indicator for the tab item meets the requirements of this SC. The tablist focus indicator does not need to meet the requirements.

+ +

A slider to pick colors provides a working example of a different complex component that predominantly shows focus for the subcomponent. In this case, the thumb slider sub-component has a focus indicator of sufficient size and contrast to pass the sufficient area calculation. There is also a subtle focus around the whole slider component, but it does not need to be assessed to pass this SC.

+ +

Focus indicator around only the subcomponent

+ +
+ Three tab buttons shown and the first button has a dark outline. +
The same tabs as in the prior set, but the focus indicator around the whole is removed.
+
+ + +

The same unsynchronized tablist can also be implemented as something which only shows focus on the tab items and not on the whole. The behaviour is the same as in the prior example, but there is never a focus indicator placed around the tablist. This interaction is acceptable, but it is not best practice since it demands more understanding from the user with less information. For example, some visual cues for the tablist and tab items (and tab panel) may not be clear. As well, keyboard users may not initially understand the expected keyboard interaction.

+ +

Result: the focus indicator for the tab item must meet the requirements of this SC, judging focus with both selected and unselected tab items.

+ +

A functional example of sub-component-only tab focus has an indicator that is large enough (at least four times the shortest side) with sufficient contrast to pass the focus area language of this SC.

+ +

Where something with focus is not a user interface component

+

Some pages contain very large editing regions, such as web implementations of word processors and code editors. Unlike a textarea element, which is a user interface component, these large editing regions do not typically meet the definition of user interface components; they are not "perceived by users as a single control for a distinct function." Providing focus indicators around such editing regions may still be beneficial to some; however, where the region is not perceived as a single control, it is not covered by this Success Criterion. The web page will still need to provide a insertion point (caret indicator) in such editing regions in order to meet the requirements of 2.4.7 Focus Visible.

+ +

Some non-operable elements can take focus (such as a heading element that is the target of a skip link). However, the preamble of this SC refers to user interface components; it is only when the element with focus is operable by keyboard that this Success Criterion applies.

+
+
+

Area of focus indicator

+

In addition to achieving a minimum keyboard focus appearance using the three primary means described above to assess the entire focus indicator, an author can also meet this SC's requirements by assessing an area of the focus indicator for sufficient size and contrast.

+ +
+

Minimum area

+ +
+
    +
  • is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component, or is at least as large as a 4 CSS pixel thick line along the shortest side of a minimum bounding box of the unfocused component
  • +
+
+ +

The first of these bullets defines a minimum area for the focus indicator using a calculation for perimeter, and a secondary minimum based on the shortest side of the control. It does not restrict where the indicators are placed, it is just providing two methods to calculate a minimum area.

+ +

For the first calculation, the minimum area of the focus indicator must be at least as large as the area of a 1 CSS pixel thick perimeter (border) of the control in its unfocused state. The indicator does not have to be a border, but the indicator's area must be at least as large. For example, if a control is a rectangle of 90px wide and 30px tall, the size of the outer border is 90 + 90 + 30 + 30 = 240 CSS pixels. You then must subtract the 4 corner pixels (which are counted twice, both horizontally and vertically), for a total minimum area of 236 CSS pixels.

+ +

A CSS pixel is what developers use in CSS declarations like “width: 200px”. It is device-independent and not to be confused with device pixels which vary depending on the physical pixel density.
+ The rest of this document notates CSS pixels as "px". +

+ +

The following 3 examples use a 90px wide by 30px tall button, therefore the surface area requirement is 236px (240px minus corner 4 pixels). The middle button is focused in each example.

+ +
+ Three dark blue buttons on a white background. The middle button has a yellow inner border. +
Passes: the inner outline is slightly smaller than the outer edge of the component (236px minus 2px on each side), but using a 2px thick indicator means it is well over the minimum requirement of 236px squared.
+
+ +
+ Three dark blue buttons on a white background. The middle button has a thick yellow line under the text. +
Passes: the thick (3px) yellow underline, at 80px almost as long as the longest edge, multiplied by 3px exceeds the requirement of 236px squared.
+
+ +

If controls change size across different variations of a page (e.g., in a responsive design), it helps to use a proportionally sized indicator such as an outline or background change. In that way you can be sure of meeting the size requirement.

+ +

Another way of achieving the area requirement is to alter the appearance of the entire component, for instance by changing its color. This can be effective in a set of closely placed buttons. The following example using the same set of 5 ratings stars given in the first illustrations in this document, shows how this can be achieved. However, it is much more difficult to detect such a focus indicator when components are not near each other and so cannot be easily compared. For users using magnification, even components relatively close together may be difficult to compare, so it is not considered a best practice.

+
+ 3 of 5 stars are selected with the whole third star altered in color to indicate focus +
Passes: a color change applies to the whole third star to indicate focus.
+
+ +

The Success Criterion includes an alternative size measure of "at least as large as a 4 CSS pixel thick line along the shortest side". This is included to allow for smaller but thick indicators. For example, some controls might be of a fixed height but variable width, in which case this measure, 4×h, allows for a more consistent approach. A button that is 40 CSS pixels high would need to have a focus area of at least 160 CSS pixels (40×4).

+ +
+ Two dark blue buttons on a white background. The left button has a very thick yellow block of color left of the text. +
Passes: the yellow block on the left is along the short side, but very thick.
+
+ +

Typical focus indicators:

+
    +
  • A solid outline around the whole component would pass the size requirement;
  • +
  • A 1 CSS pixel dotted outline around the whole component would not pass the size requirement, as it is roughly 50% of the surface area of a solid line.
  • +
  • Changing the background within a control would pass the size requirement;
  • +
  • A 1px wide vertical line (such as a blinking cursor) would not pass the size requirement; a text input would need a larger or separate focus indicator.
  • +
+

The bigger the visible change when an item receives focus, the easier it is for someone to see. Authors are encouraged to make the change as significant as possible, for example by designing a thick border around the element. If you need to use complex mathematics to work out if a focus indicator is large enough, it is probably a sign that you should use a larger and proportional indicator that will provide a more visible indicator.

+ +
Unusual shapes
+ +

If you have an unusual shape (not rectangular), some mathematics may be required if the focus indicator is on the edge of the size requirement. For example, if the focusable control is a circle with a diameter of 100px, the circumference would be 314 pixels. A 1px (or greater) outline would meet the size criterion.

+ +
+ Two orange circular buttons with an icon in the middle. The right hand circle has a dark outline around the whole circle to indicate focus +
Passes: a circular button in the default state, and then with a focus indicator.
+
+ +

If a focus indicator is an irregular shape, such as a drop shadow under a star icon, it helps if the contrasting area is quite large.

+ +
+ Two yellow star symbols, the second has a dark drop-shadow. +
An unfocused star component beside one using a drop shadow to show focus.
+
+ +

What is the contrasting area of the drop shadow? The quick method is:

+
    +
  • Look at the size of the component, how long is it around the edges?
  • +
  • Look at the (contrasting) area of the focus indicator.
  • +
  • Mentally compare the focus indicator to the border of the component.
  • +
+ +

If it is too close to call, you could extract the contrasting area of the focus indicator and evaluate the surface area.

+
Gradients
+

If a focus indicator has a gradient, the principle is to measure the contrast of the changed area, and ignore the change that does not meet 3:1.

+
+ Three buttons, the middle with a heavy drop-shadow indicating focus. +
When a gradient is used on a focus indicator, the measure of surface area should only include the area that has changed enough to meet the 3:1 contrast ratio.
+
+

If you take some spot-checks on the gradient area and establish what area meets the contrast, it is straightforward to work out if that area is sufficient.

+
+ The middle button with the drop-shadow included, but the subtle grey areas removed to only show the contrasting area. +
Passes: the same focused button with the non-contrasting areas removed, showing that it is a thick indicator that meets the requirements.
+
+

Some of the examples in this document are screen-captured images of elements. Due to loss of resolution in these images, the actual pixel color may not match the original. As such, they are intended to be used for illustrative purposes, and should not be inspected on a pixel-by-pixel basis for sufficient contrast.

+

Some designs have pages with a non-solid background image covering the whole (or part) of the page or make use of parallax scrolling effects which result in a near-infinite number of color combinations if a page is scrolled and/or changes are made to the viewport size.

+

If the contrast of background colors that change are close enough to need to be tested for each combination then they would likely not meet the user need of people with low vision in certain scroll combinations and would likely fail in certain combinations as well. In these cases it would be an easy solution to use a double ring focus indicator or some other mechanism to indicate focus such as a solid box with a border to guarantee there is sufficient contrast across variations of background images or background gradients.

+
Inline links
+

If an inline link is broken over multiple lines, some methods of creating a focus indicator create different results by browsers. CSS outline separately surrounds each part of a link that breaks across multiple lines. It is by far the most common CSS technique for focus indication, and produces a result that satisfies the minimum bounding box definition since each part is solidly bound. CSS border will split the perimeter across the parts of the link, which results in an unenclosed border for each line of the link. The minimum bounding box definition states that link focus can be assessed as if the link was all on one line, so these are also considered to meet the "encloses" language. Therefore, where the contrast requirements are met, each of these methods produces a sufficient focus indicator.

+ + + + +

If authors rely on the text-decoration property of links as a focus indicator (i.e. no text underline by default, then showing a 1px underline when focused), that is likely to meet the minimum size requirement only if the text is more than 9 characters. If the number of characters in the links vary, it is likely some links will fail.

+ +

For example, a 16px tall text link would need a width of four times the shortest side (4 * 16 = 64px). With default browser styles, a 10 character word (e.g. "accessible") is usually over 70px wide, and would therefore pass. However, this is not a focus indicator that would reliably pass this criterion. It would be more visible to retain the browser's default indicator or use a complete perimeter indicator, either of which would pass. The lack of indicator for a link is also likely to fail 1.4.1 Use of Color.

+ + +
+ +
+

Change of contrast

+ +
+
    +
  • has a contrast ratio of at least 3:1 against the same pixels in the unfocused state
  • +
+
+ +

The second of the Area bullets matches the second of the primary considerations about a visual difference between a component with and without focus. The greater the change of contrast between states, the easier it is for users to see it. Authors are encouraged to make the change of color contrast as great as possible.

+ +

When a component changes to include a focus indicator, that change can be measured as a change of color contrast. For example, if a yellow outline is added to a button on a blue background, the change of color is from blue to yellow. This change can be measured whether the focus indicator is on the background around the component, or the background within the component.

+ +
+ Three dark blue buttons on a white background. The middle button has a yellow inner border. +
Passes: adding a yellow outline to a link is a change of color from blue to yellow. That change has a contrast ratio of 12:1.
+
+ + +

Text and non-text contrast measures use adjacent colors; this Success Criterion measures the change in color between non-focused and focused states.

+ +
+ Three buttons with light background and dark border on a white background. The middle button has a light grey outline. +
Fails: the second link has a light-grey (#ccc) focus outline which fails this Success Criterion because the change from white-background to light-grey outline does not meet 3:1.
+
+

Color contrast measurements in WCAG are based on luminance (brightness) regardless of the hue.

+ +

If a control receiving focus changes its background (fill color) to a color that contrasts less than 3:1 with the original background, that would not pass the change of contrast.

+ +
+ Three black buttons with a dark background. The middle button has a dark grey background. +
Fails: the second link has a dark-grey (#555) which fails this Success Criterion because the change from black-background to dark-grey background does not meet 3:1.
+
+

If the background change is sufficient, it is a method of passing the criterion.

+
+ Three black buttons with a dark border and two have a dark background. The middle button has a white background. +
Passes: the second link has a white background (#fff) which passes this Success Criterion because the change from black-background to white-background meets 3:1.
+
+ +

It is possible to use visual patterns such as strips switching places to disguise a change of focus indicator. This is not considered a visible indicator.

+
+
+

Adjacent non-focus-indicator contrast

+ +
+
    +
  • Has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.
  • +
+
+ +

The third of these Area bullets is similar to the third primary consideration -- the focus indicator must contrast with whatever it is next to or it must be thick enough that it is easier to see. Where a control is a solid color, and you add a border or outline of a very similar color, it is difficult to perceive the change to the control.

+ +
+ Three dark buttons, the middle one appears very slightly larger due to a thin dark outline. +
Fails: adding a 1px dark outline around a dark button does not differentiate it. This example fails the Success Criterion.
+
+ +

The requirement is to have an indicator that has a 3:1 contrast ratio with the adjacent colors of the component, or to be separated from the component, or to be at least 2px thick.

+ +
+ Three dark buttons, the middle one appears larger due to a thick dark outline. +
Passes: adding a 2px border around the button helps to differentiate which one is focused.
+
+ +
+ Three dark buttons, the middle one has a outline slightly offset away from the component, so there is a gap between the component's background and the outline. +
Adding an outline that is separated from the button helps to differentiate which one is focused.
+
+ +

If the focus indicator uses several colors, any color which does not contrast 3:1 against adjacent colors can be ignored as long as there is a 2 CSS pixel-thick part of the focus indicator whose pixels all change at least 3:1 between their focused and non-focused states. Practically, this means 3D drop-shadows and other stylings on a focus indicator can likely be ignored when assessing focus appearance.

+ +
+ Two dark blue buttons on a white background. The second one has a dark outline, then a light grey outline on the outside. +
Passes: the 3px thick dark outline also meets the size and change of contrast requirements. The light grey outline can be ignored.
+
+

Where a focus indicator is defined in code as a certain size (e.g. 2px thickness) or color, anti-aliasing can be ignored for the purposes of calculation. Dotted or dashed outlines have various levels of gaps depending on the browser, screen density, and thickness. For example, in most browsers a "dotted" line will have roughly half the number of pixels due to gaps. However, in some sizes or browsers it might be slightly less than half, so increasing the thickness may be required.

+
+ +
+

Relationship to Non-text Contrast

+

In combination with 2.4.7 Focus Visible, 1.4.11 Non-text Contrast requires that the visual focus indicator for a component must have sufficient contrast against the adjacent colors when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.

+ +

However, Non-text Contrast differs in what it assesses. Unlike the current Success Criterion, it does not require that the focus indicator has a change of contrast between the focused and non-focused states. Additionally, there is no size requirement and no exception for user agent default indicators.

+ +
+ Three dark blue buttons, the center button also has a thin dark line around it. +
A 1px dark outline around a dark button would pass 1.4.11 Non-text Contrast, but fails this Success Criterion.
+ +
+ +
+
+
+

Exceptions

+

There are two situations where the focus appearance does not need to be assessed:

+ +
+ + +
+

First exception: the focus indicator cannot be adjusted by the author

+ +

The focus indicator is determined by the user agent and cannot be adjusted by the author

+

Some components or technologies may not allow the author to adjust the focus indicator. This is the case with HTML select elements (both single and multi-select), where the visual treatments for selection and focus cannot be adjusted by the author. In this case the Success Criterion does not apply.

+
+ A country select element with Afghanistan selected and Albani with focus +
Passes: The user agent's default select element presentation cannot be modified by the author, so it passes regardless of the quality of the focus indicator
+
+ +
+
+

Second exception: the default indicator and background are not modified

+

The focus indicator and the indicator's background color are not modified by the author

+

If the focus indicator and the background behind the focus indicator are not modified by the author, the Success Criterion does not apply.

+

The intent of this exception is to reduce burden on authors by allowing them to rely on the default indicators provided by user agents (browsers). If all user agents provided good focus indicators, author would be able to concentrate efforts on other accessibility considerations. Unfortunately, browser default focus indicators vary by component, browser, and across devices and operating systems, and the default focus indicators in some browsers can be difficult to see (such as a 1px dotted outline). For this reason, most authors override browser defaults in order to overcome these deficiencies and create a more uniform user experience, regardless of browser.

+

Some browser makers are improving their default focus indicators to make them more visible. As more browsers adopt defaults that meet the primary bullets of this SC, authors will be able to achieve improved focus indicators without customization.

+ +

Modifying the focus indicator background

+

Browser default focus indicators can be made more difficult to see if the author modifies the page background color, for instance using a blue background in combination with a browser's blue default indicator.

+ +

[Future image set: a button with a default light blue focus indicator; the same buton and focus indicator on a light blue page background]

+ +

As well, if the browser provides an indicator within a component by default, then authors can potentially reduce the visibility by changing the component color. For example, if the default indicator on a button is a bright yellow inner focus rectangle, the authors can negatively affect the focus appearance by making the button yellow or orange. For this reason, this user agent exception can only be met if the author both does not modify the default focus indicator and does not modify its background.

+ + +

[Future image set: a button with a default internal focus indicator; the same button, now with a colour similar to the default internal focus indicator]

+
+
+ +
+

Benefits of Focus Visible

+ + + +
+ +
+

Examples of Focus Visible

+ + + +
+ +
+

Resources

+ +
+ +
+

Techniques for Focus Appearance

+ + +
+

Sufficient Techniques

+ + +
    +
  1. + Using an author-supplied, highly visible focus indicator +
  2. +
  3. + Creating a two-color focus indicator to ensure sufficient contrast +
  4. +
  5. + Creating a contrasting focus indicator inside the component +
  6. +
+ +
+ +
+

Additional Techniques (Advisory)

+ +
+ +
+

Failures

+
    +
  1. + Using a CSS border for inline text which can wrap (Potential future technique) +
  2. +
+
+ +
+ + diff --git "a/understanding/22/zb\304\231dne-wpisy.html" "b/understanding/22/zb\304\231dne-wpisy.html" new file mode 100644 index 0000000000..f25a6783a0 --- /dev/null +++ "b/understanding/22/zb\304\231dne-wpisy.html" @@ -0,0 +1,120 @@ + + + + + Understanding Redundant Entry + + + +

Understanding Redundant Entry

+ +
+

Status

+

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

+
+ +
+ +

Redundant Entry Success Criteria text

+
+

Information previously entered by or provided to the user that is required to be entered again in the same process is either:

+ +

Except when:

+ +
+
+ +
+ +

Intent of Redundant Entry

+ +

The intent of this Success Criterion is to ensure that users can successfully navigate multi-step processes. It reduces cognitive effort where information is asked for more than once during steps in a process. It also reduces the need to recall information provided in a previous step.

+ +

Information that is required to be remembered for input can pose a significant barrier to users with cognitive or memory difficulties. All users experience a natural gradual mental fatigue as they proceed through steps in a process. This fatigue is accelerated by the stress of recalling information from short-term working memory. Users with learning, and cognitive disabilities are highly susceptible to mental fatigue.

+ +

Requiring people to recall information already entered in the previous steps can cause them to give up or enter incorrect information. The autocomplete feature of browsers is not considered sufficient because it is the content (the web site) that needs to provide the stored information for a redundant entry, or avoid asking for the same information again.

+ +

This Success Criterion does not add a requirement to store information between sessions. A process is defined on the basis of an activity and is not applicable when a user returns after closing a session or navigating away. However, a process can run across different domains, so if a check-out process includes a 3rd party payment provider, that would be in scope.

+ +

The term "available to select" is not prescriptive. The term allows authors to develop techniques where auto-population is not possible. It can include allowing the user to:

+ + + +

This Success Criterion does not apply if data is provided by the user with a different method, such as uploading a resume in a document format.

+ +

This Success Criterion does not impact Accessible Authentication, for which allowing auto-filling of passwords is a sufficient technique. In that case the filling is performed by the user's browser. Redundant Entry is asking for the website content to make the previous entry available, but not between sessions or for essential purposes such as asking for a password.

+ +

This criterion does not include requirements or exceptions specific to privacy or personally identifiable information (PII), but when implementing techniques such as auto-population, authors should ensure data protection when storing information even temporarily during a process. It is possible to eliminate redundant entry in ways that do not introduce additional privacy risks, but it is also possible that a poor implementation (for meeting this criterion) could leak additional PII.

+ +

Exceptions

+ +

There are exceptions for:

+ + +
+
+

Benefits of Redundant Entry

+ + + +
+ +
+

Examples of Redundant Entry

+ + + +
+ +
+ +

Techniques for Redundant Entry

+ +
+ +

Sufficient Techniques for Redundant Entry

+ + + +
+ +
+

Additional Techniques (Advisory) for Redundant Entry

+ +
+ +
+

Failures for Redundant Entry

+ +
+ +
+ + +