From fdcc5bfe6a1dd8a9b27cd44dd96716bc26b9a8cb Mon Sep 17 00:00:00 2001 From: Jean-Francois Hector Date: Sun, 23 Feb 2020 10:48:37 +0000 Subject: [PATCH] [#102] Fixes some readability issues Co-authored-by: Ben Luby --- guidelines/1.1.1.md | 131 ++++++++++---------- guidelines/1.2.1-audio-only.md | 33 ++--- guidelines/1.2.2.md | 29 ++--- guidelines/1.2.3.md | 31 ++--- guidelines/1.2.5.md | 29 ++--- guidelines/1.3.1.md | 30 +++-- guidelines/1.3.5.md | 68 ++++++----- guidelines/4.1.2.md | 214 +++++++++++++++++---------------- index.html | 10 +- 9 files changed, 300 insertions(+), 275 deletions(-) diff --git a/guidelines/1.1.1.md b/guidelines/1.1.1.md index d3efb26..15b28e0 100755 --- a/guidelines/1.1.1.md +++ b/guidelines/1.1.1.md @@ -4,14 +4,15 @@ This document is in beta. Help us by [reporting issues via Github](https://githu # Text alternative for images -On this page: -* [Summary](#summary) -* [Requirements](#requirements) -* [Guidance for Design](#guidance-for-design) -* [Guidance for iOS](#guidance-for-ios) -* [Guidance for Android](#guidance-for-android) -* [Guidance for Web](#guidance-for-web) -* [More info](#more-info) +**On** this page: + +- [Summary](#summary) +- [Requirements](#requirements) +- [Guidance for Design](#guidance-for-design) +- [Guidance for iOS](#guidance-for-ios) +- [Guidance for Android](#guidance-for-android) +- [Guidance for Web](#guidance-for-web) +- [More info](#more-info) --- @@ -25,33 +26,34 @@ All non-text content (like images, charts, icons and infographics) must have an ## Requirements -* Images (like logos and icons) that communicate information have short text alternatives that serve the same purpose as the image: - * When the image conveys information (like an image that is part of a news article), the text alternative should convey the same information as the image. - * When the purpose of the image is to convey a functionality (like a magnifying glass icon), the text alternative should describe the action that will be performed (like "search"). - * Each should have a unique alternative to distinguish them from each other. For example, rather than multiple 'share' buttons with the same alternative "Share", the alternative should be "Share ..." and include the name of the related item. +- Images (like logos and icons) that communicate information have short text alternatives that serve the same purpose as the image: + + - When the image conveys information (like an image that is part of a news article), the text alternative should convey the same information as the image. + - When the purpose of the image is to convey a functionality (like a magnifying glass icon), the text alternative should describe the action that will be performed (like "search"). + - Each should have a unique alternative to distinguish them from each other. For example, rather than multiple 'share' buttons with the same alternative "Share", the alternative should be "Share ..." and include the name of the related item. -* Endeavour to be succinct, and avoid redundant phrasing such as "Picture of ...", "... logo", or "Select this to ...". Verbose alternatives make content harder to listen to and understand for screen reader users. +- Endeavour to be succinct, and avoid redundant phrasing such as "Picture of ...", "... logo", or "Select this to ...". Verbose alternatives make content harder to listen to and understand for screen reader users. -* The element type or trait, such as image or button, should not be included in the alternative as it is programmatically determined and added by the screen reader. For example: - * A 'play' button coded as a button with the alternative "Play button" would be spoken as "Play button. Button.". - * An image coded as an image with an alternative beginning "Image of ..." would be spoken as "Image. Image of ...". +- The element type or trait, such as image or button, should not be included in the alternative as it is programmatically determined and added by the screen reader. For example: + - A 'play' button coded as a button with the alternative "Play button" would be spoken as "Play button. Button.". + - An image coded as an image with an alternative beginning "Image of ..." would be spoken as "Image. Image of ...". ### Complex images -* Images (like infographics, charts and diagrams) that communicate complex information also have longer text descriptions within the same page. +- Images (like infographics, charts and diagrams) that communicate complex information also have longer text descriptions within the same page. ### Purely decorative and redundant images -* Images that are purely decorative (i.e. that do not convey any information) should be explicitely silenced in code so that they are not read out by screen readers. +- Images that are purely decorative (meaning that do not convey any information) should be explicitely silenced in code so that they are not read out by screen readers. -* Images that are completely redundant (i.e. that convey information or functionality that's already conveyed in text) should be explicitely silenced in code so that they are not read out by screen readers. - * For example, if a magnifying glass icon is part of a button that has a visible label with the text "Search", the image itself shouldn't be read out by screen readers +- Images that are completely redundant (meaning that convey information or functionality that's already conveyed in text) should be explicitely silenced in code so that they are not read out by screen readers. + - For example, if a magnifying glass icon is part of a button that has a visible label with the text "Search", the image itself shouldn't be read out by screen readers ### Common mistakes -* The image communicates information but does not have a text description; -* The text description does not communicate the same information as the image; -* The image has a text description that is an exact duplication of content elsewhere on the page. +- The image communicates information but does not have a text description; +- The text description does not communicate the same information as the image; +- The image has a text description that is an exact duplication of content elsewhere on the page. ### Why? @@ -61,17 +63,17 @@ This ensures that information conveyed by non-text content is available to peopl > [**1.1.1 Non-text Content:**](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html) All [non-text content](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#non-text-contentdef) that is presented to the user has a [text alternative](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#text-altdef) that serves the equivalent purpose, except for the situations listed below. (Level A) > -> * **Controls, Input**: If non-text content is a control or accepts user input, then it has a [name](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#namedef) that describes its purpose. +> - **Controls, Input**: If non-text content is a control or accepts user input, then it has a [name](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#namedef) that describes its purpose. > ->* **Time-Based Media**: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. +> - **Time-Based Media**: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. > ->* **Test**: If non-text content is a test or exercise that would be invalid if presented in [text](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#textdef), then text alternatives at least provide descriptive identification of the non-text content. +> - **Test**: If non-text content is a test or exercise that would be invalid if presented in [text](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#textdef), then text alternatives at least provide descriptive identification of the non-text content. > ->* **Sensory**: If non-text content is primarily intended to create a [specific sensory experience](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#sensoryexpdef), then text alternatives at least provide descriptive identification of the non-text content. +> - **Sensory**: If non-text content is primarily intended to create a [specific sensory experience](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#sensoryexpdef), then text alternatives at least provide descriptive identification of the non-text content. > ->* **CAPTCHA**: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of [CAPTCHA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#CAPTCHAdef) using output modes for different types of sensory perception are provided to accommodate different disabilities. +> - **CAPTCHA**: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of [CAPTCHA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#CAPTCHAdef) using output modes for different types of sensory perception are provided to accommodate different disabilities. > ->* **Decoration, Formatting, Invisible**: If non-text content is [pure decoration](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#puredecdef), is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by [assistive technology](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#atdef). +> - **Decoration, Formatting, Invisible**: If non-text content is [pure decoration](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#puredecdef), is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by [assistive technology](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html#atdef). See the [W3C's detailed explanation of this guideline](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html) with techniques and examples. @@ -79,35 +81,34 @@ See the [W3C's detailed explanation of this guideline](https://www.w3.org/TR/UND ## Guidance for Design -* Annotate your designs to tell developers what the text equivalent of images should be: - * When the image conveys information (like an image that is part of a news article), the text description should convey the same information as the image. - * When the purpose of the image is to convey a functionality (like a magnifying glass icon), the text description should convey that funtionality (like "search"). -* Annotate your designs to tell developers which images should be 'silenced' (i.e. ignored by screen readers) because they are purely decorative or completely redundant. -* Make sure that charts, graphs, diagrams and other complex images are described in text on the same page or in a page linked from the page containing the image. - * When charts or graphs are used to display tabular information (i.e. interrelated data), the same data is -shown in a correctly marked-up table. -* Verbose alternatives make content harder to listen to and understand for screen reader users. Endeavour to be succinct, and avoid redundant phrasing such as "Picture of ...", "... logo", or "Select this to ...". +- Annotate your designs to tell developers what the text equivalent of images should be: + - When the image conveys information (like an image that is part of a news article), the text description should convey the same information as the image. + - When the purpose of the image is to convey a functionality (like a magnifying glass icon), the text description should convey that funtionality (like "search"). +- Annotate your designs to tell developers which images should be 'silenced' (ignored by screen readers) because they are purely decorative or completely redundant. +- Make sure that charts, graphs, diagrams and other complex images are described in text on the same page or in a page linked from the page containing the image. + - When charts or graphs are used to display information that (that is, data with internal relationships that could naturally represented in a table), the same data is shown in a correctly marked-up table. +- Verbose alternatives make content harder to listen to and understand for screen reader users. Endeavour to be succinct, and avoid redundant phrasing such as "Picture of ...", "... logo", or "Select this to ...". This section needs one or more examples. [Contribute or report issues via Github](https://github.com/theappbusiness/accessibility-guidelines/issues/51) or [email](mailto:jeanfrancois@theappbusiness.com). ### More guidance for design -* [Alternative text tutorial](https://webaim.org/techniques/alttext/) by WebAIM explains how to write and set alternative text -* The [Image concepts](https://www.w3.org/WAI/tutorials/images/) tutorial by the W3C Web Accessibility Initiative explains the different types of images (e.g. informative, functional, decorative) with examples -* [W3C Alt text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) +- [Alternative text tutorial](https://webaim.org/techniques/alttext/) by WebAIM explains how to write and set alternative text +- The [Image concepts](https://www.w3.org/WAI/tutorials/images/) tutorial by the W3C Web Accessibility Initiative explains the different types of images (e.g. informative, functional, decorative) with examples +- [W3C Alt text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) --- ## Guidance for iOS -### Giving a *non-decorative* `UIImageView` a label: +### Giving a _non-decorative_ `UIImageView` a label: ```swift logoImageView.isAccessibilityElement = true logoImageView.accessibilityLabel = "Company Name" ``` -### Hiding a *decorative* `UIImageView` from screen readers: +### Hiding a _decorative_ `UIImageView` from screen readers: ```swift decorativeImageView.isAccessibilityElement = false @@ -115,7 +116,7 @@ decorativeImageView.isAccessibilityElement = false ### More guidance for iOS -* [UIAccessibility developer reference](https://developer.apple.com/documentation/uikit/accessibility/uiaccessibility) +- [UIAccessibility developer reference](https://developer.apple.com/documentation/uikit/accessibility/uiaccessibility) --- @@ -140,7 +141,7 @@ imageView.importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO #### More guidance for Android -* [Accessibility developer reference](https://developer.android.com/guide/topics/ui/accessibility/apps#label-elements) +- [Accessibility developer reference](https://developer.android.com/guide/topics/ui/accessibility/apps#label-elements) --- @@ -148,17 +149,17 @@ imageView.importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO ### All HTML images should have the `alt` attribute in their source code -* If an `img` or `svg` element doesn't have an `alt` attribute, screen readers will read the file name of the image as it's name; -* If you need to 'silence' an image, give it `alt=""`. +- If an `img` or `svg` element doesn't have an `alt` attribute, screen readers will read the file name of the image as it's name; +- If you need to 'silence' an image, give it `alt=""`. ### For images that convey information, the `alt` text should convey the same information -* A meaningful and accurate textual description should be provided for all informative images (i.e. images that convey important information). +- A meaningful and accurate textual description should be provided for all 'informative images' (meanings images that convey important information). ### For images that convey functionality, the `alt` text should convey the same functionality -* A textual description of their function or destination content should be provided for all functional images (i.e. images that act as links or buttons). -* For example, a mignifying glass icon that triggers a search function should have `alt="Search"` (unless the image is accompanied by a "Search" text node, in which case the image should be silenced to avoid repetition). +- A textual description of their function or destination content should be provided for all 'functional images' (meaning images that act as links or buttons). +- For example, a mignifying glass icon that triggers a search function should have `alt="Search"` (unless the image is accompanied by a "Search" text node, in which case the image should be silenced to avoid repetition). #### Example @@ -175,27 +176,27 @@ imageView.importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO ### Do not include the type of the element in its `alt` text -* Textual descriptions do not need to communicate the type of element (e.g. “image of”, “button for” do not need to be included). +- Textual descriptions do not need to communicate the type of element (e.g. “image of”, “button for” do not need to be included). ### Silence images that are purely decorative or completely redundant using `alt=""` -* Images that are purely decorative (i.e. images that have a solely decorative purpose) and images that are completely redundant (i.e. images whose meaning is already written in text) should have `alt=""`, or be CSS background images, so that they're ignored by screen readers. +- Images that are 'purely decorative' (meaning images that have a solely decorative purpose) and images that are 'completely redundant' (meaning images whose meaning is already written in text) should have `alt=""`, or be CSS background images, so that they're ignored by screen readers. ### Do not use CSS `background-image` for images unless they're purely decorative or redundant -* Do not use a CSS `background-image` for images that convey purpose or information not already available in text. (CSS background images should only used for decorative images). - * Here's why: - * Background images are not available to assistive technology such as screen readers and are not supported on devices with minimal support for CSS. - * Additionally, a background image may not load. - * It is not possible to directly assign alternative text to a CSS background image. Another method must also be used to provide the same information visibly, and in a way that is programmatically determinable by assistive technology, such as screen readers. +- Do not use a CSS `background-image` for images that convey purpose or information not already available in text. (CSS background images should only used for decorative images). + - Here's why: + - Background images are not available to assistive technology such as screen readers and are not supported on devices with minimal support for CSS. + - Additionally, a background image may not load. + - It is not possible to directly assign alternative text to a CSS background image. Another method must also be used to provide the same information visibly, and in a way that is programmatically determinable by assistive technology, such as screen readers. #### More guidance for Web -* [Alternative text tutorial](https://webaim.org/techniques/alttext/) by WebAIM explains how to write and set alternative text -* The [Image concepts](https://www.w3.org/WAI/tutorials/images/) tutorial by the W3C Web Accessibility Initiative explains the different types of images (e.g. informative, functional, decorative) with examples -* [W3C Alt text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) -* [Requirements for providing text to act as an alternative for images](https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text) in the HTML 5.1 specification -* [Why CSS `background-image` should not be used to include images that convey important information](https://www.w3.org/TR/WCAG20-TECHS/F3.html) +- [Alternative text tutorial](https://webaim.org/techniques/alttext/) by WebAIM explains how to write and set alternative text +- The [Image concepts](https://www.w3.org/WAI/tutorials/images/) tutorial by the W3C Web Accessibility Initiative explains the different types of images (e.g. informative, functional, decorative) with examples +- [W3C Alt text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) +- [Requirements for providing text to act as an alternative for images](https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text) in the HTML 5.1 specification +- [Why CSS `background-image` should not be used to include images that convey important information](https://www.w3.org/TR/WCAG20-TECHS/F3.html) --- @@ -203,10 +204,10 @@ imageView.importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO ### Sources -* [W3C Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/) -* [Government Digital Service WCAG 2.1 Primer](https://alphagov.github.io/wcag-primer/) -* [Barclays' Accessibility Design Standards](https://home.barclays/who-we-are/our-suppliers/our-requirements-of-external-suppliers/) -* [The BBC's Mobile Accessibility Guidelines](https://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/summary) +- [W3C Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/) +- [Government Digital Service WCAG 2.1 Primer](https://alphagov.github.io/wcag-primer/) +- [Barclays' Accessibility Design Standards](https://home.barclays/who-we-are/our-suppliers/our-requirements-of-external-suppliers/) +- [The BBC's Mobile Accessibility Guidelines](https://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/summary) ### Contribute diff --git a/guidelines/1.2.1-audio-only.md b/guidelines/1.2.1-audio-only.md index b911d2a..cf6f0e7 100755 --- a/guidelines/1.2.1-audio-only.md +++ b/guidelines/1.2.1-audio-only.md @@ -2,12 +2,13 @@ This document is in beta. Help us by [reporting issues via Github](https://githu [Back to the overview page](./../index.html) -# Transcript for prerecorded audio-only content +# Transcript for pre-recorded audio-only content On this page: -* [Summary](#summary) -* [Requirements](#requirements) -* [More info](#more-info) + +- [Summary](#summary) +- [Requirements](#requirements) +- [More info](#more-info) --- @@ -20,14 +21,14 @@ Audio-only content that communicates information (like a podcast) should have a --- ## Requirements - -* A text transcript is available (on the same page or on a page linked from the page containing the media) for any audio-only content (e.g. podcasts). + +- A text transcript is available (on the same page or on a page linked from the page containing the media) for any audio-only content (e.g. podcasts). ### Common mistakes -* Audio-only content that communicates information does not have a text transcript; -* The text transcript for audio-only content does not include all spoken dialogue and sound effects; -* The text transcript for audio-only content is not clearly labelled as such. +- Audio-only content that communicates information does not have a text transcript; +- The text transcript for audio-only content does not include all spoken dialogue and sound effects; +- The text transcript for audio-only content is not clearly labelled as such. ### Why? @@ -37,8 +38,8 @@ This ensures that the information is available to people who cannot hear. > [**1.2.1 Audio-only and Video-only (Prerecorded):**](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) For [prerecorded](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#prerecordeddef) [audio-only](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#audio-onlydef) and prerecorded [video-only](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#video-onlydef) media, the following are true, except when the audio or video is a [media alternative for text](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#multimedia-alt-textdef) and is clearly labeled as such: (Level A) > -> * **Prerecorded Audio-only**: An [alternative for time-based media](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#alt-time-based-mediadef) is provided that presents equivalent information for prerecorded audio-only content. -> * **Prerecorded Video-only**: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. +> - **Prerecorded Audio-only**: An [alternative for time-based media](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#alt-time-based-mediadef) is provided that presents equivalent information for prerecorded audio-only content. +> - **Prerecorded Video-only**: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. See the [W3C's detailed explanation of this guideline](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) with techniques and examples. @@ -48,14 +49,14 @@ See the [W3C's detailed explanation of this guideline](https://www.w3.org/TR/UND ### Sources -* [W3C Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/) -* [Government Digital Service WCAG 2.1 Primer](https://alphagov.github.io/wcag-primer/) -* [Barclays' Accessibility Design Standards](https://home.barclays/who-we-are/our-suppliers/our-requirements-of-external-suppliers/) +- [W3C Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/) +- [Government Digital Service WCAG 2.1 Primer](https://alphagov.github.io/wcag-primer/) +- [Barclays' Accessibility Design Standards](https://home.barclays/who-we-are/our-suppliers/our-requirements-of-external-suppliers/) ### Useful resources -* [What are transcripts?](https://www.nomensa.com/blog/2010/what-are-transcripts/) on the Nomensa blog +- [What are transcripts?](https://www.nomensa.com/blog/2010/what-are-transcripts/) on the Nomensa blog ### Contribute -This document is in beta. Help us by [reporting issues via Github](https://github.com/theappbusiness/accessibility-guidelines) or [email](mailto:jeanfrancois@theappbusiness.com) \ No newline at end of file +This document is in beta. Help us by [reporting issues via Github](https://github.com/theappbusiness/accessibility-guidelines) or [email](mailto:jeanfrancois@theappbusiness.com) diff --git a/guidelines/1.2.2.md b/guidelines/1.2.2.md index 2e74caf..0fc9a54 100755 --- a/guidelines/1.2.2.md +++ b/guidelines/1.2.2.md @@ -2,12 +2,13 @@ This document is in beta. Help us by [reporting issues via Github](https://githu [Back to the overview page](./../index.html) -# Captions for prerecorded videos +# Captions for pre-recorded videos On this page: -* [Summary](#summary) -* [Requirements](#requirements) -* [More info](#more-info) + +- [Summary](#summary) +- [Requirements](#requirements) +- [More info](#more-info) --- @@ -21,14 +22,14 @@ Pre-recorded video content (like instructional videos, ads or interviews) must h ## Requirements -* All pre-recorded video content has captions that are synchronised with the audio content of the video; -* Captions include all the spoken dialogue and important sound effects from the audio part of the video. +- All pre-recorded video content has captions that are synchronised with the audio content of the video; +- Captions include all the spoken dialogue and important sound effects from the audio part of the video. ### Common mistakes -* The video does not have synchronised captions; -* The video has captions but they do not include all the spoken dialogue and important sound effects from the audio content of the video; -* The video has captions but they are not synchronised with the audio content of the video. +- The video does not have synchronised captions; +- The video has captions but they do not include all the spoken dialogue and important sound effects from the audio content of the video; +- The video has captions but they are not synchronised with the audio content of the video. ### Why? @@ -46,14 +47,14 @@ See the [W3C's detailed explanation of this guideline](https://www.w3.org/TR/UND ### Sources -* [W3C Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/) -* [Government Digital Service WCAG 2.1 Primer](https://alphagov.github.io/wcag-primer/) +- [W3C Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/) +- [Government Digital Service WCAG 2.1 Primer](https://alphagov.github.io/wcag-primer/) ### Useful resources -* [What are captions?](https://www.nomensa.com/blog/2010/what-are-captions) on the Nomensa blog -* [Sounding out the web: accessibility for Deaf and hard of hearing people (Part 2)](https://www.paciellogroup.com/blog/2017/03/sounding-out-the-web-accessibility-for-deaf-and-hard-of-hearing-people-part-2/) by The Paciello Group +- [What are captions?](https://www.nomensa.com/blog/2010/what-are-captions) on the Nomensa blog +- [Sounding out the web: accessibility for Deaf and hard of hearing people (Part 2)](https://www.paciellogroup.com/blog/2017/03/sounding-out-the-web-accessibility-for-deaf-and-hard-of-hearing-people-part-2/) by The Paciello Group ### Contribute -This document is in beta. Help us by [reporting issues via Github](https://github.com/theappbusiness/accessibility-guidelines) or [email](mailto:jeanfrancois@theappbusiness.com) \ No newline at end of file +This document is in beta. Help us by [reporting issues via Github](https://github.com/theappbusiness/accessibility-guidelines) or [email](mailto:jeanfrancois@theappbusiness.com) diff --git a/guidelines/1.2.3.md b/guidelines/1.2.3.md index b2b95b5..44de4e7 100755 --- a/guidelines/1.2.3.md +++ b/guidelines/1.2.3.md @@ -2,12 +2,13 @@ This document is in beta. Help us by [reporting issues via Github](https://githu [Back to the overview page](./../index.html) -# Text or audio description for prerecorded videos +# Text or audio description for pre-recorded videos On this page: -* [Summary](#summary) -* [Requirements](#requirements) -* [More info](#more-info) + +- [Summary](#summary) +- [Requirements](#requirements) +- [More info](#more-info) --- @@ -19,14 +20,14 @@ On this page: ## Requirements -* Video content (like instructional videos, ads or interviews) must have [audio description](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html#audiodescdef), or has a text alternative that describes the visual content of the video. +- Video content (like instructional videos, ads or interviews) must have [audio description](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html#audiodescdef), or has a text alternative that describes the visual content of the video. ### Common mistakes -* The video does not have [audio description](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html#audiodescdef) or a text alternative; -* The audio description does not describe important information communicated visually in the video; -* The text alternative does not describe important information communicated visually in the video; -* The audio description is not synchronised to complement the audio content of the video. +- The video does not have [audio description](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html#audiodescdef) or a text alternative; +- The audio description does not describe important information communicated visually in the video; +- The text alternative does not describe important information communicated visually in the video; +- The audio description is not synchronised to complement the audio content of the video. ### Why? @@ -42,8 +43,8 @@ Note: pre-recorded videos without sound are covered somewhere else in the W3C We > [**1.2.1 Audio-only and Video-only (Prerecorded):**](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) For [prerecorded](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#prerecordeddef) [audio-only](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#audio-onlydef) and prerecorded [video-only](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#video-onlydef) media, the following are true, except when the audio or video is a [media alternative for text](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#multimedia-alt-textdef) and is clearly labeled as such: (Level A) > -> * **Prerecorded Audio-only**: An [alternative for time-based media](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#alt-time-based-mediadef) is provided that presents equivalent information for prerecorded audio-only content. -> * **Prerecorded Video-only**: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. +> - **Prerecorded Audio-only**: An [alternative for time-based media](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#alt-time-based-mediadef) is provided that presents equivalent information for prerecorded audio-only content. +> - **Prerecorded Video-only**: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. --- @@ -51,13 +52,13 @@ Note: pre-recorded videos without sound are covered somewhere else in the W3C We ### Sources -* [W3C Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/) -* [Government Digital Service WCAG 2.1 Primer](https://alphagov.github.io/wcag-primer/) +- [W3C Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/) +- [Government Digital Service WCAG 2.1 Primer](https://alphagov.github.io/wcag-primer/) ### Useful resources -* [What is audio description?](https://www.nomensa.com/blog/2010/what-is-audio-description) +- [What is audio description?](https://www.nomensa.com/blog/2010/what-is-audio-description) ### Contribute -This document is in beta. Help us by [reporting issues via Github](https://github.com/theappbusiness/accessibility-guidelines) or [email](mailto:jeanfrancois@theappbusiness.com) \ No newline at end of file +This document is in beta. Help us by [reporting issues via Github](https://github.com/theappbusiness/accessibility-guidelines) or [email](mailto:jeanfrancois@theappbusiness.com) diff --git a/guidelines/1.2.5.md b/guidelines/1.2.5.md index dd53b1f..29b26a5 100755 --- a/guidelines/1.2.5.md +++ b/guidelines/1.2.5.md @@ -2,12 +2,13 @@ This document is in beta. Help us by [reporting issues via Github](https://githu [Back to the overview page](./../index.html) -# Audio description for prerecorded videos +# Audio description for pre-recorded videos On this page: -* [Summary](#summary) -* [Requirements](#requirements) -* [More info](#more-info) + +- [Summary](#summary) +- [Requirements](#requirements) +- [More info](#more-info) --- @@ -21,13 +22,13 @@ Video content (like instructional videos, ads or interviews) must have [audio de ## Requirements -* Video that includes important visual information has [audio description](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html#audiodescdef). +- Video that includes important visual information has [audio description](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html#audiodescdef). ### Common mistakes -* A video includes important visual information but does not have [audio description](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html#audiodescdef); -* The audio description does not describe important information communicated visually in the video; -* The audio description is not synchronised to complement the audio content of the video. +- A video includes important visual information but does not have [audio description](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html#audiodescdef); +- The audio description does not describe important information communicated visually in the video; +- The audio description is not synchronised to complement the audio content of the video. ### Why? @@ -43,8 +44,8 @@ Note: pre-recorded videos without sound are covered somewhere else in the W3C We > [**1.2.1 Audio-only and Video-only (Prerecorded):**](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) For [prerecorded](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#prerecordeddef) [audio-only](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#audio-onlydef) and prerecorded [video-only](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#video-onlydef) media, the following are true, except when the audio or video is a [media alternative for text](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#multimedia-alt-textdef) and is clearly labeled as such: (Level A) > -> * **Prerecorded Audio-only**: An [alternative for time-based media](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#alt-time-based-mediadef) is provided that presents equivalent information for prerecorded audio-only content. -> * **Prerecorded Video-only**: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. +> - **Prerecorded Audio-only**: An [alternative for time-based media](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html#alt-time-based-mediadef) is provided that presents equivalent information for prerecorded audio-only content. +> - **Prerecorded Video-only**: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. --- @@ -52,13 +53,13 @@ Note: pre-recorded videos without sound are covered somewhere else in the W3C We ### Sources -* [W3C Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/) -* [Government Digital Service WCAG 2.1 Primer](https://alphagov.github.io/wcag-primer/) +- [W3C Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/) +- [Government Digital Service WCAG 2.1 Primer](https://alphagov.github.io/wcag-primer/) ### Useful resources -* [What is audio description?](https://www.nomensa.com/blog/2010/what-is-audio-description) +- [What is audio description?](https://www.nomensa.com/blog/2010/what-is-audio-description) ### Contribute -This document is in beta. Help us by [reporting issues via Github](https://github.com/theappbusiness/accessibility-guidelines) or [email](mailto:jeanfrancois@theappbusiness.com) \ No newline at end of file +This document is in beta. Help us by [reporting issues via Github](https://github.com/theappbusiness/accessibility-guidelines) or [email](mailto:jeanfrancois@theappbusiness.com) diff --git a/guidelines/1.3.1.md b/guidelines/1.3.1.md index 2f2e7c0..ba57d32 100755 --- a/guidelines/1.3.1.md +++ b/guidelines/1.3.1.md @@ -295,7 +295,11 @@ This section needs a review and more content. [Contribute or report issues via G ### Forming a correct headings structure - Code headings with heading mark-up (`

-

`). -- Assign headings the correct heading level (i.e. the main page heading is coded with `

`, its subheadings are coded with `

`, subheadings of any `

` heading are coded with `

`, etc.). +- Assign headings the correct heading level: + - the main page heading is coded with `

` + - its subheadings are coded with `

` + - subheadings of any `

` heading are coded with `

` + - and so on ... - Text that does not represent a heading should not coded with heading mark-up. - Use CSS classes rather than `

-

` elements to style text that don't represent headings for sections of the page. @@ -340,7 +344,7 @@ This section needs a review and more content. [Contribute or report issues via G - Use `` and `` if the same header applies to multiple rows or columns, but you should avoid complex tables like that as they are hard to understand for screen reader users; - Cells containing data are coded with ``. -- Avoid making complex data tables (i.e. tables containing several rows and/or columns of headers, irregular and multi-level headers). +- Avoid making complex data tables (for example tables containing several rows and/or columns of headers, irregular and multi-level headers). - If you can't avoid making a complex data table, each data cell should be associated with all its headers via the `scope`, `id` and `headers` attributes. @@ -380,7 +384,7 @@ This section needs a review and more content. [Contribute or report issues via G #### Do not use HTML tables for layout out content -- The use of layout tables (i.e. tables solely used to position items on the screen) should be avoided. Use CSS to position the content instead. +- The use of layout tables (meaning HTML `table`s solely used to position items on the screen) should be avoided. Use CSS to position the content instead. - When layout tables cannot be avoided, their source code should contain the ARIA `role="presentation"` attribute, and should not include the `` and `` elements, and the `headers`, `axis`, `scope` and `summary` attributes. #### More guidance on forming a data table @@ -452,16 +456,16 @@ This section needs a review and more content. [Contribute or report issues via G - Identify the purpose of each section of content on a page using HTML5 sectioning elements. These create 'Landmark regions' that help screen reader users navigate within a page. -| Element | What it means | Implicit landmark `role` | -| ----------- | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | -| `
` | A section of content that is repeated at the top of all/several pages | `role="banner"` if it is a direct child of `` | -| `