resources/en/criterions.yml
criterions:
1-1-1: &c1-1-1
code: 1-1-1
name: Non-text Content
guideline: *g1-1
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html
summary: |
For all non-textual content presented to users, textual substitutions are provided that serve equivalent purposes.
doc: |
There is an exception to omit alt in HTML5, but in order to apply this exception, please apply it after understanding the specification of HTML5 well. Even if this exception is applicable, this check tool issues a warning.
If it is an imaged character, in principle, alt matching the image is given. In addition, please, if possible, please carefully examine whether you really want to image that character.
Because the image of decorative purposes, have an alt in the sky. Even in this case, make sure to set <code>alt=""</code> and do not omit the alt attribute value. Incidentally, if you indicate that it is for decoration purposes with attribute values, such as <code>role="presentation"</code>, you will not get a warning when checking this accessibility checker. It is not a recommendation to abuse <code>role="presentation"</code>.
Users in low-speed line environments may have turned off image display. The appropriate alt is also a judgment of "whether to display the image dared", please put it as carefully as possible.
Since it is an image for skipping requests to images of other servers and analyzing logs, empty alt is inserted.
There is an image, but there is a character string duplicated with the image in the vicinity, and alt is omitted. (If there is an image of Mr. A and there is written "Mr. A" in the vicinity thereof, "Mr. A" Alternatively, alt such as "Mr. A's image" may be easier to read for screen readers if omitting alt).
In order to make it easy to distinguish between "imaged character" and "image", it is good to attach a prefix such as "photo: XX" or a descriptive alt like "XX photo". For example, alt "Japanese sweets" may bother to judge whether it is "imaged" the word "Japanese sweets" or "a picture of Japanese sweets".
There are images of graphs and charts, but there is alt that explains what graphs and charts it is (e.g. "Sales graph of June, July, August"). Level A does not ask for a detailed description of the value of the graph, but of course there is a description of the value in the range that is possible. It is also good to have a table marked up with table nearby.
Google Map is difficult for visually impaired people to handle, but explains "Google Map. Zoom and moveable map".
There is an image of the map, it is difficult for the visually impaired to handle, but there is alt "map". However, if there is a text explanation etc. in the vicinity, alt can be empty but it will not be a fatal barrier. If there is no route explanation in the vicinity, and it is not clearly stating that it is an image of the map, you can not even ask people, so be sure to correct it as it is a barrier.
The gif animation that explains how to operate some kind of instruments is difficult for the visually impaired, but it is difficult to understand for the visually impaired, but by describing the function by assigning alternative text such as "Animation explaining how to operate the instrument" . However, considering that 1-2-1d of the same level A is met in the end, it is better to try to explain as much as possible.
If you are providing a speech in speech, this item is not applicable even if you substitute such alternative text of speech as "voice of the speech." By preparing transcribed text, it becomes "able to handle functions", so in the case of such speech, prepare transcribed text.
It is a hearing-dependent test such as a hearing test.
The image of the flower is displayed and it is an image that asks "Which part is calyx?" It clearly indicates that it is an image for testing purposes.
If you prepare transcribed text with these images, movies and sounds, it will not be a test, so you will explain the purpose of the content with alternative text.
"This sound is an example of sounds that people feel fear", "When looking at it is an image that loses sense of equilibrium", you explain that.
It is almost impossible to transcribe "specific senses" and reproduce them in text, so these are out of the scope of accessibility checks.
1-2-1: &c1-2-1
code: 1-2-1
name: Audio-only and Video-only (Prerecorded)
guideline: *g1-2
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html
summary: |
Consideration about media containing only recorded sounds and media containing only recorded images.
doc: |
Specify that the audio / video is substituting the existing text.
It can be said that recorded voices of lectures are providing "equivalent information" by preparing transcribed texts. When raising a text, it is necessary to describe in detail as much as possible, such as "a buzz of the audience" "(laugh)".
Since it is an image without sound, when raising a text, it is necessary to describe what is happening on the screen as much as possible.
If possible, it is still better if there is explanation by voice comment on what is happening on the screen.
1-2-2: &c1-2-2
code: 1-2-2
name: Captions (Prerecorded)
guideline: *g1-2
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html
summary: |
Captions are provided for all recorded audio content included in synchronized media (e.g. video with audio).
doc: |
"Caption" does not discriminate only speaker's utterance contents like movie subtitles. (Synchronously) the information necessary for understanding the video, such as who is talking, what kind of sound effect sounded, and so forth. In other words, there is something like movie subtitles, 1.2.2 can not be achieved.
Incidentally, "closed caption" is a caption that can be switched between display and non-display, and "open caption" means a caption displayed as characters imaged in the movie (imagining a telop of a news program etc. ).
1-2-3: &c1-2-3
code: 1-2-3
name: Audio Description or Media Alternative (Prerecorded)
guideline: *g1-2
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html
summary: |
Alternative content or audio commentary on time-dependent media is provided for recorded video content included in synchronized media.
doc: |
To prepare transcripts of lectures, prepare transcribed texts. When raising texts, it is necessary to describe in detail the information necessary for the visually impaired to understand the image, such as "audiences rumbling" "(laugh)". Simply preparing transcripts of utterances of simple speakers will not be conformant.
If you do not prepare a transcribed text, give an explanation by voice commentary on what is happening on the screen. This audio description should also be described in detail, such as who speaks to help the visually impaired to understand the video.
In order to conform to 1.2.3, it is necessary to satisfy either of the above.
1-2-4: &c1-2-4
code: 1-2-4
name: Captions (Live)
guideline: *g1-2
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-real-time-captions.html
summary: |
Captions are provided for all the live audio contents included in the synchronized media.
doc: |
"Caption" required in 1.2.2 is applied to live video.
1-2-5: &c1-2-5
code: 1-2-5
name: Audio Description (Prerecorded)
guideline: *g1-2
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc-only.html
summary: |
Audio commentary is provided for all recorded video contents included in synchronized media.
doc: |
Applying "voice commentary" required in 1.2.3 to all the synchronized media present on the page. At this level we do not ask for audio description on live video.
1-2-6: &c1-2-6
code: 1-2-6
name: Sign Language (Prerecorded)
guideline: *g1-2
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-sign.html
summary: |
Sign language interpreters are provided for all recorded sound contents included in synchronized media.
doc: |
Sign language interpreter is applied to all recorded synchronized media existing on the page. Sign language interpreter for live video is not required here, but it is still better if there is.
1-2-7: &c1-2-7
code: 1-2-7
name: Extended Audio Description (Prerecorded)
guideline: *g1-2
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-extended-ad.html
summary: |
When the interval between foreground sounds is insufficient to convey the meaning of video in audio commentary, extended audio commentary is provided for all recorded video contents included in synchronized media.
doc: |
Applying "audio description" required in 1.2.3 to all the synchronized media present on the page. In 1.2.3, it was good to supplement explanations, such as between a conversation and a conversation, but in AAA's "Extended Audio Description", it is necessary to temporarily stop the animation, etc. and provide sufficient audio commentary to understand the situation It is necessary to provide it.
1-2-8: &c1-2-8
code: 1-2-8
name: Media Alternative (Prerecorded)
guideline: *g1-2
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-text-doc.html
summary: |
Alternative content for time-based media is provided for all prerecorded synchronized media and prerecorded video-only media.
doc: |
Prepare "alternative content of time-dependent media" that accurately expresses all of the voice, video (no sound), video (with audio, so-called "synchronized media") in the page. To "accurate", like a script, it is necessary to be a sentence including detailed situation explanation.
If the media has interactive elements, it needs to have interactivity. For example, although it is a moving picture, the progress is once stopped at a certain scene, and options are presented to the viewer. If it is a content whose subsequent development varies depending on choices, it can be said that it is "accurate" for the first time by presenting its development with a hyperlink or the like.
1-2-9: &c1-2-9
code: 1-2-9
name: Audio-only (Live)
guideline: *g1-2
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-live-audio-only.html
summary: |
Alternative content of time-based media that presents equivalent information to content that only includes live audio is provided.
doc: |
"Alternative content of time-dependent media" as required in 1.2.8 is applied to live audio. Although it is required to prepare accurate alternative contents for live audio such as radio broadcasting, this is a very difficult achievement standard.
1-3-1: &c1-3-1
code: 1-3-1
name: Info and Relationships
guideline: *g1-3
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html
summary: |
The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.
doc: |
The meaning of information is not provided only by the color, size, and position of the element. Structures should be structured using h* or strong etc, so that information can be transmitted properly without CSS.
Replace b and i elements with strong / em elements for emphasis purposes.
For u, s, strike, basefont, center and font elements, please use CSS instead to separate structure and representation. In the case of s or strike it may be replaced by del element.
Headings h1 to h6 should be descending in order. If h1 is a big headline, h2 is a middle headline, and h3 is a subheading, it is unnatural for h3 to appear next to h1.
An example of NG would be such things as "the picture on the right ..." "red squares on the calendar ..." "items with red letters are required". However, providing information such as "The person on the upper right in the photo ..." is not this. Also note that this success criterion does not necessarily say <strong>that calendar holidays should not be represented in red</strong>. For those who do not know the color, there is no need to disturb the easy-to-understand person who understands the color, while providing it in a way that makes it clear.
When using form, you can improve the accessibility of form by using label. In fact, in HTML 4.01, even if multiple labelable elements are included, it is not a grammar violation, but accessibility support is not very sure, so it is safer to have one-to-one correspondence for no particular reason.
Many screen readers read the title attribute value of the input element etc. as a label, but if label and title are both written, it is safer to match them. Please pay attention to the title attribute that expected tooltip display from that point of view. Also, if you are expecting tooltip display, it is often displayed only with hover, and it seems that it is often not displayed in focus. Please pay attention to this point as well.
placeholder attribute can not be used as label. Since the placeholder attribute becomes invisible when it is input, some screen-reder, can not read placeholder attribute.
WAI-ARIA attributes aria-label and aria-labelledby are becoming widespread, but at the moment it is safer to have a label (or title) for screen readers.
In the case of a table, it is desirable to make it meaningful by making it linear information. Moreover, it is even better that you can use thead, th etc correctly. It may be difficult for a technician to make the table linear information. Please think that the principle is "read from the upper left to the lower right." It is also effective to check with a screen reader.
For forms, checkbox, radio, etc. should be marked up with label and associated. By doing so, the screen reader makes it easier to understand each item, making clicks easier for users who are difficult to use pointing devices such as a mouse.
If there is a required item in the form, please do not provide information dependent only on the visual sense that it is a required item. For example, how to provide required items such as "items with red letters are required" is NG.
1-3-2: &c1-3-2
code: 1-3-2
name: Meaningful Sequence
guideline: *g1-3
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html
summary: |
If the order in which the content is presented affects the meaning, the correct reading order can be interpreted by the program.
doc: |
Construct so that the meaning does not break when linearized (when read with screen reader). Be careful when arranging elements at an arbitrary position with CSS position absolute etc. It is good to check off by turning off CSS.
Please do layout that makes use of line breaks and spaces so as not to disturb understanding of meaning. Not only does it make it difficult to obtain information with a screen reader if you align the end of a line with a new line, or arrange lines with spaces, it becomes hard to read even when changing font size. Also, as a measure against search engines, I will never work plus.
In order to keep the readability of HTML, markup-engineers shaping by linefeed in attribute values such as alt. remember that there are cases where some screen readers do not intentionally read for each new line.
1-3-3: &c1-3-3
code: 1-3-3
name: Sensory Characteristics
guideline: *g1-3
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html
summary: |
The explanation for understanding and manipulating content does not rely solely on the sensory features of the constituent, such as shape, size, visual location, orientation, or sound.
doc: |
The meaning of information is not provided only by the color, size, and position of the element.
Examples of NG include "round button" and "right button", but if you are carefully checking 1.3.1, it will almost be a satisfying item.
1-4-1: &c1-4-1
code: 1-4-1
name: Use of Color
guideline: *g1-4
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
summary: |
Color is not the only visual means for conveying information, indicating motion, stimulating reactions or discriminating visual elements.
doc: |
The meaning of information is not provided only by the color of the element.
Examples of NG are "Required items are red", "Red letters are errors", etc. If you carefully check 1.3.1, it will be almost satisfied items.
1-4-2: &c1-4-2
code: 1-4-2
name: Audio Control
guideline: *g1-4
level: *lv1
non-interference: true
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-dis-audio.html
summary: |
Uses a mechanism that pauses or stops the sound when the sound on the web page is automatically reproduced and lasts longer than 3 seconds or a mechanism that can adjust the volume level without affecting the volume level of the entire system it can.
doc: |
Uses a mechanism that pauses or stops the sound when the sound on the web page is automatically reproduced and lasts longer than 3 seconds or a mechanism that can adjust the volume level without affecting the volume level of the entire system it can.
By the way, YouTube is automatic playback. For the visually impaired, there is also the aspect that automatic regeneration is appreciative (= you get the flow of getting information just by stepping on the link, and there is also the understanding that YouTube is that kind of thing). The convenience of this automatic playing may be possible other than YouTube, but please be careful on ordinary web pages.
1-4-3: &c1-4-3
code: 1-4-3
name: Contrast (Minimum)
guideline: *g1-4
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
summary: |
There is a contrast ratio of at least 4.5: 1 for visual presentation of text and character images.
doc: |
The contrast ratio between the foreground color and the background color needs to be kept as low as 4.5:1. If the foreground color and background color are not distinctly different, you should pay attention. For delicate parts, measure the contrast ratio. In particular, pay attention to main content and menus.
Among the check items, it is said that it is only necessary for the web page side to provide a mechanism to change the contrast, but users with weak sight also have black and white reversal at the OS level in the first place, and ideal is enough It will ensure contrast.
For color vision deficiencies, consideration is given to specific color combinations. It should be noted that red and green, orange and yellow green, green and brown, blue and purple, pink and white or gray, green and gray black, red and black, pink and blue.
1-4-4: &c1-4-4
code: 1-4-4
name: Resize text
guideline: *g1-4
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html
summary: |
With the exception of captions and character images, the text can be resized up to 200% without assistive technology without compromising the content or function.
doc: |
In older browsers, when specifying the font size with px, cm, etc. in CSS, it was sometimes impossible to enlarge or reduce characters with the browser function, so it would be better to specify the relative font sizes such as percent and em It is.
With the exception of captions and character images, text can be resized up to 200% without assistive technology without compromising content or function. "Without assistive technology" means that it is only necessary to enlarge with the browser, so web page side does not necessarily need to provide font size controller.
When enlarging the letter, make sure that the character is hidden by some element and it can not be read. Narrow inputs etc are wary of caution. It is still better to pay attention to side scrolling occurrence.
1-4-5: &c1-4-5
code: 1-4-5
name: Images of Text
guideline: *g1-4
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html
summary: |
When the intended visual presentation is possible with the technology being used, text, not a text image, is used for information transmission.
doc: |
There is a mechanism that extracts alt from images and replaces them with images using JavaScript etc.
For the purpose of visual design importance, we may make images of global menus and headlines as images, but because the characters that are imaged lose various benefits (copy and paste, machine translation, scaling etc.) , You should not use it much.
Basically, "Images of text" is not recommended because there are users who are hard to use, but if it is not possible to express visual effects with CSS, it is better to use Images of text as 1.4.5 (However, "alt" is necessary because "Images of text").
Understanding WCAG 2.0 defines logos, font samples, etc. as "essential visual effect", which is clear and easy to understand, but for example, "I want to display with antialiasing in any environment" I really want to express this heading with this font by all means "It seems that it is good to say" it is not possible to express visual effects with CSS ".
Do not forget alt as it is a method that is often used in important places, such as placing banner images for appealing effects (links), or when you want particular headlines to stand out (structure) in particular.
There is a stricter 1-4-9a success criterion, there is no exceptional measure there. In other words, unless various conditions are satisfied, it is necessary to express the visual effect which should not use the imaged letters other than the logo, the typeface sample, etc. in the range that can be implemented by CSS etc., It will be.
If you are able to replace Images of text with text information in JavaScript etc. so that it can be treated as text or foreground color, background color, size etc. of Images of text, whatever user agent (ie server side ) If a function that allows users to freely change is provided, 1.4.5 also meets 1.4.9.
1-4-6: &c1-4-6
code: 1-4-6
name: Contrast (Enhanced)
guideline: *g1-4
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html
summary: |
For visual presentation of text and character images, there is a contrast ratio of at least 7: 1.
doc: |
Strict criteria for 1.4.3. In 1.4.3 I was requesting a 3:1 contrast ratio, but even bigger letters require a contrast ratio of 4.5:1.
1-4-7: &c1-4-7
code: 1-4-7
name: Low or No Background Audio
guideline: *g1-4
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html
summary: |
Content that contains only recorded sounds, (1) mainly includes utterances in the foreground, (2) not speech CAPTCHA or voice logo, and (3) mainly music expressions such as songs and laps There is consideration for things that are not intended utterances.
doc: |
It is supposed to be sufficiently small that the difference between the volume of the foreground sound (main utterance) and the volume of the background sound only has to be 20 decibels, but since it is a difficult area for web content personnel to take care, accessibility If you know that it includes video content at the time you make the policy, you should share it with the video staff in advance.
If possible, it is good to set a policy of not using the background sound in the first place if you want to explain something with a video.
1-4-8: &c1-4-8
code: 1-4-8
name: Visual Presentation
guideline: *g1-4
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html
summary: |
There is consideration in visual presentation of text blocks.
doc: |
Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
It is hard to read if there are too many characters on a line, so in case of liquid layout etc, set the maximum width and consider the number of characters.
Do not set up a mechanism that allows you to select the background color and foreground color on the web page, or do not set it to be a harmful when using the OS in the high contrast mode. In principle, if you set the foreground color and the background color to no specification in places like the text box, the problem hardly occurs.
It does not mean only relative specification of character size, but also needs to guarantee that there are no characters that can not be read by enlarging.
1-4-9: &c1-4-9
code: 1-4-9
name: Images of Text (No Exception)
guideline: *g1-4
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-images.html
summary: |
Text images are used for pure decoration or when the specific representation of the text is essential for the information to be conveyed (logotype etc.).
doc: |
In 1-4-5a, if it is impossible to obtain the visual effect that CSS wishes to obtain, it is said that it is acceptable to use the imaged characters, but in 1.4.9, it is said that font samples, logotypes, etc. " Understand that using imaged characters is forbidden except in cases where the "essential effect is essential". In other words, if you decorate texts within the range that CSS can do, it fulfills 1.4.9.
However, in the case where the imaged character is replaced with text information by JavaScript or the like, it can be handled as text, or when the foreground color, background color, size, etc. of the imaged character are changed to what user agent (Ie on the server side) if the function that the user can freely change is provided, it meets 1.4.9.
2-1-1: &c2-1-1
code: 2-1-1
name: Keyboard
guideline: *g2-1
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html
summary: |
All functions of the content can be operated through the keyboard interface without requiring specific timing for individual keystrokes. However, except when the fundamental function is realized depending on a series of trajectories continuing from the start point to the end point by the action of the user.
doc: |
Actually, if you meet 2-1-1a, you pass this success criterion, but in many cases it will inadvertently write and there are times when it may be a fatal implementation in keyboard operation, so check it individually. be careful.
If it is inevitable at "specific timing" such as a driving simulator, it can be said that it is the essence of contents.
In 1.1.1, if the element that receives the control is not accessible, it will be conformance by setting an explanation. "Driving Simulator" in this section is also the subject, so please give an explanation on what kind of component it is in accordance with 1.1.1.
2-1-2: &c2-1-2
code: 2-1-2
name: No Keyboard Trap
guideline: *g2-1
level: *lv1
non-interference: true
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html
summary: |
If the keyboard interface can be used to move the keyboard focus to a component of the webpage, it is possible to remove focus from that component using only the keyboard interface. Furthermore, if you can not remove focus by using arrow keys without a modifier key, Tab key, or other standard method of removing focus, the user is notified of the method of removing focus.
doc: |
"Keyboard trap" is an implementation that makes it impossible to escape from keyboard operation when focus shifts to an element. When creating a modal window etc., you have to be able to do it not only with the mouse but also with the keyboard to close it.
2-1-3: &c2-1-3
code: 2-1-3
name: Keyboard (No Exception)
guideline: *g2-1
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-all-funcs.html
summary: |
All functions of the content can be operated through the keyboard interface without requiring specific timing for individual keystrokes.
doc: |
There are no components that require specific timing for keyboard operation
2-2-1: &c2-2-1
code: 2-2-1
name: Timing Adjustable
guideline: *g2-2
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html
summary: |
There is consideration when setting time limit for content.
doc: |
If you need to set a time limit for content, the following consideration of Success Criterion 2.2.1 is required. Whether the time limit is sufficiently long (20 hours), the time limit can be canceled, the time limit can be adjusted to 10 times or more, the time can be extended, and the time limit must be inevitable for the contents (auction Etc).
"Limited time" does not cover operation only. When there is a carousel, this is the time limit when you have to read the contents while the carousel switches automatically.
Also be careful when you have movies and audios. There are users that also make it difficult to recognize these by setting a time limit.
For movies, audios, carousels, it is difficult to think about measures to extend or adjust the time limit, but if you can pause and resume it, you will meet this success criterion (G4). As for carousel, please note that similar items are achieved in 2.2.2 and level A can not be acquired unless the user can stop.
Please do not specify redirect etc. by refresh of meta element because it restricts time to read by user.
2-2-2: &c2-2-2
code: 2-2-2
name: Pause, Stop, Hide
guideline: *g2-2
level: *lv1
non-interference: true
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html
summary: |
There is consideration for moving, blinking, scrolling, or automatically updating information.
doc: |
Information that is moving, flickering, scrolling, or automatically updating should be paused, stopped, or hidden so that it will not be distracted by that information.
Users with Dyslexia, Intellectual Disability, Attention Deficit hyperactivity disorder may not be able to use other content for these contents, so this item is "Non-Interference.(must always be achieved) "is. For "other contents", it is good to see examples showing suggestions in the "full page advertisement" of "Understanding Success Criterion 2.2.2".
Please do not use marquee to let the character scroll or blink to let the letters flash.
Movie, audio, carousel, etc are moving contents.
If content with motion or blinking is less than 5 seconds it will meet this success criterion, but "blinking" may sometimes cause the same harm as "flash", within 5 seconds Even "flashing" blinking is not allowed.
2-2-3: &c2-2-3
code: 2-2-3
name: No Timing
guideline: *g2-2
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html
summary: |
Timing is not an integral part of the event or action presented by the content. However, excluding non-interactive synchronized media and real-time events.
doc: |
For example, a certain page notice list is provided with a mechanism that can be automatically updated to the latest state every 3 minutes (content with time limit), but also to access all the notice articles without being automatically updated If so, content with time limit is no longer "indispensable for content usage".
Although movie and audio are inherently "contents with limited time", if we are dealing with the correspondence stipulated in 1.1 "non-text contents", we can also deal with the problem of time limit.
2-2-4: &c2-2-4
code: 2-2-4
name: Interruptions
guideline: *g2-2
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html
summary: |
Interruption can be postponed or suppressed by the user. However, interrupts requiring urgency are excluded.
doc: |
Implementation that interrupts the operation of the user should be avoided, but this is not the case for interruptions requiring emergency. For example, an interruption that encourages extension when operation time limit is approaching is considered indispensable. It will also include emergency alerts for citizens.
Allow the user to adjust the behavior related to interrupt processing with the user setting of the site. For example, hide anything other than urgent alerts such as 2.2.4b.
2-2-5: &c2-2-5
code: 2-2-5
name: Re-authenticating
guideline: *g2-2
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-server-timeout.html
summary: |
If the authenticated session expires, the user can continue the operation without losing data even after re-authentication.
doc: |
For security reasons, there may be a mechanism for forcibly logging out if there is a time that is not used more than a certain amount. Also, on a system that does not allow login with the same account, if two people log in with the same account at the same time, you may forcibly log out the one that was logged in first. Even when forcibly logging out, user should be able to resume input without losing the information user is inputting by reauthentication.
2-3-1: &c2-3-1
code: 2-3-1
name: Three Flashes or Below Threshold
guideline: *g2-3
level: *lv1
non-interference: true
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html
summary: |
The webpage has no flashing more than three times in any one second, or the flash is below the general flash threshold and the red flash threshold.
doc: |
Users of Photodermatosis are banned by flash and may be unable to use any other content at all, so this is forbidden. Since you need to pay attention even in the screen as well as in the movie, please play the movie and check it. For a more detailed definition of flashes, see Understanding Success Criterion 2.3.1.
2-3-2: &c2-3-2
code: 2-3-2
name: Three Flashes
guideline: *g2-3
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-three-times.html
summary: |
Web pages do not contain anything that flashes more than three times in any one second period.
doc: |
It is the same as 2.3.1, except that exceptions are not allowed. If 2.3.1a is met, it may be considered conforming, but this judgment is strict, please be careful as even 1 pixel size is not allowed.
2-4-1: &c2-4-1
code: 2-4-1
name: Bypass Blocks
guideline: *g2-4
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html
summary: |
A mechanism to bypass blocks of content that is repeated on multiple web pages can be used.
doc: |
To share common parts of all pages, implement an implementation that can skip this. Examples of common parts are global menus and advertisement areas. It is difficult for screen reader users and users who are growing in font size extremely to read such common parts in many ways and to pass by scrolling.
Please note that Accessibility Supported. Bypass blocks by "structured by heading" is not accessibility supporteded because it is often not available in visual browsers. So, we should consider the response to put the link for bypass blocks to be essential to satisfy 2.4.1 at present.
Frame and iframe elements can be collectively targeted for bypass blocks. By properly providing information on what kind of frame / iframe, with the title attribute, it will help you decide bypass blocks.
Links for bypass blocks are useful not only for global menus and advertising areas, but also for Facebook plugin-box which continues to read many links, for example.
2-4-2: &c2-4-2
code: 2-4-2
name: Page Titled
guideline: *g2-4
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html
summary: |
The web page has a title explaining the subject or purpose.
doc: |
Please make the web page have unique title within the website as much as possible. If you make it a common title in the website, users will not be able to grasp the current position in the website. The title is useful for grasping the current position in the website, and also has a very high effect on search engine countermeasures.
2-4-3: &c2-4-3
code: 2-4-3
name: Focus Order
guideline: *g2-4
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html
summary: |
If the web page can navigate in sequence and its navigation order affects meaning or operation, the focusable component receives focus in an order that does not impair meaning and operability.
doc: |
A user using screen reader or the screen enlargement often moves the focus by the tab key. Movement of focus by tab key is in HTML description order if it is straightforward HTML, but can be changed by giving tabindex.When tabindex is given, care should be taken not to set the order so as to prevent understanding of the meaning.
Also, care should be taken when creating a modal dialog. For users who do not use screen readers, modal dialogs can not perform other actions until they close the modal dialog (that is, they are called "modal dialogs"). For users who use screen readers, they should behave in the same way, and there should be no such thing as moving out of the modal if you are focusing with the tab key.
2-4-4: &c2-4-4
code: 2-4-4
name: Link Purpose (In Context)
guideline: *g2-4
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html
summary: |
The purpose of each link can be determined from the text of the link alone, or from the text of the link and the context of the program which can be interpreted programmatically. However, excluding cases where the purpose of the link is ambiguous to most users.
doc: |
The link letters should indicate what the link destination is. In many cases, users of screen readers read sentences by following only links with tab key press alone. In such cases, however, each link letters are not unique and "read more" or "detailed information here" If it is, it will become difficult to grasp what the link destination is.
However, in 2.4.4 it is considered good to provide link letters depending on the context. For example, when the content of books is provided in HTML, PDF, MP3, only the first HTML contains the title of the book in the link letters, but it is considered good to read "PDF" "MP3".
Also, <strong> if it is within the same paragraph </strong>, even so-called "here link" is also allowed, but for "here link" it is better not to use it much.
It is not a fatal barrier and there is no regulation in the standard, but if the link destination is a downloading file such as PDF, it is a file and the size of the file is written together, who It will be useful as well.
In the first place, if the link is broken due to the loss of the link destination etc. (It may not be a question to be touched in the accessibility context), let's improve it because it is hard to use.
2-4-5: &c2-4-5
code: 2-4-5
name: Multiple Ways
guideline: *g2-4
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-mult-loc.html
summary: |
More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.
doc: |
It is desirable to provide multiple ways to reach each page in the set of web pages, except for a series of processes, such as a page in the middle of a shopping cart. Many websites have a global menu, but in addition, if you have a site search, a link to a related page, a site map, or a index (page), you can meet this success criterion Regarding the "Index Page" way of thinking, you may need attention if that table of contents page is the only way to reach individual pages.)
Index page is a link list to each item hanging in a category, so to speak. Even if the site map is not complete (covering all pages), if you include a index page in the site map, you can say that you provided "multiple ways".
However, if the pages below the Table of Contents page are not reachable unless you click many times, implementation of site search will be good. Also, before you have such content, you should first make the structure of the site simple.
2-4-6: &c2-4-6
code: 2-4-6
name: Headings and Labels
guideline: *g2-4
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html
summary: |
The headings and labels explain the theme or purpose.
doc: |
Although it is easy to check about the heading of main content, there are occasions where a non-display headline is placed in the navigation portion other than the main text. It may be overlooked inadvertently as it is a hidden place, but please make sure to include the appropriate content. It is good to check off by turning off CSS.
2-4-7: &c2-4-7
code: 2-4-7
name: Focus Visible
guideline: *g2-4
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
summary: |
Every user interface capable of operating the keyboard has an operation mode in which the focus indicator can be seen.
doc: |
Depending on elements and browsers, focus may not be visualized by default even if focus is received. It is a good idea to grant outline explicitly by CSS.
2-4-8: &c2-4-8
code: 2-4-8
name: Location
guideline: *g2-4
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-location.html
summary: |
Information on the position of the user in the set of web pages can be used.
doc: |
It is desirable that "bread crumb (or topic pass)" exists. Also, if you have a parent site such as a satellite site, the link to the parent site also helps you understand the "current location" in a broad sense. For example, an undergraduate site with a separate university site has a link to that university.
2-4-9: &c2-4-9
code: 2-4-9
name: Link Purpose (Link Only)
guideline: *g2-4
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-link.html
summary: |
A mechanism that can specify the purpose of each link with the text of the link alone can be used. However, excluding cases where the purpose of the link is ambiguous to most users.
doc: |
The link letters alone must be able to understand the purpose of the link. The difference from 2.4.4 is that it does not allow context dependence. Representing the example of "book" in 2.4.4, HTML version, PDF version, MP3 version must have book name in link letters respectively. However, if "the purpose of the link is ambiguous for most users", it does not seem to be limited to this, but the example of "guava" seems to be difficult for users without disabilities. The door example of "Understanding Success Criterion 2.4.4" may be easier to understand.
there are often implementations that There is a title and it is linked, a little introduction sentence and "Read more" link to the same place as the title. In this case, "Read more" is not a link that can be understood by itself (by the way it is acceptable in 2.4.4). If you read "Read more" as "Read more about {title}", you can "understand independently", so 2.4.9 is satisfied. However, with a screen reader, reading while skipping to the link on the tab is a bit annoying as it reads similar functions in succession. In this case, you can use <code>aria-hidden="true"</code> or <code>tabindex="-1"</code> etc. in this case "Read more" (or "Read more about {title}") If you do, the number of tab key presses will be reduced, making comfortable use in the audio environment. By the way, in 3-2-4a, it is required that "components having the same function can be consistently identified". For example, it is forbidden that the link to the inquiry form of the site is "Contact" or "Contact Us page" and it is not unified (In other words, it is said to be consistent in "Contact" or "Contact Us page"). As in Section 2.4.9, it is considered that understanding the purpose of the link is not disturbing, but even if the character string of the link can be understood, different notation makes the user uneasy You may need to be conscious of it being there.
2-4-10: &c2-4-10
code: 2-4-10
name: Section Headings
guideline: *g2-4
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html
summary: |
Content is organized using section headings.
doc: |
It is desirable that the web page is structured using headings. It may seem a bit strange that this success criterion is AAA, but in cases where the content producer can not arbitrarily structure it using headlines, such as when the manuscript is not structured (For example, see "Section Headings" for details).
3-1-1: &c3-1-1
code: 3-1-1
name: Language of Page
guideline: *g3-1
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-doc-lang-id.html
summary: |
Interpretation by program can be made as to which language the default natural language of each web page is.
doc: |
By specifying the default language of the web page like <code><html lang="en"></code> by specifying HTML lang, the user agent and assistive technology can interpret the contents correctly.
When constructing a multilingual site, it is important to forget about this, so please be aware that even Japanese pages may be "en".
Also, when multiple languages are mixed within a single page, it is strongly recommended that consideration is also given to Success Criterion 3.1.2.
3-1-2: &c3-1-2
code: 3-1-2
name: Language of Parts
guideline: *g3-1
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-other-lang-id.html
summary: |
Interpretation by program can be made as to which language the natural language of each phrase or phrase is. However, exclude proper nouns, technical terms, phrases whose languages are unknown, and words or phrases that are part of the language of the immediately preceding and succeeding texts.
doc: |
The natural language of each part of the contents is clearly indicated to the program. Any words or phrases that are part of the proper noun, technical terms, phrases whose languages are unknown, and immediately before and after the text are excluded.
If the basics are written in English and some quoting texts from other languages, it's a good idea to mark up the quoted language.
Also, it is a good idea to add a lang attribute to the a element in the language switching common to the header of multilingual site.
3-1-3: &c3-1-3
code: 3-1-3
name: Unusual Words
guideline: *g3-1
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-idioms.html
summary: |
Mechanisms can be used to identify clear definitions of words or phrases used in uncommon or limited usage, including idioms and terminology.
doc: |
It is desirable that difficult terms that are not common are able to refer to their definitions. "Difficult term" also includes idioms and phrases, for example. In the example of Understanding, we cite a case where "Hij ging met de kippen op stok" does not mean "He went to bed early", but rather than annotating every word in these words, It may be simpler to think that correspondence is requested to avoid.
Or perhaps there is difficulty in the idea of "altanative pages of difficult words", but maybe alternative pages should be prepared.
By the way "Leet" is an internet slang in the English-speaking world. There is a Leet language expression of "1337" by itself.
As an aside, it is impressive that there was an explanation of the accessibility term "A11y", and it was said that "notation A11y itself is not accessible".
3-1-4: &c3-1-4
code: 3-1-4
name: Abbreviations
guideline: *g3-1
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-located.html
summary: |
Mechanisms can be used to identify the original word or meaning of the abbreviation.
doc: |
If there is an abbreviation in the content, you can know the original word or meaning of the abbreviation. It can be said that it is also related to 3.1.3. Incidentally, in HTML 4.01, there are tags abbr (abbreviation .eg XML, HTML), acronym (acronym .eg LAN, NATO), which are markups of abbreviations and meaning that meaning abbreviations expanded with the title attribute Yes, but somewhat accessible and supported situation is awkward, so be careful.
In HTML5, acronym is obsolete. Let's mark up with abbr in HTML5.
3-1-5: &c3-1-5
code: 3-1-5
name: Reading Level
guideline: *g3-1
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-supplements.html
summary: |
If the text requires reading comprehension level beyond the former secondary education level with the proper noun or title removed, a version that does not require comprehension content or reading comprehension level beyond the level of the former secondary education can be used.
doc: |
It is desirable that contents can be read with the reading comprehension level of the lower secondary education level (UNESCO standard, 9 years educated). When seeking a reading comprehension level beyond that, prepare supplemental content or version that can be understood by the reading level of the lower secondary education level.
How to judge the level of secondary education at the former stage, according to Understanding, since there are judgment calculation formulas in almost all countries, it is good to use it.
3-1-6: &c3-1-6
code: 3-1-6
name: Pronunciation
guideline: *g3-1
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-pronunciation.html
summary: |
In the context, if the meaning of a word becomes ambiguous if pronunciation is unknown, a mechanism to specify clear pronunciation of the word can be used.
doc: |
As for the handling of how to read foreign languages etc., it is also possible to prepare an audio file of pronunciation.
Also, this may not be included in the context of "pronunciation", but if the dates are delimited by slashes, they may be read as fractions and should be avoided to enhance usability in screen readers .
3-2-1: &c3-2-1
code: 3-2-1
name: On Focus
guideline: *g3-2
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html
summary: |
Neither component causes a change in context when it receives focus.
doc: |
Just by receiving focus, do not cause any situation change. An example of a malfunction that a modal window that opens automatically when receiving focus and a page movement occurs when receiving focus. Such behavior is difficult for users to predict and is hard to handle.
3-2-2: &c3-2-2
code: 3-2-2
name: On Input
guideline: *g3-2
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html
summary: |
Changing the setting of the user interface component does not automatically cause a context change. However, unless the user informs the behavior before using it.
doc: |
Do not send automatically after you enter all the input fields in the page, or move the page if you check the check boxes and radio buttons.
Sometimes there is an interface that moves pages in response to select onchange. For the user operating the mouse, the third item can be selected, but in the case of the keyboard, onchange determination is made as soon as the down key is pressed, and never downward by two It can happen that you can not go (in some sense it's a "keyboard trap"). In such a case, you will need to give "execute button".
This Success Criterion is similar to 3.2.1, except that it may be allowed if the change in the situation is predictable and controllable (In the case of focus, prediction and control are inherently difficult). For example, when there is a form to add a schedule to the calendar, it is predictable and controllable that the entry field dynamically changes when you select a schedule type with a radio button.
Also, when entering 4 digits of credit card number etc., behaviors that automatically focus on the next field when 4 characters are input are permitted if explained beforehand.
3-2-3: &c3-2-3
code: 3-2-3
name: Consistent Navigation
guideline: *g3-2
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-consistent-locations.html
summary: |
The repeated navigation mechanism on multiple webpages in a set of webpages appears in the same order as they are repeated. However, except when the user changes.
doc: |
In a broad sense, it is to describe the global navigation in a certain position, but the nonconformity case that the order of the items in the global navigation should be consistent in the site is "Understanding SC 3.2.3" Note that it is illustrated in.
For example, it is important to have "Skip to main content" skip link and set search field in fixed position.
It does not prohibit global navigation from having a drop-down menu.
3-2-4: &c3-2-4
code: 3-2-4
name: Consistent Identification
guideline: *g3-2
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-consistent-functionality.html
summary: |
Components having the same function in a set of web pages can be consistently identified.
doc: |
Links and buttons that provide the same function must be consistent in the set of web pages. This success criterion is easy to overlook. Even labels that seem almost self-evident, if they are not strictly consistent, can not meet this success criterion. In the case of nonconforming cases, the "find" button and the "search" button provide the same function, but this is not good because of different labels.
Even when the link destination is the same and the link character string is different, it is also the target of attention (G 197). It seems that it is NG that the link destination of the inquiry page is "Contact" or "Contact Us page".
Also, the link to the top page of a set of web pages may be "top", "to the top page", or the site name. Let's avoid notating the notation of these links within the content.
It is a relatively common implementation that the logo image with the site name alt at the top of the page is the top page link. Also, at the same time, the link to the top page of breadcrumbs is often not a site name. Although the interpretation may be shaking, it is guaranteed consistency of the function "go to the top page when you click the site name logo" and the consistency of the function "let's go to the top page with the top in breadcrumbs" It is considered that this string does not have to match if it is done. See "Example 3:Consistent references to other pages" of "Understanding SC 3.2.4".
By the way, please also check 2.4.9. In this "Contact" example, this item is not satisfied because the labels do not match, but in terms of "understanding the function of the link" required in 2.4.9, there is no problem I will.
For example, it is dangerous from the point of view of 2.4.9 to think that the "link for reading article details" is a consistent label "here".
3-2-5: &c3-2-5
code: 3-2-5
name: Change on Request
guideline: *g3-2
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html
summary: |
A change in context only occurs at the request of the user, or a mechanism for stopping such change is available.
doc: |
It is desirable that all operations that can cause some change in the situation are controllable by the user. As long as 3.2.1 and 3.2.2 are cleared up, we will aim for this success criterion naturally, but as far as possible, leaving the chance of change to the user is an important point of this success criterion.
If for some reason there is a behavior that automatically causes some change in the situation, it is necessary for the user to be able to stop the change.
The interesting thing is the reference to Understanding about target = _blank. On the other hand, if it is explained in the link text that "Open in a new tab (window)", it is said that it is okay to do this, but it is better if you can not specify by target if possible. There is a case where it is convenient for most users to have target designation around here, which is quite troublesome.
3-3-1: &c3-3-1
code: 3-3-1
name: Error Identification
guideline: *g3-3
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html
summary: |
If an input error is detected automatically, the error location is identified and the error is explained in text to the user.
doc: |
If there are items that require mandatory items or values in a predetermined format to be entered, and if you do not want to accept the transmission unless it is entered correctly, display errors in an easy-to-understand way for the user. When displaying an error, for example, <strong> only </strong> changing the background color of mandatory items that are not entered is insufficient because the visually impaired person does not know the error (This does not mean that you should not change the color.Usability of sighted people improves by expressing colors.). It is necessary to explain the error with sentences.
It is good to check the error before sending using JavaScript.
3-3-2: &c3-3-2
code: 3-3-2
name: Labels or Instructions
guideline: *g3-3
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html
summary: |
When content requests input from the user, a label or explanatory text is provided.
doc: |
Provide information to users in an easy-to-understand manner as to where and when to ask the user for input to the form. It is even better to provide it in a way interpretable by the program. Specifically, by linking each form element with a label element, it is possible to create a form that is easy to use even for visually impaired people.
Also, it is preferable to include descriptions and case examples of input, but if you do too much you will get in the way, so make it concise.
When there is a required item, it is necessary to provide information in an easy-to-understand manner what is required.
When writing descriptions and examples at the time of input, there is less mistake for users of screen readers who are linearly acquiring information by describing them before entry fields.
3-3-3: &c3-3-3
code: 3-3-3
name: Error Suggestion
guideline: *g3-3
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-suggestions.html
summary: |
If an input error is detected automatically and you can suggest a correction method, that suggestion is presented to the user. However, excluding cases where the purpose of security or content is impaired.
doc: |
When there is an error in the input contents, it is desirable to explain how to correct it. However, in the case of Understanding WCAG 2.0, we cite the case of "Please enter January" to the user who entered "12" for "Please enter month", but this is not a very good case I think. Rather, say "Please enter with alphabet (aZ) and number (0-9)" to issue an error if you are entering in half-width alphanumeric input for double-byte characters, It is better to refer to the perimeter (it is better to convert it to half-width alphanumeric characters by accepting input without issuing an error, but it will reduce user's effort, but such correspondence depends on case).
The difference from 3.3.1 is a bit hard to understand, but the subject of 3.3.1 is to specify the error part and not to clarify how to correct the error.
Also, it is said that it is desirable to give a link to an error part even in 3.3.1 or 3.3.3.
3-3-4: &c3-3-4
code: 3-3-4
name: Error Prevention (Legal, Financial, Data)
guideline: *g3-3
level: *lv2
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-reversible.html
summary: |
On a web page where a legal act or a financial transaction occurs for a user, the data on the user-controllable data storage system is changed or deleted, or the user sends an exam answer, either cancellation, check or confirmation It is made to be able to do.
doc: |
Forms that can cause serious losses due to user input such as "legal things", "financial transactions", "tests", etc. must cancel the submission or provide a confirmation screen before submit. It feels like level A, but it is level AA.
3-3-5: &c3-3-5
code: 3-3-5
name: Help
guideline: *g3-3
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html
summary: |
You can use context-sensitive help.
doc: |
If the label is insufficient to explain all functions, it is desirable to provide help separately. Even if you write a description near the form, it is considered as help in 3.3.5.
3-3-6: &c3-3-6
code: 3-3-6
name: Error Prevention (All)
guideline: *g3-3
level: *lv3
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-reversible-all.html
summary: |
On a web page requesting the user to transmit information, it is made possible to cancel, check, or confirm.
doc: |
The form can be canceled or confirmed at the time of submission.
4-1-1: &c4-1-1
code: 4-1-1
name: Parsing
guideline: *g4-1
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html
summary: |
In the content implemented using the markup language, the element has a complete start tag and end tag, the elements are nested according to the specification, the element does not have duplicate attributes, any ID Is also unique. However, excluding those approved by the specification.
doc: |
There should be no error in markup describing web content.
In addition to analyzing this accessibility checker, you can also use <a href="https://validator.w3.org">Markup Validation Service</a>.
4-1-2: &c4-1-2
code: 4-1-2
name: Name, Role, Value
guideline: *g4-1
level: *lv1
url: https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html
summary: |
For all user interface components (elements that make up the form, links, script-generated components, etc.), names and roles can be interpreted programmatically. In addition, the status, properties, and values that can be set by the user can be set by the program. Then, user agents including assistive technology can use change notifications for these items.
doc: |
Elements to be operated by the user need to be interpreted by the program if they have names, roles and values. When describing elements as usual in HTML, this is rarely a problem. However, even if you are describing HTML as usual, it is important to note that if span etc. receives focus and implements such as JavaScript that causes some change in content.