31:T619,{ const container = d3.create('svg') .attr('id', 'chart') .attr('width', w) .attr('height', h); const xAxisTitle = container.append('g') .attr('transform', `translate(${(w - margin.right) / 2}, ${h})`) .append('text') .attr('class', 'axisTitle') .attr('text-anchor', 'start') .text('Cities'); const xAxis = container.append('g') .attr('transform', `translate(0, ${h - margin.bottom})`) .call(d3.axisBottom(x)) xAxis.selectAll('text') .attr('fill', tickColor); const yAxisTitle = container.append('g') .attr('transform', `translate(${margin.left - 35}, ${(h - margin.top) / 2}) rotate(-90)`) .append('text') .attr('class', 'axisTitle') .attr('text-anchor', 'middle') .text('Number of rainy days (2024)'); const yAxis = container.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) yAxis.selectAll('text') .attr('fill', tickColor) container.selectAll('text.axisTitle') .attr('fill', 'black') .attr('font-size', '0.7em') .attr('font-weight', 'bold') .attr('font-family', 'sans-serif') container.selectAll('.domain') .remove() const bars = container.selectAll('rect.bar') .data(data, d => d.city) .join('rect') .attr('class', 'bar') .attr('x', d => x(d.city)) .attr('y', d => y(d.rainyDays)) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d.rainyDays)) .attr('fill', d => color(d.rainyDays > 130)); return container.node(); }32:T6c2,### Don't rely _only_ on color Or: _Get it right in black and white_ Our improved color palette makes our chart decodable for _some_ users with color vision deficiencies, but not all. Relying _only_ on color to communicate elements of our data still excludes users with achromatopsia and anyone who prints out our document in greyscale (a relevant consideration if you're preparing figures for a scientific paper or thesis). We'll go through a couple of strategies to do this. #### Filled vs. hollow shapes Before getting too fancy, a simple strategy to consider is _using hollow_ _as well as filled-in_ shapes in your color encoding. ${flag()} Turn on the achromatopsia simulator and see if you can distinguish the bars below. This approach is easy to implement and the color encoding will survive conversion to greyscale. But it does have weaknesses: - It only works when you have 2 categories; beyond that, you need an additional color or visual clue. - It can cause difficulties when there is overplotting or occlusion. - Hollow shapes have less visual weight. You need to make sure their stroke (border) is noticeable, i.e., use a color that has high contrast with the background color, and don't make the stroke too thin. 33:T94b,**Step-by-step explanation** The SVG code above has some new concepts. The basic idea is that you're defining what a little "window" of the bar looks like, and then the renderer simply fills in the bar by repeating the pattern. First, you create the [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/defs) environment. It's an SVG element that isn't itself rendered, but whose job it is to hold graphical objects you intend to re-use. ```html ... ``` Inside the ``, we define two ``s. The first pattern goes like this: ```html ``` Here's what the different parts mean: - `id="dots"`: The name of this pattern. I called it `"dots"` because it's a dot pattern. We'll use this name when we apply the pattern. - The pattern defines its own dimensions `x="0" y="0" width="5" height="5"`. It's a little 5x5 tile. - `patternUnits="userSpaceOnUse"`: This tells the pattern that the dimensions I gave it (5x5) are pixels. Without this, they would be interpreted as fractions of the shape being filled. If you prefer to use fractions like `0.5` (for half the bar's width), leave this out. - Then, inside each pattern, I'm drawing a simple rectangle and circle. - For the circles, I'm using `d3.color(colors[0]).darker(1)` to compute a darker shade of our first color . The `#lines` pattern works the same way with the second color . ([See the docs](https://d3js.org/d3-color#color_darker).) With those pieces, we've defined a _fill_ that we can use in our bars. That is, we can use our new pattern instead of a solid color. We do this by setting the bar's `fill` to `url(#dots)` (or whatever we named our pattern). ```html ``` **Consider the legend**. If we're using a pattern for a fill, it should also be visible in our legend. The cleanest way to make this happen is to use our patterns as the `range` of our color scale, which we'll use both for the bars _and_ the legend. 34:T6a8,## Screen readers Many non-sighted or partially-sighted users use screen readers to help navigate the Web. We need to make sure our visualizations are accessible to them! ### Listen to your chart ${flag()} First, let's hear what our in-built screen readers have to say about our charts. Follow these steps to trigger your computer's screen reading technology: - If you don't have a preferred screen reader that you use, on macOS, hit Cmd+Enter to trigger VoiceOver; on Windows, hit Ctrl+Win+Enter to trigger Narrator. (Note that these are typically not the screen readers that real users use, but they should get you going quickly.) - Press Ctrl+Option+U (macOS) or Narrator+F6 (Windows) to bring up heading navigation. This should let you jump to **The Chart** quickly. ([The "Narrator" key may be Caps Lock or Insert](https://support.microsoft.com/en-us/accessibility/windows/narrator/chapter-5-navigation).) You should start hearing a narrator describe ${chartLink('your chart')}. For me, it mostly went like this (each screen reader is different; this is not standardized): - "Mozilla Firefox" - "You are currently on web content; has keyboard focus" - "To enter the web content, press Control+Shift+Option Down Arrow" Then it reads out the text elements _and only the text elements_ present in the figure. We can improve this situation significantly by adding [basic HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML) to our chart elements, since they are, at the end of the day, HTML elements. 35:T4cf,### Chart elements to help the screen reader Since the screen reader will read out `` elements, we should keep that in mind when thinking about the user's experience. _What do we want the user to hear first?_ Probably an overview of what the chart shows. You can do this in a few ways. We're going to use basic HTML elements. Let's place the chart in a `

` element and include a `

`. These two elements work together like this: ```html

...

A meaningful caption.

``` This has two benefits: - It will render a nice-looking caption using the existing styles for that element. - Many screen readers read out the `

` when entering a `

` environment. ${flag()} **Add your D3 chart to a `

` environment.** Right now we're just returning the SVG container: ```js return container.node() ``` Instead, let's return a `

` element that contains our SVG: ```js return htl.html`

\${container.node()}

The number of rainy days in SLO, Boston, and Seattle in 2024.

` ``` Here's a link to go ${chartLink('back to the chart')}.36:T474,### Adding accessibility attributes In this chart that contains few marks (the bars and the legend swatches), we can use accessibility attributes to induce screen readers to "read out" (or not read out) chart elements. ${flag()} We likely don't want all the tick labels read out. That is, it's not useful for the user to hear "0, 20, 40, 60 ...". ${chartLink('Go back to the chart')} and set the following attributes on the `yAxis` group: - `role`: `"img"` - `aria-label`: A meaningful label, e.g., "Vertical axis: rainy days from 0 to 250". The `0` and `250` should be derived from the appropriate scale's domain. ${flag()} Set `aria-label` attributes on the bars. Each label should say something like "**San Luis Obispo** had **48** rainy days.". The **bolded** bits should be computed for each data point. ${flag()} Finally, since we are reading out each bar, and each bar contains the information that sighted user would get from the x axis, we can tell the screen reader _not_ to read out the x axis. Set `aria-hidden` to `true` on the `xAxis` group. Once you've made these changes, listen to ${chartLink('your chart')} again.37:T5f8,### Should you read out all the data? In many cases, certainly not! Reading out the bars here was fine, since there were only 3. But can you imagine if a screen reader read out hundreds or even dozens of points in a scatterplot? The key is to _design for the user of the screen reader_, just like you are designing for sighted users. What do you want to communicate, perceptually, in your chart? For example: - As we saw above, we can use `aria-hidden="true"` to prevent screen readers from reading individual elements inside the chart. - Sometimes, you might not want to read _any_ elements from the chart, but rather treat the chart as a single image. In those cases you would do _both_ of the following: - Give the top-level SVG node (`container` in our chart) the `role="img"` attribute. This will tell screen-readers to not read out its child elements. - Since the SVG is now an opaque image, you need to give it an `aria-label` that meaningfully describes the chart (e.g., "A bar-chart showing the number of rainy days in 2024 in San Luis Obispo, Boston, and Seattle"). This is particularly important if the visual description is likely to be different from the `

`. For example, I often include a chart's _message_ in the `figcaption`, and don't often say "A bar chart containing...". - Yet another strategy to consider is to provide a `` containing the same data that's present in the chart. `

`s, when made well, have well-defined semantics that help screen readers describe them.38:[{"id":"8dd83fa437a0323a375ac0941007cd7244bf4af1dcc6d8e3274169b7099e8f9c3ac6cadfd3dbef054bc2e52ca2d6c76336c36bdd342fe87fd9a89e4af097f0a6","href":"https://static.observableusercontent.com/files/8dd83fa437a0323a375ac0941007cd7244bf4af1dcc6d8e3274169b7099e8f9c3ac6cadfd3dbef054bc2e52ca2d6c76336c36bdd342fe87fd9a89e4af097f0a6","name":"protanopia@1.png","type":"image/png","lastModified":1779770248143.955,"size":5741},{"id":"adad9b2357aa784a55409620fac70b8058da95c1a5cd21ebf588d0b5e307dd92411ed0b0ee91418d3447e329d0077c45da6281b5cc5014d1ca8a46cc37181526","href":"https://static.observableusercontent.com/files/adad9b2357aa784a55409620fac70b8058da95c1a5cd21ebf588d0b5e307dd92411ed0b0ee91418d3447e329d0077c45da6281b5cc5014d1ca8a46cc37181526","name":"tritanopia@1.png","type":"image/png","lastModified":1779770248158.299,"size":5540},{"id":"bbc0cfb4399ec845000c0374a230150487d3e89b4fd39455438339924c218b872bd18a72bf1772a0cad79b580b2e7b8b3904da256f076ca1bba5af6d1c2333cf","href":"https://static.observableusercontent.com/files/bbc0cfb4399ec845000c0374a230150487d3e89b4fd39455438339924c218b872bd18a72bf1772a0cad79b580b2e7b8b3904da256f076ca1bba5af6d1c2333cf","name":"achromatopsia@1.png","type":"image/png","lastModified":1779770248162.513,"size":5086},{"id":"3f79992743c665af6cd95b0a30eb06b6ea57d894fd69eb58284d19630565324db18e5cf744950d2c2c4696618290d0e9053193417385cb60e8cdd1ccf1ae54fb","href":"https://static.observableusercontent.com/files/3f79992743c665af6cd95b0a30eb06b6ea57d894fd69eb58284d19630565324db18e5cf744950d2c2c4696618290d0e9053193417385cb60e8cdd1ccf1ae54fb","name":"contrast.png","type":"image/png","lastModified":1779770248166.164,"size":4748},{"id":"6d2ea1e7b940b144f0221979e3f96162974d771d17d3f3d1a24824fc52a39e3c17fa82da688416193bd036fbfa572159a726f3e97d3afe278a2df3c246f4c98c","href":"https://static.observableusercontent.com/files/6d2ea1e7b940b144f0221979e3f96162974d771d17d3f3d1a24824fc52a39e3c17fa82da688416193bd036fbfa572159a726f3e97d3afe278a2df3c246f4c98c","name":"deuteranopia@1.png","type":"image/png","lastModified":1779770300066.792,"size":5694}] 2f:{"title":"Accessible visualization with D3","cells":[{"id":0,"value":"# Accessible visualization with D3","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"This notebook follows the structure of and adapts [Sarah Fossheim](https://fossheim.io/)'s tutorial [_An introduction to accessible visualizations with D3.js_](https://fossheim.io/writing/posts/accessible-dataviz-d3-intro/).","pinned":false,"hidden":false,"mode":"md"},{"id":380,"value":"toc('h2', htl.html`Contents`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"chart = {\n return md`### The Chart\nThe following simple bar chart (adapted from [Fossheim's tutorial](https://fossheim.io/writing/posts/accessible-dataviz-d3-intro/)) shows the number of rainy days in San Luis Obispo, Boston, and Seattle in 2024. Cities where there were more than 130 rainy days in the year are shown with a reddish fill, to start.`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"{\n return htl.html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"The chart has the following issues:\n\n- **Poor contrast** between the background color and the colors of the bars and tick labels.\n- **Colorblind-unfriendly colors** used for the bars.\n- **No legend** explaining what the colors mean.\n- Finally, available **_only to sighted users_** is the visual clue that Seattle had more rainy days than Boston, and Boston had more rainy days than SLO.","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"This notebook walks through some steps we can take to make this chart more informative for everyone. The example is based on [Sarah Fossheim's walkthrough](https://fossheim.io/writing/posts/accessible-dataviz-d3-intro/) and contains some additions of my own.\n\n---\n\nThere is not only a single solution to making tools accessible.\nIt's a set of considerations for readers in different situations, like users with color vision differences, low-vision users, screen reader users, users printing in greyscale, or users viewing your chart in bright sunlight.\nEach strategy below addresses some of these but not others.\n\nAs you read, look for ${flag()} flags that signal an action you need to take.","pinned":false,"hidden":false,"mode":"md"},{"id":237,"value":"## Color\n\nLet's start by dealing with the colors.\nRight now our chosen colors are not friendly to users with different kinds of color vision deficiency.\n\nWe can use Firefox's [tools to simulate color vision](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/simulation/index.html) to get a sense for what our simple chart would look like with various types of color vision deficiency.\n[Google Chrome also has a similar feature](https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies).\n\nOur chart colors are mostly meaningless for some of the color vision deficiency types (including the most common ones—protanopia and deuteranopia—[which affect roughly 8% of males and 0.5% of females](https://en.wikipedia.org/wiki/Color_blindness)).","pinned":false,"hidden":false,"mode":"md"},{"id":244,"value":"

\n ${await FileAttachment(\"protanopia@1.png\").image({ width: 150 })}\n

Protanopia
(no red)

\n \n

\n ${await FileAttachment(\"deuteranopia@1.png\").image({ width: 147 })}\n

Deuteranopia
(no green)

\n \n

\n ${await FileAttachment(\"tritanopia@1.png\").image({ width: 143 })}\n

Tritanopia
(no blue)

\n \n

\n ${await FileAttachment(\"achromatopsia@1.png\").image({ width: 150 })}\n

Achromatopsia
(no colour)

\n \n

\n ${await FileAttachment(\"contrast.png\").image({ width: 135 })}\n

Contrast loss

\n \n

","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"### Change the colors used\n\n${flag()} Update colors to a pair that (1) have a high contrast with the background, and (2) can be easily distinguished from each other.\n\nThe colors are defined in the cell below. To start, it's using light red and light green, which aren't very nice.\n\nPick colors from [ColorBrewer](https://colorbrewer2.org/#type=qualitative&scheme=Dark2&n=3) or use a tool like [Coolors](https://coolors.co/contrast-checker/ffffff-000000) to create an accessible palette, or use an [in-built colorscheme from D3](https://d3js.org/d3-scale-chromatic/categorical) (which exist for good reason).\n\n_In general, you should not \"roll your own\" color palettes._ If you **need** to (e.g., for branding purposes or if the colors have semantic meaning), you should use tools like the ones linked above to create accessible palettes.","pinned":false,"hidden":false,"mode":"md"},{"id":663,"value":"colors = ['#F99B77', '#8CD0A1'] // <-- Update these to better colors","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"$${flag()} The x axis tick labels are using a pretty low-contrast color. Change it to black.","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"tickColor = '#B9B8CD'","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"$${flag()} **Test your changes!** Go back to ${chartLink()} and the test it under different simulated color vision deficiency modes.","pinned":false,"hidden":false,"mode":"md"},{"id":419,"value":"### Add a legend\n\nWe shouldn't use encodings without axes or legends explaining how they should be decoded.\nWe'll add a simple legend that describes the meanings of the colors.\n\nThe function below draws a legend using our color scale.","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"function legend(x, y) {\n const legend = `\n \n \n \n More than 130 rainy days.\n Fewer than 130 rainy days.\n \n `\n\n return legend;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"$${flag()} Use the function above to add the legend to ${chartLink()}. You can do it by adding the following code to the cell:\n\n```js\nconst g = container.append('g') // Add a new to the chart\n .html(legend(w - margin.right - 20, margin.top)) // Set the 's html content to be the legend SVG\n```\n\n**Do you think this code should appear before or after the code that adds the bars to the SVG?** Think through your answer, and hold on to it for the time being.","pinned":false,"hidden":false,"mode":"md"},{"id":411,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"#### Texture/hatching\n\n(The patterns technique here is due to [Fossheim's tutorial](https://fossheim.io/writing/posts/accessible-dataviz-d3-intro/).)\n\nAnother option is to use texture in addition to color. So, instead of differentiating bars only with `fill`:\n\n\n\nAdd the redundant encoding of _texture_, using [SVG Patterns](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Patterns).\nSee the code for the patterns in the cell below, then read the explanation that follows.","pinned":false,"hidden":false,"mode":"md"},{"id":559,"value":"\n","pinned":true,"hidden":false,"mode":"md"},{"id":637,"value":"These fills will now certainly survive printing to greyscale, and you can scale this up to **a few more** categories. However, just like color, it's less useful when there are more than 3 or 4 categories. If you need to display more categories, consider [small multiples](https://observablehq.com/@ayaankazerouni/csc477-view-composition#cell-273) instead.\n\nYou should take care to not create super-busy patterns, which can be distracting and visually overwhelming.","pinned":false,"hidden":false,"mode":"md"},{"id":590,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":733,"value":"$${flag()} Update the `range` of the color scale below to use `\"url(#dots)\"` and `\"url(#lines)\"` as the two colors instead of the `colors` array. Then go ${chartLink('back to the chart')} and see how it looks!","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"color = d3.scaleOrdinal()\n .domain([true, false])\n .range(colors) // <-- Use the patterns here","pinned":true,"hidden":false,"mode":"ojs"},{"id":755,"value":"#### Text annotations\n\nA final strategy you may apply, in concert with or instead of texture, is to display text labels above or on the bars. This removes any ambiguity about what's being depicted.","pinned":false,"hidden":false,"mode":"md"},{"id":422,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":848,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":839,"value":"### Order of elements\n\nYou should consider the order in which content is encountered.\n\nThat is, you probably want the axis titles to be read _before_ the chart's graphics themselves are described. The order in which you add things to the SVG container will influence (but not completely control) this.\n\n${flag()} Is the legend that you added earlier being read in a way that makes sense? Should it be read at all?","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":855,"value":"$37","pinned":false,"hidden":false,"mode":"md"},{"id":857,"value":"## More resources\n\n- [_HTML: A good basis for Accessibility_](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML_). MDN.\n- This notebook follows the structure of Sarah Fossheim's [_An introduction to accessible data visualizations with D3.js_](https://fossheim.io/writing/posts/accessible-dataviz-d3-intro/).\n - Their [other writings on Accessibility](https://fossheim.io/writing/tag/accessibility/) are also excellent.\n- Frank Elavsky's notebook series on [_Accessible Color and Contrast for Visualization_](https://observablehq.com/@frankelavsky/chartability-contrast-series).\n- The [_Chartability workbook_](https://chartability.github.io/POUR-CAF/), also from Elavsky, goes through guidelines for making accessible visualizations.\n - While this notebook only talks about addressing _perceivability barriers_, i.e., making the vis perceivable in multiple ways, other barriers, e.g., to _operability_, _understandability_, and _robustness_ are also important to consider.","pinned":false,"hidden":false,"mode":"md"},{"id":844,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"x = d3.scaleBand()\n .domain(new Set(data.map(d => d.city)))\n .range([margin.left, w - margin.right])\n .padding(0.8)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.rainyDays)])\n .range([h - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"h = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"w = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"margin = ({\n top: 30,\n bottom: 40,\n left: 50,\n right: 135 \n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"data = {\n return d3.groups(weather.objects(), d => d.city)\n .map(([city, days]) => ({\n city, rainyDays: days.filter(d => d.precipitation > 0).length\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"import { weather } from '@ayaankazerouni/csc477-view-composition'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { toc } from '@jonfroehlich/collapsible-toc'","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"import { flag, stylesheet } from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":929,"value":"returnTo = Generators.observe(notify => {\n notify(null);\n\n const handler = (event) => {\n const link = event.target.closest('.chart-link');\n if (!link) return;\n notify(link);\n };\n\n document.addEventListener('click', handler);\n return () => document.removeEventListener('click', handler);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"chartLink = (text=\"the chart\") => htl.html`${text} ↑`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}