diff --git a/checklists/designer-checklist.md b/checklists/designer-checklist.md new file mode 100644 index 0000000..8fe3030 --- /dev/null +++ b/checklists/designer-checklist.md @@ -0,0 +1,224 @@ +# Designer Checklist + +This checklist summarizes success criteria from Web Content Accessibility Guidelines (WCAG) 2.2 (Level A and AA, in addition to best practices identified by GitHub), and categorizes it based on key aspects of design. Where applicable, each section also contains suggested exercises, suggested annotations for use, and tools. + +Use it side by side as you develop products to make sure you’ve accounted for accessibility best practices! The legend describes checkbox states that you can use for the status of the checkboxes below. + +**Further reading:** +- [What’s New in WCAG 2.2 - W3C](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/) +- [Video series: Design Checkpoints (Internal only) - Loom](https://gh.io/a11y-design-checkpoints) + +--- + +## 1. Color + +- [ ] **Meaning is not conveyed with just color** + - Elements conveying status and severity often fail this guideline. To remedy this, try adding a label, a text treatment such as bold, or a shape. +- [ ] **Color contrast is observed** + - Functional text has a **4.5:1** contrast ratio (or higher) with its background. + - Functional graphics (such as icon buttons, status indicators, and control identification) have a **3:1** contrast ratio (or higher) with their background. + +### Exercises + +- Use a color contrast checker and vision simulator to check your work. +- Remove the element in question from the design. If the design makes sense and is usable without it, it does not need to hit contrast. + +### Suggested Tools + +- [Check color contrast - Figma Docs](https://help.figma.com/hc/en-us/articles/360041003774-Apply-paints-with-the-color-picker#h_01JQF1T71AC72G6VDXN27B77V0) +- [Web Color Contrast Checker - WebAIM](http://webaim.org/resources/contrastchecker/) +- [Colour Contrast Analyzer for Mac and Windows - TGPi](https://www.tpgi.com/color-contrast-checker/) + +--- + +## 2. Hierarchy + +- [ ] **Each page has one H1** +- [ ] **Headings are annotated and used in a consecutive order.** + - Heading levels should be sequential. Don’t skip levels (i.e. `

` to `

`) + - Nested headings are encouraged and natural as content goes from more general to specific. + - In certain cases, headings may be visually hidden. Levels and visual styling may deviate from one another (i.e. giving an `

` the same visual treatment as an `

`). Please consult the a11y design team in this case. +- [ ] **Landmarks are identified and annotated** + - Page has only one main section and one footer section. + - Leave out landmark identifiers when giving a unique name. e.g., use "Repository" instead of "Repository navigation". This prevents redundancy in screen readers that already read out the navigation landmark. + + +### Exercises + +- Write out your heading structure without content, as shown in [Priority Guides - A List Apart](https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes/). + +### Annotations that can help +- [Landmark](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=2-668) +- [Heading](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=2-660) + - Semantic heading + - Visually hidden heading + - CSS only styling + +Annotations helpful with hierarchy: nine different landmarks as well as six visible heading levels, a visually hidden heading, and css-only heading style + + +### Suggested Tools + +- [Page Region tutorial - W3C WAI](https://www.w3.org/WAI/tutorials/page-structure/regions/) +- [HeadingsMap browser extension](https://www.accessibility-developer-guide.com/setup/helper-tools/browser-extensions/headingsmap/) to check the hierarchy of an existing site. + +--- + +## 3. Content + +- [ ] **Break your content into small sections** + - Avoid long passages or lines of text, and strive for one overall point per paragraph. Recommended 60-70 characters, but up to 80 is allowed. +- [ ] **Directionality is not used in content** + - Avoid content like “see below” or “to the left/right” and instead rely on 
“first/last” and “previous/next”. +- [ ] **Content is clear to read and accessible to an 8th grade education level.** + - Make sure to explains abbreviations the first time you use them. Avoid overly complex language like complex metaphors, regional phrases, and slang. +- [ ] **Truncation only used when unavoidable** + - This is generally an anti-pattern for accessibility. +- [ ] **Metadata like page titles and applicable language codes are annotated** + - Define the document's title that is shown in a browser's title bar or tab. If supporting localization, declare the language of the page (or parts of it). + + +### Exercises + +- Read the copy out loud yourself, or by utilizing Immersive Reader or Text to Speech (see the following links). + +### Annotations that can help + +- [Page Title (Metadata)](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=773-34151) +- [Language (Metadata)](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=773-34151) + +Annotations helpful with content: page title and language code + +### Suggested Tools + +- [Hemingway Editor](https://hemingwayapp.com/) or [Readability Analyzer](https://datayze.com/readability-analyzer.php) +- [Microsoft Edge’s Immersive Reader - Microsoft](https://support.microsoft.com/en-us/topic/use-immersive-reader-in-microsoft-edge-78a7a17d-52e1-47ee-b0ac-eff8539015e1) +- [MacOS’s Text to Speech - University of Calgary](https://www.ucalgary.ca/student-services/access/current-students/resources-and-supports/assistive-software-how-videos/mac-text-speech). Includes other speech to text resources as well! + +--- + +## 4. Images, graphics, and other media + +- [ ] **Alt-text for functional images and icon buttons without labels are annotated:** + - Be descriptive in your alt-text; communicate the meaning for the image being on the page. +- [ ] **Important text is not located inside an image** + - Instead, it should live outside the image so a greater audience can access it and key functionality like copying text is possible. +- [ ] **Alternative media is included where applicable** + - Potential content includes captions, audio descriptions, transcripts, etc. +- [ ] **Automatically moving or scrolling content can be paused, stopped, and played** + - Allowing users to control moving content prevents disorientation and motion sickness, which helps those with cognitive, reading, or vestibular disorders. + +### Annotations that can help +- Functional Image and Decorative Image ([Media](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=2-664)) +- [Video (Media)](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=2-664) +- [Audio (Media)](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=2-664) + +Annotation stamp for image, decorative image, video, and audio in various shades of bold green. + +### Exercises + +- Figure out if an image needs a description using [W3C’s alt-text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/). +- Annotate any images that are purely decorative. + +### Resources + +- [Alt Text Guide - GitHub Workplace Accessibility](https://github.com/github/workplace-accessibility/blob/main/resources/content-accessibility/alt-text-guide.md) +- [Your Image Is Probably Not Decorative - Smashing Magazine](https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/) +- [Images Tutorial - Web Accessibility Initiative (W3C)](https://www.w3.org/WAI/tutorials/images/) +- [Functional Images - Web Accessibility Initiative (W3C)](https://www.w3.org/WAI/tutorials/images/functional/) +- [Dungeons & Dragons taught me how to write alt text - Eric Bailey](https://ericwbailey.website/published/dungeons-and-dragons-taught-me-how-to-write-alt-text/) + +--- + +## 5. Interactivity + +- [ ] **Disabled buttons are not used in your designs** + - Disabled buttons may prevent users from completing tasks or understanding form feedback. An inactive button is a better alternative. +- [ ] **Links and buttons are appropriately used** + - Remember that links change navigation, and buttons initiate actions. +- [ ] **Buttons and links have unique name** + - Multiple “Read More” and “Click Here” links are not helpful to screen reader users. Use unique descriptive names. Only if essential, annotate a longer accessible name for assistive technology. +- [ ] **Ensure all hit areas are at least 24x24 CSS pixels** + - This benefits mobile users using touch gestures and motor-impaired mouse users. _There are a few exceptions to this rule under [SC 2.5.8](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)._ + +### Annotations that can help + +- [Button](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=2-666) +- [Link](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=2-665) + +Annotation stamp for link and button, which are dark blue and lime in color. + + +### Resources + +- [Link and Button Guidance - A11y Playbook (Internal only)](https://accessibility-playbook.github.com/link-and-button-guidance) +- [Links and Buttons Overview - University of Washington](https://www.washington.edu/accesstech/checklist/links-buttons/) + +--- + +## 6. Forms + +- [ ] **Inputs have clear labels and instructions** + - Visible labels allow users to identify what is required inside of a form field, and allows voice recognition users to activate the control. +- [ ] **Avoid input placeholders** + - Users should be able to understand what to do with an input with no placeholder text present. +- [ ] **Input-based and form-based error states included in design** + - Errors for inputs should be next to the field with the error, while form-based errors should surface at the top or bottom of a form, ideally with line items describing each error and a link directly to the field. +- [ ] **The same info is not asked for multiple times in the same session** + - Auto-populate information or use a checkbox (i.e. “Same as shipping address”) so users don’t have to keep typing the same information. + +### Annotations that can help + +- Label, Input, etc. ([Form Element](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=314-2896)) +- `
` [Landmark](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=2-668) + +Annotation stamp for basic html form elements including a form landmark, input, label, checkbox, radio, textarea, select, legend, fieldset, and hint. All have an indigo hue while the form landmark is pink. + +### Resources + +- [Form Pattern Documentation - Primer](https://primer.style/design/ui-patterns/forms/) + +--- + +## 7. Layout + +- [ ] **Workflow can be completed regardless of screen size or orientation** + - Does your design work as intended for small screens as well as large? Can it change from landscape to portrait orientation without losing key details? +- [ ] **Resize and reflow considered** + - If a user zooms in or out (50-400%) is the intention still the same? Is any content overlapped or obscured? +- [ ] **Scrolling in two directions is not required to read content** + - Multiple scrolling directions makes it difficult for some users to traverse a page and has the potential for users to miss content. There are some exceptions to the rule; please consult the a11y design team if needed. +- [ ] **Help options are available in the same location on all web pages** + - Note that help options are not required, but keep them in the same place across pages for consistency if you do. + +### Annotations that can help + +- [Table](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=4865-3128) +- [List](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=3065-1930) + +Annotation stamps showing semantic names for and all types of list and table elements. Lists are a dark indigo color while Table elements are maroon. All have different icons for each type of element. + +--- + +## 8. Keyboard + +- [ ] **Every interaction with a mouse can be also accessed with a keyboard** + - This includes content on hover. Do not place interactive elements or important information in hover content. +- [ ] **A focus border is visible on every interactive element** +- [ ] **Focus order is annotated and matches the intention of the design** + - Avoid focus that jumps back and forth across the page to reach items visually out of order. + +### Annotations that can help + +- Focus Order ([Ordering](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=2-667)) +- Arrow Stop ([Ordering](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=2-667)) +- Keyboard Shortcut ([User Interactions](https://www.figma.com/design/QD6wUrqRBpGZ0HDg97mq9J/Annotation-Toolkit?node-id=776-36162)) + +Annotations that can help with keyboard: focus or tab order, arrow stop, and keyboard shortcut + +--- + +## Additional Resources +Here are some additional checklists that can be tailored to specific functions and job roles (other than just design and engineering): +- [Vox Media Accessibility Checklist](https://accessibility.voxmedia.com/): Splits checklist by function--design, engineering, project management, QA, and editorial/content. +- [Intopia’s Not-Checklist:](https://not-checklist.intopia.digital/) We appreciated the job role filtering (visual, content, UX design, and video production). diff --git a/checklists/engineering-checklist.md b/checklists/engineering-checklist.md new file mode 100644 index 0000000..8fd4a96 --- /dev/null +++ b/checklists/engineering-checklist.md @@ -0,0 +1,168 @@ +# Engineering Checklist + +This checklist summarizes success criteria from Web Content Accessibility Guidelines (WCAG) 2.2 (Level A and AA, in addition to best practices identified by GitHub), and categorizes it based on key aspects of engineering. Where applicable, each section also contains suggested tools and recommended resources. + +If you don't have a designer on your project, or are not working with an accessibility specialist, we highly recommend also referencing the [Annotation Toolkit Design Checklist](https://github.com/github/design/blob/main/inclusive-design/annotation-toolkit/checklists/designer-checklist.md). We tried to minimize duplicate content between lists so more can be covered! + +--- + +## 1. Color + +- [ ] **Use design system color tokens over one-off code** + - Ideally, your design system and designer have covered the specifics around color contrast. +- [ ] **Run a color contrast checker on code** + - If a designer has not utilized the checklist, check out [Part 1: Color](https://github.com/github/design/blob/main/inclusive-design/annotation-toolkit/checklists/designer-checklist.md#1-color) for specifics around graphical and text color contrast. + +### Suggested Tools +- [Check color contrast - Figma Docs](https://help.figma.com/hc/en-us/articles/360041003774-Apply-paints-with-the-color-picker#h_01JQF1T71AC72G6VDXN27B77V0) +- [Web Color Contrast Checker - WebAIM](http://webaim.org/resources/contrastchecker/) +- [Colour Contrast Analyzer for Mac and Windows - TGPi](https://www.tpgi.com/color-contrast-checker/) + +--- + +## 2. Hierarchy + +- [ ] **No duplicate headings** + - Duplicate headings may confuse screen readers, impair navigation, and disrupt understanding of page structure and content hierarchy. +- [ ] **Headings are used in a consecutive order** + - Heading levels should be sequential. Don’t skip levels (i.e. `

` to `

`). + - Nested headings are encouraged and natural as content goes from more general to specific. + - In certain cases, headings may be visually hidden. Levels and visual styling may deviate from one another (i.e. giving an `

` the same visual treatment as an `

`). Please consult the a11y design team in this case. +- [ ] **Landmarks are used properly** + - Page has only one main section and one footer section. + - Leave out landmark identifiers when giving a unique name. e.g., use "Repository" instead of "Repository navigation". This prevents redundancy in screen readers that already read out the navigation landmark. + +### Suggested Tools +- [Page Region tutorial - W3C WAI](https://www.w3.org/WAI/tutorials/page-structure/regions/) +- [HeadingsMap browser extension](https://www.accessibility-developer-guide.com/setup/helper-tools/browser-extensions/headingsmap/) to check the hierarchy of an existing site. + + +--- + +## 3. Content + +- [ ] **Links can be determined from their text alone** + - While there are programmatic options available, we recommend using them sparingly. +- [ ] **There are multiple (at least two) ways to access the navigation** + - Examples include: a list of related pages, table of contents, site map, site search, and a list of all available web pages. +- [ ] **Elements that present text or images of text have an accessible name that includes the visible text** + - Examples include labels, alternative `alt` text, `aria-label`, etc. +- [ ] **The language of the page and sections that use a different language on the page are identified** + - Identifying page language and multilingual sections enables text-to-speech pronunciation, screen reader functionality, and translation tools. +- [ ] **Cognitive function tests can be bypassed or have an alternate way to solve** + - Not all users can complete things like CAPTCHA puzzles, which excludes them from essential services. If required, provide accessible alternatives. + +### Suggested Tools +- [Microsoft Edge’s Immersive Reader - Microsoft](https://support.microsoft.com/en-us/topic/use-immersive-reader-in-microsoft-edge-78a7a17d-52e1-47ee-b0ac-eff8539015e1) +- [MacOS’s Text to Speech - University of Calgary](https://www.ucalgary.ca/student-services/access/current-students/resources-and-supports/assistive-software-how-videos/mac-text-speech). Includes other speech to text resources as well! + + +--- + +## 4. Images, graphics, and other media + +- [ ] **Ensure all images have alt-text** + - Decorative images should use `alt=""` for `` (fill in for functional images) and `aria-hidden="true"` for ``. +- [ ] **Alternative media is included where applicable** + - Potential content includes captions, audio descriptions, transcripts, etc. +- [ ] **Automatically moving or scrolling content can be paused, stopped, and played** + - Allowing users to control moving content prevents disorientation and motion sickness, which helps those with cognitive, reading, or vestibular disorders. +- [ ] **No page content [flashes](https://webaim.org/articles/seizure/) more than 3 times per second** + - Limiting content flashes prevents seizures and discomfort for people with photosensitive epilepsy, ensuring safe digital experiences for all users. + +### Exercises + +- Figure out if an image needs a description using [W3C’s alt-text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/). + +### Resources + +- [Alt Text Guide - GitHub Workplace Accessibility](https://github.com/github/workplace-accessibility/blob/main/resources/content-accessibility/alt-text-guide.md) +- [Your Image Is Probably Not Decorative - Smashing Magazine](https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/) +- [Images Tutorial - Web Accessibility Initiative (W3C)](https://www.w3.org/WAI/tutorials/images/) +- [Functional Images - Web Accessibility Initiative (W3C)](https://www.w3.org/WAI/tutorials/images/functional/) +- [Dungeons & Dragons taught me how to write alt text - Eric Bailey](https://ericwbailey.website/published/dungeons-and-dragons-taught-me-how-to-write-alt-text/) + + +--- + +## 5. Interactivity + +- [ ] **HTML semantics used over** `` **or** `
` + - Use ARIA sparingly; most use cases can be covered by HTML or JS. +- [ ] **Content that is available on hover must also be available on focus** + - Remember that links change navigation, and buttons initiate actions. +- [ ] **Non-essential multi-point or gesture-based interactions offer a single-point activation or accessible alternatives** + - It may be hard or impossible for disabled users to perform certain gestures. Unless it’s essential, all functionality that uses a multi-point gesture, a path-based gesture, or a dragging movement must be operable using a single pointer gesture that is not path-based. + - Functionality that relies on moving the device or user movement can be disabled and accessed through interactive elements + - There is an alternative way to move objects beyond single-pointer drag and drop functionality +- [ ] **Pointer input target sizes are at least 24 by 24 CSS pixels** + - Note that there are several exceptions to this rule under [SC 2.5.8](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html). +- [ ] **When a user focuses on an element or inputs information, the interface stays consistent** + - Do not make substantial or sudden changes to the page, open pop-up windows, or change keyboard focus without the user opting in. +- [ ] **If a page has a time limit, give user the ability to turn off, adjust, or extend that time limit** + - Exceptions to the rule are real time events (i.e. an auction) or when the time limit is beyond 20 hours. + +### Resources +- [Link & Button Guidance - GitHub Accessibility Playbook](https://accessibility-playbook.github.com/link-and-button-guidance) +- [Links and Buttons Overview - University of Washington](https://www.washington.edu/accesstech/checklist/links-buttons/) +- [Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size - Smashing Magazine](https://www.smashingmagazine.com/2024/07/getting-bottom-minimum-wcag-conformant-interactive-element-size/) +- [Foundations: pointer gestures - TetraLogical](https://tetralogical.com/blog/2023/03/17/foundations-pointer-gestures/) +- [Understanding Target Size Minimum (SC 2.5.8) - WCAG](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) + + +--- + +## 6. Forms + +- [ ] **Inputs have clear labels and instructions** +- [ ] **Legal, financial, or test data can be reversed, verified, or confirmed** +- [ ] **Errors are clearly identified with feedback given in a timely manner** +- [ ] **Avoid redundant entry by offering autocomplete or single select** + +### Resources +- [Form Pattern Documentation - Primer](https://primer.style/product/ui-patterns/forms/) +- [Structuring Accessible Forms - Rachel DiTullio](https://racheleditullio.com/blog/2021/09/structuring-accessible-forms/) + + +--- + +## 7. Layout + +- [ ] **Web content is not restricted to only portrait or landscape** + - Does your design work as intended for a mobile screen as well as desktop? +- [ ] **A link to skipping repeated navigation across app or website is provided** +- [ ] **Navigation, information elements such as search, and help centers such as contact us are placed and labeled in a consistent way** +- [ ] **Each page has a descriptive and informative page title** +- [ ] **Pages are readable and functional when the page is zoomed from 50-400%** + - Is any content overlapped or obscured? +- [ ] **No loss of content or functionality when user adapts paragraph spacing** + - Specifically, up to 2 times the font size, text line height/spacing to 1.5 times the font size, word spacing to 0.16 times the font size, and letter spacing to 0.12 times the font size. + + +--- + +## 8. Keyboard + +- [ ] **All interactive elements must be keyboard navigable** + - This includes content on hover. Using Tab, Shift+Tab, Space, Enter, and Esc is a good start. +- [ ] **Meaningful sequence is logical and intuitive** + - Remember that navigation and reading order is done by code order in the DOM. +- [ ] **There are no keyboard traps or points where keyboard focus falls to the background** + - Double check your dialogs! +- [ ] **When elements receive keyboard focus, there is a focus order not obscured by content** +- [ ] **Check that keyboard shortcuts do not coincide with browser and/or assistive technology shortcuts** + + +--- + +## Additional Resources + +- [ ] **Run a scan on your code** + - We recommend starting with free axe-tools, although beware that automated scans are NOT fool-proof. A great example of this is [Building the most inaccessible site possible with a perfect Lighthouse score](https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/). +- [ ] **Consider adding accessibility linters and actions to your CI/CD pipeline** + - Adding accessibility tools into your code process is a great way to work on accessibility together. + +## Suggested Tools + +- [Free accessibility browser tools - Deque](https://www.deque.com/axe/browser-extensions/) +- [Alt-text bot - GitHub](https://github.com/github/accessibility-alt-text-bot) diff --git a/tutorials/media.md b/tutorials/media.md new file mode 100644 index 0000000..e50dee9 --- /dev/null +++ b/tutorials/media.md @@ -0,0 +1,239 @@ +# How to: **Media** + +Media is made up of images, video, and audio embeds. These elements provide visual or auditory information (and sometimes both). They often support storytelling, communication, and enhance user engagement across websites and apps. + +**Types of media** +- [Image](#image) +- [Video](#video) +- [Audio](#audio) + + +## Image + +Images are static visual representations of something, be it concrete or abstract. Images include photographs, screenshots, illustrations, infographics or charts, images of text, and so on. + +### [Annotation Tiers](https://github.com/github/annotation-toolkit/blob/main/deep-dives/tiered-model.md) +- Difficulty Tier 1: **Easy** +- Priority Tier 1: **Mandatory** + +### Why? + +With the rise of social media and better graphic processing, images have become a key part of the internet. It’s crucial that when building digital products, we ensure that everyone can access the same information. + +Most images exist on the internet through the HTML semantic `` or ``. Regardless of what path you choose, deciding whether or not an image needs **alternative text** (alt-text for short) is key to providing accessible content. + +Images are classified into two main groups: **functional** or **decorative**. + +* **Functional images** contain information that surrounding context does not. Something in the image is required to finish a workload or understand what’s going on. +* **Decorative images**, on the other hand, are… well, decorative! Or, their description is written in surrounding text, therefore alt-text is redundant. + +Writing alt-text is an art in and of itself that even AI can’t do entirely on its own. Check out the resources below, and if you do use an AI generator for alt-text, make sure to double check its work to verify that no important details have been missed. + +A row of four annotation components: The first is a green pin stamp with a label of Image and a note number set to 1. The second is a green bracket stamp with a label of Image and a note number set to 2. The third is a green lasso stamp which has a white and green dashed outline attached to it, a label of Image, and a note number set to 3. The last is annotation is an Image Details component with a note number set to 4. It is a white rectangular panel with green accents and information about the accessible name and HTML element. + +### Variants + +#### Decorative + +If an image does not visually communicate information that aids in understanding the purpose of a page, it shouldn’t be announced by a screen reader. + +Matching pairs of annotation stamps and details. On the left is a green image Pin Stamp with a note number set to 1 and a landscape photo icon. Below this is Details annotation with green accents showing the accessible name and element type (image or SVG). Below both is an exposed inactive Figma component property toggle for Decorative image. On the right is a light green Decorative Image Stamp, a note number set to 2 and a landscape photo icon. Below this is a Details annotation with green accents showing the HTML element. Below these is an exposed active Figma component property toggle for decorative. + +### How to use these annotations + +1. Add a **❖ Media Stamp** component from the asset panel. Place the stamp over the design frame and resize to extend pin, bracket, or lasso. Configure component properties as needed: + - **Label position**: Set based on Stamp’s placement relative to the element being annotated. + - **Type**: This is already set to `Image` by default. + - **Decorative**: If the image is decorative and does not convey any information, or is already described in the surrounding text, enable the Decorative image property. + - **Note number**: Set this number in relative sequence with the other numbered Stamps placed over the same design. + +An image pin stamp and Figma properties panel. The note number has been set to 1, with the stamp label positioned to the left. + +2. Place a **❖ Image Details** component in the margins next to the design and configure the component properties as needed: + - **Note number**: Set this to match the corresponding **❖ Media Stamp**. This number should be unique and in relative sequence with other Details annotations on the same design. + * **Decorative** - If the image is decorative and does not convey any information, or is already described in the surrounding text, enable the Decorative image property. + * **Accessible name** - Provide the text description of the image, focusing on the purpose of the image and the information that it conveys. + * **Show element** - Toggle this property and the related **Element** field to specify whether the image will be using an `` or `` element + * **Background image** - A helpful shortcut that conveys that the image may end up being *built* as a background image, but it’s still informative and requires a visual description through some hidden text. + * **Has motion** - A helpful shortcut for any images that contain animation or some form of motion. This will add a reminder to respect reduced motion settings so that users can avoid encountering motion. + +An image details annotation and a Figma properties panel. The note number has been set to 1, and settings to show element type and motion have been toggled on. There are toggles turned off for decorative image, background and add more info. There are active inputs for title and accessible name. + +### Design considerations + +- Does my image have important text in it? + - If yes, can I change the design to use semantic text instead of the image? +- Is the image decorative or functional? + - If it is functional: + - Is the alt-text supported by surrounding text, making alt-text redundant? + - If no, what is the accessible name? + - If it is decorative: + - Have I noted this in design? + +### Resources + +- [An alt decision tree - Web Accessibility Initiative (W3C)](https://www.w3.org/WAI/tutorials/images/decision-tree/) +- [Your Image Is Probably Not Decorative - Smashing Magazine](https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/) +- [Images Tutorial - Web Accessibility Initiative (W3C)](https://www.w3.org/WAI/tutorials/images/) +- [Functional Images - Web Accessibility Initiative (W3C) ](https://www.w3.org/WAI/tutorials/images/functional/) +- [Dungeons & Dragons taught me how to write alt text - Eric Bailey](https://ericwbailey.website/published/dungeons-and-dragons-taught-me-how-to-write-alt-text/) +- [Alt Text Guide - GitHub Workplace Accessibility (Internal Only)](https://github.com/github/workplace-accessibility/blob/main/resources/content-accessibility/alt-text-guide.md) + +--- + +## Video + +Videos are a timed set of moving images. Videos may have audio (and in that case, may need captions, subtitles, and audio descriptions) and may loop again and again. + +### [Annotation Tiers](https://github.com/github/annotation-toolkit/blob/main/deep-dives/tiered-model.md) +- Difficulty Tier 1: **Easy** +- Priority Tier 2: **Ideal** + +### Why? + +Similar to images, we need to ensure that everyone can gather the same information and detail from a video. This depends on how a video is implemented and the capabilities of the hosting platform (i.e. self-managed versus Youtube). + +Videos exist on the web in two main formats: the `