From c26b5d9ec24e0e2d325a35e2cca9f880901ce944 Mon Sep 17 00:00:00 2001 From: Elliott Hoffman <52507228+xenoworf@users.noreply.github.com> Date: Mon, 4 Apr 2022 13:51:56 -0500 Subject: [PATCH] Icon a11y guide 2 UXPLATFORM-6244 (#3604) Added a guide for how to use terra-icon in an accessible way. Co-authored-by: Jeremy Fuksa Co-authored-by: Ben Cai --- packages/terra-core-docs/CHANGELOG.md | 2 + .../doc/icon/AccessibilityGuide.2.doc.mdx | 238 ++++++++++++++++++ ...hangeLog.5.doc.mdx => ChangeLog.6.doc.mdx} | 0 .../{Static.2.doc.mdx => Static.3.doc.mdx} | 0 ...hemeable.3.doc.mdx => Themeable.4.doc.mdx} | 0 ...Guide.4.doc.mdx => UpgradeGuide.5.doc.mdx} | 0 .../doc/icon/example/A11yDecorative.jsx | 18 ++ .../doc/icon/example/A11yGroupInteractive.jsx | 33 +++ .../doc/icon/example/A11yGroupReadOnly.jsx | 23 ++ .../example/A11yMeaningfulInteractive.jsx | 29 +++ .../icon/example/A11yMeaningfulReadOnly.jsx | 19 ++ .../terra-dev-site/doc/icon/example/common.js | 2 + .../doc/image/AccessibilityGuide.3.doc.mdx | 40 +-- 13 files changed, 384 insertions(+), 20 deletions(-) create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/icon/AccessibilityGuide.2.doc.mdx rename packages/terra-core-docs/src/terra-dev-site/doc/icon/{ChangeLog.5.doc.mdx => ChangeLog.6.doc.mdx} (100%) rename packages/terra-core-docs/src/terra-dev-site/doc/icon/{Static.2.doc.mdx => Static.3.doc.mdx} (100%) rename packages/terra-core-docs/src/terra-dev-site/doc/icon/{Themeable.3.doc.mdx => Themeable.4.doc.mdx} (100%) rename packages/terra-core-docs/src/terra-dev-site/doc/icon/{UpgradeGuide.4.doc.mdx => UpgradeGuide.5.doc.mdx} (100%) create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yDecorative.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yGroupInteractive.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yGroupReadOnly.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yMeaningfulInteractive.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yMeaningfulReadOnly.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/icon/example/common.js diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index dcfa9acb74c..6e920752eb5 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -4,10 +4,12 @@ * Changed * linter fixes. + * Spelling fixes for Image accessibility guide. * Added * Added Accessibility guide for `terra-image`. * Added docs for `DecorativeImage`. + * Added A11y guide for `terra-icon`. ## 1.15.1 - (September 8, 2022) diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/AccessibilityGuide.2.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/AccessibilityGuide.2.doc.mdx new file mode 100644 index 00000000000..ae55d67f32b --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/icon/AccessibilityGuide.2.doc.mdx @@ -0,0 +1,238 @@ +import { Notice } from "@cerner/terra-docs"; +import { Badge } from 'terra-image/package.json?dev-site-package'; +import Whitespace from "../../common/layout-helpers/Whitespace"; + +import A11yMeaningfulReadOnly from './example/A11yMeaningfulReadOnly'; +import A11yGroupInteractive from './example/A11yGroupInteractive'; +import A11yDecorative from './example/A11yDecorative'; +import A11yGroupReadOnly from './example/A11yGroupReadOnly'; +import A11yMeaningfulInteractive from './example/A11yMeaningfulInteractive'; + +import IconAudio from 'terra-icon/lib/icon/IconAudio'; +import IconAnnouncement from "terra-icon/lib/icon/IconAnnouncement"; + +import FilledStar from 'terra-icon/lib/icon/IconFeaturedOutlineYellow'; +import EmptyStar from 'terra-icon/lib/icon/IconFeaturedOff'; + +import FilledDecorativeStar from 'terra-icon/lib/icon/IconFeaturedOutlineYellow'; +import EmptyDecorativeStar from 'terra-icon/lib/icon/IconFeaturedOff'; +import VisuallyHiddenText from 'terra-visually-hidden-text'; + + + +# Accessibility Guide for Terra Icon + + + +Using icons improperly may prevent some of your users from understanding your UI. + + + + + +## Why is this important? + +Icons are a type of image or graphic, and as such: + +> Images and graphics make content more pleasant and easier to understand for many people, and in particular for those with cognitive and learning disabilities. They serve as cues that are used by people with visual impairments, including people with low vision, to orient themselves in the content. +> +> However, images are used extensively on websites and can create major barriers when they are not accessible. Accessible images are beneficial in many situations, such as: +> +> - **People using screen readers**: The text alternative can be read aloud or rendered as Braille +> - **People using speech input software**: Users can put the focus onto a button or linked image with a single voice command +> - **People browsing speech-enabled websites**: The text alternative can be read aloud +> +> _  — excerpt from [Image Concepts (W3C: Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/images/)_[[1]](/components/cerner-terra-core-docs/icon/accessibility-guide#linked-references) + +## Accessibility Considerations + +### Code Considerations + +Every Terra Icon has two variants: _Meaningful_ and _Decorative_. The table below explains the difference between the two, and how to import them into your code. + +| Variant | Purpose | Example import | +| --- | --- | --- | +| Meaningful | Convey information to the user and must provide a text alternative via the `a11yLabel` prop. | `import X from 'terra-icon/lib/icon/X';` | +| Decorative | Only for aesthetic purposes. | `import X from 'terra-icon/lib/icon/decorative/X';` | + +The following sections go into more detail about when and how to use each variant. + +---- + +#### When to use _Meaningful Icons_ + +Meaningful icons are icons that convey information to the user. **Meaningful icons must provide an alternative text using the `a11yLabel` prop**. + +> All non-text content must be represented in a text format in one way or another, whether in the form of an alt attribute for an image, an alternative representation of non-HTML objects, or within the accessibility API methods of non-HTML objects. +> +> _  — excerpt from [Summary and Checklist: Images, Canvas, SVG, and Other Non-Text Content (Deque)](https://dequeuniversity.com/assets/pdf/module-nontext/module-nontext-checklist.pdf)_[[2]](/components/cerner-terra-core-docs/icon/accessibility-guide#linked-references) + +You should pick an `a11yLabel` that conveys the same information that a user viewing the icons would perceive. That way, no information will be hidden from a user who cannot view the icon with the text. + + + + + +###### Accessibility Guidance: Using meaningful icons + +
+ +
+
+ + import IconAnnouncement from 'terra-icon/lib/icon/IconAnnouncement'; + + // Set the a11yLabel to convey the meaning of the icon. + +   + Facilities will be closed tomorrow. + +
+ +The announcement icon () in this example is informative, because it means _the following text is an announcement_. However, that meaning is only conveyed if the user can see the icon. Setting the icon's `a11yLabel="Announcement"` conveys the same information to a screen reader user. + +The screen reader user will hear something like: Image: Announcement. Facilities will be closed tomorrow. + +###### Accessibility Guidance: Interactive meaningful icons + +
+ +
+
+ + import IconMediaPlay from 'terra-icon/lib/icon/IconMediaPlay'; + import IconMediaFastForward from 'terra-icon/lib/icon/IconMediaFastForward'; + import IconMediaRewind from 'terra-icon/lib/icon/IconMediaRewind'; + +
+ Playback controls
+ + + +
+ +
+ +The screen reader user will hear something like: Group: Playback Controls. Button image Rewind. Button image Play. Button image Fast Forward. + + + +#### Groups of Meaningful Icons + +Some icons only make sense in the context of a group of icons. For example, in a five-star rating system each star icon only makes sense when used with the other four stars. + + + +###### Accessibility Guidance: Using groups of icons + +
+ +
+
+ import DecorativeStar from "terra-icon/lib/icon/decorative/IconFeaturedOutlineYellow"; + import DecorativeEmptyStar from "terra-icon/lib/icon/decorative/IconFeaturedOutline"; + import Star from "terra-icon/lib/icon/IconFeaturedOutlineYellow"; + + Rating:  + + + + + + +
+ +The first star icon () is meaningful and conveys the rating to the screen reader user. The other icons ( and ) are decorative so that the screen reader won't mention them. Mentioning the other icons in the group provides no benefit and serves only to confuse the user. +The screen reader user will hear something like: Rating. Four out of five stars. + +###### Accessibility Guidance: An interactive group of icons + +
+ +
+
+ + import Star from 'terra-icon/lib/icon/IconFeaturedOutlineYellow'; + import EmptyStar from 'terra-icon/lib/icon/IconFeaturedOutline'; + import VisuallyHiddenText from 'terra-visually-hidden-text'; + + Rating:  + + + + + + + +
+ +This example shows important differences in how to handle an interactive group of icons: That the user can click on any of the stars (links) to change the rating. You must convey what will happen when the user clicks on each icon. The meaning of the rating is conveyed by the `` given first. Each star icon ( and ) describes its own action, e.g. rating an item one star. + +The screen reader user will hear: Rating: Four out of five stars. Button image Rate one star. Button image Rate two stars. Button image Rate three stars. Button image Rate four stars. Button image Rate five stars. + + + +#### When to use Decorative Icons + +Decorative icons provide no additional information or context. Use decorative icons when you could remove the icon entirely from the content without losing any information. + +* You do not set the `a11yLabel` prop when using a decorative icon. +* Decorative icons are ignored by screen readers and other assistive tech. + + + +###### Accessibility Guidance: Using decorative icons + +
+ +
+
+ + import IconAnnouncement from "terra-icon/lib/icon/decorative/IconAnnouncement"; + + +   + Announcement: Facilities will be closed tomorrow. + +
+ +This example is similar to the Announcement example above, but it uses a decorative icon instead of a meaningful one. The decorative icon is ignored by the screen reader. The screen reader user will hear something like: Announcement: Facilities will be closed tomorrow. + + + +## Usability Expectations + +### Interaction Details + +None + +### Keyboard Navigation + +None + +## Support Compliance + +Terra is committed to ensuring its components provide maximum possible accessibility. However, using Terra components will not automatically make a product accessible. + +Final responsibility lies with the consumers of Terra components — ensuring proper usage, engineers following correct implementation patterns, and authors crafting content that follows best practice guidance — to make a product fully accessible. + +### WCAG Resources + +#### Success Criteria + +_Informative (non-decorative) usage of Terra Icon **must** meet the following success criteria:_ + +- [**1.1.1 Non-text Content**](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed\[...\]. (Level A) + +### Partial Support & Requiring Further Enhancement + +- None identified +- [Report a problem with this component on **GitHub**](https://github.com/cerner/terra-core/issues/new/choose) + +_For more information about Accessibility Support with Terra — go to [Component Standards: Accessibility (A11y)](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#accessibility-a11y)._ + +## Linked References: + +1. Eggert, Eric; Abou-Zahra, Shadi; et al. (27 July 2019). ["Web Accessibility Tutorials: Image Concepts"](https://www.w3.org/WAI/tutorials/images/). World Wide Web Consortium. Last updated 27 July 2019. Retrieved 2 March 2022. + +2. Deque staff (21 March 2019). ["Summary and Checklist: Images, Canvas, SVG, and Other Non-Text Content"](https://dequeuniversity.com/assets/pdf/module-nontext/module-nontext-checklist.pdf). Deque University. Published Version 2019.03.21. Retrieved 2 March 2022. diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/ChangeLog.5.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/ChangeLog.6.doc.mdx similarity index 100% rename from packages/terra-core-docs/src/terra-dev-site/doc/icon/ChangeLog.5.doc.mdx rename to packages/terra-core-docs/src/terra-dev-site/doc/icon/ChangeLog.6.doc.mdx diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/Static.2.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/Static.3.doc.mdx similarity index 100% rename from packages/terra-core-docs/src/terra-dev-site/doc/icon/Static.2.doc.mdx rename to packages/terra-core-docs/src/terra-dev-site/doc/icon/Static.3.doc.mdx diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/Themeable.3.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/Themeable.4.doc.mdx similarity index 100% rename from packages/terra-core-docs/src/terra-dev-site/doc/icon/Themeable.3.doc.mdx rename to packages/terra-core-docs/src/terra-dev-site/doc/icon/Themeable.4.doc.mdx diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/UpgradeGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/UpgradeGuide.5.doc.mdx similarity index 100% rename from packages/terra-core-docs/src/terra-dev-site/doc/icon/UpgradeGuide.4.doc.mdx rename to packages/terra-core-docs/src/terra-dev-site/doc/icon/UpgradeGuide.5.doc.mdx diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yDecorative.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yDecorative.jsx new file mode 100644 index 00000000000..57f21958e40 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yDecorative.jsx @@ -0,0 +1,18 @@ +// This file is autogenerated from scripts/src/generate-example +/* eslint-disable */ +import React from "react"; +import DecorativeIconAnnouncement from "terra-icon/lib/icon/decorative/IconAnnouncement"; +import {width, height} from './common'; +import Card from 'terra-card'; + +const A11yDecorative = () => ( + + + +   + Announcement: Facilities will be closed tomorrow. + + +); + +export default A11yDecorative; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yGroupInteractive.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yGroupInteractive.jsx new file mode 100644 index 00000000000..04429f42770 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yGroupInteractive.jsx @@ -0,0 +1,33 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import React from 'react'; +import Star from 'terra-icon/lib/icon/IconFeaturedOutlineYellow'; +import EmptyStar from 'terra-icon/lib/icon/IconFeaturedOutline'; +import VisuallyHiddenText from 'terra-visually-hidden-text'; +import Card from 'terra-card'; +import { width, height } from './common'; + +const A11yGroupInteractive = () => ( + + + Rating:  + + + + + + + + +); + +export default A11yGroupInteractive; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yGroupReadOnly.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yGroupReadOnly.jsx new file mode 100644 index 00000000000..81c49cfbab1 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yGroupReadOnly.jsx @@ -0,0 +1,23 @@ +// This file is autogenerated from scripts/src/generate-example +/* eslint-disable */ +import React from "react"; +import DecorativeStar from "terra-icon/lib/icon/decorative/IconFeaturedOutlineYellow"; +import Star from "terra-icon/lib/icon/IconFeaturedOutlineYellow"; +import DecorativeEmptyStar from "terra-icon/lib/icon/decorative/IconFeaturedOutline"; +import {width, height} from './common'; +import Card from 'terra-card'; + +const A11yGroupReadOnly = () => ( + + + Rating:  + + + + + + + +); + +export default A11yGroupReadOnly; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yMeaningfulInteractive.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yMeaningfulInteractive.jsx new file mode 100644 index 00000000000..ceddee8fb66 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yMeaningfulInteractive.jsx @@ -0,0 +1,29 @@ +// This file is autogenerated from scripts/src/generate-example +/* eslint-disable */ +import React from "react"; +import IconMediaPlay from 'terra-icon/lib/icon/IconMediaPlay'; +import IconMediaFastForward from 'terra-icon/lib/icon/IconMediaFastForward'; +import IconMediaRewind from 'terra-icon/lib/icon/IconMediaRewind'; +import {width, height} from './common'; +import Card from 'terra-card'; + +const A11yMeaningfulInteractive = () => ( + + +
+ Playback controls
+ + + +
+ + +); + +export default A11yMeaningfulInteractive; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yMeaningfulReadOnly.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yMeaningfulReadOnly.jsx new file mode 100644 index 00000000000..9745f477eb4 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/A11yMeaningfulReadOnly.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import IconAnnouncement from 'terra-icon/lib/icon/IconAnnouncement'; +import Card from 'terra-card'; +import { width, height } from './common'; + +const A11yMeaningfulReadOnly = () => ( + + + +   Facilities will be closed tomorrow. + + +); + +export default A11yMeaningfulReadOnly; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/common.js b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/common.js new file mode 100644 index 00000000000..4007bd137bf --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/icon/example/common.js @@ -0,0 +1,2 @@ +export const height = '2em'; +export const width = height; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/image/AccessibilityGuide.3.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/image/AccessibilityGuide.3.doc.mdx index da8927a18d7..900d304c379 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/image/AccessibilityGuide.3.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/image/AccessibilityGuide.3.doc.mdx @@ -13,7 +13,7 @@ import A11yExampleDecorative from './example/A11yGuideExamples/A11yExampleDecora 1. For each use of Terra Image, **special care needs to be taken to determine** whether it conveys **meaningful and informative context**, or is simply **adding visual decoration** to the page. 2. Informative images **must provide alternative text to the alt attribute**. Writing **meaningful alternative text** is also critical to properly meet accessibility success criteria. -3. Images set to be decorative need to ensure they are purely decorative, or the context must be provided already by other adjacent elements. +3. Images set to be decorative need to ensure they are purely decorative, or the context must be provided already by other adjacent elements. @@ -57,9 +57,9 @@ W3C (World Wide Web Consortium) divides images into seven concept categories for Knowing which type of image and how to add proper alternative text appropriate for the usage type can be difficult. Use the [Alt Decision Tree (W3C)](https://www.w3.org/WAI/tutorials/images/decision-tree/) to help determine which usage is appropriate based on context and content of each image. -The [Accessible Images When It Matters Most](https://accessibility.deque.com/accessible-images-when-it-matters-most) video presentation by Carie Fisher, Senior Accessibility Consultant at Deque, goes into depth about best practice techniques when creating accessible images and gives examples to help determine the appropiate image concept type. +The [Accessible Images When It Matters Most](https://accessibility.deque.com/accessible-images-when-it-matters-most) video presentation by Carie Fisher, Senior Accessibility Consultant at Deque, goes into depth about best practice techniques when creating accessible images and gives examples to help determine the appropriate image concept type. -Terra Image handles two of the image concepts — **informative** images (also called _"meaningful"_ images) and **decoratiive** images (also called _"presentation"_ images). The other image concepts may be supported in the future or can be contructed by consumers following the reccomeneded patterns. +Terra Image handles two of the image concepts — **informative** images (also called _"meaningful"_ images) and **decorative** images (also called _"presentation"_ images). The other image concepts may be supported in the future or can be constructed by consumers following the recommended patterns. ---- @@ -71,8 +71,8 @@ Informative Images **must have text alternatives provided by the alt attribute** Use the default `import Image from 'terra-image'` for cases similar to: - When the image contributes meaning to the current page or context. -- When the image is being used to suppliment and support other information. -- When the image is an illustration, diagram, or photograph that shows directions or explains succint information. +- When the image is being used to supplement and support other information. +- When the image is an illustration, diagram, or photograph that shows directions or explains succinct information. - When the image conveys an impression or emotion. @@ -94,14 +94,14 @@ This image shows a photograph of the Matterhorn, but has no additional surroundi import Image from 'terra-image'; import matterhornImage from '../src/folder/Matterhorn_150x150.jpg'; -+ const matterhornAlternativeText = 'North-east face of the Matterhorn -+ mountain peak and surrounding landscape covered in snow against a ++ const matterhornAlternativeText = 'North-east face of the Matterhorn ++ mountain peak and surrounding landscape covered in snow against a + blue sky, located in the Swiss Apps near Zermatt, Switzerland'; export default () => ( <> - {matterhornDeAlternativeText} Matterhorn @@ -130,15 +130,15 @@ Additional guidance and examples can be read in [WebAIM's Alternative Text](http export default () => ( <> - {matterhornBriefAlternativeText} Matterhorn +

-+ Standing at 4,478 meters (14,692ft), Matterhorn is the fifth -+ highest peak in the Alps located on the border between Switzerland -+ and Italy, in the Monte Rosa area of the western Pennine Alps, and ++ Standing at 4,478 meters (14,692ft), Matterhorn is the fifth ++ highest peak in the Alps located on the border between Switzerland ++ and Italy, in the Monte Rosa area of the western Pennine Alps, and + overlooks the Swiss town of Zermatt. +

@@ -199,9 +199,9 @@ The decorative image does not require adding alternative text, and the appropria
Matterhorn

- Standing at 4,478 meters (14,692ft), Matterhorn is the fifth - highest peak in the Alps located on the border between Switzerland - and Italy, in the Monte Rosa area of the western Pennine Alps, and + Standing at 4,478 meters (14,692ft), Matterhorn is the fifth + highest peak in the Alps located on the border between Switzerland + and Italy, in the Monte Rosa area of the western Pennine Alps, and overlooks the Swiss town of Zermatt.

@@ -257,9 +257,9 @@ These image description guidelines were developed by the Carl and Ruth Shapiro F ### Interaction Details -- **Informative images** are not interactive and do not respond to keyboard tab navigation or mouse/touch presses, but are expected to be read by screen readers and assistive technology. +- **Informative images** are not interactive and do not respond to keyboard tab navigation or mouse/touch presses, but are expected to be read by screen readers and assistive technology. - _Read more at [Informative Images (W3C: Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/images/informative/)._ -- **Decorative images** should be ignored by screen readers and assistive technology and have no corresponding behaviors or interactions. +- **Decorative images** should be ignored by screen readers and assistive technology and have no corresponding behaviors or interactions. - _Read more at [Decorative Images (W3C: Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/images/decorative/)._ - **Functional images** that are interactive and used to initiate actions (e.g. as buttons, in hyperlinks, etc.) are not provided as a first-class feature of Terra Image. If Terra Image is used as a functional image, follow the recommended guidance for proper construction. - _Read more at [functional Images (W3C: Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/images/functional/)._ @@ -267,7 +267,7 @@ These image description guidelines were developed by the Carl and Ruth Shapiro F ### Keyboard Navigation Terra Image does not have any keyboard navigation expectations when used on its own. - + | Key/Sequence | Description | |---|---| |*none*| Has no keyboard navigation unless image is made to be interactive. |