From 65e9a60f7bbf9e8d24a565808f5a09ad6481fd89 Mon Sep 17 00:00:00 2001 From: Christine Belzie <105683440+CBID2@users.noreply.github.com> Date: Sun, 3 Sep 2023 12:08:18 -0400 Subject: [PATCH] feat: add content about audio (#359) * start setup for audio section * feat: Started adding some content about adding closed captions to the audio element * feat: finished page on audio Co-authored-by: Emma Dawson --------- Co-authored-by: Emma Dawson --- components/ContentTemplates/AudioTemplate.tsx | 43 ++++++- data/pageNavigationLists.ts | 7 ++ pages/docs/Style Guide.md | 108 ++++++++++++++++++ 3 files changed, 156 insertions(+), 2 deletions(-) create mode 100644 pages/docs/Style Guide.md diff --git a/components/ContentTemplates/AudioTemplate.tsx b/components/ContentTemplates/AudioTemplate.tsx index d9411b5..27283a8 100644 --- a/components/ContentTemplates/AudioTemplate.tsx +++ b/components/ContentTemplates/AudioTemplate.tsx @@ -1,5 +1,44 @@ -import { WorkInProgress } from "../WorkInProgress/WorkInProgress" +import { CodeBlock } from "../CodeBlock/CodeBlock" +import { NavPage } from "../NavPage/NavPage" +import { PageUpdated } from "../PageUpdated/PageUpdated" +import { TemplateSection } from "../TemplateSection/TemplateSection" +import { audioPageNavigation } from "../../data/pageNavigationLists" export const AudioTemplate = () => { - return + return ( +
+ + +

Introduction

+ + +

+ Whether you are adding an introductory video about yourself on + websites or embedded an audio clip of your favorite song to a game + you're building, it's important to add closed captions to them. This + will Whether you are adding an introductory video about yourself on + websites or embedded an audio clip of your favorite song to a game + you're building, it's important to add closed captions to them. This + will ensure that users who are deaf and or have TBIs (Traumatic Brain + Injuries) can have an easier viewing experience. +

+

Example

+ + + + +`} + /> + +
+ ) } diff --git a/data/pageNavigationLists.ts b/data/pageNavigationLists.ts index c234b0e..8b8737f 100644 --- a/data/pageNavigationLists.ts +++ b/data/pageNavigationLists.ts @@ -3,6 +3,13 @@ export interface IPageNavigationItem { href: string } +export const audioPageNavigation: IPageNavigationItem[] = [ + { linkName: "Introduction", href: "#introduction" }, + { linkName: "How To Add Closed Captions To Your Audio?", href: "#howToAdd" }, + { linkName: "WCAG Criteria", href: "#WCAGCriteria" }, + { linkName: "Other Resources", href: "#otherResources" }, +] + export const breadcrumbsPageNavigation: IPageNavigationItem[] = [ { linkName: "Introduction", href: "#introduction" }, { linkName: "HTML Structure", href: "#htmlStructure" }, diff --git a/pages/docs/Style Guide.md b/pages/docs/Style Guide.md new file mode 100644 index 0000000..13e5a00 --- /dev/null +++ b/pages/docs/Style Guide.md @@ -0,0 +1,108 @@ +# About this guide πŸ‘‹ + +Welcome to our simple and straightforward style guide! We created this guide for our community of tech and non-tech experts to ensure we communicate effectively and inclusively. This guide is divided into four sections: + +- 🌎 [Inclusive Language](inclusive-language) +- πŸ“ [Grammar & Mechanics](grammar-and-mechanics) +- πŸ€” [Clarity](clarity) +- β™Ώ [Accessibility](accessibility) + +## Inclusive Language 🌎 + +Inclusive language is an essential aspect of communication. It promotes equality, respects diversity, and avoids offense. Here are some best practices to follow: + +- Use gender-neutral words for common terms + - ❌ **Not this:** A maintainer should try to be kind yet constructive in **his** feedback. + - βœ… **Use this:** A maintainer should try to be kind yet constructive in **their** feedback. + +- Avoid using terms that have colonialistic or racist connotations. + - ❌ **Not this:** Contributors should push their pull requests to the **master** branch. + - βœ… **Use this:** Contributors should push their pull requests to the **main** branch. + +## Grammar & Mechanics πŸ“ + +Grammar and mechanics help ensure that your writing is clear, concise, and easy to understand. Here are some best practices to follow: + +### Commas + +- Use commas when describing lists. + - ❌ **Not this:** You can also add your **timeline testimonials and upcoming events** that you are participating in. + - βœ… **Use this:** You can also add your **timeline, testimonials, and upcoming events** that you are participating in. + +- Use commas in introductory elements. + - ❌ **Not this:** **If you do not have one yet** you can create one for free with an email address and password. + - βœ… **Use this:** If you do not have one yet, you can create one for free with an email address and password. + +- Use commas before the seven, so-called, coordinating conjunctions (and, but, so, for, nor, yet, or) to separate two independent clauses. + - ❌ **Not this:** There are 4 ways you can add your profile **but** for this Quickstart, we will use the GitHub UI. + - βœ… **Use this:** There are 4 ways you can add your profile, **but** for this Quickstart, we will use the GitHub UI. + +### Capitalisation + +- Only capitalize terms that describe a product, its feature, the first letter of a sentence, or a person’s name. + - ❌ **Not this:** There are 4 ways you can add your profile but****for this **quickstart**we will use the **github ui**. + - βœ… **Use this:** There are 4 ways you can add your profile, **but** for this Quickstart, we will use the **GitHub UI**. + +## Clarity πŸ€” + +Clarity in writing helps ensure that your audience understands your message and intentions. Here are some best practices to follow: + +### Active vs. Passive + +Using the active voice in writing makes your message more direct and engaging. + +- ❌ **Not this:** Gitpod **was** an open-source application that provides a prebuilt development environment in your browser - powered by VS Code. +- βœ… **Use this:** Gitpod **is** an open-source application that provides a prebuilt development environment in your browser - powered by VS Code. + +### Jargon + +Using technical jargon can alienate non-technical readers. + +- ❌ **Not this:** Gitpod **was** an open-source application that provides a prebuilt development environment in your browser - powered by VS Code. +- βœ… **Use this:** Gitpod **is** an open-source application that provides a prebuilt development environment in your browser - powered by VS Code. + +## Accessibility β™Ώ + +### Bullet Points + +- Avoid describing things only by their color or position. + - ❌ **Not this:** see **the** **image** above. + - βœ… **Use this:** See **Image 2.2**. + +### Emojis + +- Avoid using emojis as bullet points or numbered lists. +- ❌ **Not this:** 1️⃣ Fork the repository +- 2️⃣ Visit the Accessibleforall repository + - βœ… **Use this:** **1.** Fork the repository +- **2️.** Visit the Accessibleforall repository + +- Avoid using emojis in the middle of a sentence. + - ❌ **Not this:** There are 4️⃣ ways you can add your profile, but for this Quickstart we will use the GitHub UI. +- βœ… **Use this:** There are **4** ways you can fix your profile, but for this tutorial, we will use the GitHub UI. + +- Use them sparingly at the end of a sentence. + - ❌ **Not this:** Join the conversation on our Discord community! πŸ˜€ + - βœ… **Use this:** Join the conversation on our Discord community! + +### Headings + +- Use descriptive titles for headings. + - ❌ **Not this:** `

Yoga

` +- βœ… **Use this:** `

Yoga for Developers

` + +- Place headings in chronological order. +- ❌ **Not this:** `

Yoga for Developers

` + `

What is Yoga?

` + `

The History of Yoga

` + - βœ… **Use this:** `

Yoga for Developers

` + `

What is Yoga?

` + `

The History of Yoga

` + +### Images + +- Use descriptive alt text for images. +- ❌ **Not this:** `![Cat_2019-06-14.jpg](https://en.wikipedia.org/wiki/File:June_odd-eyed-cat.jpg)` +- βœ… **Use this:** `![A white cat with a blue eye and golden eye is sitting on a grey couch](https://en.wikipedia.org/wiki/File:June_odd-eyed-cat.jpg)` + +Have some ideas for improving the guide? Raise an issue on our [GitHub page](https://github.com/AccessibleForAll/AccessibleWebDev/issues/new/choose). We would love to receive your feedback!