DEV Community: GingerKiwi

Web Accessibility Certification For Developers

GingerKiwi — Wed, 17 Jan 2024 00:00:00 +0000

Have you ever wondered how to get certified as a web accessibility specialist? Here's a quick article giving an introduction to web accessibility certification and several ways to prepare for it.

Two Certification Routes

There's two industry standard routes to being certified in web accessibility. The first is Certified Professional in Web Accessibility (CPWA) by International Association of Accessibility Professionals (IAAP). The second is Section 508 Trusted Tester certification by United States Homeland Security (USHS).

IAAP Certified Professional in Web Accessibility.

The Certified Professional in Web Accessibility (CPWA) is administered by IAAP.

It has two parts and two exams:

Certified Professional in Accessibility Core Competencies (CPACC)
Web Accessibility Specialist (WAS)

You can one or both exams. While there is no requirement that you take the CPACC before the WAS, it's highly recommended. The IAAP publishes official documents called "Body of Knowledge" for each exam. Links to the two body of knowledge pdfs are included in their respective sections below.

The Certified Professional in Accessibility Core Competencies (CPACC)

The Certified Professional in Accessibility (CPACC) is the core foundation of all three professional accessibility certifications that the IAAP offers.

The body of knowledge and exam covers:

Disabilities, challenges, and assistive technologies
Models of disability
Principals of universal design
International, national, and regional (eg. Ontario) accessibility related laws and standards

How to Prepare for the CPACC Exam

The CPACC body of knowledgecontains the majority of the information needed to pass the CPACC. You will also need to look up several of the laws and standards listed in the body of knowledge to gain a greater understanding of them and how they connect. If you don't have personal and/or professional experience with disabled people I recommend:

Watching videos produced by Deque,
Disabled YouTubers. Here's a handful to get you started:
- Jessica Kellgren-Fozard @ Jessica Out of The Closet
- Jessica @ How to ADHD - A different Jessica than the one above!
- Jen from @ Momming with Migraine
- Jen is a service dog handlers
- Gem Hubbard @ Wheels no Heels
- Married couple Ryan (Deaf) and Ellen @ Sign Duo Channel
- Richard @ Wheels 2 Walking]
Reading some of the books on the Accessibility Book Club list) , and/or
following disabled, neurodiverse, and deaf/Deaf accessibility professionals and advocates on LinkedIn
- Follow me on LinkedIn to see whose posts I repost.

CPACC Certification Details

All information below is from Certified Professional in Accessibility Core Competencies | International Association of Accessibility Professionals (accessibilityassociation.org)

Prerequisite: Either a year of experience in accessibility , or are able to "describe their background and goals related to the CPACC credential".
Exam cost (US Dollars):
- IAAP Member/Retake: $385/$230.
- Non-Member/Retake: $485/$290.
- Emerging and Developing Economy/Retake: $170/$100.
Exam info:
- 100 questions
- Multiple choice
- Two-hours (additional time may be requested as an accommodation)
- Computer-based
- Closed Book
To maintain certification:
- Take 45 continuing education credits every three years, or
- Take the exam again (not the best option, but it is an option)

The Web Accessibility Specialist (WAS)

How to Prepare for the WAS Exam:

Download, read, and practice the contents of the Web Accessibility Specialist Body of Knowledge (accessibilityassociation.org) You can also:

Take courses by Deque at their online training site Deque University: Web Accessibility Training and Coursesby paying for a membership.
- Pricing and subscription options can be found on the Online Self-Paced Web and Digital Accessibility Courses: Subscription Options (dequeuniversity.com)
- A Deque University Scholarships for People with Disabilities is available if you are disabled, neurodiverse, or deaf/Deaf.
Participate in, or use the materials from the Web Accessibility Study Group that I'm a part of.

WAS Certification Details

All information below is from Web Accessibility Specialist | International Association of Accessibility Professionals (accessibilityassociation.org)

Prerequisite:
Exam cost (US Dollars):
Exam Information:
To maintain certification:

Section 508 Trusted Tester

The 508 Trusted Tester accessibility certification is administered by United States Department of Homeland Security. It's broader than the CPWA and includes document accessibility as well as web accessibility. Though it's American specific, and not as commonly asked for on job postings, there's still some advantages to taking the Trusted Tester exam over the CPWA:

Both the exam and the preparation materials are free
It demonstrates to employers that you have a wide range of accessibility skills.
If you're in the US, looking for a remote job with a US company, or work for a company that has US clients it will give you an advantage over people that don't have certification

The Department of Homeland Security has a Section 508 trusted tester certification pdf fact sheet about

How to Prepare for the USDHS Section 508 Trusted Tester Exam:

To become a certified 508 Trusted Tester you have to enroll in the Trusted Tester Series of courses(dhs.gov).The final course is the certification exam.

Additional section 508 training

The US government provides free online courses and exam preparation materials. Section 508 training can be accessed via the section 508 website at Training, Tools & Events Here are a few to get you started:

Section 508 Awareness | Online course
Section 508 training videos
Trusted Tester Awareness WebinarClicking on the link will download a PowerPoint.

DHS 508 Trusted Tester Certification Details

Prerequisite: None
Exam cost: Free Note: Exam length and certification maintainance is challenging information to find. I'll update this article when I talk with one of the people I know who has 508 certification.
Exam length:
To maintain certification:

References and Resources

Five ways to learn more about web accessibility (A11y): 1. Read and practice the IAAP Web Accessibility Body of Knowledge: https://www.accessibilityassociation.org/resource/WAS_Certification_FInal_2020_FINAL 2. Read, and connect with members of the A11y Web Ring Club. Many of the members are well known, certified accessibility specialists https://a11y-webring.club/ 3. Access free "Section 508" training through the US Government https://www.section508.gov/training/ 4. Find events and groups on LinkedIn such as the Accessibility Book Club: https://www.linkedin.com/groups/14367289/ 5. Join an online professional group such as the Web Accessibility Study Group: https://github.com/codingtherapist/webAccessibilityStudyGroup

French Fridays for Developers - 021

GingerKiwi — Fri, 15 Dec 2023 00:00:00 +0000

French Fridays for Developers - 020

In March, 2023 I started French for Devs Fridays to celebrate getting to 400 days on Duolingo. Today marks 685 days! Here you'll find weekly useful and/or amusing French phrases for developers.

Today's quote is about the hottest topic in 2023 - AI.

Today is my:

🇫🇷 685th day of French
🇳🇱 344th day of Dutch,
🏴󠁧󠁢󠁷󠁬󠁳󠁿 183th day of Welsh,
🇩🇪 105th day of German,
🇳🇴 99th day of Norwegian,

Here's this week's French for Devs quote and translation.

Number 21, 15 decembre 2023

«L’intelligence artificielle ne remplace pas l’intelligence humaine ; c'est un outil pour amplifier la créativité et l'ingéniosité humaines»
~ Dr. Fei-Fei Li Stanford 2023

English: French for Devs #21, December 15 2023

"Artificial intelligence is not a substitute for human intelligence; it is a tool to amplify human creativity and ingenuity."
~ Dr. Fei-Fei Li 2023 Co-Director of the Stanford Institute for Human-Centered Artificial Intelligence and IT Professor at the Graduate School of Business

Throwback Thursdays in Tech History: O'Reilly Animals

GingerKiwi — Thu, 14 Dec 2023 00:00:00 +0000

The animals on O'Reilly programming books have become well known. Many popular books are referred to by their animal cover instead of their title. "Information Architecture for the World Wide Web" is commonly referred to as "The Polar Bear Book". But how did a technical book publisher end up with drawings of animals as their most recognized and beloved brand symbols? There's even a GitHub gist with all the book names and their associated cover animals by Brian d Foy author of several books on Perl.

O'Reilly Origins

O'Reilly started out as a technical writing company in 1978 creating UNIX and related manuals for clients. By the early 1980s they kept the rights to their manuals and started a mail order business. Their customers would receive plain brown cover manuals known as "Nutshell Handbooks" visibly held together with staples.

But Tim O'Reilly wasn't happy with the cover design of the first two books for book shops. One of his marketing department staff's neighbours was Edie Freedman. It was Freedman who would come up with the idea of having animals on the cover of O'Reilly books - partly because the names and terminology in computer programming were as weird and strange as some animals.

“I had heard of Unix, but I had a very hazy idea of what it was. I’d never met a Unix programmer or tried to edit a document using vi. Even the terms associated with Unix — vi, sed and awk, uucp, lex, yacc, curses, to name just a few — were weird. They sounded to me like words that might come out of Dungeons and Dragons, a game that was popular with a geeky (mostly male) subculture.” ~ Edie Freeman in A Short History of the O'Reilly Animals

Tim O'Reilly liked Freedman's idea. The first three O'Reilly books with animal covers were all UNIX books: , lorises, and Victoria crowned pigeons

Learning the vi Editor with a Tarsier
sed & awk a Lorises
lex & yaccVictoria crowned pigeons

The first pictures came from reprints of 1700s and 1800s wood cuts by Dover Pictorial Archives For several decades the animals were greyscale drawings, but starting in February, 2019 with Natural Language Processing with PyTorchthe cover illustrations are now in full colour. Many are now hand drawn. Artists include:

Lorrie LeJeune
Karen Montgomery

Karen Montgomery converted 12 of the illustrations into a colouring book that was published by O'Reilly in 2016. The pages are now available as a free pdf colouring book on the O'Reilly website.

The artists and O'Reilly also try to bring call attention to how many of the cover animals are endangered or threatened. In 2012 the company launched the O'Reilly Animals campaign speared on by Tim O'Reilly's mantra "Work on things that matter."

As of today there are 1340 animal books listed on O'Reilly's dedicated The Animal Megnarie Page, as well as numerous articles giving advice to authors on how to pick their animal. What started out with one woman's brilliant idea has become an iconic and beloved growing collection of 1340 book covers.

Five Resources to Help You Code Accessible Forms, Form Validation, and Error Messages

GingerKiwi — Wed, 13 Dec 2023 00:00:00 +0000

I'm working on the first of several accessible forms tutorial articles today. It's taking longer than I'd planned to code and write another Cats and Coffee themed tutorial. So for this week's Web Accessibility Wednesdays, here's some of the resources I'm using.

A Guide To Accessible Form Validation
- Sandrina Pereira
- Publication: Smashing Magazine
- Format: Article with embedded codepen
- Feb 27, 2023
Structuring Accessible Forms
- Rachele DiTullio
- Publication: Rachele DiTullio.com
- Format: Article with embedded CodePen, and links to GitHub and several YouTube videos
- Note: The Axe-Con webinar on March 2023 has American Sign Language interpretation
- Last updated: March 17, 2023
Usable and Accessible Form Validation and Error Recovery
- Publication: Web AIM Blog
- Format: Article with code snippets
The Anatomy of Accessible Forms: Error Messages
- By Raghavendra Satish Peri
- Publication: Deque Systems website
- Format: Article with code snippets
- June 25, 2019
Create accessible forms
- Hamsa Harcourt
- Publication: The A11y Project
- Format: Article with code snippets
- September 19, 2020

A Quick List of Accessibility Resources

GingerKiwi — Fri, 08 Dec 2023 00:00:00 +0000

Web Accessibility Wednesday - Bonus Friday Edition!

Just now in James Q Quick's Learn Build Teach Discord, Arkar Myat said he'd like some Web Accessibility resources both general and image specific, so I thought I'd do a post to help others as well.

It's not an exhaustive list! I also haven't given summaries like I usually do. It's more like my dumping my current #A11y brain cache.

Also check out the profiles and blogs of the people and organizations that I've @ Mentioned. They're also great resources.

Hopefully this helps Arkar with his #Svelte task and others with their accessibility learning.

W3C Web Accessibility Initiative (WAI) / W3C image tutorial: https://www.w3.org/WAI/tutorials/images/
The A11Y Project : https://www.a11yproject.com/
Smashing Magazine - "Accessible Images For When They Matter Most" by Carie Fisher https://www.smashingmagazine.com/2020/05/accessible-images/
What Svelte's accessibility warnings won't tell you by Geoff Rich Senior Software Engineer at Ordergroove https://geoffrich.net/posts/svelte-a11y-limits
W3C Web Accessibility Content Guidelines (WCAG) 2.2 https://www.w3.org/TR/WCAG22/
Coolors Contrast Checker: https://coolors.co/contrast-checker
"How to design visual learning resources for neurodiverse students" by Full Fabric https://www.fullfabric.com/articles/how-to-design-visual-learning-resources-for-neurodiverse-students
How to Create High Resolution Images for Users with Low Vision Perkins School for the Blind https://www.perkins.org/resource/how-create-high-resolution-images-users-low-vision-0/
How to Write Alt Text and Image Descriptions for the visually impaired Perkins School for the Blind https://www.perkins.org/resource/how-write-alt-text-and-image-descriptions-visually-impaired/
Web Accessibility Specialist Body of Knowledge (pdf) IAAP - International Association of Accessibility Professionals https://www.accessibilityassociation.org/resource/WAS\_Certification\_FInal\_2020\_FINAL
Articles by Ben Myers
Ashlee 🤟🏻 Boyer (deaf)'s blog https://ashleemboyer.com/
History of the Disability Pride Flag - talks about accessible colours Columbia University https://www.weinberg.cuimc.columbia.edu/news/history-disability-pride-flag
Web accessibility for seizures and physical reactions Mozilla Developer Network docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/Seizure\_disorders

French Fridays for Developers - 020

GingerKiwi — Fri, 08 Dec 2023 00:00:00 +0000

French Fridays for Developers - 020

In March, 2023 I started French for Devs Fridays to celebrate getting to 400 days on Duolingo. Today marks 643 days! Here you'll find weekly useful and/or amusing French phrases for developers.

Today's quote is from the last Toronto JS tech talk for the year.

Today is my:

🇫🇷 678th day of French
🇳🇱 337th day of Dutch,
🏴󠁧󠁢󠁷󠁬󠁳󠁿 176th day of Welsh,
🇩🇪 98th day of German,
🇳🇴 92th day of Norwegian,

Here's this week's French for Devs quote and translation.

Number 19, 08 decembre 2023

«La beauté du JavaScript Vanilla est que vous pouvez accéder au DOM avec une tronçonneuse»
~ Paul Gordon Toronto JavaScript Tech Talk, 06 decembre 2023

English: French for Devs #019, December 08 2023

"The beauty of vanilla JavaScript is that you get to go into the DOM with a chainsaw."
~ Paul Gordon Toronto JavaScript Tech Talk, 06 decembre 2023

Throwback Thursdays in Tech History: Three Topics in Video Games History

GingerKiwi — Thu, 30 Nov 2023 00:00:00 +0000

Note: This is one of many posts that were done on LinkedIn while this site was being developed and are now being migrated over. Being formatted for LinkedIn means this is an easy to scan list, rather than paragraphs. At some point, I'll go back and turn these posts into proper articles.

This week we look at three topics in video games history! 🎮

The first games console - way before Atari existed.
1970s and 1980s text based adventure computer games 🔮
Blind accessible gaming on the Nintendo Switch 🦮 + 🎮 = 🥳

1. Two Videos about Ralph Baer and The Brown Box 👴

This Man Invented the World's First Video Game Console

11 Nov 2013
Time: 5:01

Meet Ralph Baer, the Father of Video Games

8 Dec 2014
Ralph Baer developed the first home video game console
Time: 17:21
Channel: Motherboard (Tech by Vice)

2. Text Adventure Games 🔮

1985: Making TEXT ADVENTURE Games

10 Nov 2022
Fred Harris goes behind the scenes at Boston software company Infocom.
The developer has enjoyed great success with its line of text adventure games - the likes of Zork, Planetfall, Enchanter, and The Hitchhiker's Guide to the Galaxy
which eschew graphics in favour of a simple text display, and arcade gameplay in favour of what the company calls 'interactive fiction'.
This clip is from Micro Live, originally broadcast 29 November, 1985. Time: 7:58 Channel: BBC Archive

🌌 Play the 30th Anniversary Edition of The Hitchhikers Guide to the Galaxy game

3. How Blind Gamers Play Nintendo Switch 🦮 + 🎮

How Blind Gamers Play Nintendo Switch19 Dec 2017

As a legally blind gamer, people have asked me James what games he has found accessible and why?
James tackles the accessibility of the Nintendo Switch from games, hardware, to software. Channel: James Rath

Check out #a11yTO - Accessibility Toronto on LinkedIn and the A11yTO gaming website to learn more about accessible gaming!

Building in Public: The Social Saturday Group Debugging Episode

GingerKiwi — Sat, 25 Nov 2023 00:00:00 +0000

The new combined blog and portfolio site is being built in public. 🛠️

Today (Saturday, November 25th), I spent 4 hours today in a "debugging party" with Lazar Nikolov, Marco Campos, Sami Xie, and Paul Valladares on Lazar's Creatures.dev Discord debugging errors with my and other devs Astro + Drizzle ORM + BetterSQLite apps. 🥳

Issue: The SQLite library (better-sqlite3) doesn't work well with urls and absolute paths on some node version. So issue with paths, node version and urls, ...

Lazar's comment:

"We solved a pretty nasty bug to be honest. Nothing pointed towards the format of the db file path. Great job everyone! 👏"

Paul:

"We became node wizards 😂"

✅ Solved! Lazar created an update to his awesome course on egghead.io. Not sure if it's live yet.

It's way more fun debugging with other devs!

If you're a fellow dev looking for community come and join TorontoJS's Slack, in person, and online events! www.torontojs.com.

It's how I met everyone from today.

Also Creatures.dev discord has awesome people!

I still have to go back through, tweak a few things, and redeploy. Frontend only version is at: https://gingerkiwi.xyz.

But off to go skating! ⛸️The rinks are open!

Migrating my .dev domain to a new registrar should be done by Tuesday.

Photo Credit

Rajvir Kaur on Unsplash

Quick Accessibility Tips for Developers - With Cats and Coffee Themed Code Examples - Part 2: Links Within Pages

GingerKiwi — Wed, 15 Nov 2023 00:00:00 +0000

About This Article Series

Coding with accessibility in mind can be intimidating if you're not familiar with the needs of disabled, neurodiverse, Deaf/deaf, and hard of hearing users. Yet, it's an essential skill to be both legally compliant, and to have easy to read and maintain code.

Note: Though it's ironic given today's topic, this article doesn't have links within the page - yet. I'm currently working on a brand new site using Astro that will have enhanced accessibility features, and fix some of the styling that I'm not happy with in this gingerkiwi.blog site. When the site is fully launched, I'll be reformatting articles, including adding a contents section to all the longer articles.

Visit my new site being built in public on fly.io. There's links to Lazar Nikolov's Egghead.io course I'm using as the foundation for it.

The Cats and Coffee Examples

The Quick Accessibility Tips for Devs series has a fun cats and coffee example with the Crazy Cats Coffee website and repo. The first article used a codepen.

GitHub repo for the series
GitHub branch for this article
The deployed site
The page we're looking at today
The Crazy Cats Coffee codepen from the first article.

This week's article is a shorter one covering "in-page links" - links within a page to other parts of the same page. This is especially useful such as in a longer blog post, or an FAQ page.

In-page links
Code template
Crazy Cats Coffee code example
The Code for the full blog page used as an example

In-Page Links

What are in-page links?

Links within pages are hyperlinks that take users to different parts of the same page

Why should developers use links within pages?

They make it easier for all users to find the content they're interested in.
Screen reader users and refreshable braille display users often pull up a list of links at the beginning of reading a page.
Having a contents list at the beginning of the page helps users know what to expect in the blog post, FAQ, or other longer content page.
They can help with SEO

How to use links within pages in your code :

Create an id for the element you want to navigate to.
Use descriptive text for your links such as "coffee houses", and not "click here"
. Links must be keyboard focusable. Users must be able to tab to links.
Link text must be visually distinguishable from non-link text. For example links are commonly underlined, and in a different colour.
1. When choosing colours keep in mind colour blindness (more on that in a later article).
All links, including in-page links, must have a visual indicator when users tab to them.
Links must be real links using the a tag (see code blocks below), and a valid href attribute. The use of additional ARIA labels should be avoided, except in special cases.
Special cases for using "aria-label" include links to citations where including the full text would take away from reading the content.

In-Page Links Pages Template

%% In-page link %%
<a href="#id-of-location-in-page">Name of location in page</a>

%% --- page content --- %%

%% example of setting a location to link to - this one is in an h2 %%
<h2 id="id-of-location-in-page">Name of location in page</h2>

In-Page Links Crazy Cat Coffee Code Example


%% List of page links %%
 <h2>Contents</h2>

    <ol>
        <li><a href="#origin-of-coffee">The Origin of Coffee</a></li>
        <li><a href="#spread-of-coffee">The Spread of Coffee</a></li>
        <li><a href="#coffee-houses">Coffee Houses</a></li>
        <li><a href="#modern-production-tech">Modern Production Techniques</a></li>
        <li><a href="#health-benefits-coffee">The Health Benefits of Coffee</a></li>
        <li><a href="#references">References and Credits</a></li>
    </ol>

    %% Example of location link will take a user to %%

<h2 id="coffee-houses">Coffee Houses</h2>

In-Page Links for Credits and References

Because the visible text in the link is just a superscript 1, we use aria-label="link to reference". This gives screen reader and refreshable braille display users the same information as users seeing the page. Visually a superscript number styled like a link means "this will take you to the reference for this text".

If any user wants to see the reference they click or tap on the link. If not, the amount of text indicating that there's a reference isn't enough to break the reading flow for most users.

%% Paragrah of text with an in-page link to the reference used to write it %%

<p>Coffee houses were established in Western Europe by the late 17th century, especially in Holland, England, and Germany. One of the earliest cultivations of coffee in the New World was when Gabriel de Clieu brought coffee seedlings to Martinique in 1720. These beans later sprouted 18,680 coffee trees which enabled its spread to other Caribbean islands such as Saint-Domingue and also to Mexico. By 1788, Saint-Domingue supplied half the world's coffee 
<a href="#ref-wikipedia" aria-label="link to reference">¹</a>.</p>

%% --- page content --- %%

%% location that the reference link navigates to %%

<li id="ref-wikipedia">Wikipedia <a href="https://en.wikipedia.org/wiki/History_of_coffee">The History of Coffee</a></li>

The Full Blog Page

In case you're too busy to visit the GitHub repo for this series, I've included the full html for the blog page used as an example in this article.

Note: Like most things in this blog, this article and the code blocks will be reformatted when they are moved over to my new Astro blog.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog: The History of Coffee</title>
    <link rel="stylesheet" href="../styles.css">
</head>
<header class="text--align-center">
    <!-- 
    <img src="https://gingerkiwi.github.io/hosted-assets/icon-local_cafe_FILL0_wght400_GRAD0_opsz24.svg" alt="icon of coffee cup"> -->

    <a href="#main" id="skipToMain" class="a11y--skip-to-main">Skip to main content</a>
    <img class="image--centered logo" src="/assets/Logo_CrazyCatsCoffee.png" alt="Coffee shop logo. Icon of a cat sitting in a coffee mug.">
    <nav aria-label="Primary navigation">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/menu">Menu</a></li>
            <li><a href="/cats">The Cats</a></li>
            <li><a href="/blog">Blog</a></li>
        </ul>
    </nav>
</header>
<body>
    <main class="format--max-width-70 padding-y-2">
        <h1>The History of Coffee</h1>
        <img class="image--centered" src="../assets/amanda-kerr-BvqCLtG9msc-unsplash.jpg" alt="a vintage metal coffee grinder. The base says VEGA S6 ESKILSTUNA SEPARATOR. The grider is on a rough, unfinished wood table. Theres several wooden barrels in the background.">

        <p class="padding-y-2">Here is a detailed history of coffee, one of the most popular beverages in the world.</p>

        <h2>Contents</h2>

        <ol>
            <li><a href="#origin-of-coffee">The Origin of Coffee</a></li>
            <li><a href="#spread-of-coffee">The Spread of Coffee</a></li>
            <li><a href="#coffee-houses">Coffee Houses</a></li>
            <li><a href="#modern-production-tech">Modern Production Techniques</a></li>
            <li><a href="#health-benefits-coffee">The Health Benefits of Coffee</a></li>
            <li><a href="#references">References and Credits</a></li>
        </ol>

<h2 id="origin-of-coffee">The Origin of Coffee</h2>
The history of coffee dates back to centuries of old oral tradition in modern-day Ethiopia and Yemen. It was already known in Mecca in the 15th century. Also, in the 15th century, Sufi monasteries in Yemen employed coffee as an aid to concentration during prayers <a href="#ref-wikipedia" aria-label="link to reference">¹</a>. 

Coffee is believed to have originated in the Ethiopian province of Kaffa, where it was discovered by a goat herder named Kaldi. Kaldi noticed that his goats became more energetic after eating the berries of a certain plant. He tried the berries himself and found that they had a similar effect on him. He then took the berries to a nearby monastery, where the monks brewed them into a beverage. The drink was found to be invigorating and helped the monks stay awake during long hours of prayer <a href="#ref-hcausa" aria-label="link to reference">²</a>.

<h2 id="spread-of-coffee">The Spread of Coffee</h2>
Coffee later spread to the Levant in the early 16th century; it caused some controversy on whether it was halal in Ottoman and Mamluk society. Coffee arrived in Italy the second half of the 16th century through commercial Mediterranean trade routes, while Central and Eastern Europeans learned of coffee from the Ottomans. By the mid 17th century, it had reached India and the East Indies <a href="#ref-wikipedia" aria-label="link to reference">¹</a>. 

<h2 id="coffee-houses">Coffee Houses</h2>
<p>Coffee houses were established in Western Europe by the late 17th century, especially in Holland, England, and Germany. One of the earliest cultivations of coffee in the New World was when Gabriel de Clieu brought coffee seedlings to Martinique in 1720. These beans later sprouted 18,680 coffee trees which enabled its spread to other Caribbean islands such as Saint-Domingue and also to Mexico. By 1788, Saint-Domingue supplied half the world's coffee <a href="#ref-wikipedia" aria-label="link to reference">¹</a>.</p>

<h2 id="modern-production-tech">Modern Production Techniques</h2> 
By 1852, Brazil became the world's largest producer of coffee and has held that status ever since. The period since 1950 saw the widening of the playing field owing to the emergence of several other major producers, notably Colombia, the Ivory Coast, Ethiopia, and Vietnam; the latter overtook Colombia and became the second-largest producer in 1999. Modern production techniques along with the mass productization of coffee has made it a household item today <a href="#ref-wikipedia" aria-label="link to reference">¹</a>.

<h2 id="health-benefits-coffee">The Health Benefits of Coffee</h2>
Coffee is not only a delicious beverage but also has several health benefits. Studies have shown that coffee can help reduce the risk of several diseases, including type 2 diabetes, liver disease, and Parkinson's disease <a href="#ref-healthline" aria-label="link to reference">³</a>. Coffee is also rich in antioxidants, which help protect the body against damage from free radicals <a href="#ref-medicalnews" aria-label="link to reference">⁴</a> .

<h2 id="references">References and Credits</h2> 
<ol>

    <li id="ref-wikipedia">Wikipedia <a href="https://en.wikipedia.org/wiki/History_of_coffee">The History of Coffee</a></li>
    <li id="ref-hcausa">NCAUSA <a href="https://www.ncausa.org/About-Coffee/History-of-Coffee">The History of Coffee</a></li>
    <li id="ref-healthline">Healthline <a href="https://www.healthline.com/nutrition/top-13-evidence-based-health-benefits-of-coffee">Top 13 Evenidence Based Health Benefits of Coffee</a></li>
    <li id="ref-medicalnews">Medical News Today <a href="https://www.medicalnewstoday.com/articles/270202">Is coffee good for you?</a></li>
    <li>Cover Photo <a href="https://unsplash.com/photos/black-and-gray-vegas6-commercial-machine-near-wine-barrels-BvqCLtG9msc">Amanda Kerr on Unsplash</a></li>
    <li>This article was composed by Bing AI</li>

</ol>

    </main>
    <footer class="padding-y-2">
        <nav aria-label="Secondary navigation">
            <ul>
                <li><a href="/" class="footer--nav">Home</a></li>
                <li><a href="/blog/2023-11-14-coffee-history" class="footer--nav ">Blog: Coffee History</a></li>
                <li class="footer--nav "><a href="/blog/special-events.html" class="footer--nav ">Blog: Special Events</a></li>
                <li><a href="/cats/adoptions" class="footer--nav ">Adoptions</a></li>
            </ul>
            <!-- navigation links for topics -->
        </nav>
        <p>Site logo was developed in figma using "cat in mug" by Emily Murphy from</p> <a class="a--like-nav-hover a--like-nav" href="https://thenounproject.com/browse/icons/term/cat-in-mug/" target="_blank" title="cat in mug Icons" rel="nofollow noopener noreferrer external">Noun Project</a> (CC BY 3.0)
    </footer>
</body>
</html>

Credits

The blog article on the history of coffee used in the code and site examples was written by Bing chat.

French Fridays for Developers - 018

GingerKiwi — Sat, 11 Nov 2023 00:00:00 +0000

French Fridays for Developers - 018

In March, 2023 I started French for Devs Fridays to celebrate getting to 400 days on Duolingo. Today marks 643 days! Here you'll find weekly useful and/or amusing French phrases for developers.

Today's quote is a day late. On Thursday Toronto JavaScript had a tech talk at VM Ware Tazu Labs and a bunch of us went to the Firkin on Yonge at Queen Street afterwards. We had a great time! I got home after 3am.

This week's quote is debugging related. While working on the new combined Ginger Kiwi blog and .dev portfolio site in Astro with Lazar Nikolov's Astro course on Egghead.io a bug popped right during 'npm build dev'. Thanks to Lazar and Dreyfus on the Creatures.dev discord for sorting it out!

See the code block below if you're curious.

Today is my:

🇫🇷 651st day of French ,
🇳🇱 310th day of Dutch,
🏴󠁧󠁢󠁷󠁬󠁳󠁿 149th day of Welsh,
🇩🇪 71st day of German,
🇳🇴 65th day of Norwegian,

Here's this week's French for Devs quote and translation.

Week 16, 29 septembre 2023

«Le débogage, c'est comme être un détective dans un film policier où vous êtes aussi le meurtrier»
~ Anonyme

English: French for Devs #018, November 11 2023

"Debugging is like being a detective in a crime movie where you're also the murderer."
~ Anonymous

%% Initial code %%

const page: Page<CollectionEntry<'blog'>> = Astro.props.page;

%% Code that works %%

type Props = {
  page: Page<CollectionEntry<'blog'>>;
};

const { page } = Astro.props;

I highly recommend The Firkin on Yonge for events!

There's a semi-private upstairs with choice of lounge style seating,
The staff are great,
They've handled the two A11yTO events after parties I've volunteered at well.
It's wheelchair accessible with an elevator and an accessible washroom stall.
It's centrally located, right near an accessible subway station (Queen), and just two stops from Union station for people coming in from out of town.

A Handful of Quick Accessibility Tips for Developers - With Cats and Coffee Themed Code Examples

GingerKiwi — Wed, 08 Nov 2023 00:00:00 +0000

Here are five tips to get you started in making your sites accessible for users and learning how to implement the basics of Web Content Accessibility Guidelines (WCAG). Each tip has a template so you can easily cut, paste, and adjust to fit your projects, and a cats and coffee example so you can see how the tip works in an app.

Page title
Landmarks
Headings
Prefers reduced motion
Skip to main content

The Cats and Coffee Examples

All code examples are from a website for the fictional "Crazy Cats Coffee" coffee shop. View the Crazy Cats Coffee codepen here

Page Title

What is a page title?

The name of your page in the head of your html documents.

Why should developer use a page title?

It's the first thing a user hears when visiting any page on your site.
It allows screen reader users to know the content of your page quickly, without having to read the majority of the page.
(Bonus): It's also helpful for search engine optimization (SEO).

How to use page title in your code.

Each title should be unique to the page.
1. If you have pages that are auto generated from content (e.g. an Astro, or 11ty blog), make sure to autogenerate the title for each page as well. e.g. Use: { {title} } - but omit the spaces between the double curly braces.
Don't code an empty page title tag.
Make sure each page title is descriptive and accurate.
1. Good: "Five ways to keep your cats from spilling your coffee on your keyboard - again!"
2. Not so good: "blog post"

Page Title Code Template

<head>
    <title>My Page Title</title>
</head>

Page Title Code Template - Autogenerated Pages

<head>
    %% For autogenerated pages use this %%
    <title>{ { title } }</title> 
    % omit the spaces between the double curly braces %
</head>

Page Title Code Example

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Elizabeth McCready" />

    <title>Crazy Cats Coffee</title>

    <link rel="shortcut icon" type="image/png" href="/assets/blog/favicon-2.png" />
    <link rel="stylesheet" href="/styles.css" />

  </head>

Semantic Landmarks

What are semantic landmarks?

Landmarks are section tags such as header, nav, main, and footer that identify different core sections of a page.

Why should developer use semantic landmarks?

They allow users of screen readers and other assistive tech to navigate the page just like a user using their eyes.
Makes it easier for others to read your code. Who wants to get lost in an endless sea of divs?

How to use semantic landmarks in your code

All text on a page should be contained between a pair of landmark tags
If you have multiple incidences of a particular landmark - such as nav in both your header and footer, use either "aria-label" or "aria-labelledby" to show the difference between the two.

Semantic Landmarks Template

<header>
    <nav aria-label="Primary navigation">
        <!-- Navigation links to the Website's pages -->
    </nav>
</header>

<main>
    <!-- The actual content of the page -->
</main>

<footer>
    <nav aria-label="Secondary navigation">
        <!-- navigation links for topics -->
    </nav>
</footer>

Semantic Landmarks Example

%% FIRST SEMANTIC LANDMARK - header tag %% 

<header>
    <nav aria-label="Primary navigation">
    %% USED TO TELL THE TWO DIFFERENT nav AREAS APART %%
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/menu">Menu</a></li>
            <li><a href="/cats">The Cats</a></li>
        </ul>
    </nav>
</header>

 %% SECOND SEMANTIC LANDMARK - main tag %% 

<main>
    <h1>Welcome to Crazy Cats Coffee!</h1>
    <!-- The actual content of the page -->

    <p><em>Your Purr-fect Downtown Coffee Shop! </em></p>
    <p>Percentage of profits goes to support local rescue cat organizations </p>
    <img src="https://gingerkiwi.github.io/hosted-assets/reba-spike-OjB_lkGKhX8-unsplash.jpg" alt="Dark brown long haired cat at coffee shop on a dark wood table by two iced coffees in plastic cups">
    <h2>About Crazy Cats Coffee</h2>
    <p>Information about the coffee shop</p>

    <!-- This area can contain multiple headings, content items such as lists, and images, as well as sections and articles -->

</main>

%% THIRD SEMANTIC LANDMARK - footer tag %%

<footer>
    <nav aria-label="Secondary navigation">
        <ul>
            <li><a href="/" class="footer--nav">Home</a></li>
            <li><a href="/blog/coffee-history" class="footer--nav ">Blog: Coffee History</a></li>
            <li class="footer--nav "><a href="/blog/special-events" class="footer--nav ">Blog: Special Events</a></li>
            <li><a href="/cats/adoptions" class="footer--nav ">Adoptions</a></li>
        </ul>
        <!-- navigation links for topics -->
    </nav>
</footer>

Semantic Headings

What are semantic headings?

Semantic headings are heading tags from h1 though h6 that provide navigation aids, and content organization and structure to your page.

Why should developers use semantic headings?

They help sighted users easily scan to a particular topic on your page.
Screen reader users frequently use a list of headings and jump to the particular section they're looking for.
Semantic headings help your SEO.
They make your code easier to read by others, and by yourself months or years later - making it easier to maintain.

How to use semantic headings in your code :

Use only one h1 on a page*.
1. The exception to this is when there's a modal that covers the page content. That modal can have a different h1 to the page's h1.
2. Note that there are specific accessibility concerns with modals, especially with WCAG2.2. These are beyond the scope of this article.
Use heading tags to identify heading levels, and css to style them.
If you want to change the style of a particular heading to be larger/bolder/ the same colour as another heading tag use a css utility class.
Use headings in order. You shouldn't skip from a h1 to a h4 heading.

Semantic Headings Template

<h1>My Page Topic</h1>
    <!-- some content like paragraphs, images, lists, ...-->

    <h2>Section 1 heading</h2>
        <!-- some content like paragraphs, images, lists, ...-->

        <h3>A subtopic of section 1</h3>
        %page content%
        <h3>Another subtopic of section 1</h3>
        %page content%

    <h2>Section 2 heading</h2>
        <!-- some content like paragraphs, images, lists, ...-->

        <h3>A subtopic of section 2</h3>
        <!-- content -->
        <h3>Another subtopic of section 2</h3>
        <!-- content -->

Semantic Headings Code Example

%% h1 - ONLY H1 HEADING ON THE PAGE %%
<h1>Welcome to Crazy Cats Coffee!</h1>
    <!-- some content -->

    <p><em>Your Purr-fect Downtown Coffee Shop! </em></p>
    <p>Percentage of profits goes to support local rescue cat organizations </p>
    <img src="https://gingerkiwi.github.io/hosted-assets/reba-spike-OjB_lkGKhX8-unsplash.jpg" alt="Dark brown long haired cat at coffee shop on a dark wood table by two iced coffees in plastic cups">

%% H2 MARKS THE BEGINNING OF A SUBTOPIC - IN THIS CASE ABOUT THE BUSINESS %%
    <h2>About Crazy Cats Coffee</h2>
    <ol>
        <li>1st list item about Crazy Cats Coffee</li>
        <li>2nd list item about Crazy Cats Coffee</li>
        <li>3rd list item about Crazy Cats Coffee</li>
    </ol>
    </p>

    %% H3 MARKS THE BEGINNING OF A SUBTOPIC THAT'S PART OF THE "ABOUT THE BUSINESS" - IN THIS CASE IT'S ABOUT THE BUSINESS' ACCESSIBILITY %%

    <h3 class="font--like-h2">Accessibility</h3>

    %% Note the css utility class that changes the styling of the heading, without changing the heading level %%
    <ol>
        <li>
            wheelchair and mobility aid accessible, </li>
        <li>three, single person accessible non-gendered washrooms, </li>
        <li>level access at entrace and to our back garden patio </li>
        <li>American Sign Lanaguage is part of staff training</li>
        <li>silent library room in back with dimmed lighting</li>
    </ol>

    <article> % THE SEMANTIC TAG 'article' WILL BE COVERED IN A LATER ARTICLE%

    %% WE GO BACK UP ONE HEADING LEVEL TO LEARN ABOUT THE SEASONAL SPECIALS %%
        <h2>Seasonal Specials</h2>
        <p> A selection of our seasonal special snacks, meals, and drinks</p>
        %% H3 - FOR EACH TYPE OF SEASONAL SPECIAL %%
        <h3>Snacks</h3>
        <p> Cheese and crackers</p>
        <p> Ginger cat crazy squares</p>
        <h3>Meals</h3>
        <p> Tuna bagel melt</p>
        <p>Grrrriled cheese</p>
        <p>Zoomie party platter - for sharing with friends!</p>
        <h3>Drinks</h3>
        <p> Ginger cat flat white</p>
        <p> Purrrrfect peppermint hot chocolate</p>
    </article>
</main>

CSS for Semantic Headings Code Example

h1,
h2 {
    font-family: var(--ff-heading);
    color: var(--clr-spice);
    text-align: center;
    padding: 2rem 0;
}

h3 {
    color: var(--clr-spice);
    text-decoration: underline;
}

%% UTILITY CLASS 
- THIS CHANGES THE STYLING OF THE h3 ABOVE TO BE CLOSER TO THE H2 
- WITHOUT CHANGING THE OUTLINE/HEADING LEVEL%%

font--like-h2 {
    font-family: var(--ff-heading);
    color: var(--clr-spice);
    text-align: center;
    padding: 2rem 0;
}

Prefers Reduced Motion

What is prefers reduced motion?

CSS that respects users preferences for reduced or no motion and animations

Why should developers include prefers reduced motion in our code?

Motion can trigger seizures, migraines, vertigo, and be painful for users with sight loss, and/or other disabilities and medical conditions.
Yes, animations are cool! But risking a user being in pain or even having an ambulance ride from your animations isn't cool.
Respecting users' preferences helps keep users on your site, and reduces the chance they leave your site and never visit again.

How can I include prefers reduced motion in my code?

There are many ways to implement prefers reduced motion. The simplest is below.
For every animated element include it's class name inside of an @media query in your css.
There's some really awesome, but more complex ways to implement prefers reduced motion, css that only implements animations and transitions if a user hasn't set their preferences.
1. But again, the goal of this article is "quick accessibility tips".
2. See Respecting Users’ Motion Preferences by Michelle Barker on Smashing Magazine for an in-depth 12-minute read on different ways to implement prefers reduced motion.

@media (prefers-reduced-motion: reduce) {
  .your-element-name {
    animation: none;
  }
  .your-other-element-name {
    animation: none;
  }
}


<button class="btn--cta">
        Book your holiday party
        <span> - 10% off until Nov 15th!</span>
</button>



.btn--cta {
  border: 5px solid transparent;
  background: var(--clr-spice);
  color: var(--clr-white);
    text-transform: uppercase;
    width: 20rem;
  border-radius: 42px;
  padding: 15px 30px;
    margin-bottom: 2rem;
  overflow: hidden;
  transition: 
    all 1.2s,
    border 0.5s 1.2s,
    box-shadow 0.3s 1.5s;
  white-space: nowrap;
  text-indent: 23px;
  font-weight: bold;
  span {
    display: inline-block;
    transform: translateX(300px);
    font-weight: normal;
    opacity: 0;
    transition: 
      opacity 0.1s 0.5s,
      transform 0.4s 0.5s;
  }
  &:hover {
    text-indent: 0;
        width: 30rem;
    background: var(--clr-holiday-green);
    color: #FFE8A3;
    border: 10px solid var(--clr-holiday-purple);
        padding-right: 20px;
    box-shadow: 3px 3px 2px rgba(black, 0.15);
    span {
      transform: translateX(0);
      opacity: 1;
    }
  }
}

Skip to Main Content

What is skip to main content?

A simple link at the top of the page that allows users to skip hearing the navigation, banner, icons, logos, and get right to the main content.

Why should developers use skip to main content?

This allows users to get to the main content and enjoy it - rather than be annoyed at hearing the entire navigation, banner, logos, icons and other header information read out loud.
1. You wouldn't want to spend all the time and effort to develop and maintain a site, only to annoy your users.

How can you include a skip to main content in your code?

The simplest way is to include a visible link before any of your page content - right below the header tag. This is the method we're using here.
You can also use css, or css and some javascript to make the link visible only on keyboard focus to screen reader users.
1. As the theme of this article is "quick a11y tips", I'm not getting into the different options for hiding and showing the link here.

Skip to Main Content template

<header>
    <a href="#main" id="skipToMain" class="a11y--skip-to-main">Skip to main content</a>

%% other header content such as your nav, site logo, branding %%
<header>

Skip to Main Content code example

<header>
    <a href="#main" id="skipToMain" class="a11y--skip-to-main">Skip to main content</a>
    <nav aria-label="Primary navigation">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/menu">Menu</a></li>
            <li><a href="/cats">The Cats</a></li>
        </ul>
    </nav>
</header>

Putting it All Together

See the Pen CrazyCatsCoffee_A11y by GingerKiwi (@gingerkiwi) on CodePen.

Credits

Animated call to action button was restyled from Izzat Azmi's code pen

French Fridays for Developers - 017

GingerKiwi — Fri, 03 Nov 2023 00:00:00 +0000

In March, 2023 I started French for Devs Fridays to celebrate getting to 400 days on Duolingo. Today marks 643 days! Here you'll find weekly useful and/or amusing French phrases for developers.

Today's quote is cybersecurity related - because both the Toronto Public Library and the British Library have been victims of ransomware attacks. All us devs in Toronto and anyone else that were using O'Reilly eBooks through TPL for professional development and reference have been out of luck since last weekend.

Today is my:

🇫🇷 643rd day of French ,
🇳🇱 302nd day of Dutch,
🏴󠁧󠁢󠁷󠁬󠁳󠁿 141st day of Welsh,
🇩🇪 63rd day of German,
🇳🇴 57th day of Norwegian,

Here's this week's French for Devs quote and translation.

Week 16, 29 septembre 2023

«Traitez votre mot de passe comme votre brosse à dents. Ne laissez personne d’autre l’utiliser et achetez-en un nouveau tous les six mois.»
~ Clifford Stoll

English: French for Devs #017, November 03 2023

"Treat your password like your toothbrush. Don’t let anybody else use it, and get a new one every six months."
~ Clifford Stoll