Documents

About Testing

1 Perceivable

1.1 Text Alternatives

1.1.1 Non-text Content (A)

For all non-textual content presented to users, textual substitutions are provided that serve equivalent purposes.

1.2 Time-based Media

1.2.1 Audio-only and Video-only (Prerecorded) (A)

Consideration about media containing only recorded sounds and media containing only recorded images.

1.2.2 Captions (Prerecorded) (A)

Captions are provided for all recorded audio content included in synchronized media (e.g. video with audio).

  • Synchronized media does not exist
    Understanding WCAG2.0
    • The relevant success criterion is "Not present".
    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Time-based Media Provide alternatives for time-based media.
    Criterion Captions (Prerecorded)
    (1.2.2 A)
    Captions are provided for all recorded audio content included in synchronized media (e.g. video with audio).
    Understanding WCAG2.0: Understanding SC 1.2.2

    Captions are provided for all recorded audio content included in synchronized media (e.g. video with audio).

  • Synchronized media exists but provides captions
    Understanding WCAG2.0
    • "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. ).
    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Time-based Media Provide alternatives for time-based media.
    Criterion Captions (Prerecorded)
    (1.2.2 A)
    Captions are provided for all recorded audio content included in synchronized media (e.g. video with audio).
    Understanding WCAG2.0: Understanding SC 1.2.2

    Captions are provided for all recorded audio content included in synchronized media (e.g. video with audio).

1.2.3 Audio Description or Media Alternative (Prerecorded) (A)

Alternative content or audio commentary on time-dependent media is provided for recorded video content included in synchronized media.

1.2.4 Captions (Live) (AA)

Captions are provided for all the live audio contents included in the synchronized media.

1.2.5 Audio Description (Prerecorded) (AA)

Audio commentary is provided for all recorded video contents included in synchronized media.

1.2.6 Sign Language (Prerecorded) (AAA)

Sign language interpreters are provided for all recorded sound contents included in synchronized media.

1.2.7 Extended Audio Description (Prerecorded) (AAA)

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.

1.2.8 Media Alternative (Prerecorded) (AAA)

Alternative content for time-based media is provided for all prerecorded synchronized media and prerecorded video-only media.

  • Audio, video, synchronized media exist, but accurate alternative contents are prepared
    Understanding WCAG2.0
    • 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.
    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Time-based Media Provide alternatives for time-based media.
    Criterion Media Alternative (Prerecorded)
    (1.2.8 AAA)
    Alternative content for time-based media is provided for all prerecorded synchronized media and prerecorded video-only media.
    Understanding WCAG2.0: Understanding SC 1.2.8

    Alternative content for time-based media is provided for all prerecorded synchronized media and prerecorded video-only media.

1.2.9 Audio-only (Live) (AAA)

Alternative content of time-based media that presents equivalent information to content that only includes live audio is provided.

1.3 Adaptable

1.3.1 Info and Relationships (A)

The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.

  • It is semantically marked up using heading tags, strong tags, etc.
    Understanding WCAG2.0
    • 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 that calendar holidays should not be represented in red. 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.
    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    Criterion Info and Relationships
    (1.3.1 A)
    The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.
    Related
    Understanding WCAG2.0: Understanding SC 1.3.1

    The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.

  • Table does not exist
    Understanding WCAG2.0

    There is no document

    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    Criterion Info and Relationships
    (1.3.1 A)
    The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.
    Understanding WCAG2.0: Understanding SC 1.3.1

    The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.

  • Each element of table is appropriately marked up using thead, th, etc.
    Understanding WCAG2.0
    • 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.
    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    Criterion Info and Relationships
    (1.3.1 A)
    The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.
    Understanding WCAG2.0: Understanding SC 1.3.1

    The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.

  • Form does not exist
    Understanding WCAG2.0

    There is no document

    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    Criterion Info and Relationships
    (1.3.1 A)
    The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.
    Understanding WCAG2.0: Understanding SC 1.3.1

    The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.

  • Each element of form is properly marked up using label
    Understanding WCAG2.0
    • 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.
    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    Criterion Info and Relationships
    (1.3.1 A)
    The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.
    Understanding WCAG2.0: Understanding SC 1.3.1

    The information, structures, and relationships presented in some way are programmatically interpretable or provided in text.

1.3.2 Meaningful Sequence (A)

If the order in which the content is presented affects the meaning, the correct reading order can be interpreted by the program.

  • The meaning is not destroyed by making linear information
    Understanding WCAG2.0
    • 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.
    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    Criterion Meaningful Sequence
    (1.3.2 A)
    If the order in which the content is presented affects the meaning, the correct reading order can be interpreted by the program.
    Understanding WCAG2.0: Understanding SC 1.3.2

    If the order in which the content is presented affects the meaning, the correct reading order can be interpreted by the program.

  • Have not formatted sentences using spaces or line feeds
    Understanding WCAG2.0
    • 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.
    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    Criterion Meaningful Sequence
    (1.3.2 A)
    If the order in which the content is presented affects the meaning, the correct reading order can be interpreted by the program.
    Understanding WCAG2.0: Understanding SC 1.3.2

    If the order in which the content is presented affects the meaning, the correct reading order can be interpreted by the program.

1.3.3 Sensory Characteristics (A)

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.

1.4 Distinguishable

1.4.1 Use of Color (A)

Color is not the only visual means for conveying information, indicating motion, stimulating reactions or discriminating visual elements.

1.4.2 Audio Control (A Non interference)

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.

1.4.3 Contrast (Minimum) (AA)

There is a contrast ratio of at least 4.5: 1 for visual presentation of text and character images.

1.4.4 Resize text (AA)

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.

1.4.5 Images of Text (AA)

When the intended visual presentation is possible with the technology being used, text, not a text image, is used for information transmission.

  • There is no image of text
    Understanding WCAG2.0

    There is no document

    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Distinguishable Make it easier for users to see and hear content including separating foreground from background.
    Criterion Images of Text
    (1.4.5 AA)
    When the intended visual presentation is possible with the technology being used, text, not a text image, is used for information transmission.
    Understanding WCAG2.0: Understanding SC 1.4.5

    When the intended visual presentation is possible with the technology being used, text, not a text image, is used for information transmission.

  • There is a mechanism to convert images of text to alt
    Understanding WCAG2.0
    • 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.
    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Distinguishable Make it easier for users to see and hear content including separating foreground from background.
    Criterion Images of Text
    (1.4.5 AA)
    When the intended visual presentation is possible with the technology being used, text, not a text image, is used for information transmission.
    Understanding WCAG2.0: Understanding SC 1.4.5

    When the intended visual presentation is possible with the technology being used, text, not a text image, is used for information transmission.

  • Images of text are indispensable for a specific representation of the text for information to convey, such as typeface samples, logotypes, brands
    Understanding WCAG2.0
    • 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.
    Principle Perceivable Information and user interface components must be presentable to users in ways they can perceive.
    Guideline Distinguishable Make it easier for users to see and hear content including separating foreground from background.
    Criterion Images of Text
    (1.4.5 AA)
    When the intended visual presentation is possible with the technology being used, text, not a text image, is used for information transmission.
    Understanding WCAG2.0: Understanding SC 1.4.5

    When the intended visual presentation is possible with the technology being used, text, not a text image, is used for information transmission.

1.4.6 Contrast (Enhanced) (AAA)

For visual presentation of text and character images, there is a contrast ratio of at least 7: 1.

1.4.7 Low or No Background Audio (AAA)

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.

1.4.8 Visual Presentation (AAA)

There is consideration in visual presentation of text blocks.

1.4.9 Images of Text (No Exception) (AAA)

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.).

2 Operable

2.1 Keyboard Accessible

2.1.1 Keyboard (A)

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.

2.1.2 No Keyboard Trap (A Non interference)

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.

2.1.3 Keyboard (No Exception) (AAA)

All functions of the content can be operated through the keyboard interface without requiring specific timing for individual keystrokes.

2.2 Enough Time

2.2.1 Timing Adjustable (A)

There is consideration when setting time limit for content.

2.2.2 Pause, Stop, Hide (A Non interference)

There is consideration for moving, blinking, scrolling, or automatically updating information.

2.2.3 No Timing (AAA)

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.

2.2.4 Interruptions (AAA)

Interruption can be postponed or suppressed by the user. However, interrupts requiring urgency are excluded.

2.2.5 Re-authenticating (AAA)

If the authenticated session expires, the user can continue the operation without losing data even after re-authentication.

2.3 Seizures

2.3.1 Three Flashes or Below Threshold (A Non interference)

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.

2.3.2 Three Flashes (AAA)

Web pages do not contain anything that flashes more than three times in any one second period.

2.4 Navigable

2.4.1 Bypass Blocks (A)

A mechanism to bypass blocks of content that is repeated on multiple web pages can be used.

  • Bypass blocks of content are provided
    Understanding WCAG2.0
    • 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.
    Principle Operable User interface components and navigation must be operable.
    Guideline Navigable Provide ways to help users navigate, find content, and determine where they are.
    Criterion Bypass Blocks
    (2.4.1 A)
    A mechanism to bypass blocks of content that is repeated on multiple web pages can be used.
    Understanding WCAG2.0: Understanding SC 2.4.1

    A mechanism to bypass blocks of content that is repeated on multiple web pages can be used.

2.4.2 Page Titled (A)

The web page has a title explaining the subject or purpose.

  • A web page has a proper title element
    Understanding WCAG2.0
    • 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.
    Principle Operable User interface components and navigation must be operable.
    Guideline Navigable Provide ways to help users navigate, find content, and determine where they are.
    Criterion Page Titled
    (2.4.2 A)
    The web page has a title explaining the subject or purpose.
    Understanding WCAG2.0: Understanding SC 2.4.2

    The web page has a title explaining the subject or purpose.

2.4.3 Focus Order (A)

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.

  • The order of the elements receiving the focus of the web page is appropriate
    Understanding WCAG2.0
    • 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.
    Principle Operable User interface components and navigation must be operable.
    Guideline Navigable Provide ways to help users navigate, find content, and determine where they are.
    Criterion Focus Order
    (2.4.3 A)
    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.
    Understanding WCAG2.0: Understanding SC 2.4.3

    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.

2.4.4 Link Purpose (In Context) (A)

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.

2.4.5 Multiple Ways (AA)

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.

  • In addition to the global menu, there are prepared multiple ways of reaching individual pages, such as a site map (+ index page), site search, a link to related pages
    Understanding WCAG2.0
    • 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.
    Principle Operable User interface components and navigation must be operable.
    Guideline Navigable Provide ways to help users navigate, find content, and determine where they are.
    Criterion Multiple Ways
    (2.4.5 AA)
    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.
    Understanding WCAG2.0: Understanding SC 2.4.5

    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.

2.4.6 Headings and Labels (AA)

The headings and labels explain the theme or purpose.

  • Heading elements (h*) and label of form are easy to understand
    Understanding WCAG2.0
    • 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.
    Principle Operable User interface components and navigation must be operable.
    Guideline Navigable Provide ways to help users navigate, find content, and determine where they are.
    Criterion Headings and Labels
    (2.4.6 AA)
    The headings and labels explain the theme or purpose.
    Understanding WCAG2.0: Understanding SC 2.4.6

    The headings and labels explain the theme or purpose.

2.4.7 Focus Visible (AA)

Every user interface capable of operating the keyboard has an operation mode in which the focus indicator can be seen.

2.4.8 Location (AAA)

Information on the position of the user in the set of web pages can be used.

  • Bread crumbs exist
    Understanding WCAG2.0
    • 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.
    Principle Operable User interface components and navigation must be operable.
    Guideline Navigable Provide ways to help users navigate, find content, and determine where they are.
    Criterion Location
    (2.4.8 AAA)
    Information on the position of the user in the set of web pages can be used.
    Understanding WCAG2.0: Understanding SC 2.4.8

    Information on the position of the user in the set of web pages can be used.

2.4.9 Link Purpose (Link Only) (AAA)

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.

  • The link letters can be understood independently with some exceptions
    Understanding WCAG2.0
    • 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 aria-hidden="true" or tabindex="-1" 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.
    Principle Operable User interface components and navigation must be operable.
    Guideline Navigable Provide ways to help users navigate, find content, and determine where they are.
    Criterion Link Purpose (Link Only)
    (2.4.9 AAA)
    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.
    Related
    Understanding WCAG2.0: Understanding SC 2.4.9

    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.

    Related

2.4.10 Section Headings (AAA)

Content is organized using section headings.

3 Understandable

3.1 Readable

3.1.1 Language of Page (A)

Interpretation by program can be made as to which language the default natural language of each web page is.

3.1.2 Language of Parts (AA)

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.

3.1.3 Unusual Words (AAA)

Mechanisms can be used to identify clear definitions of words or phrases used in uncommon or limited usage, including idioms and terminology.

3.1.4 Abbreviations (AAA)

Mechanisms can be used to identify the original word or meaning of the abbreviation.

3.1.5 Reading Level (AAA)

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.

3.1.6 Pronunciation (AAA)

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.

3.2 Predictable

3.2.1 On Focus (A)

Neither component causes a change in context when it receives focus.

  • There are no elements that change the situation just by receiving focus
    Understanding WCAG2.0
    • 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.
    Principle Understandable Information and the operation of user interface must be understandable.
    Guideline Predictable Make Web pages appear and operate in predictable ways.
    Criterion On Focus
    (3.2.1 A)
    Neither component causes a change in context when it receives focus.
    Understanding WCAG2.0: Understanding SC 3.2.1

    Neither component causes a change in context when it receives focus.

3.2.2 On Input (A)

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.

  • There are no elements that change the situation without notice when inputing
    Understanding WCAG2.0
    • 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.
    Principle Understandable Information and the operation of user interface must be understandable.
    Guideline Predictable Make Web pages appear and operate in predictable ways.
    Criterion On Input
    (3.2.2 A)
    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.
    Related
    Understanding WCAG2.0: Understanding SC 3.2.2

    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.

3.2.3 Consistent Navigation (AA)

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.

3.2.4 Consistent Identification (AA)

Components having the same function in a set of web pages can be consistently identified.

  • Labels that provide the same function in a set of web pages are consistent.
    Understanding WCAG2.0
    • 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".
    Principle Understandable Information and the operation of user interface must be understandable.
    Guideline Predictable Make Web pages appear and operate in predictable ways.
    Criterion Consistent Identification
    (3.2.4 AA)
    Components having the same function in a set of web pages can be consistently identified.
    Related
    Understanding WCAG2.0: Understanding SC 3.2.4

    Components having the same function in a set of web pages can be consistently identified.

    Related

3.2.5 Change on Request (AA)

A change in context only occurs at the request of the user, or a mechanism for stopping such change is available.

3.3 Input Assistance

3.3.1 Error Identification (A)

If an input error is detected automatically, the error location is identified and the error is explained in text to the user.

3.3.2 Labels or Instructions (A)

When content requests input from the user, a label or explanatory text is provided.

  • There is a form but a label or explanatory text exists
    Understanding WCAG2.0
    • 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.
    Principle Understandable Information and the operation of user interface must be understandable.
    Guideline Input Assistance Help users avoid and correct mistakes.
    Criterion Labels or Instructions
    (3.3.2 A)
    When content requests input from the user, a label or explanatory text is provided.
    Understanding WCAG2.0: Understanding SC 3.3.2

    When content requests input from the user, a label or explanatory text is provided.

3.3.3 Error Suggestion (AA)

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.

3.3.4 Error Prevention (Legal, Financial, Data) (AA)

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.

3.3.5 Help (AAA)

You can use context-sensitive help.

3.3.6 Error Prevention (All) (AAA)

On a web page requesting the user to transmit information, it is made possible to cancel, check, or confirm.

4 Robust

4.1 Compatible

4.1.1 Parsing (A)

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.

4.1.2 Name, Role, Value (A)

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.