From 077e70007c4b7b3c3c8c208362c4491b51e80eab Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 12:44:24 -0800
Subject: [PATCH 01/14] more accessible theme
---
_quarto.yml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/_quarto.yml b/_quarto.yml
index bba6bd3..a480866 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -173,7 +173,7 @@ website:
format:
html:
- theme: lumen
+ theme: cosmos
fontsize: 1em
css: assets/styles.css
toc: true
From b76596bb5ed945e7678b9650da1ff4ce54f41c3a Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 15:01:42 -0800
Subject: [PATCH 02/14] fig alt text
---
08-histograms/exercises.qmd | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/08-histograms/exercises.qmd b/08-histograms/exercises.qmd
index dc45432..cad3216 100644
--- a/08-histograms/exercises.qmd
+++ b/08-histograms/exercises.qmd
@@ -121,12 +121,14 @@ studio_distribution.show(6)
```
```{python}
+#| fig-alt: "Distribution of studios responsible for the highest grossing movies as of 2017"
studio_distribution.barh('Studio')
```
Let's revisualize this barchart to display just the top five studios. In the below code, note how `.take` is used with `np.arange`:
```{python}
+#| fig-alt: "Distribution of studios responsible for the top five highest grossing movies as of 2017"
studio_distribution.sort('count', descending=True).take(np.arange(5)).barh('Studio')
print("Five studios are largely responsible for the highest grossing movies")
```
@@ -157,12 +159,15 @@ min(ages), max(ages)
If you want to make equally sized bins, `np.arange()` is a great tool to help you.
```{python}
+#| fig-alt: "Histogram of the age of the top grossing movies as of 2017 with equally sized bins and count on the y-axis"
top_movies.hist('Age', bins = np.arange(0, 110, 10), unit = 'Year', density=False)
```
## Histograms: Density
```{python}
+#| fig-alt: "Histogram of the age of the top grossing movies as of 2017 with equally sized bins and 'Percent per Year' on the y-axis"
+
# default is density=True
top_movies.hist('Age', bins = np.arange(0, 110, 10), unit = 'Year')
```
@@ -196,6 +201,7 @@ binned_data
### Now, plot the histogram!
```{python}
+#| fig-alt: "Histogram of the age of the top grossing movies as of 2017 using custom bins"
top_movies.hist('Age', bins = my_bins, unit = 'Year')
```
@@ -276,6 +282,7 @@ To check our work one last time, let's see if the numbers in the last column mat
```{python}
+#| fig-alt: "Histogram of the age of the top grossing movies as of 2017 using custom bins"
top_movies.hist('Age', bins = my_bins, unit = 'Year')
```
@@ -296,6 +303,7 @@ flavor_table
```{python}
+#| fig-alt: "Distribution of ice cream flavors"
flavor_table.barh('Flavor')
```
@@ -309,6 +317,7 @@ cone_average_price_table
```{python}
+#| fig-alt: "Plot with one categorical attribute and one numerical attribute."
cone_average_price_table.barh('Flavor')
```
@@ -324,5 +333,6 @@ cones_pivot_table
```{python}
+#| fig-alt: "Plot with two categorical attributes."
cones_pivot_table.barh('Color')
```
From 907e04d5c534a8fdb1045c7a2030712e5424e573 Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 16:09:39 -0800
Subject: [PATCH 03/14] empty fig alt text when captions are present
---
01-intro/jupyter-notebook.qmd | 6 +++---
05-variables/units-of-analysis.qmd | 4 ++--
07-visualizations/index.qmd | 10 +++++-----
17-dictionaries/file-formats.qmd | 4 ++--
18-html/index.qmd | 2 +-
5 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/01-intro/jupyter-notebook.qmd b/01-intro/jupyter-notebook.qmd
index c83a5f4..f50c679 100644
--- a/01-intro/jupyter-notebook.qmd
+++ b/01-intro/jupyter-notebook.qmd
@@ -25,7 +25,7 @@ In order to run computer programs, we need a way to execute code written in a pr
The environment we will use is **Jupyter Notebook**, which allows us to write and run code within a single `.ipynb` document (i.e., **notebook**). They also allow us to embedded text and code.
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=90%}
+{#fig-inflation fig-align=center width=90% fig-alt=""}
:::
There's a lot going on in the above Jupyter Notebook screenshot: there is code, there is output from running code, there are pictures, and there is (non-code) text. We'll get to understanding all of these components in due time.
@@ -78,7 +78,7 @@ Jupyter Notebooks are made up of **cells**. There are two main types of cells:
When run, Python code cells are evaluated as a Python code snippet, one line at a time. The cell output displayed is the value of the _last_ evaluated expression:
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=70%}
+{#fig-inflation fig-align=center width=70% fig-alt=""}
:::
We will discuss this output/display phenomenon more in future notes.
@@ -88,7 +88,7 @@ To run a code cell, you can either hit the "Run" button in the Toolbar, or you c
**Markdown cells.** This is where you write text and images that aren’t Python code. Markdown is a language used for formatting text. A Markdown cell will always display its formatting when it is not in edit mode.
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=100%}
+{#fig-inflation fig-align=center width=100% fig-alt=""}
:::
Here is a [guide to Markdown formatting](https://www.markdownguide.org/cheat-sheet/). You’ll explore Markdown more in lab.
diff --git a/05-variables/units-of-analysis.qmd b/05-variables/units-of-analysis.qmd
index a5ade5c..84cddfb 100644
--- a/05-variables/units-of-analysis.qmd
+++ b/05-variables/units-of-analysis.qmd
@@ -53,13 +53,13 @@ Let's return to our American Community Survey (ACS) 2020 data. It shows educatio
From the [ACS webpage](https://www.census.gov/programs-surveys/acs/methodology/design-and-methodology.html), the American Community Survey (ACS) is an ongoing monthly survey that collects detailed housing and socioeconomic data.
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=90%}
+{#fig-inflation fig-align=center width=90% fig-alt=""}
:::
There are (at least) two datasets collected by the ACS: A private dataset of survey responses by household (Figure 1), and a public-facing dataset of responses by geographic region. The variables for the geographic region, a larger unit of analysis, are constructed via aggregation and estimation (Figure 2):
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=90%}
+{#fig-inflation fig-align=center width=90% fig-alt=""}
:::
Simple forms of aggregation are straightforward and involve counting and averaging---methods that are very possible using our limited Data Science toolkit thus far. However, disaggregation cannot be done without individual datapoints! There are various methods of estimating individuals from averages using statistics and distributions; we discuss this briefly in a few weeks, but you can take a statistics course for more information.
diff --git a/07-visualizations/index.qmd b/07-visualizations/index.qmd
index 34c4a12..d82fb28 100644
--- a/07-visualizations/index.qmd
+++ b/07-visualizations/index.qmd
@@ -25,7 +25,7 @@ To better understand these principles in action, let's examine how humans have u
What do you see when you look at this ancient artifact?
:::{style="text-align: center"}
-{#fig-ancient-map fig-align=center width=60%}
+{#fig-ancient-map fig-align=center width=60% fig-alt=""}
:::
This is a map depicting the town of Konya, Turkey - supposedly the world's first map, dating back to approximately 6200 BC. Even in prehistoric times, humans recognized the power of visual representation to communicate spatial relationships and important information.
@@ -47,7 +47,7 @@ One of the most famous examples of data visualization directly saving human live
**The Solution**: Dr. John Snow was skeptical of the miasma theory and suspected contaminated water. He created a revolutionary approach that became standard in epidemiology: **he drew a map**.
:::{style="text-align: center"}
-{#fig-cholera-map fig-align=center width=70%}
+{#fig-cholera-map fig-align=center width=70% fig-alt=""}
:::
**What the map revealed**:
@@ -64,7 +64,7 @@ One of the most famous examples of data visualization directly saving human live
Florence Nightingale wasn't just a pioneering nurse, she was also an innovative data visualizer. During the Crimean War, she created what's now called a "rose diagram" or "coxcomb chart" to visualize the causes of death among British soldiers.
:::{style="text-align: center"}
-{#fig-rose-diagram fig-align=center width=60%}
+{#fig-rose-diagram fig-align=center width=60% fig-alt=""}
:::
Her visualization revealed a shocking truth: more soldiers were dying from preventable diseases than from battle wounds. This wasn't just a pretty chart, it was a powerful argument that drove major reforms in military medical care. Nightingale understood that abstract statistics about mortality rates couldn't compete with the visual impact of her rose petals, where the size of each segment made the disparity impossible to ignore.
@@ -76,7 +76,7 @@ Her visualization revealed a shocking truth: more soldiers were dying from preve
Not all data visualization involves charts and graphs. Maya Lin's Vietnam War Memorial in Washington DC proves that data can be deeply emotional and memorial, not just analytical.
:::{style="text-align: center"}
-{#fig-vietnam-memorial fig-align=center width=70%}
+{#fig-vietnam-memorial fig-align=center width=70% fig-alt=""}
:::
Each of the 58,000+ names etched into the black granite represents one life lost. The chronological arrangement tells the story of the war's progression through time, while the reflective surface creates an intimate connection between viewers and the data you literally see yourself reflected among the names. This memorial demonstrates that the most powerful visualizations don't just inform us; they transform how we feel about the information.
@@ -86,7 +86,7 @@ Each of the 58,000+ names etched into the black granite represents one life lost
During the COVID-19 pandemic, data visualization became part of daily life. Suddenly, everyone from epidemiologists to elementary school students was reading line charts showing case trends and interpreting what those curves meant for their communities.
:::{style="text-align: center"}
-{#fig-covid-dashboard fig-align=center width=80%}
+{#fig-covid-dashboard fig-align=center width=80% fig-alt=""}
:::
Google's COVID tracking dashboard exemplified how modern visualization must be both accessible and updateable in real-time. The time series charts showed trends over months with clear visual indicators of peaks and valleys, but more importantly, they translated complex epidemiological data into something any concerned citizen could understand.
diff --git a/17-dictionaries/file-formats.qmd b/17-dictionaries/file-formats.qmd
index e92e5be..37fbb1f 100644
--- a/17-dictionaries/file-formats.qmd
+++ b/17-dictionaries/file-formats.qmd
@@ -16,7 +16,7 @@ We can use files to generate tables, or other useful data structures
Files are often stored in **folders**.
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=90%}
+{#fig-inflation fig-align=center width=90% fig-alt=""}
:::
We can categorize data as being in one of two broad categories:
@@ -71,7 +71,7 @@ In our example `pups` case, the `pups.csv` file is located in the `data` directo
What kinds of data can’t be stored in a tabular format? Lots of things: music, videos, maps, etc. Graph data and hierarchical data, like family trees, might also be non-tabular.
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=75%}
+{#fig-inflation fig-align=center width=75% fig-alt=""}
:::
### JSON
diff --git a/18-html/index.qmd b/18-html/index.qmd
index 9ccc55b..072c61c 100644
--- a/18-html/index.qmd
+++ b/18-html/index.qmd
@@ -28,7 +28,7 @@ Your screen should look (something) like this:
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=100%}
+{#fig-inflation fig-align=center width=100% fig-alt=""}
:::
In the upper panel, you see the web page you're inspecting. In the lower panel, you see a version of the HTML source code, with little arrows next to some of the lines. (The little arrows allow you to collapse parts of the HTML source that are hierarchically related.) As you move your mouse over the elements in the top panel, different parts of the source code will be highlighted. Chrome is showing you which parts of the source code are causing which parts of the page to show up. Pretty spiffy!
From 397bd15a55061223ff95b5a88c5498bde46db6bf Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 16:27:19 -0800
Subject: [PATCH 04/14] finish fixing alt text
---
05-variables/index.qmd | 4 ++--
06-variables-ii/sample-population.qmd | 2 +-
07-visualizations/encoding.qmd | 8 ++++----
18-html/genius.qmd | 4 ++--
21-genai/gemini.qmd | 2 +-
5 files changed, 10 insertions(+), 10 deletions(-)
diff --git a/05-variables/index.qmd b/05-variables/index.qmd
index bc33d26..d805ed6 100644
--- a/05-variables/index.qmd
+++ b/05-variables/index.qmd
@@ -30,7 +30,7 @@ It is challenging to use another person's data! The concepts have already been o
For now, we focus on variables as they exist in tabular data. In most of the tabular datasets we will examine, variables correspond to **columns** of features. Each row is a **record** of a datapoint, with different values of variables measured for that datapoint.
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=60%}
+{#fig-inflation fig-align=center width=60% fig-alt=""}
:::
@@ -49,7 +49,7 @@ Figure 2 has examples of each variable type.
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=90%}
+{#fig-inflation fig-align=center width=90% fig-alt=""}
:::
_What do we mean by "meaningful" arithmetic?_ From [Stat 20](https://www.stat20.org/1-questions-and-data/02-taxonomy-of-data/notes):
diff --git a/06-variables-ii/sample-population.qmd b/06-variables-ii/sample-population.qmd
index 79e180d..563013c 100644
--- a/06-variables-ii/sample-population.qmd
+++ b/06-variables-ii/sample-population.qmd
@@ -16,7 +16,7 @@ The set of individuals we actually draw our sample from is the **sampling frame*
## Examples
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=80%}
+{#fig-inflation fig-align=center width=80% fig-alt=""}
:::
| Target Population | Collected sample |
diff --git a/07-visualizations/encoding.qmd b/07-visualizations/encoding.qmd
index 651b718..3e53069 100644
--- a/07-visualizations/encoding.qmd
+++ b/07-visualizations/encoding.qmd
@@ -16,7 +16,7 @@ Think of encoding as the bridge between your data and what people see on the scr
In bar charts, **length** can visually encode a numerical variable.
:::{style="text-align: center"}
-{#fig-barchart fig-align=center width=70%}
+{#fig-barchart fig-align=center width=70% fig-alt=""}
:::
This creates an intuitive mapping where the visual property (bar length) directly corresponds to the data value (average age).
@@ -27,7 +27,7 @@ This creates an intuitive mapping where the visual property (bar length) directl
Other visualizations can include multiple variables encoded simultaneously.
:::{style="text-align: center"}
-{#fig-scatter fig-align=center width=80%}
+{#fig-scatter fig-align=center width=80% fig-alt=""}
:::
### Quick Check: How Many Variables?
@@ -48,7 +48,7 @@ Look at the scatter plot above. How many different variables are being encoded?
As we learned when studying variables, different variable types (numerical vs. categorical, discrete vs. continuous, ordinal vs. nominal) have different properties. When creating visualizations, we need to match our encoding choices to these variable types.
:::{style="text-align: center"}
-{#fig-variable-types fig-align=center width=90%}
+{#fig-variable-types fig-align=center width=90% fig-alt=""}
:::
::: {.callout-important title="Key Principle"}
@@ -69,7 +69,7 @@ The table below summarizes which visual encodings work best for different types
### What's Wrong with This?
:::{style="text-align: center"}
-{#fig-cars-graph fig-align=center width=70%}
+{#fig-cars-graph fig-align=center width=70% fig-alt=""}
:::
**Problem**: This graph implies that Swedish cars are "greater" than cars from other countries in some sense, when they're not. If the variable is just "country of origin" (nominal categorical), using length encoding suggests an ordering that doesn't exist.
diff --git a/18-html/genius.qmd b/18-html/genius.qmd
index 10b10e9..f2accca 100644
--- a/18-html/genius.qmd
+++ b/18-html/genius.qmd
@@ -29,7 +29,7 @@ To use the [Genius Lyrics](http://genius.com/) API, you need a special API key,
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=90%}
+{#fig-inflation fig-align=center width=90% fig-alt=""}
:::
You'll be prompted to sign up for [a Genius account](https://genius.com/signup_or_login), which is required to gain API access. Signing up for a Genius account is free and easy. You just need a Genius nickname (which must be one word), an email address, and a password.
@@ -38,7 +38,7 @@ Once you're signed in, you should be taken to [https://genius.com/api-clients](h
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=90%}
+{#fig-inflation fig-align=center width=90% fig-alt=""}
:::
After clicking "New API Client," you'll be prompted to fill out a short form about the "App" that you need the Genius API for. You only need to fill out "App Name" and "App Website URL."
diff --git a/21-genai/gemini.qmd b/21-genai/gemini.qmd
index 73f00c1..e44dc20 100644
--- a/21-genai/gemini.qmd
+++ b/21-genai/gemini.qmd
@@ -69,7 +69,7 @@ Consider the chat prompt shown in the screenshot, as well as (the start of) the
:::{style="text-align: center"}
-{#fig-inflation fig-align=center width=90%}
+{#fig-inflation fig-align=center width=90% fig-alt=""}
:::
We define three pieces of terminology to describe what is happening in the above screenshot:
From 90dcc60c3c3937f2883d02829d958c1b55cae742 Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 16:53:50 -0800
Subject: [PATCH 05/14] initial color contrast fixes
---
_quarto.yml | 4 +++-
assets/custom-error-colors.css | 34 ++++++++++++++++++++++++++++++++++
2 files changed, 37 insertions(+), 1 deletion(-)
create mode 100644 assets/custom-error-colors.css
diff --git a/_quarto.yml b/_quarto.yml
index a480866..2f42a49 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -175,7 +175,9 @@ format:
html:
theme: cosmos
fontsize: 1em
- css: assets/styles.css
+ css:
+ - assets/styles.css
+ - assets/custom-error-colors.css
toc: true
include-in-header:
file: siteimprove.html
diff --git a/assets/custom-error-colors.css b/assets/custom-error-colors.css
new file mode 100644
index 0000000..cf79800
--- /dev/null
+++ b/assets/custom-error-colors.css
@@ -0,0 +1,34 @@
+/*
+ * Fix WCAG color contrast issues for ANSI colors in Quarto error outputs.
+ * These colors are high-contrast replacements for default ANSI light-colors.
+ */
+
+.cell-output-error .ansi-red-fg,
+.cell-output-error .ansi-bright-red-fg {
+ /* Replace light red/bright red with a darker, accessible red */
+ color: #B30000; /* Example: Dark Crimson */
+}
+
+.cell-output-error .ansi-green-fg,
+.cell-output-error .ansi-bright-green-fg {
+ /* Replace light green/bright green with a darker, accessible green */
+ color: #006600; /* Example: Dark Green */
+}
+
+.cell-output-error .ansi-cyan-fg,
+.cell-output-error .ansi-bright-cyan-fg {
+ /* Replace light cyan/bright cyan with a darker, accessible cyan/teal */
+ color: #006161; /* Example: Dark Teal */
+}
+
+/* Add other colors as needed if they also fail contrast checks */
+.cell-output-error .ansi-yellow-fg,
+.cell-output-error .ansi-bright-yellow-fg {
+ color: #886A00; /* Example: Dark Gold */
+}
+
+/* Ensure the general error text is also high contrast (often dark red/maroon) */
+.cell-output-error {
+ /* This targets the error text that isn't specifically ANSI colored */
+ color: #990000; /* Darker red for general error text */
+}
\ No newline at end of file
From 9a32d2373a39565d41dcfe7295ab8d013be5bc0e Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 17:16:02 -0800
Subject: [PATCH 06/14] fix color contrast yellow highlight
---
assets/custom-error-colors.css | 20 ++++++++++++++------
1 file changed, 14 insertions(+), 6 deletions(-)
diff --git a/assets/custom-error-colors.css b/assets/custom-error-colors.css
index cf79800..59305d6 100644
--- a/assets/custom-error-colors.css
+++ b/assets/custom-error-colors.css
@@ -1,34 +1,42 @@
/*
- * Fix WCAG color contrast issues for ANSI colors in Quarto error outputs.
+ * Fix WCAG color contrast issues for ANSI colors in Quarto cell error outputs.
* These colors are high-contrast replacements for default ANSI light-colors.
*/
.cell-output-error .ansi-red-fg,
.cell-output-error .ansi-bright-red-fg {
/* Replace light red/bright red with a darker, accessible red */
- color: #B30000; /* Example: Dark Crimson */
+ color: #B30000;
}
.cell-output-error .ansi-green-fg,
.cell-output-error .ansi-bright-green-fg {
/* Replace light green/bright green with a darker, accessible green */
- color: #006600; /* Example: Dark Green */
+ color: #006600;
}
.cell-output-error .ansi-cyan-fg,
.cell-output-error .ansi-bright-cyan-fg {
/* Replace light cyan/bright cyan with a darker, accessible cyan/teal */
- color: #006161; /* Example: Dark Teal */
+ color: #006161;
}
-/* Add other colors as needed if they also fail contrast checks */
.cell-output-error .ansi-yellow-fg,
.cell-output-error .ansi-bright-yellow-fg {
- color: #886A00; /* Example: Dark Gold */
+ color: #886A00;
}
/* Ensure the general error text is also high contrast (often dark red/maroon) */
.cell-output-error {
/* This targets the error text that isn't specifically ANSI colored */
color: #990000; /* Darker red for general error text */
+}
+
+/*
+ * Part of the output is highlighted with a yellow background. Force all text
+ * on yellow backgrounds to be black for maximum contrast.
+ */
+.cell-output-error .ansi-yellow-bg,
+.cell-output-error .ansi-bright-yellow-bg {
+ color: #000000 !important;
}
\ No newline at end of file
From 42cdad47f3fd7b561ef3f70fd90d4b0c1af5f3ff Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 17:32:37 -0800
Subject: [PATCH 07/14] remove code styling from link
---
17-dictionaries/index.qmd | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/17-dictionaries/index.qmd b/17-dictionaries/index.qmd
index 270257d..4c6548c 100644
--- a/17-dictionaries/index.qmd
+++ b/17-dictionaries/index.qmd
@@ -116,7 +116,7 @@ dog
dog.pop(4, None)
```
-Why? Find out the answer in the official [Python documentation on `pop`](https://docs.python.org/3/library/stdtypes.html#dict.pop)!
+Why? Find out the answer in the official [Python documentation](https://docs.python.org/3/library/stdtypes.html#dict.pop) on `pop`!
## Dictionary Properties
From 7e8ca81a886543ff241188971f6868defb777901 Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 17:48:18 -0800
Subject: [PATCH 08/14] see this fixes aria allowed attr
---
16-measurements/iteration-ii.qmd | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/16-measurements/iteration-ii.qmd b/16-measurements/iteration-ii.qmd
index ee5d6ac..79cc657 100644
--- a/16-measurements/iteration-ii.qmd
+++ b/16-measurements/iteration-ii.qmd
@@ -66,7 +66,7 @@ For `not elt`, recall our discussion of **truthy values**:
* Therefore for numeric values of `elt`, the only instance in which `not elt` will evaluate to `True` is when `elt` is `0`: `not elt` is `not 0` is `not False` is `True`.
* All non-zero numeric values of `elt` will evaluate to `False`, e.g., when `elt` is `1`: `not elt` is `not 1` is `not True` is `False`.
-::: {.callout-note title="Explanation: Each Line Explained" collapse="true"}
+::: {.callout-note title="Explanation: Each Line Explained" collapse="true" role="button"}
Each line explained:
@@ -98,7 +98,7 @@ triplets(make_array(0, 1, 0, 0, 1, 0, 0, 0, 0, 1))
* (Line 12): Return the number of triples seen.
:::
-::: {.callout-note title="Explanation: Array Example Explained" collapse="true"}
+::: {.callout-note title="Explanation: Array Example Explained" collapse="true" role="button"}
```{.python code-line-numbers="true"}
def triplets(arr):
From 6a134f99d71e25266d842bfaf0fafe1155dc5b87 Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 18:08:46 -0800
Subject: [PATCH 09/14] fix callout aria
---
16-measurements/iteration-ii.qmd | 4 ++--
_quarto.yml | 2 ++
assets/callout-aria-fix.html | 24 ++++++++++++++++++++++++
3 files changed, 28 insertions(+), 2 deletions(-)
create mode 100644 assets/callout-aria-fix.html
diff --git a/16-measurements/iteration-ii.qmd b/16-measurements/iteration-ii.qmd
index 79cc657..ee5d6ac 100644
--- a/16-measurements/iteration-ii.qmd
+++ b/16-measurements/iteration-ii.qmd
@@ -66,7 +66,7 @@ For `not elt`, recall our discussion of **truthy values**:
* Therefore for numeric values of `elt`, the only instance in which `not elt` will evaluate to `True` is when `elt` is `0`: `not elt` is `not 0` is `not False` is `True`.
* All non-zero numeric values of `elt` will evaluate to `False`, e.g., when `elt` is `1`: `not elt` is `not 1` is `not True` is `False`.
-::: {.callout-note title="Explanation: Each Line Explained" collapse="true" role="button"}
+::: {.callout-note title="Explanation: Each Line Explained" collapse="true"}
Each line explained:
@@ -98,7 +98,7 @@ triplets(make_array(0, 1, 0, 0, 1, 0, 0, 0, 0, 1))
* (Line 12): Return the number of triples seen.
:::
-::: {.callout-note title="Explanation: Array Example Explained" collapse="true" role="button"}
+::: {.callout-note title="Explanation: Array Example Explained" collapse="true"}
```{.python code-line-numbers="true"}
def triplets(arr):
diff --git a/_quarto.yml b/_quarto.yml
index 2f42a49..588e46c 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -181,4 +181,6 @@ format:
toc: true
include-in-header:
file: siteimprove.html
+ include-after-body:
+ - assets/callout-aria-fix.html
diff --git a/assets/callout-aria-fix.html b/assets/callout-aria-fix.html
new file mode 100644
index 0000000..fc21b72
--- /dev/null
+++ b/assets/callout-aria-fix.html
@@ -0,0 +1,24 @@
+
\ No newline at end of file
From d40d50d1fa0da11f7065570960d2d08c607c9b88 Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 18:29:06 -0800
Subject: [PATCH 10/14] more a11y fixes and remove deprecated files
---
...ecated-index.qmd => _deprecated-index.qmd} | 0
...deprecated-eda.qmd => _deprecated-eda.qmd} | 0
...ecated-index.qmd => _deprecated-index.qmd} | 0
_quarto.yml | 2 +-
assets/a11y-fixes.html | 42 +++++++++++++++++++
assets/callout-aria-fix.html | 24 -----------
6 files changed, 43 insertions(+), 25 deletions(-)
rename 01-intro/{deprecated-index.qmd => _deprecated-index.qmd} (100%)
rename 06-variables-ii/{deprecated-eda.qmd => _deprecated-eda.qmd} (100%)
rename 06-variables-ii/{deprecated-index.qmd => _deprecated-index.qmd} (100%)
create mode 100644 assets/a11y-fixes.html
delete mode 100644 assets/callout-aria-fix.html
diff --git a/01-intro/deprecated-index.qmd b/01-intro/_deprecated-index.qmd
similarity index 100%
rename from 01-intro/deprecated-index.qmd
rename to 01-intro/_deprecated-index.qmd
diff --git a/06-variables-ii/deprecated-eda.qmd b/06-variables-ii/_deprecated-eda.qmd
similarity index 100%
rename from 06-variables-ii/deprecated-eda.qmd
rename to 06-variables-ii/_deprecated-eda.qmd
diff --git a/06-variables-ii/deprecated-index.qmd b/06-variables-ii/_deprecated-index.qmd
similarity index 100%
rename from 06-variables-ii/deprecated-index.qmd
rename to 06-variables-ii/_deprecated-index.qmd
diff --git a/_quarto.yml b/_quarto.yml
index 588e46c..4dba3c2 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -182,5 +182,5 @@ format:
include-in-header:
file: siteimprove.html
include-after-body:
- - assets/callout-aria-fix.html
+ - assets/a11y-fixes.html
diff --git a/assets/a11y-fixes.html b/assets/a11y-fixes.html
new file mode 100644
index 0000000..6269e2b
--- /dev/null
+++ b/assets/a11y-fixes.html
@@ -0,0 +1,42 @@
+
\ No newline at end of file
diff --git a/assets/callout-aria-fix.html b/assets/callout-aria-fix.html
deleted file mode 100644
index fc21b72..0000000
--- a/assets/callout-aria-fix.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
\ No newline at end of file
From 4247ada2e733ad2e9e77fe2d874fd1ceb27bb0e0 Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 18:40:58 -0800
Subject: [PATCH 11/14] more selectors for scrollable region
---
assets/a11y-fixes.html | 16 ++++++++++++----
1 file changed, 12 insertions(+), 4 deletions(-)
diff --git a/assets/a11y-fixes.html b/assets/a11y-fixes.html
index 6269e2b..9d5b9a1 100644
--- a/assets/a11y-fixes.html
+++ b/assets/a11y-fixes.html
@@ -20,15 +20,23 @@
// 1. Target all code blocks (Source Code and Code Output elements)
// that are scrollable (have overflow:auto/scroll).
- var scrollableRegions = document.querySelectorAll(
+var scrollableRegions = document.querySelectorAll(
// 1. Source Code
'div.sourceCode > pre, ' +
- // 2. Output inside a generic cell-output (Handles .cell-output-stdout.cell-output > pre and .cell-output-display.cell-output > pre)
+ // 2. Output inside a generic cell-output
'.cell-output > pre, ' +
- // 3. The main DIV container for cell-output-display (Handles #ID > .cell-output-display.cell-output)
- '.cell-output-display.cell-output'
+ // 3. The main DIV container for cell-output-display (from previous fix)
+ '.cell-output-display.cell-output, ' +
+
+ // --- NEW SELECTORS TO CATCH ERROR AND ANSI BLOCKS ---
+
+ // 4. PRE tag inside any ANSI-escaped output (e.g., .ansi-escaped-output > pre)
+ '.ansi-escaped-output > pre, ' +
+
+ // 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
+ '.cell-output-error.cell-output > .ansi-escaped-output > pre'
);
scrollableRegions.forEach(function(region) {
From b0a7cacea972c193c31bb2de59226538a4096b77 Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 18:53:42 -0800
Subject: [PATCH 12/14] even more selectors
---
assets/a11y-fixes.html | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/assets/a11y-fixes.html b/assets/a11y-fixes.html
index 9d5b9a1..f023990 100644
--- a/assets/a11y-fixes.html
+++ b/assets/a11y-fixes.html
@@ -36,7 +36,9 @@
'.ansi-escaped-output > pre, ' +
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
- '.cell-output-error.cell-output > .ansi-escaped-output > pre'
+ '.cell-output-error.cell-output > .ansi-escaped-output > pre' +
+
+ 'pre[id]' // Target any PRE tag that has an ID attribute (a common source of scrollability)
);
scrollableRegions.forEach(function(region) {
From 3e49ee5ecedd358d327bc2ade1125bcd5d500bf1 Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 19:02:22 -0800
Subject: [PATCH 13/14] fix typo
---
assets/a11y-fixes.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/assets/a11y-fixes.html b/assets/a11y-fixes.html
index f023990..e223a16 100644
--- a/assets/a11y-fixes.html
+++ b/assets/a11y-fixes.html
@@ -36,7 +36,7 @@
'.ansi-escaped-output > pre, ' +
// 5. The deepest container for error output (e.g., #ID > .cell-output-error... > .ansi-escaped-output > pre)
- '.cell-output-error.cell-output > .ansi-escaped-output > pre' +
+ '.cell-output-error.cell-output > .ansi-escaped-output > pre, ' +
'pre[id]' // Target any PRE tag that has an ID attribute (a common source of scrollability)
);
From 9e0ad17051d704b7d9d6ca53d46e2338fd84a0d5 Mon Sep 17 00:00:00 2001
From: Silas Santini <70163606+pancakereport@users.noreply.github.com>
Date: Fri, 12 Dec 2025 19:10:10 -0800
Subject: [PATCH 14/14] targeted fixes
---
assets/a11y-fixes.html | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/assets/a11y-fixes.html b/assets/a11y-fixes.html
index e223a16..b9aac5e 100644
--- a/assets/a11y-fixes.html
+++ b/assets/a11y-fixes.html
@@ -48,5 +48,9 @@
region.setAttribute('tabindex', '0');
}
});
+
+ // --- Specific Fix for the Last Two Known Violations ---
+ document.querySelector('#the-structure-of-kittens\\.html > pre')?.setAttribute('tabindex', '0');
+ document.querySelector('#ranges-are-sequences-of-consecutive-numbers > pre')?.setAttribute('tabindex', '0');
});
\ No newline at end of file