Ginger Kiwi: Liz McCready's blog and portfolio

What Are Refreshable Braille Devices and What Do Devs and UX Designers Need to Know?

Wed, 13 Mar 2024 00:00:00 GMT

As developers screen readers are the most frequent alternative input/output (i/o) method mentioned when discussing accessibility (a11y). However, there's far more to web accessibility than screen readers. Can you imagine trying to refer to documentation during a meeting by listening to it? You'd miss most of what is being said in the meeting. For those of us that are sighted, we can just choose to read text. For people who are blind and low vision one option is a refreshable braille device.

Keep reading to learn more about braille, and refreshable braille displays from a developer's perspective. Given that this article is aimed at sighted software developers and UX designers, I've embedded quite a few videos. As always there's a list of resources at the end.

<a href=#what-is-braille>What is braille?</a>
<a href="#braille-displays">What are refreshable braille displays?</a>
<a href="#code">How to code for refreshable braille device accessibility</a>
<a href="#references-resources">References and resources</a>

<h2 id="what-is-braille">1. What is Braille?</h2>

Braille is a tactile written system of raised dots arranged in "cells" of six dots. Each cell is two dots across and three dots high. In the English speaking world there are two main systems of 6-dot braille that form the Unified English Braille standard (UEB):

Grade 1, elementary or uncontracted braille is braille that spells out each letter with one cell of braille.
Grade 2 or contracted braille is a shorter form of braille that has contractions for commonly used English words.

How to Write Braille - The Analog Way

Braille is written by being embossed on thick paper (card stock) either by braille typewriters such as the popular Perkins brailler, or occasionally with a braille slate and stylus.

Braille Writers (Typewriters)

Braille writers are very heavy typewriters that emboss braille letters onto card stock paper. They use a 9 key system. The far left key is the the carriage return that moves the paper down one line. The first three keys are dots 1, 2, 3. The middle key is the spacebar. The three keys immediately after the spacebar are the 4, 5, and 6 dots. The far right key is the backspace

Molly Burke demonstrates how she used her Perkins brailler in school in the video below.

Braille Slate and Stylus

While very inexpensive ($5-25 on Amazon), and very portable, a braille slate and stylus is much more time consuming than a braille writer - and can be more confusing. Because the person writing the braille is punching down into the paper they have to write from left to right on each line and in mirror writing for each letter in order for a reader to read the raised dots.

Braille slates come in many different sizes from almost wallet sized ones, to full braille pages that are about the size of a scrapbook page. Certified Braille Transcriber, Elizabeth Symington's excellent video on 10 different types of Braille slates is a great demonstration of the variety in this portable braille writing option.

To Learn More About Classic Braille

If you would like to learn braille several organizations offer free tactile braille alphabet cards via mail:

UK: The Royal National Institute for the Blind (RNIB) offers free tactile braille alphabet cards via royal mail (post). You can order the tactile braille alphabet card online on the RNIB website shop.
USA: National Braille Press free tactile braille alphabet cards shipped via the United States Postal Service (USPS)

Lego has braille bricks that became available to the general public in 2023 (they were originally just for eductors). It's a great interactive, fun, geeky way to learn some braille.

Eight Dot Braille Systems

Traditional braille with its six dot cells can represent a maximum of 64 characters. Eight dots allow a maximum of 256 characters. There are two main systems of braille that use eight dots: Braille Computer Notation (BCN), and braille-8. Braille computer notation uses a single 8 dot braille cell to map to 256 unicode characters. While BCN greatly extends what braille can represent, it still can't represent Greek letters and other symbols used in maths and science such as ∆ (delta), or ß (beta).

Instead of using every dot in a cell to represent a character, braille-8 uses dots 7 and 8 to indicate which of the four braille-8 "pallets" the first six dots are representing. Pallet A has both dot 7 and 8 off, and it displays the traditional 64 character braille code. Pallet B is (just dot 7 on) represents 10 numerals and 26 capital letters. Pallet C (both dot 7 and dot 8 on) is for trigonometry and scientific notion. Palette D (dot 8 on) is a combination braille pallet of the Universal English Braille contractions and 17 most common scientific terms.

To Learn More About Eight Dot Braille Code

The senior engineer, and founder and CEO of Vistrit Gyan, Anupam Kumar Garghas an excellent, very detailed description of both 8-dot braille and braille-8 in his article Braille-8 Unified Braille Unicode System. He's the primary inventor of 8-dot Unicode braille. The majority of the information 8 dot braille systems comes from his article. If you want to geek out and dive in to learn more it's a very well researched read. His original paper on 8-dot unicode braille Braille-8 — The unified braille Unicode system:Presenting an ideal unified system around 8-dot Braille Unicode for the braille users world-over | IEEE Conference Publication | IEEE Xplore was presented at the Institute of Electrical and Electronics Engineers (IEEE) Conference, Bengaluru in 2016

<h2 id="braille-displays">Digital Braille: What are Refreshable Braille Devices?</h2>

All refreshable braille devices are hardware that display tactile braille by moving up and down sets of pins to represent the dots in braille. Almost all braille devices have 8 dot cells allowing for both classic 6 dot braille and for 8 dot braille systems. Above each 8 dot cell are cursor indicators that allow braille users to know where the cursor is in their document.

Keyboards on Refreshable Braille Devices

Most refreshable braille devices have a Perkins braille keyboard. Unlike on a QWERTY keyboard, the keys on a Perkins digital keyboard are oval shaped with the longest part of the oval running vertically. In the picture below the Perkins keys are the white ones. Perkins keyboards have nine keys. The key on the far left is the back key. Each of the 6 middle keys represent a dot in a braille cell. The key on the far right is the enter key. The middle key below the other 8 keys is the space bar.

The diagram below from the Perkins School for the Blind shows additional keys commonly found on refreshable braille devices. From left to right the functions of these smaller black, horizontal oval keys are: escape (F1), tab (F2), control (F3), alt (F4), break in row for spacebar above, shift (F5), insert (F6), Windows (F7), applications (F8). You'll notice that the enter (carriage return), and backspace keys are in the opposite positions to that on a classic Perkins braille writer (typewriter). The digital Perkins keyboard mimics modern QWERTY keyboards with the return key being on the right instead of the left.

<figure> <img src="/images/braille-perkins-keyboard-diagram.webp" alt="Perkins brailler keyboard labeled diagram. Complete description is above in the paragraph text."> <figcaption>Image Credit: <a href="https://www.perkins.org/resource/so-many-braille-displays-which-one-right-my-student-part-three/">Perkins School for the Blind</a></figcaption> </figure>

There's a newer refreshable braille display by HumanWare - the Mantis Q40 braille display has a QWERTY keyboard instead of a braille keyboard above it's 40 cell braille display.

Types of Refreshable Braille Devices

There are two main types of refreshable braille devices:

Braille display
Notetaker

1. Refreshable Braille Display

A refreshable braille display is primarily used as an input/output device for a computer, tablet, or smart phone. It displays what is on the external device as braille. Some also have text-to-speech screen readers which can announce the word(s) currently on the braille display.

Almost all refreshable braille displays have ebook reader functionality - users can download and save books onto both internal storage and SD card slots. Most refreshable braille displays can connect to more than one device at a time via bluetooth and/or usb connections - allowing users to read from their computers, tablets, and phones using just one output device.

Refreshable braille displays range in size from ultra portable 12, 14, or 20 cells to 40 to 80 cell ones used in the workplace and by writers.

To see how blind and low vision adult users use their refreshable braille displays take a look at the video below by Stuart Lawler on Sight and Sound Technology's YouTube channel

Like many of us during the pandemic, blind students switched to online learning. Refreshable braille displays allowed blind and low vision students that can read braille to access Google classroom. Have a quick watch of the video below by Dr Denise M Robinson to see how a student (Aubrey) accessed her Google classroom in 2020 using a Focus 40, 40 cell braille display.

One of the most portable (and cute) refreshable braille displays is the HIMS Smart Beetle 14 cell braille display. The quick 2 minute video below shows Mycael an assistive technology content creator unboxing one. Though Mycael can't read braille, this is the best short and up to date video showing the Smart Beetle. (The device has been around for more than 7 years, so there's some long, really dry videos on this really cute device.)

The Mantis Q40 braille displayin the video in the keyboard section above is an example of a refreshable braille display. HumanWare's cute 35 second video ad below is worth a watch as well.

2. Braille Notetaker

Braille Notetakers are more than input/output devices and ebook readers. They function as standalone digital devices for note taking, file management, and productivity applications such as calendars. Some are full functioning Windows laptop computers that can be hooked up to an external monitor - just like a laptop computer can be connected to an external display.

There are also Android braille notetakers, that function a lot like Chrome Books for students. The majority of braille notetakers can also work as refreshable braille displays for external devices such as other computers, smart phones, and tablets.

The B.BOOK Braille Notetaker in the short, 3 minute video embedded below is a full functioning Windows laptop computer.

Other Digital Braille Display Devices

Technology advances fast! One of the most promising cutting edge digital braille display devices are multi-line and tactile graphics displays such as the Monarch by Humanware, and Dotpad by Texas Instruments. Both allow users to read braille more like a book or a full screen of text as well as to access visual data through tactile graphics.

Monarch by HumanWare

DotPad by Texas Instruments

<h2 id="code">How to Code for Refreshable Braille Device Accessibility</h2>

Writing code that's accessible for refreshable braille device users is the same as writing accessible code for text to speech screen readers, and other assistive tech devices. Devs are busy, so here's a quick scannable list.

Basics

Provide a skip navigation / skip to main content link before any page content. That allows refreshable braille device users to skip hearing all the navigation menu option and just get to your main content.
Use semantic html instead of getting lost coding an endless sea of <div>s.
- Use only one <h1> per page.
- Don't skip heading levels.
  - Correct: <h1> , <h2> , <h2> , <h3> , <h3> , <h2> ,
  - Incorrect: <h1> , <h2> , <h4> , <h3> , <h2> , <h2> ,
- Style headings with css not with html tags. If you need to have a certain heading level visually look like another use a css utility class, or change your Tailwind CSS for that element if you're using Tailwind.
Use semantic landmarks - <main> , <article> , <section> , <aside> , <nav> ,

ARIA

Don't use ARIA - unless you really know what you're doing. Bad ARIA breaks things and is worse than not using it.
If you want to start learning some ARIA Ben Myers's article "aria-label, aria-labelledby, and aria-describedby: What's the Difference?"published on Dec 7, 2020 is a great start.

Symbols, Icons, Mathematics, Money,

Use UNICODE characters and not images for mathematics, scientific, coding, and money characters like ß (beta), brackets / parentheses, and money symbols (e.g. the British pounds sign £).
Use svgs for icons instead of unicode characters (e.g. the hamburger menu), and provide short alt text for them.
Have an outline for longer articles and single page apps with in-page links or a secondary navigation menu.

Forms

This is a very in depth and detailed topic, and too long for this article. It's important to do it right because forms are so much a part of accessing information today.
- One of the best resources on accessible forms is Rachele DiTullio's Structuring Accessible Forms She covers all common input fields, error handling, with an article, video (with captions and ASL), GitHub repo, codepen, and even pdf presentation.

Emojis

Avoid using a lot of emojis, multiple emojis in a row, and using emojis for bullet points.
Just like text to speech screen readers, refreshable braille devices read out the entire name for each emoji.
Try placing emojis at the end of lines instead of at the beginning.

<h2 id="references-resources">References and Resources</h2>

Braille

Anupam Kumar Garg Braille-8 Unified Braille Unicode System Article
Australian Braille Authority About Braille Article
The Braille Authority of New Zealand Aotearoa Trust (BANZAT) Braille Codes and Formats Article
Braille Authority of North America Codebooks and Guidelines | Braille Authority of North America
Braille Literacy Canada | Learn About Braille Article
Lucy Edwards I'm Blind, How Long Did It Take To Learn Braille? YouTube short
MADA Centre Quatar - Unified Arabic Braille Portal. Lesson1, 8-Dot Braille Basics
National Film Board of Canada The Evolution of Braille: (nfb.org) Article
Perkins School for the Blind Perkins Brailler Article
Royal National Institute for the Blind (RNIB) Learning braille with Jessica and Isabella
Unsightly Opinions "What is it? What does it cost? Blind braille display" YouTube short

Refreshable Braille Devices

APH American Printing House. Introducing Chameleon 20: A 20-Cell Refreshable Braille Display (youtube.com)
Brailler Depot store Hims Smart Beetle 14 Cell Braille Display
Bureau of Internet Accessibility How Braille Displays Help Users with Visual Impairments Access the Web
Freedom Scientific shop Braille Displays & Notetakers – Freedom Scientific eStore
HumanWare store [Mantis Q40 braille display](https://store.humanware.com/hus/mantis-q40.html
HumanWare store Braille Notetakers
Inclusive Design Research Centre OCAD University Refreshable Braille Display
MSN News [Tech I can't live without: ](Tech I Can't Live Without: Mantis Q40 Braille display (msn.com))
Perkins School for the Blind An overview of Braille Devices Article
Perkins School for the Blind So Many Braille Displays, Which One is Right for My Student: Part Three

Coding and Digital Accessibility Resources

A11y-101 Development | Introduction to Accessibility
Ben Myers aria-label, aria-labelledby, and aria-describedby: What's the Difference?Dec 7, 2020
Geoff Graham A Roundup Of WCAG 2.2 Explainers Smashing Magazine Oct 20, 2023. Article: estimated 6 min read
Vitaly FriedmanA Complete Guide To Accessible Front-End Components Smashing MagazineArticle with code snippets. Updated May 25, 2022
- Documentation collection with code snippets for different UI elements and front end functionality.
- All have code snippets and most have videos
Jason Fox UX Content Collective [Accessible content design for emojis]https://uxcontent.com/accessible-content-design-for-emojis/
David A. KennedyThe A11y Project What is Semantic HTML?
Mozilla Developer Network Semantics
WAI - Web Accessibility Initiative WCAG at a Glance
WebAIM Screen Reader User Survey #10 Results

Note: While I grew up around vision loss with my mom's retinas tearing for the first time when I was four, I can't read braille, and don't use refreshable braille devices. I did teach myself some braille when I was in elementary and high school because doctors told me I'd likely become low vision or blind like my mom. This article is based on my research, studying to become a certified web accessibility professional, as well as my experience in the disability community and as a developer passionate about digital accessibility ("a11y"). If you're a braille reader I welcome updates and corrections to this article!

Resources from Quick Accessibility Tips for Devs Tech Talk

Wed, 21 Feb 2024 00:00:00 GMT

This is a list of resources to accompany my tech talk "Quick Accessibility Tips for Devs". It includes extensive "Disability 101" resources, as well as developer specific coding resources.

<a href="#disability-101">Disability 101</a>
1. <a href="#disability-culture">Disability Culture</a>
2. <a href="#disability-isnt-bad">Disability Isn't a Bad Word</a>
3. <a href="#disability-fluid">Disability Is Fluid not Static</a>
4. <a href="#inspiration-porn">Inspiration Porn</a>
5. <a href="#deaf-deafblind">Deaf/deaf, and DeafBlind</a>
6. <a href="#neurodivergent">Neurodivergent</a>
7. <a href="#disability-isnt-bad">Disability Isn't a Bad Word</a>
8. <a href="#braille">Braille</a>
9. <a href="#disabilities-prefering-reduced-motion">Disabilities Preferring Reduced Motion</a>
10. <a href="#service-dogs">Service Dogs</a>
<a href="#a11y-principals">Accessibility Principals</a>
<a href="#wcag">WCAG: Web Content Accessibility Guidelines</a>
<a href="#aria">ARIA</a>
<a href="#overlays">Accessibility Overlays - Don't Use Them!</a>
<a href="#assistive-tech">Assistive Technology</a>
1. <a href="#refreshable-braille-displays">Refreshable Braille Displays</a>
2. <a href="#low-vision-blind-tech">Low Vision and Blind Tech Use</a>
3. <a href="#mobility-assistive-tech">Mobility and Assistive Technology</a>
<a href="#code-resources-for-devs">A11y Code Resources for Devs</a>
1. <a href="#general-a11y-code-resources">General and Comprehensive Coding Resources</a>
2. <a href="#prefers-reduced-motion">Prefers Reduced Motion - Accessible Animations</a>
3. <a href="#keyboard-a11y">Keyboard Accessibility</a>
4. <a href="#skip-nav">Skip Navigation / Skip to Main Content</a>
5. <a href="#neurodiverse-code">Neurodiversity Code Resources</a>
<a href="#a11y-dev-tools-dev-resources">A11y Dev Tools and Dev Specific Resources</a>
<a href="#companies-to-follow">Accessibility Companies and Organizations to Follow</a>
<a href="#a11y-courses-cert">A11y Courses and Certification Resources</a>

<h2 id="disability-101">Disability 101</h2>

<h3 id="disability-culture">Disability Culture</h3>

Culture includes the shared ways of life, customs, and beliefs of a particular group of people at at particular time. Many disabled people have shared experiences living with disability and confronting ableism and inaccessible environments on a daily basis. Also, many of us feel the connection to the history of the disability rights movement. It's important to remember that not every disabled person is the same, nor has the same views! Disability is part of the diversity of humankind.

Disability vs. The Apocalypse with Jessica Kellgren-Fozard

Hannah Witton
11:57 <iframe width="350" height="197" src="https://www.youtube.com/embed/g7qNyf3qcpg?si=r65wi9IjI3yOuCt6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

3 Ways Disability Culture Has Been Changing

Forbes.com
Andrew Pulrang
Sep 23, 2021,01:10pm EDT

Crip Camp -the movie

1hr:46min
2021 Oscar-nominated film.
On the heels of Woodstock, a group of teen campers are inspired to join the fight for disability civil rights. This spirited look at grassroots activism is executive produced by President Barack Obama and Michelle Obama.

Am I Disabled Enough? // ft. Hannah Witton

Jessica Kellgren-Fozard
16:34

Disability Social History Project – Disability History, Culture, Art, and Media

Website
Strong American focused project, with attention paid to Black disabled American culture and history.
- The intersectionality of disability with race is an often overlooked topic in disability rights, culture, and history.
The resources page has an extensive list of resources on disability history and culture in multiple formats.

Deaf Culture

Deaf culture is one of the strongest, and the most referred to examples of disability culture as there is also a shared language between Deaf people who use the same sign language (e.g. American Sign Language, AusLang - Australian Sign Language, BSL - British Sign Language). There is a dedicated section below for Deaf culture.

Marlee Matlin on Cochlear Implants and Deaf Culture

World Science Festival
3:07 <iframe width="350" height="197" src="https://www.youtube.com/embed/S2Dqvd1Zk3M?si=gV_wal_R-wiyXXPL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

What is the difference between deaf and Deaf?

Article
Sign Health UK

Deaf culture | Canadian Hearing Services (chs.ca)

Canadian Hearing Services
Very short article with definitions

What is Black American Sign Language?

The Language & Life Project
1:27

13 Things My Hearing Friends Should Know International Week of the Deaf CC

Jessica Kellgren-Fozard
8:16.
Jessica is signing in BSL (British Sign Language)

Deaf vs Hard of Hearing - What's the Difference?

Jessica Kellgren-Fozard
6:06

Spoonie Culture

Many disabled, neurodiverse, and/or chronically ill people also identify as "spoonies" - those that have to ration their energy throughout the day. The term "Spoonie" comes from The Spoon Theory by author and activist Christine Miserandino who used spoons while at a diner with her friend to answer her friend's question on what it is like to live with Lupus.

Spoon Theory

Lucy Edwards
YouTube short

What Is A Spoonie? // The Spoon Theory

Jessica Kellgren-Fozard
11:42
Uses the Sims to explain Spoon Theory!

Ehlers-Danlos Syndrome - Zebra Culture

Many of us with one of the 13 forms of Ehlers Danlos Syndrome or Hypermobile Spectrum disorder also have a strong disability culture because of the extremely long time to diagnosis (average of 10-12 years), prevalence of medical PTSD and medical gaslighting, the fluctuating nature of EDS symptoms (somedays it's visible, some days our EDS is invisible), and the use of the Zebra as our mascot and name for ourselves. See the article and video below about EDS and Zebras. Also 90% of people with EDS are biologically female, so there's the shared experience of women dealing with the medical field, and also wanting mobility aids to be fashionable and not boring beige.

Why the Zebra?

People with the Ehlers-Danlos syndromes (EDS) and hypermobility spectrum disorders (HSD) often identify themselves as zebras.
The Ehlers-Danlos Society
Article

We Are Zebra Strong

Chronically Jenni
2:25

Where does the EDS Zebra Come From?

Ehlers Danlos and I
1:59

'I got online hate for not being disabled enough'

Sky News UK
Jessica Kellgren-Fozard
Note: Like many people with Ehlers-Danlos Syndrome it took years for Jessica to be correctly diagnosed. She didn't have her EDS diagnosis at the time of this video.

Living with Hypermobile Ehlers Danlos Syndrome + Our Mobility Aids ft. Martina

Annika Victoria
17:56

CODA - Child of Deaf Adults

A CODA is a Child of Deaf Adults. About 90% of children of Deaf adults are hearing. They navigate the hearing and Deaf cultures and languages. They often don't identify with either the Deaf or the hearing community as they sign with their families and talk with the outside hearing world. Some report their experiences are akin to second generation immigrant children.

Deaf Parents Explain the Meaning of CODA

Samantha Lande
Updated on February 27, 2023
Parents Magazine.
Article with embedded video (6:46)

ASL Teacher Breaks Down CODA Movie

Learn How to Sign
12:49 <iframe width="350" height="197" src="https://www.youtube.com/embed/3j3eP-fJUAw?si=F3i-IsSWUzAxTKp_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Improving Deaf Representation In Hollywood Is A Lifelong Mission For "CODA" Star Marlee Matlin.

The Late Show with Stephen Colbert
6:00

<h3 id="disability-isnt-bad">Disability Isn't a Bad Word</h3>

Disability and disabled are neutral adjectives used to describe people - just like red hair, tall, freckled are. However, there's been a move by non-disabled people to remove the words disabled and disability from everyday discourse because wider society sees these words as negatives. They are not.

“I don’t even think of you as disabled!”

Footless Jo
9:22 <iframe width="350" height="197" src="https://www.youtube.com/embed/evj4RJDr-JI?si=q3X6n4BTU29rEXm7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Disability is not negative

Jessica Kellgren-Fozard
YouTube short

“Disabled” isn't what you think it is

Footless Jo
YouTube short

‘Disabled’ is not a bad word. Stop telling people with disabilities it is

Sacha Dekker
The Irish Times
Tue Apr 26 2022

<h3 id="disability-fluid">Disability is Fluid, not Static</h3>

Disability symptoms and the required assistive tech, mobility and other aids, vary day to day, hour to hour and in different environments.

Ambulatory Wheelchair Users Exist! Why I use a wheelchair when I can walk! wheelchair = giving up?

Elinor Brown
17:14

My Mobility Aids as an Ambulatory Wheelchair User

Stela Sulzdorf
17:40

Spoon theory: What it is and how I use it to manage chronic illness

Perspective by Fortesa Latifi
The Washington Post
January 14, 2023 at 6:00 a.m. EST

The Spoon Theory written by and spoken by Christine Miserandino

Christine Miserandino
13:33

The Spoon Theory

The original Spoon Theory article by Christine Miserandino

<h3 id="inspiration-porn">Inspiration Porn</h3>

Inspiration Porn is the term used to classify the portayal of people with disabilities as inspirational solely or in part on the basis of their disability. ~ Stella Young

Inspiration porn is the objectification of disabled people for the benefit of able bodied people.

Inspiration porn and the objectification of disability:

Stella Young at TEDxSydney 2014
9:26
Highly recommended.
This is one of the most referred to talks on inspiration porn. <iframe width="350" height="197" src="https://www.youtube.com/embed/SxrS7-I_sMQ?si=PbfeSCLs5Rhimp42" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Can We Stop Saying People With Disabilities Are Inspirational?

BBC Three
1:20

Inspiration P-rn: Oscar Bait!

Jessica Kellgren-Fozard
37:36

<h3 id="deaf-deafblind">Deaf/deaf, Deaf culture, and DeafBlind</h3>

You will see many people in the disability and Deaf/deaf communities using both "Deaf" with a capital "D" and deaf with a lowercase d. Capitalized Deaf refers to members of the Deaf culture who use a sign language to communicate.

Lower case "deaf" refers to the medical condition of being deaf.

"Hard of hearing" refers to people with some hearing loss and/or tinnitus (ringing in the ears) that gets in the way of hearing clearly in some or all environments.

I'll Scream Later | Marlee Matlin | Talks at Google

39:47
Marlee Matlin

Communicating with Deaf/deaf and Hard of Hearing People

If you're a hearing person without experience with Deaf/deaf and Hard of Hearing people here are some resources to help you communicate with Deaf/deaf and Hard of Hearing people.

25 ASL Signs You Need to Know | ASL Basics | American Sign Language for Beginners.

Learn How to Sign
6:33

Cardzilla app

Text to speech and typing in large text.
Designed by and for the Deaf community for use with hearing people that don't know sign language. Free
Because the text automatically resizes to fill the screen, Cardzilla decreases the need to hand your phone to other people to read.
Also very good to have at loud events such as developer conference after parties!

Things Not To Say To A Deaf Person

BBC Three
5:58

Dos and Don'ts of Interacting with the Deaf Community

Crissy Marshall
Turn on closed captions! Crissy only uses ASL (American Sign Language)
7:02

Sign Language Myth Busters -Meeting a Deaf Person

Merge NZ - New Zealand Sign Language
3:36

Learn How to Sign - ASL

YouTube channel dedicated to teaching ASL American Sign Language

Deaf Culture

Lesser-known things about deafness

Article
Charlie Swinbourne
BBC
6 August 2014

The Limping Chicken

"The world's most popular deaf blog! Laying eggs since 2012"
Charlie Swinbourne

ASL Grammar and the Deaf Community

Rogan Shannon
6:29
Turn on closed captions! Video is in American Sign Lanuage.

'Am I Deaf Enough?' Short Documentary Film

Leah Byrne
16:38
A documentary following a journey to self-acceptance.
In collaboration with CDM Dublin & TU Dublin University
Leah Byrne on LinkedIn

DeafBlind

My braille computer died. It’s more difficult than you think

Haben Girma
7:36

DeafBlind people are creating a new language |

American Masters | PBS
17:59

Deaf, Blind and Awkward // Helen Keller

Jessica Kellgren-Fozard
17:34

Meet the Deaf-Blind Lawyer Fighting For People With Disabilities

[PopSugar]('Selling the OC' Cast Reveals What Reality TV Won’t Show You | POPSUGAR (youtube.com))
4:52

An interview with Haben Girma,

the first deaf-blind person to graduate from Harvard Law - New Day NW.
KING 5 Seattle
12:08
Shows Haben using her braille computer and translator

Hard of Hearing and Tinnitus

People who are hard of hearing and/or have tinnitus (ringing in the ears), often use technology differently than those that are Deaf/deaf.

What is Tinnitus and How is it Treated?

Canadian Hearing Services

8 Facts About Hearing Disabilities and Web Accessibility

Bureau of Internet Accessibility)
Article <h3 id="neurodivergent">Neurodivergent</h3>

Neurodivergent refers to people with Autism, ADHD, post traumatic stress disorder (PTSD), and learning disabilities such as dyslexia, dysgraphia, and dyscalculia. It is a non-medical umbrella term referring to people who's brains work and/or are structured differently than "neurotypical" brains.

What Exactly is Neurodiversity?

Jessica from How to ADHD
6:03
Note:
- Research provided by: Farah Mahmud, M.S. Doctoral Candidate, Clinical Psychology
- Research consultant: Dr. Patrick LaCount

What is ADHD?

Jessica from How to ADHD
3:27

Demystifying autism and overstimulation | Inside Our Autistic Minds

BBC
4:14

Tensions build between autism researchers and the autistic community

BBC Newsnight
6:34

Not Stimming is MORE dangerous than you think...

Meg from I'm Autistic, Now What
26:58 The Best Theory of Autism you've probably NEVER heard of...
Meg from I'm Autistic, Now What
36:18

I Have ADHD - "My Own Worst Enemy" Parody

Holderness Family Music
4:58

What it's like having Dyscalculia Dyslexia with numbers

Jeremy Andrew Davis
YouTube Short

Dealing with app Accessibility

Jeremy Andrew Davis
2:28

<h3 id="braille">Braille</h3>

TEACHING KARLIE KLOSS HOW TO READ BRAILLE!

Molly Burke
17:21
Karlie is the founder of Kode With Klossy, a coding initiative that works to increase access to computer science education and opportunities for young women. She's also a supermodel and entrepreneur.
This video is looks at learning braille just like you'd learn other coding languages.

Braille: What is it like to read without sight? – BBC REEL

BBC Reel
6:22

The incredible story of the boy who invented Braille

BBC Ideas
3:30

Introducing LEGO Braille Bricks – Play with Braille

Lego
4:12

Lucy Edwards: Is it hard to learn braille?

Lucy Edwards
YouTube short

Lucy Edwards: How do you type on a braille keyboard?

Lucy Edwards
YouTube Short

How To Read & Write Braille + The History of Braille!

Molly Burke
21:07min

How the braille alphabet works

Perkins School for the Blind
Article with graphics

<h3 id="blind-low-vision">Blindness and Low Vision</h3>

What can my blind husband see? (detailed simulation)

Mathew and Paul
10:52

Stargardt Disease / Macular Degeneration - How I See

The Blind Life
9:16

Scent Of A Woman - "Are you blind?!"

0:47
Shows how to do sighted guide

How Blind People ... YouTube Playlist

James Rath
23 Videos

7 Benefits of a White Cane - Blind & Visually Impaired

Blind on the Move
6:09
Note: White canes are also called "long canes" as they now come in different colours (just like shoes and clothes!)

How to use Siri on iPhone to Confirm and Check Location

Blind on the Move
2:58

Eye Floaters and Flashes, Animation

Alila Medical Media
3:17
Can be caused by retinal detachment and holes.
Note: I have these in my right eye after my retinal surgery.
It's the main reason I prefer dark mode, and one of the reasons I at times prefer reduced motion.

What are those floaty things in your eye? - Michael Mauser

TED-Ed
4:04

A (Blind-Accessible) History of Blind Gaming

Paper Will
16:41

How Blind Gamers Play Nintendo Switch

James Rath
7:49

<h3 id="disabilities-prefering-reduced-motion">Disabilities Preferring Reduced Motion: <br>Migraines, Dysautonomia, Epilepsy, Seizure Disorders, Vestibular Disorders, Chronic Fatigue/ME</h3>

There are many underlying reasons that users would prefer reduced or no motion on their sites and apps. Motion can trigger migraines and cause pain and discomfort for people experiencing a migraine. Note that migraines are not "bad headaches". They are a neurological condition that causes numerous symptoms including: "brain fog", pain, dizziness, light and/or sound sensitivity, nausea, blurred vision, and more.

Motion can trigger epilepsy and other seizure disorders. Though not as common as other disabilities, seizures can be life threatening so it's important to have an alternative to web animations.

Dysautonomia is the autonomic nervous system not working properly. There's many symptoms of dysautonomia, but the main ones developers should be concerned about is dizziness and vertigo. The vestibular system is responsible for balance and spatial orientation. Vestibular disorders cause people to be dizzy and in some cases vertigo.

What is Dysautonomia?

Web accessibility for seizures and physical reactions

Mozilla Developer Network

FOUR STAGES of a MIGRAINE ATTACK

Momming with Migraine
13:22

History of the Disability Pride Flag

Colour contrast and migraines
Article

Day in the Life With POTS

Izzy K DNA
(POTS is postural orthostatic tachycardia syndrome - dysautonomia).
Izzy is a Board-Certified Cardiovascular Genetic Counselor.
She has hEDS, POTS (dysautonomia), and other common EDS comorbitities.

I Filmed My Chronic Migraine

Jessica Kellgren-Fozard

The Reality of Migraine:

RAW FOOTAGE & my Real Reaction to Seeing a Migraine for the First Time
Jen from Momming with Migraine.
- (Yes, yet another woman with EDS, and dysautonomia / POTS)
Note: Jen finally has a correct diagnosis (high cranial pressure). The symptoms are very similar to migraines, and she still has migraines. This is one of the only videos out there showing someone going through a migraine.

The Most Prevalent Illness You’ve Never Heard Of! // Severe ME/CFS

Jessica Kellgren-Fozard

<h3 id="service-dogs">Service Dogs</h3>

Realities of Working a Service Dog

DOGGY•U
10:01

Breaking down Ontario’s service animal laws after violent dispute at Kitchener restaurant

CityNews article with embedded video

Guide Dog Legislation

CNIB Canadian National Institute for the Blind.
Covers all 10 provinces and 3 territories

<h2 id="a11y-principals">Accessibility Principals: P.O.U.R.</h2>

The four accessibility principals that WCAG is based on and that the majority of A11y professionals user are summed up by the acronym "P.O.U.R.":

Perceivable,
Operable,
Understandable,
Robust

POUR: The 4 principles of accessibility

Government Digital Service UK
2:27

Accessibility Fundamentals Overview

City University of New York. Accessibility Toolkit for Open Educational Resources (OER): Accessibility Principles

Article with links and embedded video

Usability Guidelines for Accessible Web Design

Kara Pernice and Jakob Nielsen
PDF report - 152 pages

Keys To An Accessibility Mindset

Daniel Yuschick
Smashing Magazine
Feb 20, 2023
Article - 14 min estimated read

<h2 id="wcag">WCAG: Web Content Accessibility Guidelines</h2>

The Web Content Accessibility Guidelines (WCAG) are a shared, international, open source, technical standard for web accessibility. Many national and regional governments base their accessibility laws on WCAG.

https://www.w3.org/WAI/standards-guidelines/wcag/glance/

WCAG at a Glance

A Roundup Of WCAG 2.2 Explainers

Geoff Graham
[Smashing Magazine](https://www.smashingmagazine.com/
Oct 20, 2023
Article: estimated 6 min read

ARIA stands for "Accessible Rich Internet Applications". ARIA are attributes you can add to html elements to enhance their accessibility. The first rule of ARIA is don't use aria! HTML is semantic by default.

ARIA Landmarks Example: WC3

aria-label, aria-labelledby, and aria-describedby: What's the Difference?

Ben Myers
Dec 7, 2020

What the Heck is ARIA? A Beginner's Guide to ARIA for Accessibility

Kat Shaw
October 09, 20219

<h2 id="overlays">Accessibility Overlays - Don't Use Them!</h2>

Accessibility overlays are website add-ons that claim to fix A11y issues. However, they are horrid for users of assistive technology, slow websites down, don't protect against lawsuits, plus a host of other issues.

7 reasons accessibility overlays SUCK

Silktide
3:02

The Myth of Accessibility Overlays: Why They Are Not the Answer

Steve Levine
Home - Tamman Inc

Should I use an accessibility overlay?

The A11Y Project
March 8, 2021

<h2 id="assistive-tech">Assistive Technology</h2>

The Lows of High Tech

99% Invisible
Podcast, article, with multiple embedded videos

<h3 id="refreshable-braille-displays">Refreshable Braille Displays</h3>

Introducing Chameleon 20: YouTube Video

A 20-Cell Refreshable Braille Display by APH
American Printing House for the Blind
2:27

An Introduction to the Focus 40 Blue Refreshable Braille Display

Challenge Solutions
15:47
Detailed video on how refreshable braille displays work.

<h3 id="low-vision-blind-tech">Low Vision and Blind - Assistive Tech</h3>

How Blind People Use Technology (My Apple Products - An Introduction to Voice Over)

Unslightly Opinions
14:41

Be My Eyes

OG app - connecting blind and low vision people with sighted volunteers via smart phone video.
Be My Eyes
1:35

Be My Eyes - New AI

How ChatGPT4 is helping visually impaired people picture what they can't see |
ITV News
Featuring Lucy Edwards
- Note: Lucy and her husband are in the middle of home renovations

How I Use My iPhone Legally Blind | A's Accessibility Tips #1

Alisha B
6:32

How To: Work While Blind | Tech You Need

Alisha B
15:00

RNIB Assistive aids and technology

Website - list of more resources

<h3 id="mobility-assistive-tech">Mobility and Assistive Technology</h3>

Controlling a computer using a "mouth mouse"

a "sip and puff" device

Work Setup as a C5/C6 Quadriplegic

Journey with the Fosters

How I Move My Mouse with My Head

ALS 411

YouTube Playlist Computer Control: Full Computer Access via Eye Gaze

3 videos.
Total playtime under 30 minutes

What's Wrong With My Hands?! | All About Ring Splints for EDS

Robin Hahn (hEDS)

A11y Code Resources for Devs

Here are some dev specific resources to make your code more accessible. Almost all of the resources below are articles with code snippets.

<h3 id="general-a11y-code-resources">General / Comprehensive</h3>

A Complete Guide To Accessible Front-End Components

Vitaly Friedman
Smashing Magazine
Updated May 25, 2022

Structuring Accessible Forms

Rachele DiTullio
Talk, video, blog post, codepen, GitHub repo
Very comprehensive accessible forms resource
Video from 2023 has live ASL and captions
Cat themed!
Covers:
- Create and label form fields of different types
- Group related form fields, like radio buttons
- Mark form fields as required
- Handle input errors
- Verify data integrity <iframe width="350" height="197" src="https://www.youtube.com/embed/hc_mWh4T2bE?si=AgE2y8LpGcvTmBBf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Development | Introduction to Accessibility

A11y-101
Documentation collection with code snippets for different UI elements and front end functionality.
All have code snippets and most have videos

How to Build Accessible Vue.js Applications

The A11y Webring Club

A web ring for digital accessibility professionals.
Tons of coding resources.
This site is a member

<h3 id="prefers-reduced-motion">Prefers Reduced Motion - Accessible Animations</h3>

Creating Accessible UI Animations

What is Motion Sensitivity? How to Design Accessible Web Animations

Elizabeth - DEV Community (Not me. She's another Elizabeth)
DEV Community
Feb 08, 2024
Top post of the week at Dev.to

Disable any animations in Angular by prefers-reduced-motion

<h3 id="keyboard-a11y">Keyboard Accessibility</h3>

A Guide To Keyboard Accessibility: HTML And CSS (Part 1)

Cristian Díaz
Smashing Magazine
Nov 14, 2022
Article - 28 min estimated read

A Guide To Keyboard Accessibility: JavaScript (Part 2)

Cristian Díaz
Smashing Magazine
Nov 14, 2022
Article - 28 min estimated read

How to build an accessible navigation menu

Elizabeth - DEV Community (Not me. She's another Elizabeth)
DEV Community

<h3 id="skip-nav">Skip Navigation / Skip to Main Content</h3>

How-to: Use skip navigation links

Skip link | Introduction to Accessibility

A11y-101
Article with code snippets

A11Y 101: Adding skip links

How to Create a “Skip to Content” Link

Paul Ryan
Mar 17, 2020 (Updated on Aug 25, 2021)
CSS Tricks

<h3 id="neurodiverse-code">Neurodiversity Code Resources</h3>

Neurodiversity Design System

The NDS is a coherent set of standards and principles that combine neurodiversity and user experience design for Learning Management Systems. Design accessible learning interfaces to support success and achievement for everyone.
Covers:
- Numbers,
- font,
- typography,
- colour,
- buttons, links, inputs
- interface
- communication
- Animations

ARIA Code Resources

aria-label, aria-labelledby, and aria-describedby: What's the Difference?

Ben Myers
Article with code snippets

ARIA - Accessibility | MDN

Mozilla Developer Network

A11y Dev Tools and Dev Specific Resources

Axe VS Code A11y Linter

Deque.com

Free trial of axe DevTools Pro | Deque Systems

"Start testing your web app in just minutes. Join over 400k users and try the axe DevTools browser extension for free today."

Assistiv Labs 14 Day Free Trial

"Instantly test how accessible your experience is with the real assistive technologies your disabled users rely on — screen readers, magnifiers, and more — from any computer."

Lighthouse | Chrome for Developers

Docs: Accessibility Audit

Storybook.js.org

Frontend workshop for building UI components and pages in isolation.
A11y addon
- Helpful to make your UI components more accessible.
Accessibility tests • Storybook docs

Cauldron React: Accessible Components Library

Deque Systems
Open source
"Friends don’t let friends ship inaccessible code! Cauldron is designed with accessibility in mind, including styles covering everything from typography to colors, and React components that are designed to be inclusive of all users. Additionally, Cauldron's React components are designed to include full screen reader and keyboard navigation support."

WAVE

by Web AIM
"a suite of evaluation tools that helps authors make their web content more accessible"
"can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content."

Web Disability Simulator - Chrome Web Store (google.com)

ARC Platform - TPGi

"Empowerment across the accessibility workflow in a single, extendable, unified platform. Built to create efficiencies, effectiveness, and collaboration."

Getting started with web accessibility with Ashlee Boyer

Kevin Powell
30:28 You Suck At Accessibility (But You Don't Have To)
Web Dev Simplified
13:22

Accessibility Companies and Organizations to Follow

Fable https://makeitfable.com

Deque https://www.deque.com/blog/save-the-date-for-axe-con-2024/

Assistiv Labs https://assistivlabs.com

Tetralogical https://tetralogical.com

TPGi - Your Digital Accessibility Solutions Partner!

Level Access

Level Access
Level Access: Resources overview page
Note: Level Access just bought an accessibility overlay company so there's been great (and often heated) debates on Level Access' current and future role in the professional A11y community.

CNIB Canadian National Instutite for the Blind

RNIB Royal National Instutite of Blind People

Canadian Hearing Services

Canadian Hearing Services
Has online ASL (American Sign Language) courses several times a year.

A11y Courses and Certifications

Courses

Digital Accessibility Foundations

Free

React Accessibility

by Kiara Contreras LinkedIn Learning
free with LinkedIn Premium

Deque University Digital Accessibility Courses & Accessibility Reference Library

Paid. Subscription options
1 year scholarship available for disabled, neurodivergent, and Deaf/deaf applicants.
- Scholarship application

Certification

Certified Professional in Web Accessibility (CPWA) International Association of Accessibility Professionals (IAAP)
1. Fee for two exams
2. Study resources (free):
  1. Certified Professional in Accessibility Core Competencies CPACC Body of Knowledge
  2. IAAP Web Accessibility Specialist (WAS) WAS Body of Knowledge
Section 508 Trusted Tester certification Free, but a lot of work. Covers a very broad range of in depth digital accessibility topics, not just web accessibility.
1. Section 508 Trusted Tester enrollment portal
2. Required: Microsoft Windows 10, and one of MS Edge, Mozilla Firefox, Google Chrome
3. ** New standards are being implemented in 2024. Enrollment starts sometime after April 01, 2024.

https://www.dhs.gov/trusted-tester

An Introduction to Text to Speech and Screen Readers for Developers

Wed, 24 Jan 2024 00:00:00 GMT

During my online tech talk on Monday I was asked about how developers could go about experiencing what it's like to use a screen reader and text to speech (TTS). So here's a guide with links and resources to get you started. We'll go over the built-in text to speech in MacOS and Windows 10 and 11, the read aloud and immersive reader in the Edge browser, and give you some resources to try out the open source, free NVDA screen reader.

<h2 id="#contents">Contents</h2>

<a href="#introduction">Introduction</a>
<a href="#mac-os">MacOS Text-to Speech</a>
<a href="#windows">Windows 10 and 11 Text to Speech</a>
<a href="#edge">Edge Browser</a>
<a href="#nvda">NVDA: Non-Visual Desktop Access</a>
<a href="#resources">Resources</a>

<h2 id="#introduction">Introduction</h2>

You may be wondering what the difference is between text to speech and screen readers. Text to speech is exactly that a computer reading the text on the screen to the user. With the rare exception, text to speech functionality includes automatic scrolling. Many can also highlight the sentence, paragraph, and/or the word being read. Screen readers have much more functionality than text to speech. They read alt text of images, and allow users to navigate web pages applications and operating systems.

Text to speech is useful for a wide range of people:

Those with low vision who can still use a mouse and prefer to do so,
People with dyslexia or other reading based disabilities. This includes ADHD as the focus issues that come with ADHD can affect reading.
Busy people (e.g. developers!) who want to do housework, workout, or other tasks while reading.
Those who learn best while listening
People who enjoy doing crafts such as knitting and/or need to fidget while learning.
People with an injury that limits them from interacting with the mouse or pointer. For example, sore wrists from coding all day, sprained wrists or fingers, broken bones.

Screen readers and are used by people who:

Are blind or low vision
- Some blind or low vision people use refreshable braille displays allowing them to read instead of listen.
- Refreshable braille displays have pins that pop up or down to display braille letters and words. I'm working on another article about braille and refreshable braille displays. But if you'd like to learn more now, this article by the American Federation for the Blind has more information about refreshable braille displays.
Cannot use a mouse pointer

Two screen readers dominate the market:

NVDA - "Non-Visual Desktop Access"
JAWS - "Job Access With Speech"

NVDA is free and open source, so that's the one we're using here.

MacOS, Windows, iOS, and Android have other built in accessibility features, including the MacOS and iOS VoiceOver screen reader. However, we'll be keeping things simple and focusing on desktop OS and applications: three built in text to speech options, and the most popular free and open source screen reader.

Developers will also want to check out the <a href="#resources">Resources</a> section at the bottom, and try out a free trial of Assistiv Labs remote accessibility testing. "Assistiv Labs remotely connects you to real assistive technologies, like NVDA, JAWS, and Windows High Contrast Mode, using any modern web browser."

Note: Applications Need to be Coded for Accessibility for Assistive Technology to Work!

Text to speech will not work on websites that use images of text, instead of actual text - like the code blocks on HackerRank or other DSA technical interview prep platforms. If you have a Hackerrank, Leetcode, AdaFace, or other DSA platform account login and try using MacOS text to speech to read any challenge. You'll notice it skips over reading variables and other essential information.

This isn't a limitation of text to speech. It's an accessibility fail of the websites, not of the assistive technology. There's also no alt text. Don't write applications like this. It's a class action lawsuit waiting to happen. There's also numerous other reasons to not write inaccessible applications - but if you're reading this article you likely want to make your apps accessible. < /rant>

<h2 id="mac-os">MacOS Text to Speech</h2>

MacOS has built in text to speech, as well as the VoiceOver screen reader. We're going to turn on just the text to speech.

To enable text to speech on MacOS:

Go to "Settings" > "Accessibility" > "Spoken Content"
Go to "Speak selection" and switch the toggle on
Click on the "i" on the right.
A small window will pop up with more options:
1. The default short-cut is "Option + Escape"
2. Click on "highlight content"
  1. Choose "words and sentences"
3. In "Sentence style" choose the "background colour" radio button
Click "Ok"

Text to speech is now enabled with the default system voice, reading speed, and your default system language. It will highlight sentences and the individual words it's reading.

To hear a sample of the default voice and reading speed:

Go to the main "Spoken Content" menu.
Click play sample.

To change the voice, and/or reading speed:

Go to "System voice" and click on the name near the double up down arrows.
Scroll down and select a new voice.
1. For humours sake we're going to first try out "Bruce" under "English (U.S.)".
2. Click outside the list of voices or press escape.
3. Now click "play sample"
4. Bruce will say "I sure like playing inside this fancy computer." in a very robot sounding voice.
  1. Don't worry, Bruce is an exception to the voice quality!
  2. He's just a funny option that made my students laugh.
5. Try changing the speaking rate by moving the slider towards the rabbit or turtle icon.
To choose a much nicer voice than Bruce:
1. Navigate back to the list of voices
2. Find your country or region
3. Choose an enhanced version of a voice
4. Repeat the process of going back up to change the speech rate.

To use MacOS text to speech:

Using any browser except Edge, go to a web page of your choice.
1. For simplicity try navigating to the A11y Study Group's <a href="https://www.a11ystudygroup.com" rel="noopener noreferrer" target="_blank">Accessible Websites Project homepage</a>
Press "Option and Esc"
Wait for a few seconds
Reading will start at the first paragraph.

MacOS text to speech will also work in (most) PDFs and VS Code. It will not work in Microsoft desktop applications such as MS Word.

<h2 id="windows">Windows 10 and 11 Text to Speech</h2>

When I first started using assistive technology with my former students in 2012, Apple had the best built in accessibility. This included a wide range of human sounding voices for text to speech. At the time Windows voices were robotic and annoying. However, that's changed as Microsoft ramped up its accessibility efforts. Now Windows accessibility surpassed MacOS. Also, as you'll see in the next section the Edge browser has some really great text to speech and reading features.

"Narrator" is Windows text to speech. It has more features than Apple's spoken content, including being able to be used with refreshable braille displays. As Microsoft has an easy to follow Complete guide to Narrator - Microsoft Support we'll just cover turning Narrator on.

To turn Narrator on:

Press Windows logo key + Ctrl + N
This will open Narrator setting menu.
Toggle on "Use Narrator".

To use Narrator:

Press "Windows logo key" + "Ctrl "+ "Enter".
This both starts and stops Narrator.

<h2 id="edge">Edge Browser</h2>

Edge has two built in functions that I use everyday:

Read aloud: text to speech
Immersive reader: shows only the text on the screen and can be used with or without read aloud

I find these especially useful when I'm studying for my Microsoft certified AI Engineer exam, and reading long articles.

To turn on read aloud:

Go to the address bar on Edge
Click on the capital "A" with the round lines over it.
The page will start to be read aloud

To turn on immersive reader:

Go to the address bar on Edge
On the far right of the address bar click on the open book with the speaker icon on it.
Immersive reader is now on. You have several options on the toolbar:
1. Read aloud - activates text to speech
2. Text preferences - you can change the font and theme of immersive reader
3. Reading preferences - you can turn on focusing on 1, 2, or 3 lines of text at a time, and translation
To turn off immersive reader click on the open book with the speaker icon on it again.

To change voices in read aloud.

Turn on read aloud. You can have immersive reader turned on or turned off.
Go to "Voice options" on the right side of the toolbar.
Change the reading speed or voice.
1. Note: Immersive reader is the only text to speech I've seen that has New Zealand English voices. So it's become my favourite text to speech.

Note: If you're using read aloud and navigate to the next page in a series of pages, the speech may continue from the location you finished at on the first page. Just refresh the page. This happens on websites such as Microsoft Learn.

<h2 id="nvda">NVDA: Non-Visual Desktop Access Screen Reader</h2>

NVDA is a full featured screen reader for Windows PCs. It allows blind and low vision users to access and interact with WindowsOS and both built in and some 3rd party applications. NVDA can be and is entire sets of courses, especially when you get into testing applications NVDA and fixing the code so things are more accessible. So this section is more of a list of resources to get other developers started.

A full list of features is is listed in the NV Access | About NVDA page. Unlike text to speech in MacOS, Windows, or Edge, NVDA allows users to install it on a USB thumb drive and use with any computer. It can announce text formatting such as size and bold, supports refreshable braille displays including ones that input braille. NVDA also has a talking installer - something essential for blind and low vision users to install it independently.

Tip: Make sure you have at least a couple or hours to half a day to get started! Using a screen reader is a steep learning curve, but well worth it.

You can download NVDA for free. Follow the NVDA 2023.3.2 User Guide (nvaccess.org) to get started setting up NVDA and learning how to use it.

I believe in not reinventing the wheel. So here's a well done video by Matt Isner, a JavaScript developer from Deque Systems: Web Accessibility Software, Services & Training on Accessibility Testing with the NVDA Screenreader focused on developers. Though it's from 2016, it's still relevant.

<h2 id="#resources">Resources</h2>

Here's a list of more resources to get you started with screen readers, text to speech, coding accessible components, accessibility testing and learning more about web accessibility (a11y).

WebAIM: Screen Reader User Survey #9 Results
NVDA GitHub repo
Web Content Accessibility Guidelines (WCAG)2.2
Fable blog
1. "Fable shares in-depth articles on accessibility and usability informed by both technical expertise and the lived experience of people with disabilities."
Fable blog: JAWS (Job Access With Speech) defined
Fable: # Assistive Technology Glossary
Deque: AxeCon 2024 accessibility conference
Deque: Blog
Deque: Accessibility Webinars
Deque: Accessible Components Library
Assistiv Labs remote accessibility testing
Assistiv Labs: Free trial signup page

Web Accessibility Certification For Developers

Wed, 17 Jan 2024 00:00:00 GMT

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:
- Three years hands-on experience in at least 10 of the 13 areas listed in the Pre-requisites section of this page.
- First-person responsibilities are “job tasks” that were established and verified by accessibility professionals and technical accessibility team hiring managers.
- Job Tasks with roles and responsibilities as outlined In the WAS Body of Knowledge.
Exam cost (US Dollars):
- Member/Retake: $430/$245.
- Non-Member/Retake: $530/$305.
- Emerging and Developing Economy/Retake: $225/$110.
Exam Information:
- 75 questions
- Multiple choice
- Two-hours (additional time may be requested as an accommodation)
- Computer-based
- Closed Book
To maintain certification:
- Take 35 Continuing Accessibility Education Credits (CAECs) on content related to the WAS Content Outline.
- CACE's can be earned by:
  - Attending classes, workshops, webinars, and other educational events.
  - Presenting educational materials outside your job function.
  - Publishing articles, books, blogs, or other publications.
  - Participating in formal Mentoring programs.
  - Speaking engagements at IAAP or other approved educational events.
  - Volunteer service with IAAP.

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](Trusted Tester Program Fact Sheet (dhs.gov)) 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](Home | Section508.gov) at [Training, Tools & Events](Accessibility Training, Tools, and Events | Section508.gov) Here are a few to get you started:

[Section 508 Awareness | Online course](Menu (section508.gov))
[Section 508 training videos](Accessibility Training | Section508.gov)
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

Site Updates - Building in Public

Sun, 14 Jan 2024 00:00:00 GMT

<h3 class="text-pink-800 mt-4">Recent Updates</h3>

<li>Changed the background colour</li>

<li>Added new custom fonts</li>

<li>Created both a desktop and a mobile header image in Figma</li>

<li>Added the new header image to a <span class="font-roboto-flex underline"><Link href="/hello-world">hello world page</Link></span></li>

<li>Take a look at the <a href="/hello-world">hello world page</a> to see the design.</li>

</ul>

<h3 class="text-pink-800 mt-4">Next Steps</h3>

<li>Get the layout of the header working with the new header image</li>

<li>Implement different header image for mobile and desktop</li>

<li>Fix the Open Graph image social previews</li>

<li>Add more content to the portfolio page</li>

<li>Add the card layout for blog posts. You can <a href="https://www.figma.com/file/3bD82HdEGIhSMOBJp6bBnj/GingerKiwi-All?type=design&node-id=371%3A2&mode=design&t=AsJ3U9SwR5xzg7zs-1">view the Figma designs here.</a></li>

</ul>

<p class="mt-6">Thanks to <a href="https://nikolovlazar.com" class="text-pink-800 hover:text-green-600 hover:text-lg underline">Lazar Nikolov</a> for his new <a href="https://egghead.io/courses/build-a-full-stack-blog-with-astro-7ffcf9ec" class="text-pink-700 hover:text-green-600 hover:text-lg underline">Astro Course </a> on Egghead.io which is the inspiration for my finally redeveloping my sites.</p>

Location Data and Geographical Information Systems GIS for Devs

Sat, 13 Jan 2024 00:00:00 GMT

Note: This article is mainly meant to be my master list of GIS and Geospatial resources to share with other developers. As such there's many links and only a small amount of my own commentary.

A recent LinkedIn repost of mine has gone a wee bit viral with over 4,000 views in a day. Four days later it now has over 6,500 views and 61 reactions - that's the most popular post in the last 365 years!

The original post by Juliana McMillan-Wilhoit was a comment on the end of ArcMap - a Geographical Information Systems (GIS) software by ESRI that has been around since 1999. My take on it was to share the similarities between artificial intelligence databases and what know from years of geomatics, GIS, and spatial data analysis - and to write alt text for the really awesome graphic.

I have a background in GIS and geomatics, did environmental surveying for the Ontario Ministry of Natural Resources, and had student jobs in spatial analysis in university. In 2019, I changed careers from education as an assistive technology specialist to going back to school for a postgrad program in Urban and Environmental Planning.

When I took some computer science courses to support going into the technical GIS and spatial analysis side of planning I discovered that software development was a way to use my passion and experience in accessibility. So I switched to information and computer sciences grad work, then continued with self and community teaching at the end of 2021. I'm now studying for my Microsoft Azure AI Engineer Associatecertification and Certified Professional in Web Accessibility certification (CPWA). Since spring 2022 I've been an active member and volunteer with TorontoJavaScript

I've seen several threads on TorontoJS Slack asking for help finding location data sets and dealing with spatial data analysis for Javascript applications. While I share some quick links, a Slack thread isn't detailed enough to give all the information and resources I'm sharing here.

Tip!: JavaScript developers look for "location datasets" or sometimes "map dataset" when looking for free data for web dev projects. But there's really no such thing as a "location dataset" in the field that has that information. Those datasets are called either spatial datasets or geospatial datasets. Location is a characteristic of individual data points in spatial datasets.

'location dataset' || 'map dataset' !=== 'spatial dataset' || 'geospatial dataset'

Here's information and links for developers to learn more about spatial (location) data, spatial data analysis, and geographical information systems (GIS). I've also included some resource on AI, especially Large Language Models (LLMs) and vector databases.

There's many references from ESRI (Earth Science Research Institute) because ESRI is like the Microsoft of GIS. It's Canadian headquartered in the Don Mills area of Toronto!

<a href="#definitions">Definitions</a>
<a href="#ai-vector-db">Similarities between AI vector Databases and GIS</a>
1. <a href="#what-are-ai-vector-dbs">What are AI vector databases?</a>
2. <a href="#learn-gis-to-learn-ai">How learning GIS and spatial data analysis fundamentals can help you learn AI</a>
<a href="#industry-standard-and-opensource-gis">Industry Standard and Open Source GIS</a>
1. <a href="#esri">ESRI Industry Standard GIS</a>
2. <a href="#qgis">QGIS Open Source</a>
3. <a href="#avenza">Avenza Innovative Toronto GIS Company</a>
<a href="#free-gis-spatial-data-analysis-training">Free GIS and spatial data analysis training</a>
1. <a href="esri-training">Free Training by ESRI </a>- Includes general GIS training, not just ESRI products
2. <a href="qgis-training">QGIS Free Training</a>
3. <a href="#avenza-training">Avenza Free Training</a>
4. <a href="#javascript-gis-training">JavaScript Specific Free GIS Training</a>
5. <a href="#postgis-training">Postgres (PostGIS)</a>
6. <a href="#python-gis-training">Python and GIS Free Training</a>
7. <a href="#Statistics and Maths Refreshers">Statistics and Maths Review Materials</a>
8. <a href="#other-free-training">Other Free Training Resources</a>
<a href="#free-spatial-datasets">Free Spatial Datasets</a>
<a href="#references-and-resources">References and more resources </a>
1. <a href="references">References</a>
2. <a href="#stats-book">Awesome Statistics Book</a>
3. <a href="#gis-resources">GIS Resources</a>
4. <a href="#ai-resources">Artificial IntelligenceResources - Focus on Large Language Models (LLMs) and accessibility.</a>
5. <a href="#a11y-and-ai">Accessibility and AI</a>

<h2 id="definitions">1. Definitions</h2>

Some of the definitions below are quoted directly from industry sources. Others are my own definitions from years of post-secondary geography and geomatics education, and from doing environmental surveying. Industry sources are referenced with accessible in-page links to the reference section.

Geographical Information Systems (GIS)
- Computer software that stores, analyzes and displays spatial (location) data.
Spatial data types can include:
- Point data: eg
  - location of a utility pole,
  - bird nesting site,
  - feral cat colony,
- Vector (line) data:
  - a road,
  - hiking trail,
  - bird migration route
- Raster / shape file (area / pixel) data:
  - a land parcel,
  - footprint of a building,
  - national park area
- Non-spatial data. For example
  - Who owns the utility pole,
  - What species of bird, and how many eggs it laid
  - How many people used the hiking trail last year,
  - Number of people infected with covid in a postal code
- Note: This is a very simple overview of data types and examples.
Geomatics:
- The science of the collection, storage, and analysis of spatial data, data relating to the earth's surface. This also includes space, especially in relation to satellites and space craft in earth orbit.
Spatial data:
- Any data with a location attached.
Spatial data analysis:
- "The process of examining the locations, attributes, patterns, and relationships of features in spatial data in order to address a question or gain useful knowledge." ~ ESRI <a href="#ref-esri-spatial-data-analysis" aria-label="link to reference"><sup>1</sup></a>
Layer:
- "Layers are the mechanism used to display geographic datasets in ArcMap, ArcGlobe, and ArcScene. Each layer references a dataset and specifies how that dataset is portrayed using symbols and text labels. When you add a layer to a map, you specify its dataset and set its map symbols and labeling properties." ~ ESRI <a href="#ref-esri-layers" aria-label="link to reference"><sup>2</sup></a>
Images / Imagery:
- Refers to non-map data such as aerial photographs (taken from planes or drones) and photographs taken from satellites.

<h2 id="ai-vector-db">2. Artificial Intelligence Vector Databases and GIS</h2>

This past Tuesday I watched a Microsoft Reactor live stream with LlamaIndex on "Building AI-powered Retrieval-Augumented Generation apps with LlamaIndex and Azure Cosmos DB". Laurie Voss, developer relations at LlamaIndex covered how Large Language Models (LLMs) work. LLMs convert data into numbers, specifically numbers that exist in vector space.

<h3 id="#what-are-ai-vector-dbs"> 2a. What Are AI Vector Databases?</h3>

Artificial Intelligence Large Language Models (LLMs) face a number of challenges including generating:

"hallucinating" - inaccurate information and/or information without common sense
irrelevant information
repetitive information
contradicting themselves
offensive or biased answers

"A vector database is a type of database that stores data as high-dimensional vectors, which are mathematical representations of features or attributes. Each vector has a certain number of dimensions, which can range from tens to thousands, depending on the complexity and granularity of the data." ~Microsoft Learn <a href="#ref-microsoft-vector-db" aria-label="link to reference"><sup>4</sup></a>

By storing related information together vector database (VBD) with more related information "closer" together, VBDs overcome many of the challenges that LLMs face.

Link to the section of the video that talks about vector db and LLMs

2b. Similarities Between AI Vector Databases and GIS?

There's a lot of similarities between AI vector databases and GIS. The following section barely grazes the surface, as the main point of this article is to share GIS and geospatial resources with other developers. However, if you're interested in learning AI, I hope this article will peak your interested in learning geospatial data analysis as well.

Data in a Geographical Information system has location data. By using spatial data analysis you can answer such questions as :

"Where are students most likely to be misplaced in self-contained special education classes?" (A project I did.)
Where are the locations in a city that are food deserts (no access to grocery stores) with poor public transportation have low income?
What has changed in this area since [date]?
How fast is an infectious disease spreading (eg. covid)?

Vector databases facilitate LLMs and other AI models in answering question by using "location" of data points. Data that is considered to be more related have a closer location than those not as related.

The two graphics above shows how AI vector databases looked very similar to a graphic of GIS layers. Laurie Voss's explanation of how AI's answer questions using vector databases had so many similarities with spatial data analysis.

Which answer is more likely depends on how spatially close the question or phrase is to the piece of data the AI uses to answer the user's question or complete a sentence.
Even though Voss didn't explain the mathematics of vector space, it should be the same or almost the same as that used in spatial data analysis.

There's only two main differences:

Locations of data points in AI vector data bases are human constructs, and not locations people could visit.
Artificial Intelligence vector DBs are a flat surface.
- Therefor there's no need to deal with data on an imperfect sphere, and what happens when you reach the geographic edge of your dataset but the actual data (that's not in your dataset) continues on over the surface of a sphere past the edges of your map.
- (If you're curious ask me about the "PacMan" spatial data sampling method.)

<h3 id="#learn-gis-to-learn-ai">2c. How learning GIS and Spatial Data Analysis Fundamentals Can Help You Learn AI</h3>

With all the similarities between LLM data storage and analysis in vector data bases and GIS, learning one can help you learn the other. There's other benefits too. Using programming languages that are popular in both AI and Geomatics (e.g. Python) in different contexts helps level up your coding skills. Also, there's overlap with smart devices and the internet of things (IoT), and autonomous vehicles.

<h2 id="industry-standard-and-opensource -gis">3. Industry Standard and Open Source GIS</h2>

A Canadian company, ESRI, dominates the global GIS market. GIS started in Canada in 1963 with Roger Tomlinson's work for the Canadian government. Canada has continued to be world leaders in GIS and geomatics ever since. Which makes some sense considering the size of our country! <a href="#ref-esri-history-of-gis" aria-label="link to reference"><sup>3</sup></a> There are open source GIS. There's a Toronto company with three interesting products - one that makes GIS available in Adobe Creative Cloud products.

Note that links to training are in the "where to get <a href="#free-gis-spatial-data-analysis-training">free GIS and spatial data analysis training</a>" section after this one.

<h3 id="#learn-gis-to-learn-ai">3a. Industry Standard: ESRI</h3>

ESRI was founded in 1969. It went though many versions, different software architecture, and platforms. Like Apple uses "i" before many of it's products (iPhone, iPad, ...) ESRI uses "Arc". In my first university degrees I used ArcMap on workstations, ArcINFO on UNIX, and ArcView on Windows workstations. The current version is ArcGIS.

ESRI Links for Developers: APIs, SDKs, Docs

Global Links

Canada Specific Links

<h3 id="qgis">3b. QGIS: Open Source GIS</h3>

While there are many open source GISs, QGIS is the major open source GIS. It's the one with good documentation and with the largest community. QGIS runs on Windows, macOS, Linux, BSD and mobile devices, making it really flexible. That's where I suggest other devs start with open source GIS. I've included a list of other open-source GISs for the curious.

Open Source GIS Links

QGIS home page
QGIS docs
QGIS CommunityContribute to open source GIS
13 Free GIS Software Options: Map the World in Open Source. by GIS Geography. Last Updated:October 1, 2023
Open Source Options
1. Site listing open source GIS options
2. Also has a YouTube channel

<h3 id="avenza">3c. Avenza Systems: Innovative Toronto GIS Company</h3>

Avenza is located close to Davisville station in Toronto. The staff and work culture is really awesome. I got to get to know some of them in 2020 when I was volunteering for GoGeomatics Canada and writing GeoIgnite conference materials. They've invented GIS products that work inside Adobe Illustrator and Photoshop - which might interest some UX designers. They also have a mobile solution that works offline.

Avenza has three products:

MAPublisher: brings over 50 GIS integrations into Adobe Illustrator.
- This is a huge benefit for book, brochure, and other publishers.
- Functions include: data import, transformations, geoprocessing, design, label, and export
Geographic Imager: Allows users to work with satellite and aerial photographs inside photoshop.
- Functions include: georeference, transform, mosaic, tile, style, export
Avenza Maps: Mobile apps for fieldwork and recreation. It uses mobile devices built in GPS without needing a cellular data connection.
- Features include: Offline use, a map store of professionally produced maps, record GPS tracks, view location on GPS, drop placemarks

Avenza Links

Avenza home page
MAPublisher
Geographic Imager
Avenza Maps
Avenza free product trials
Docs for Desktop software
Docs: Avenza MapsThe cover photo is so awesome!
GeoIgnite conference Avenza talk summary I wrote in 2020 for GoGeomatics Canada. It has a Tolkien theme!
1. GeoIgnite 2020 Video: Cartographic Journeys with the Avenza Platform ~ Nick Burchell – Director- Avenza
2. Conference talk summary and recording

<h2 id="free-gis-spatial-data-analysis-training">4. Free Training</h2> There's so many GIS and spatial data analysis training options. Here's a few to get you started. The majority of courses by ESRI require a software licence. Use the free 21 day trials listed above to get started. I've listed both top level sites that have multiple courses and a few individual courses that might interest other developers.

Some of the training resources are listed in multiple categories so readers don't miss something useful if they're scanning for a specific topic.

Section Contents

This section has so many links that it needs it's own contents list!

<a href="esri-training">4a. Free Training by ESRI </a>
- This includes general GIS training, not just for ESRI products
<a href="qgis-training">4b. QGIS Free Training</a>
<a href="#avenza-training">4c. Avenza Free Training</a>
<a href="#javascript-gis-training">4d. JavaScript Specific Free GIS Training</a>
<a href="#postgis-training">4e. Postgres (PostGIS)</a>
<a href="#python-gis-training">4f. Python and GIS Free Training</a>
<a href="#Statistics and Maths Refreshers">4g. Statistics and Maths Review Materials</a>
<a href="#other-free-training">4h. Other Free Training Resources</a>

<h3 id="esri-training">4a. Free GIS Training by ESRI</h3>

These free training resources from ESRI includes general GIS and spatial data analysis training. They're worth a good look even if you're going the open source GIS route.

ESRI Self-paced training for individuals
ESRI Free Web Courses
1. 18 free courses
ESRI: Basics of JavaScript Web Apps
1. 1 hour, 15 minutes.
2. Includes intro to ArcGIS API for JavaScript
ESRI: Python for Everyone
1. 4 hours, 15 minutes
Map Projections tutorials by ESRI
- This is essential if you're going to be using spatial data!
  - The Earth being a sphere affects data truth.
  - Depending on the projection distances, areas, or shapes of areas are distorted.
  - This collection of articles, videos, and an interactive "story" (made in a GIS) can be finished in half a day.

<h3 id="qgis-training">4b. QGIS Free Training</h3>

QGIS Training manual (html)
PyGIS Cookbook PyGIS is part of QGIS
Developers Guide for QGIS
A Gentle Introduction to GIS Part of the QGIS docs.
Open Source Options YouTube channel

<h3 id="avenza-training">4c. Avenza Systems Free Training</h3>

<h3 id="javascript-gis-training">4d. JavaScript Specific GIS Training , Docs and Resources</h3>

Some of these courses are listed in other subsections of this section. But being a TorontoJS member it's nice to have a specific section to refer people to! JavaScipt is one of the most under utilized programming languages in GIS and geospatial analysis.

5 Best Web Mapping Platforms – The Battle of Web GIS
1. This is more an overview of Web GIS, but given that most JS devs aren't familiar with GIS it's also an intro to how we can use GIS in web apps.
2. By: GISGeography
3. Last Updated: January 6, 2024
PD-32 - JavaScript for GIS
ESRI: Basics of JavaScript Web Apps
1. 1 hour, 15 minutes.
2. Includes intro to ArcGIS API for JavaScript
ArcMaps SDK for JavaScript
1. ESRI
2. Updated October 2023
Awesome Frontend GIS
1. "A compilation of geospatial-related web frameworks, tools, demos, applications, data sources and more."
2. HUGE list of resources by category
  1. JavaScript Libraries: Mapping, data processing, LiDAR, Remote Sensing
  2. Data sources: Downloads, web APIs, Collections
  3. Notebooks: Beginner, intermediate, advanced
  4. Web maps
  5. Web Apps
  6. Colour advices
  7. Icons
  8. Videos
  9. Further reading
3. Github repo
4. Author's Twitter/X: @joewdavies
Open Layers: Geospatial JavaScript Library
1. By Geography Realm
JavaScript for Geospatial applications
How can you integrate JavaScript with GIS?
1. LinkedIn article
Open Source WebGIS Online Tutorial
U Penn: GEOG 585: Open Web Mapping
1. Free university course
2. U Penn College of Earth and Mineral Sciences has a lot of free open courses.

<h3 id="postgis-training">4e. Postgres GIS (PostGIS) Free Training</h3>

Introduction to PostGIS
PostGIS Docs
PostGIS Videos
Spatial Data Analysis Using Postgis LinkedIn Learning:
1. Note: Free with LinkedIn premium or Toronto Public Library card.
2. (TPL had a ransomware in October, 2023 and full digital services are still not available)
Geographical Data Management with PostGIS
1. Github repo

<h3 id="python-gis-training">4f. Python and GIS Free Training</h3>

U Penn GEOG 489 - Advanced Python Programming for GIS
1. 10-12 weeks, 4 x 20-30 minute lessons per week
ESRI: Python for Everyone 4 hours, 15 minutes
Get started with PyQGIS Series' Articles
1. Dev.to !
2. Raymond Lay - French geospatial engineer
U. Penn GEOG 865 Cloud and Server GIS
1. 10-12 hours/week for 10 weeks
2. Master’s level elective course.
3. Software used includes: ESRI ArcGIS Pro/Arcpy, Jupyter Notebook, ESRI ArcGIS API for Python, QGIS, GDAL/OGR.
Best Courses for Geospatial Python
1. A list of courses from the Mapscaping blog and podcast
2. Updated October 02, 2022 - sStill definitely worth a look.
Automating GIS Processes 2023
1. GitHub repo
2. Emphasis on automating with Python
QGIS Python Tutorial (PyQGIS Tutorial) YouTube - Open Source Options
QGIS Python Programming (PyGIS) Playlist by Open Source Options
PyGIS Developer Cookbook by QGIS docs

<h3 id="other-free-training">4g. Other Free GIS Training Resources</h3>

Automating GIS Processes 2023
1. GitHub repo
U. Penn GEOG 865 Cloud and Server GIS
1. 10-12 hours/week for 10 weeks
2. Master’s level elective course.
3. Software used includes: ESRI ArcGIS Pro/Arcpy, Jupyter Notebook, ESRI ArcGIS API for Python, QGIS, GDAL/OGR.
McMaster Library GIS Services
- A list of free webinars and other training available to the public.
- Also resources, software, and workstations, available to McMaster staff and students
GISGeography Learn GIS
- A list of well illustrated articles and written tutorials.
- Cartography: Data Classification
  - Is worth a good look. At first glance devs might not find it relevant because it's about traditional maps and not specifically GIS. But it's important to know about your data before you use it!
Harvard Centre for Geographic Analysis
1. List of several free courses on a wide range of topics
U of Buffalo: Free Online GIS Training
1. List of free online GIS Training
2. Maintained by the University of Buffalo Libraries
3. Last updated Jan 08, 2024

<h3 id="statistics-and-maths">4h. Statistics and Maths Refreshers</h3>

U Penn:Math and Statistics Review Materials
Cartoon Guide to Statistics by Larry Gonick and Woollcott Smith
1. This is an amazing statistics book both if you've never done statistics, if you need a refresher, or would just like a good reference book.
2. Yes, there's "free" pdfs floating around, but it's well done.

<h2 id="free-spatial-datasets">5. Free Spatial Datasets</h2> One of the best places to find open data is the master list by GoGeomatics Canada. Most of the other references below are on that list.

GoGeomatics: Open Data sources list
Free GIS Data Categorized List of over 500 different data sources
1. All listed sources are ready to go into a GIS database.
2. https://rtwilson.com
Awesome Frontend GIS - Data Sources
1. Javascript focused data sources
2. Downloads, web APIs, collections
Open Street Map
United States Geological Survey USGS EarthExplorer
1. Note: for teachers and parents the USGS Educational Resources also has great geography, earth sciences materials for kids and teens.
Open Data Inception Global listing of open spatial data sources.
1. The listing is a map with a search field at the top right of the site.
Transit land Community edited data source of transit data
Transit feeds Archived public transit data.
1. It has an API and you can login with GitHub.
Open Mobility.org Twitter account
Canadian Open Data and Free Geospatial data resources
World Atlas by GISGeography.
1. "Get a blueprint of all countries of the world with 200+ maps. Explore the world atlas with political, satellite, and topographic maps."
Totiū Te Whenua / Land Information New Zealand LINZ Data Service
UK Open Geography Portal Office for National Statistics
10 Free GIS Data Sources: Best Global Raster and Vector Datasets - GIS Geography
Maps for Europe EuoGeographics
Geospatial Data collection Map and Data Library University of Toronto

<h2 id="references-and-resources">6. References and Resources</h2>

<h3 id="references">6a. References</a>

<span id="ref-esri-spatial-data-analysis"><a href="https://support.esri.com/en-us/gis-dictionary/spatial-analysis#:~:text=%20The%20process%20of%20examining%20the%20locations%2C%20attributes%2C,to%20address%20a%20question%20or%20gain%20useful%20knowledge.">ESRI: spatial analysis | GIS Dictionary </a></span>
<span id="ref-esri-layers"><a href="https://desktop.arcgis.com/en/arcmap/latest/map/working-with-layers/what-is-a-layer-.htm">ESRI: What is a layer?—ArcMap | Documentation (arcgis.com)</a></span>
<span id="ref-esri-history-of-gis"><a href="https://www.esri.com/en-us/what-is-gis/history-of-gis">ESRI: History of GIS | What is GIS (esri.com)</a></span>
<span id="ref-microsoft-vector-db "><a href="https://www.esri.com/en-us/what-is-gis/history-of-gis">Microsoft Learn: What is a vector database?</a></span>

<h3 id="stats-book">6b. Statistics Book</h3>

Cartoon Guide to Statistics by Larry Gonick and Woollcott Smith
1. This is an amazing statistics book both if you've never done statistics, if you need a refresher, or would just like a good reference book.
2. Yes, there's "free" pdfs floating around, but it's well done.

<h3 id="gis-resources">6c. GIS Resources</h3>

Mapscaping Podcast JavaScript and GIS
1. Highly recommend the Mapscaping podcast! The host Daniel is a Kiwi! (From New Zealand)
2. Mapscaping blog
3. Mapscaping podcast
What is GIS? Geographic Information System Mapping Technology (esri.com)
GIS Dictionary (esri.com)
Geoanalytics 101: Exploring Spatial Data Science - GIS Geography
Spatial Analysis Articles – GoGeomatics Canada
Artificial intelligence article list – GoGeomatics Canada
GoGeomatics Meetups – GoGeomatics Canada
Volunteer to write a technical article on "software dev/ JavaScript / C#, Git, GitHub or other introductory dev topis for GIS professionals"
- Editors & Writers Group – GoGeomatics
Canadian Geospatial Schools & Programs.
- GoGeomatics schools and programs list
- These are "going back to school" type programs at universities and colleges, so they're not listed in the training section above.
GIS Stack Exchange
1. This would be a good place to ask where you could find a particular type of data set.
Open Source GIS Foundation
1. Get involved in open source projects
2. Find training and more!

<h3 id="ai-resources">6d. Artificial Intelligence Resources</h3>

These are a few I've been referring to as I work on my AI Engineer cert. There's a ton of really good information out there. My focus is on Natural Language Processing (NLP) and Large Language Models (LLMs) because of the intersection of AI and accessibility.

LlamaIndex: Typescript Docs
LlamaIndex: Python Docs
Building AI-powered Retrieval-Augumented Generation apps with LlamaIndex and Azure Cosmos DB LlamaIndex on Microsoft Reactor YouTube
My AI Engineer Collection of courses on Microsoft Learn
Develop natural language processing solutions with Azure AI Services Microsoft Learn, Learning Path 7 hours 9 minutes
Free Microsoft credential. Build a natural language processing solution with Azure AI Language AI Applied Skills credential Microsoft Learn.
- This is an at home assessment completed after the list of courses at the bottom of the page.
- Disability accommodations including use of NVDA and extra time are available.

<h3 id="a11y-and-ai">6e. Accessibility and AI Resources</h3> There's great potential for AI to positively impact disabled, neurodivergent, and deaf/Deaf people. It's already being realized as the video below from Be My Eyes shows.

LinkedIn post commenting about AI and accessibility: Assistive technology is AI's next billion-person market Includes a link to the article.
Be My Eyes and AI Integrates accessibility into it's app. The video is embedded below.

I hope you find this a valuable resource. It's always awesome when different tech fields come together to develop something new and interesting.

French Fridays for Developers - 021

Fri, 15 Dec 2023 00:00:00 GMT

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.» <br> ~ 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."<br> ~ 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

Thu, 14 Dec 2023 00:00:00 GMT

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

Wed, 13 Dec 2023 00:00:00 GMT

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

Fri, 08 Dec 2023 00:00:00 GMT

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
1. What is ARIA: https://benmyers.dev/blog/aria/
2. The Accessibility Tree: https://benmyers.dev/blog/accessibility-tree/
3. How to Fix Your Low Contrast-Text: https://benmyers.dev/blog/fix-low-contrast-text/
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

Fri, 08 Dec 2023 00:00:00 GMT

French Fridays for Developers - 020

In March, 2023 I started French for Devs Fridays to celebrate getting to 400 days on Duolingo. Today marks 678 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 20, 08 decembre 2023

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

English: French for Devs #020, December 08 2023

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

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

Thu, 30 Nov 2023 00:00:00 GMT

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 🔮
- In case you're having a challenging Thursday, this includes a link to play The Hitchiker's Guide to the Galaxy because: _"Thursdays, Never could get the hang of Thursdays." _ (Scroll down to the "🌌" emoji for the link)
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 Switch 19 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

Sat, 25 Nov 2023 00:00:00 GMT

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.

<hr>

Photo Credit

Rajvir Kaur on Unsplash

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

Wed, 15 Nov 2023 00:00:00 GMT

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. <strong><em>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. </em></strong>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

Sat, 11 Nov 2023 00:00:00 GMT

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» <br> ~ 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."<br> ~ Anonymous

%% Initial code %%

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

%% Code that works %%

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

const { page } = Astro.props;

<hr>

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

Wed, 08 Nov 2023 00:00:00 GMT

Updated February 27, 2024

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 View the deployed site here: https://vanilla.crazycatscoffee.com GitHub repo: [GingerKiwi/CrazyCatsCoffee-Vanilla (github.com)]

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.
  1. 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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNPjmXG" data-user="gingerkiwi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/gingerkiwi/pen/rNPjmXG"> CrazyCatsCoffee_A11y</a> by GingerKiwi (<a href="https://codepen.io/gingerkiwi">@gingerkiwi</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

French Fridays for Developers - 017

Fri, 03 Nov 2023 00:00:00 GMT

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.» <br> ~ 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."<br> ~ Clifford Stoll

French Fridays for Developers - 016

Fri, 29 Sep 2023 00:00:00 GMT

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

Pair programming is on my mind after the wonderful Toronto JS tech talks evening at VMWare Tanzu Labslast night. Teams at Tanzu Labs do a lot of pair programming - and not just developers with developers, but devs with design, clients, ... . Looks like a very cool work culture!

Today is my:

🇫🇷 608th day of French,
🇳🇱 267th day of Dutch,
🏴󠁧󠁢󠁷󠁬󠁳󠁿 106th day of Welsh,
🇩🇪 28th day of German,
🇳🇴 22nd day of Norwegian,

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

Week 16, 29 septembre 2023

«La période d’adaptation de la programmation solo à la programmation collaborative a été comme manger un piment. La première fois que vous l’essayerez, vous ne l’aimerez peut-être pas parce que vous n’y êtes pas habitué. Mais plus vous en mangez, plus vous l’appréciez.» <br> ~Anonyme

English: French for Devs #016, September 29, 2023

"The adjustment period from solo programming to collaborative programming was like eating a hot pepper. The first time you try it, you may not like it because you are not used to it. However the more you eat it, the more you like it.”<br> ~ Anonymous

Data Structures and Algorithms: Javascript Arrays #01

Sun, 10 Sep 2023 00:00:00 GMT

About This Article Series

I've been preparing for technical interviews and DSA challenges lately. But it can be so dry! I mean I love a puzzle, but I've found that I prefer solving puzzles that result in an actual project people can use. To keep things interesting, I've been making my own notes with pet and Alice in Wonderland themes. So here's the first of (likely) many DSA articles in Javascript with no foo or bar.

The focus is also on ES6 Javascript to keep things current and just easier to read. I'm assuming that readers will have the basics of programming in Javascript or another language, though I do give a quick overview and some definitions. This is intended as a reference for other devs who are practicing for technical interviews, or want a more fun reference for Javascript programming.

Javascript Arrays 101

An array is a collection of items with a single name.

For example a list of songs could have the name "playlist". In this array, all the names of songs are strings.

const playlist = ['Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts'
];

Alternatively, we could have an array of numbers. The following is taken from Alice in Wonderland when Alice says "Let me see: four times five is twelve, and four times six is thirteen, and four times seven is-oh dear! I shall never get to twenty at that rate!"

const aliceNumbers = [4, 5, 12, 4, 6, 13, 4, 7, 0, 20]

Arrays are "zero indexed", meaning the first element has an index of 0, the second element has an index of 1, and so on.

playlist[2] = 'Follow Me Down'
aliceNumbers[5] = 13

To get the number or items/elements in an array we use array.length

playlist.length = 5
aliceNumbers.length = 10

5 Basic Javascript Array Methods

Here are five basic Javascript array methods that let you add or delete items from arrays.

1) Inserting an Element at an Index Value

If we want to insert a value at a particular point in an array we can use the following:

const shoppingList = ['earl grey tea', 'cream', '2% milk']
// Add a value
shoppingList[3] = 'scones'
//Now shoppingList is
shoppingList = ['earl grey tea', 'cream', '2% milk', 'scones']

To replace a value we use the same syntax, but use the index number of the item we want to overwrite/replace:

const shoppingList = ['earl grey tea', 'cream', '2% milk', 'scones']

//update a value
shoppingList[2] = 'whole milk'

//Now shoppingList is
shoppingList = ['earl grey tea', 'cream', 'whole milk']

2) Push

Push adds an element to the end of an array.

playlist.push('White Rabbit');

// Now playlist is:
playlist = ['Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts', 'White Rabbit'];

// If we push another song onto 'playlist' 
playlist.push('Wonderland');

// Now playlist is:
playlist = ['Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts', 'White Rabbit', 'Wonderland'];

You can also use push to push multiple items onto the end of an array.

const playlist = ['Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts', 'White Rabbit', 'Wonderland'];

playlist.push('Fell Down a Hole', 'Follow Me Down', 'Always Running Out of Time')

console.log(playlist)

['Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts', 'White Rabbit', 'Wonderland', 'Fell Down a Hole', 'Follow Me Down', 'Always Running Out of Time'];

3) Pop

Pop is the opposite of push. It "pops off" the last item in an array.

playlist = ['Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts', 'White Rabbit', 'Wonderland'];
// To remove the last item
playlist.pop(); 

// Now playlist is:
playlist = ['Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts', 'White Rabbit'];

console.log(playlist.pop());

// The expected output is 'White Rabbit'

4) Shift

Deletes the first item in an array, and returns that deleted item.

const playlist = ['Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts', 'White Rabbit', 'Wonderland'];

let mySong = playlist.shift()

console.log(mySong) // returns 'Her Name Is Alice'
// Our playlist array now contains:
playlist = ['Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts', 'White Rabbit', 'Wonderland'];

5) Unshift

Unshift adds an item to the start of an array, and returns that new item.

const playlist = ['Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts', 'White Rabbit', 'Wonderland'];

let mySong = playlist.shift('Very Good Advice')
console.log(mySong) // returns 'Very Good Advice'

const playlist = ['Very Good Advice', 'Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts', 'White Rabbit', 'Wonderland'];

That's it for now. The next few articles will cover more array methods and how to use arrays to solve string DSA challenges.

French Fridays for Developers - 015

Fri, 08 Sep 2023 00:00:00 GMT

In March, 2023 started French for Devs Fridays to celebrate getting to 400 days on Duolingo. Here you'll find weekly useful and/or amusing French phrases for developers. This one is for all my fellow devs who are also doing DSA/technical interview prep.

Today is my:

🇫🇷 588th day of French,
🇳🇱 247th day of Dutch,
🏴󠁧󠁢󠁷󠁬󠁳󠁿 86th day of Welsh,
🇩🇪 8th day of German,
🇳🇴 2nd day of Norwegian,

Here's this week's French for Devs quote and translation. I was reading Apple news and came across a brilliantly worded article by Tristian Cross of The Guardian. A link to his article is below.

Week 15, 08 septembre 2023

« La confusion fait partie de la programmation » <br> ~ Felienne Hermans, The Programmer's Brain(2021)

English: French for Devs #015, September 08, 2023

"Confusion is part of programming” – Felienne Hermans, The Programmer's Brain(2021)

Data Structures and Algorithms: Javascript Arrays #02

Fri, 01 Sep 2023 00:00:00 GMT

About This Article Series

Javascript Arrays Part 02

Concat

Used to merge two or more arrays. It returns a new array. Concat doesn't mutate the original arrays.

const shoppingList = ['earl grey tea', 'cream', 'whole milk']

const fruits = ['apples', 'oranges', 'peaches', 'pears']

const veggies = ['carrots', 'parships', 'potatoes']

shoppingList.concat(fruits)

// [ 'earl grey tea', 'cream', 'whole milk', 'apples', 'oranges', 'peaches', 'pears' ]

fruits.concat(shoppingList)

// [ 'apples', 'oranges', 'peaches', 'pears', 'earl grey tea', 'cream', 'whole milk' ]


const allFood = shoppingList.concat(fruits, veggies)

allFood
// [ 'earl grey tea', 'cream', 'whole milk', 'apples', 'oranges', 'peaches', 'pears', 'carrots', 'parships', 'potatoes' ]

Includes (Boolean)

Determines whether an array includes a certain value among its entries, returning true or false as appropriate.

const shoppingList = ['earl grey tea', 'cream', 'whole milk']

const playlist = ['Her Name Is Alice','Drink Me','Follow Me Down','Painting Flowers','Queen of Hearts'
];
 
shoppingList.includes('cream')

playlist.includes('Drink Me', 3)

'Play the list'

IndexOf

Returns the first index at which a give element can be found in the array, or -1 if the element is not present.

playlist.indexOf('Follow Me Down')

if (playlist.indexOf('Drink Me')) {
  console.log('Play the list')
}

Reverse

Reverses an array in place. The first array element becomes the last, and the least array element becomes the first.

topSongs.reverse()

// [ 'Queen of Hearts', 'Painting Flowers', 'Follow Me Down', 'Drink Me', 'Her Name Is Alice' ]

Join

Join creates and returns a new string by concatenating all of the elements in an array (or an array-like object) separated by commas or a specified separator string. If an array has only one item, then that item will be returned without using the separator.

topSongs.join((', '))

// 'Her Name Is Alice, Drink Me, Follow Me Down, Painting Flowers, Queen of Hearts'

yellBackwards.reverse().join(' ')
// 'off with their heads!'

numbers.join(('-'))
// '2-4-5-8-9-10-7'

Slice

Slice returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included) where begin and end represent the index of items in that array. The original array will not be modified.

const games = ['crochet', 'chess', 'cards', 'painting the roses red']

const indoorGames.slice(1,3)

// indoorGames = [ 'chess', 'cards' ]

favouriteGames = games.slice(-2)

// [ 'cards', 'painting the roses red' ]

const myGames = games.slice()
// makes a ccomplete opy of the array - sometimes used to make a quick copy
// myGames = ['crochet', 'chess', 'cards', 'painting the roses red']

Splice

Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

To add an element without replacing any other element

arrayName.splice(index to add something in at, how many items to replace, what to splice in)

playlist.splice(4, 0, 'White Rabbit')

// [ 'Her Name Is Alice', 'Drink Me', 'Follow Me Down', 'Painting Flowers', 'White Rabbit', 'Queen of Hearts' ]

To replace element with another one

playlist.splice(4, 1, 'White Rabbit')

// [ 'Her Name Is Alice', 'Drink Me', 'Follow Me Down', 'Painting Flowers', 'White Rabbit', ]

Can be used to simply remove one or more elements in the middle of an array.

topSongs.splice(2,2)
// removes: [ 'Follow Me Down', 'Painting Flowers' ]

// topSongs = [ 'Her Name Is Alice', 'Drink Me', 'Queen of Hearts' ]

Sort

Sorts the elements of an array in place and returns the sorted array. The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code unit values.

It is NOT a numerical sort!

yell.sort()

// returns: [ 'heads!', 'off', 'their', 'with' ]

numbers.sort()
// returns: [ 10, 2, 4, 5, 7, 8, 9 ]

Design Tools and Tips for Backend Developers - Part 01: Finding Design Files and Figma to Code 101

Tue, 08 Aug 2023 00:00:00 GMT

Every time I get in a discussion with backend or sometimes full-stack devs that prefer the backend, they say that one reason they prefer backend is that they're "not good at design". But just like anyone can learn the basics of coding, anyone can learn the basics of design. With a few simple tools and tips, even those scared of design can become more comfortable in designing good looking apps.

This is the first in a series of articles on tips and tricks for web and app design - both for backend dev, and new developers. Note that because this series is aimed at devs who are uncomfortable with design, a few of the methods, tools, and tips are ones that I wouldn't necessarily recommend to frontend developers or those with experience in other types of art and design or non-Figma tools like Adobe Xd/Adobe CC or Sketch.

Today we're looking at where to find Figma design files and then how to quickly use them to get started coding. In future articles, colour themes/pallets, Figma to react code plugins, typography (fonts), and accessibility will be covered.

Overview (If You're Just Skimming!)

Find free files in Figma:
- Scroll down to see the links to suggested sites and if they're free or have a small fee.
- Read the info for the ones you're interested in using - There's tips on how to best find what you're looking for.
Import Figma files into your Figma account
Use Figma's new dev mode to extract the code for each section/component
Keep reading this series for more design tools and tips including
- Fonts/typography,
- Figma plugins (e.g. Figma to react code),
- Colour themes, pallets,
- Accessibility,
- Layout - Demystifying CSS Grid and Flexbox
- Basic design rules and how to follow them

Part 01: Finding Design Files and Figma 101 for Backend Devs

Does the following sound familiar? You have a great idea for an app, but have no idea where to start with the frontend. But it needs a frontend! So you cobble together some Bootstrap CSS, but it still doesn't look as cool as its functionality, the layout is weird, it's failing accessibility testing, and you're swearing at whoever invented CSS (Håkon Wium Lie).

This series is designed to give backend devs and new devs a helping hand with design - we're all part of the awesome global dev community after all! It's much easier to focus on coding if you have a starting point in the design of the frontend. We don't have to re-invent the wheel to get coding and end up with great looking and well functioning app. With an already created Figma file and just 15 minutes of getting to know how to use Figma files you can go back to focusing on the fun puzzle of getting your app working and doing something!

Where to Get Figma and Other Design Files

Figma files are a great place to start - especially with the newer developer mode that writes the majority of the CSS for us. But where can you get Figma files? Here's a few places that are either free or have a small fee. For the ones with a fee the listed fee is current as of August, 2023.

Figma Community

The Figma Community has thousands of free files. There's a wide variety of themes, styles, and apps including dashboard, landing pages, blogs, social media apps, and more. With such variety and so many files it can take some time to find something that matches the needs for your app.

Cost: Free - need to filter your search to only show free files. Link: https://www.figma.com/community Link to free web design files (includes mobile and desktop): https://www.figma.com/community/tag/web/files

UI Store Design

UI Store Design has over 650 free design files, with many of them being Figma files. Downloading is a two step process, because the site is at least partially funded by advertising. For now, make sure that the design you want to use has a Figma option. Some are only Sketch, Adobe Xd/Adobe CC, InVision, or Webflow. Later in this series I'll show you options to open Adobe Xd and Sketch files in Figma.

Cost: Free

Links:

Apps: https://www.uistore.design/categories/apps
Landing pages: https://www.uistore.design/categories/landing-pages
Dashboards: https://www.uistore.design/categories/dashboards

Frontend Mentor

While Frontend Mentor has many free challenges, you must be a paid monthly or annual member to download the Figma files. However, a paid membership comes with support from their Discord community as well as project requirements. It's a great place to start building full-stack apps for your portfolio if you need ideas of what to build. Projects can be filtered by difficulty level, language/tools (html, css, javascript, api), and free/paid.

Link: https://www.frontendmentor.io

Cost:
- $12 USD for 1 month
  - 2x premium challenge Figma files
  - 5x free challenge Figma files
- $96 USD per year
  - Unlimited challenges with all Figma files

iCodeThis

iCodeThis is a newer daily frontend coding challenge site. It's a great option to get design ideas for components and simple pages. A membership is required to have access to the Figma files. But all memberships are a one fee for a lifetime membership, so it's a great option if you're frequently stuck. It's also a great option if you want to improve your css/UI engineering skills a bit at a time and enjoy doing coding challenges. You could even build small backends for some of the challenges where it makes sense like login screens, dashboards, and forms.

Link: https://icodethis.com/pro
Cost:
- Free - viewing the design of the day. Figma file isn't included.
- $24 (current -) for lifetime "bronze" membership - get the past 14 days of coding challenges with Figma Files
- $79 (current) for lifetime "silver" membership - get all coding challenges (currently 250+) with Figma files

The Basics of How to Import and Use Figma Files

Figma is a powerful design tool, so it can be overwhelming to get started if you don't have a design background. However, with a quick tour and about 15 minutes it's fairly straightforward to learn the basics of using already completed Figma files.

Importing Figma Files

Some Files will give you the option to "Open in Figma". For those files you can just click "Open in Figma". Other files require you to download them. In that case, use the four steps below.

The first step in using Figma files is importing them.

Open Figma - you may have to sign in in your browser
Go to your home - the small house icon in the upper left hand corner, below the menu bar
On the top right of the screen click on the "import" button. It's next to the "+ Design file" and "+ Fig Jam board" buttons.
When the dialog box says the file is imported, click "done", then double click your file to open it.

Export Assets Including Images and Icons

Did you know that you can export all of the assets in bulk? It's a great shortcut if you want to get coding as quickly as possible.

Before you do a bulk export:

Click outside of any of the frames/ designed screens to make sure that you haven't selected anything.
It's also good to check on the right hand side of the UI that your units are set to "rems" and not "pixels", though this is not required for a bulk export.

In the upper left hand corner, click on the down arrow next to the Figma "F" logo.
Choose "file", then "export".
A list of assets, including entire frames will show on the screen. All assets will have a green checkmark beside them. For now don't worry about which assets you might not need. Just export all of them.
Note: Assets with duplicate names will/ should be renamed by your OS.

Extracting the CSS / Code in Figma Dev Mode

Figma has a new dev mode that takes the guessing out of using a Figma file, puts units in rems instead of pixels, and makes things much quicker. It even extracts the CSS code for you. We'll also take a look in a later article on how to use a plugin to extract React and CSS directly to Code Sandbox or downloaded to your local machine.

Make sure you have Dev mode enabled by toggling on the toggle with "</>" in the upper right hand corner
Select a frame (page) in the design
Information about that page including size in rem, background colour, and if there's any padding or margins is displayed in a graphic on the left-hand side.
Once you've made a note of the page design, continue to click on individual elements to get their size, colours, and typography (font). You can copy and paste from Figma into your repo.
1. For example the following code is copied from a heading in the "Sunnyside Landing Page" from Frontend Mentor.

color: #FFF;
text-align: center;
font-family: Fraunces 9pt Soft;
font-size: 3.5rem;
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 0.54688rem;
text-transform: uppercase;

Go through the design one element at a time on each page to get the css.
For measurements that have more than 2 decimal points, just round up or down to the closest. For example letter spacing of 0.54688rem becomes 0.55 rem.
You will still have to figure out the layout with css grid, flexbox, or a combination of the two. Don't worry there will be at least one future article on that.

Congratulations You've Taken the First Step!

If you've made it this far you're well on your way to quickly finding and using designs so you can focus on coding. This is just a start, but it's a much quicker way to have a great design than muddling through from scratch. Keep reading this series for more design tools and tips for backend developers!

Next in This Series:

Colour Themes, Tools, and Tips
Typography and Fonts 101
7 Basic Design Rules and How to Apply Them
Accessible Design - A11y in App Design
Layout - Demystifying CSS Grid and Flexbox
Photos, Images, and Videos
Quickly Using Figma for Wireframes
Figma Plugins - Figma to React code and more.
Using Figma to Mock out Designs
Using Dev Mode in Figma

French Fridays for Developers - 014

Fri, 07 Jul 2023 00:00:00 GMT

In March, 2023 started French for Devs Fridays to celebrate getting to 400 days on Duolingo. Here you'll find weekly useful and/or amusing French phrases for developers. This one's for all my fellow devs who also like to learn by breaking our code first.

Today is my:

🇫🇷 528th day of French,
🇳🇱 188th day of Dutch,
🏴󠁧󠁢󠁷󠁬󠁳󠁿 28th day of Welsh, and
👋 66th Day of ASL (American Sign Language)

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

Semaine 14, 07 juillet 2023

«Programmeur - un organisme qui transforme le café en logiciel.»

~ Auteur inconnu

English: Week 14, July 07, 2023

"Programmer — an organism that turns coffee into software."" ~ Author unknown

Creating a Simple Desktop Layout in CSS with Just an H1 and One Paragraph

Tue, 13 Jun 2023 00:00:00 GMT

Note: I have a backlog of draft articles from before I added prism.js code block syntax highlighting to my blog. This one is from the Scrimba UI Design course by Gary Simon in January 2023.

January 06, 2023

Lately, I've been focusing on improving my web development skills with smaller, shorter term goals. For the past couple of weeks that focus has been on css and design, specifically on completing the css parts of the Scrimba Frontend Developer Career Path and continuing to finish Gary Simon's UI Design course. There's some overlap between the two, but the UI Design course is significantly longer and goes much deeper into design concepts and and further by covering gradients, form design, and UI animations.

The Starter Code

Today, I finished the "build a simple layout" section. The starting webpage and code had just one h1 and a single sentence paragraph (see below).

<html>
	<head>
		<link rel="stylesheet" href="index.css">
	</head>
	<body>
		<div class="container">
			<h1>Stop, Drop & Roll</h1>
			<p>Take the new challenge, starting today.<p>
		</div>
	</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

html, body {
	margin: 0;
	padding: 0;
}

The initial webpage looked like this:

The task was to use css and one image to create a two column grid layout for desktop while paying attention to the elements of UI Design:

White Space
Color
Contrast
Scale
Alignment
Typography
Visual Hierarchy

Step One: Choose a Background Image

The first step was to choose an image. Two images were provided, but I took Gary's suggestion to find one on unsplash.com. I'm into skating, so the word "roll" in the h1 made me think of roller skating. I found a great image by Logan Weaver of a woman roller skating in a a skate park. After trying it out in the project, I realized I wanted to change the colour balance, and did that with the tools in the Photos app on my MacBook.

To adjust the colour of an image using Apple Photos in MacOS:

import image to Apple Photos
double click image - click on "edit" in upper right hand corner
you're now in the adjust window
I choose colour, and used the most greyed out option

Step Two: Set up the Body and Two Column Grid Layout

I chose to use css grid for this mini-project instead of flexbox as it's on my "to get better at" list this month. Adding the image as the background, and setting background-size to cover causes the image to cover the entire screen - no matter what the viewport height or viewport width is.

For the container class a large margin-left of 4.5rems pushes the container over to the right. Two grid-template-columns of 1.75fr and 1.25fr give the h1 a slightly larger horizontal area than the paragraph. This establishes visual hierarchy - one of the X principals of UI design - between the two text elements. A single row keeps everything aligned.

body {
	font-family: 'Montserrat';
	background: #000 url('logan-weaver-lgnwvr-FvxU8FboUdE-unsplash.png');
	background-size: cover;
}
  
.container {
	margin-left: 4.5rem;
	display: grid;
	grid-template-columns: 1.75fr 1.25fr; 
	grid-template-rows: 1fr;
}

Final Code

The only change to the html was putting a break after the comma in the paragraph. This lets the text wrap at the best point for readability.

The H1

Font size for the h1 was set to 3.5rem, and aligned to the right. This puts it at the top of the visual hierarchy in size, and in position with it being the first thing a user sees when reading from left to right. The dark crimson colour was chosen to standout from the background, while still staying in the pink single colour theme. A grey drop shadow was added to help the header standout, while smoothing the edges into the greyscale background image.

A border was added to the top and left, again to help the header standout. A large border radius of 25px on the top left corner reflects the "roll" and the curves of the skatepark ramps. The border colour was taken from the actual photo after the image transformation on my MacBook Photos app.

Paragraph

Much of the css for the paragraph was coded to establish visual hierarchy between the paragraph and the h1.

text-transform: uppercase - makes the text easier to read and keeps it distinct in style from the h1
margin-top: 10rem - pushes the paragraph down below the line where the h1 starts (Alignment)
font-size: 1.2rem - a little bigger than what the body text would be, yet very different in size from the h1 - again maintaining the visual hierarchy
color: black (#000) - again this keeps the paragraph lower down in the visual hierarchy than the h1. Black and grey are the neutral colours in this pink theme.
text-shadow: 1px 1px 2px darkgray - this is similar but smaller and darker than what is applied to the h1. (Uses scale to reinforce visual hierarchy)
padding: 2rem - this gives the text "room to breathe".
font-weight: bolder - places visual emphasis on the text, which helps it standout against the grey background.

Pink-Border-1 Class

A pink border matching the left and top one around the h1 was added to the paragraph. A margin-right of 3rem gives room between the border and the paragraph text. Sufficient white space spacing helps improve readability and keeps the design uncluttered.

...

<html>
	<head>
		<link rel="stylesheet" href="index.css">
	</head>
		<body>
			<div class="container ">
				<h1>Stop, Drop, & Roll</h1>
				<p class="pink-border-1">Take the new challenge, <br>starting today.<p>
			</div>
	</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
  
html, body {
	margin: 0;
	padding: 0;
}
  
body {
	font-family: 'Montserrat';
	background: #000 url('logan-weaver-lgnwvr-FvxU8FboUdE-unsplash.png');
	background-size: cover;
}
  
.container {
	margin-left: 4.5em;
	height: 100vh;
	display: grid;
	grid-template-columns: 1.75fr 1.25fr;
	grid-template-rows: 1fr;
}
  
h1 {
	font-size: 3.5rem;
	text-align: right;
	border-top: 4px solid #e8aeb9;
	border-left: 4px solid #e8aeb9;
	border-top-left-radius: 25px;
	color: #9c0d78;
	padding: 1em;
	text-shadow: 2px 2px 3px grey;
}  

p {
	text-transform: uppercase;
	font-size: 1.2rem;
	margin-top: 10rem;
	text-align: left;
	color: #000;
	text-shadow: 1px 1px 2px darkgray;
	padding: 2rem;
	font-weight: bolder;
}
  
.pink-border-1 {
	border-bottom: 4px solid #e8aeb9;
	border-right: 4px solid #e8aeb9;
	border-bottom-right-radius: 25px;
	margin-right: 3rem;
}

Given that the code is simple, I chose to deploy this mini project as a public "scrim" on Scrimba.com