\` element that provides an accessible, short-text description. - The data values are included directly instead of showing a Y Axis so that blind people using a screen-reader that cannot infer the value from the bar height and Y Axis ticks and labels can understand the information shown. - A sensible reading order for the X Axis labels and bar values e.g. "Sat: 42, Sun: 31…" instead of "Sat, Sun, … 42, 31, …" - \`aria-label="Legend"\` is read before legend itself, which is read before reading the chart values. - The legend text, "Highest average cells written", is included during reading of the bar with that pattern applied. - \`.attr("role", "presentation")\` applied to all \`rect\` elements to hide them from assistive technology. - The typeface is [Noto Sans](https://fonts.google.com/specimen/Noto+Sans?sidebar.open&selection.family=Noto+Sans:wght@400;700#standard-styles), which uses a single-barrel, "schoolbook" "g" (see [A new typeface for Parliament by Jack Craig, Parliamentary Digital Service](https://pds.blog.parliament.uk/2018/04/23/a-new-typeface-for-parliament/) for more details), has a high x-height, is legible at small sizes, and supports over 30 scripts: > When text is rendered by a computer, sometimes there will be characters in the text that can not be displayed, because no font that supports them is available to the computer. When this occurs, small boxes are shown to represent the characters. We call those small boxes “tofu,” and we want to remove tofu from the Web. This is how the Noto font families got their name. `34:T41f,render_data_table = (data, options = {}) => { let caption = ""; let ariaLabelledbyCaption = ""; if (options.caption) { caption = `<caption id="caption">${options.caption}</caption>`; ariaLabelledbyCaption = `aria-labelledby="caption"`; } let theadRowHeaderCells; if (options.columns) { theadRowHeaderCells = options.columns.map((d) => { return `<th scope="col">${d}</th>` }); } else { theadRowHeaderCells = Object.keys(data[0]).map((d, i) => { return `<th scope="col">${d}</th>` }); } let focusable = 'tabindex="0"'; if (options.focusable === false) { focusable = ''; } return html` <div class="table-container" ${focusable} role="group" ${ariaLabelledbyCaption}> <table> ${caption} <thead> <tr>${theadRowHeaderCells}</tr> <thead> <tbody> ${data.map(row => { return html`<tr>${Object.values(row).map(col => { return `<td>${col}</td>`; })}</tr>`; })} </tbody> </table> </div> `}35:T752,md`Data table accessibility considerations: - Caption element is present and describes the data table: [Using caption elements to associate data table captions with data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html). - The caption text has a max width style applied using \`em\` units to prevent long line lengths to ensure readability: [C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized](https://www.w3.org/TR/WCAG20-TECHS/C20.html). - The table is properly structured with \`<thead>\` and \`<tbody>\` elements. - \`th\` elements have \`scope="col"\` attributes applied: [H63: Using the scope attribute to associate header cells and data cells in data tables](https://www.w3.org/TR/WCAG20-TECHS/H63.html). - The increased \`font-weight\` of the first \`td\` cell in each row is purely a presentational style choice. - The containing \`div.table-container\` has \`overflow-x: auto;\` applied to ensure wide content can be reached via scrolling on small screens: [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/). - The \`tabindex="0"\` ensures the scrollable region is focusable by keyboard users: [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/). - The \`aria-labelledby="caption"\` points to the element with \`id="caption"\` to indicate what element describes it to explain the scrollable region: [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/). - The \` role="group"\` ensures we can apply the \`aria-labelledby=""\` attribute: [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/). - The table styling, \`white-space: nowrap;\`, ensures the text does not wrap at spaces, but instead stays on one line, keeping the table height down. `36:T450, md` Accessible charts: - [An intro to designing accessible data visualizations by Sarah L. Fossheim](https://fossheim.io/writing/posts/accessible-dataviz-design/) - [An introduction to accessible data visualizations with D3.js by Sarah L. Fossheim](https://fossheim.io/writing/posts/accessible-dataviz-d3-intro/) - [Accessibility at Penn State | Charts & Accessibility](https://accessibility.psu.edu/images/charts/) - [WCAG: Understanding Success Criterion 1.1.1: Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) > A bar chart compares how many widgets were sold in June, July, and August. The short label says, "Figure one - Sales in June, July and August." The longer description identifies the type of chart, provides a high-level summary of the data, trends and implications comparable to those available from the chart. Where possible and practical, the actual data is provided in a table. - [MDN: SVG title](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title) - [Accessible SVGs by Heather Migliorisi](https://css-tricks.com/accessible-svgs/) `37:T40c, md` Accessible data tables: - [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/) - [Web Accessibility initiative: Tables Concepts](https://www.w3.org/WAI/tutorials/tables/) - [Web Accessibility initiative: Tables Tips and Tricks](https://www.w3.org/WAI/tutorials/tables/tips/) - [Creating Accessible Tables](https://webaim.org/techniques/tables/data): don't use \`<table summary="">\` - [MDN: HTML table advanced features and accessibility](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced) - [MDN: caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)—caption should be first element of the table - [WCAG: Using caption elements to associate data table captions with data tables](https://www.w3.org/TR/WCAG20-TECHS/H39.html) - [Caption & Summary](https://www.w3.org/WAI/tutorials/tables/caption-summary/#using-aria-describedby-to-provide-a-table-summary) - [Table captions](https://datatables.net/blog/2014-11-07)—shows how to style a data table caption `38:T10fc,// patternPathD = "M22,21.910316 L22,26 L19.9989006,26 C10.0613799,26 2,34.0588745 2,44 C2,53.9433113 10.0583823,62 19.9989006,62 L22,62 L22,66.0897789 C30.0119364,66.8120156 36.7852126,71.8280516 39.9995613,78.820232 C43.2123852,71.8285229 49.9832383,66.8116352 58,66.089684 L58,62 L60.0010994,62 C69.9386201,62 78,53.9411255 78,44 C78,34.0566887 69.9416177,26 60.0010994,26 L58,26 L58,21.9102211 C49.9880636,21.1879844 43.2147874,16.1719484 40.0004387,9.17976804 C36.7876148,16.1714771 30.0167617,21.1883648 22,21.910316 L22,21.910316 Z M54,58 L54,62.6957274 C48.4256128,64.0124934 43.5445087,67.1235896 40,71.385704 C36.4554913,67.1235896 31.5743872,64.0124934 26,62.6957274 L26,58 L20.0071931,58 C12.2712339,58 6,51.7336865 6,44 C6,36.2680135 12.2753906,30 20.0071931,30 L26,30 L26,25.3042726 C31.5743872,23.9875066 36.4554913,20.8764104 40,16.614296 C43.5445087,20.8764104 48.4256128,23.9875066 54,25.3042726 L54,30 L59.9928069,30 C67.7287661,30 74,36.2663135 74,44 C74,51.7319865 67.7246094,58 59.9928069,58 L54,58 L54,58 Z M42,88 C42,78.0588745 50.0613799,70 59.9989006,70 L62,70 L62,65.910316 L62,65.910316 C70.0163968,65.1883977 76.7869984,60.1719338 80,53.1807228 L80,60.614296 C76.4554913,64.8764104 71.5743872,67.9875066 66,69.3042726 L66,74 L60.0071931,74 C52.2753906,74 46,80.2680135 46,88 L42,88 Z M38,88 C38,78.0566887 29.9416177,70 20.0010994,70 L18,70 L18,65.9102211 C9.98806359,65.1879844 3.21478738,60.1719484 0.000438743025,53.179768 L0,60.614296 C3.54450873,64.8764104 8.42561275,67.9875066 14,69.3042726 L14,74 L19.9928069,74 C27.7287661,74 34,80.2663135 34,88 L38,88 Z M42,7.10542736e-15 C42,9.94331128 50.0583823,18 59.9989006,18 L62,18 L62,22.0897789 C70.0119364,22.8120156 76.7852126,27.8280516 79.9995613,34.820232 L80,27.385704 C76.4554913,23.1235896 71.5743872,20.0124934 66,18.6957274 L66,14 L60.0071931,14 C52.2712339,14 46,7.73368655 46,1.42108547e-14 L42,1.42108547e-14 L42,7.10542736e-15 Z M-2.27373675e-13,34.8192772 C3.21300164,27.8280662 9.98360316,22.8116023 18,22.089684 L18,18 L20.0010994,18 C29.9386201,18 38,9.9411255 38,7.10542736e-15 L34,7.10542736e-15 C34,7.7319865 27.7246094,14 19.9928069,14 L14,14 L14,14 L14,18.6957274 C8.42561275,20.0124934 3.54450873,23.1235896 8.31903435e-11,27.385704 L2.84217094e-14,34.8192772 L-2.27373675e-13,34.8192772 Z" patternPathD = "M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z"; 39:T572,data = { const timeParser = d3.timeParse("%d %b %Y"); const csvString = await FileAttachment("Cells in Journal_ Getting Started with Data Viz - Journal cells - 12 Jun 2020.csv").text(); const rowConversionFunction = ({ "Title": title, "URL": url, "Number of cells": y, "Date": x }) => ({ title, url, x: timeParser(x), dayOfWeek: timeParser(x), y: +y }); let dataObjectTarget = d3.csvParse(csvString, rowConversionFunction); dataObjectTarget = d3.rollups(dataObjectTarget, v => d3.format("d")(d3.mean(v, d => d.y)), d => d3.timeFormat("%a")(d.dayOfWeek)) .map(d => ({x: d[0], y: d[1] })); const extraPropertiesSource = { xAxisLabel: "Day of the week", yAxisLabel: "Cells (mean)", barChartTitle: "This bar chart shows average cells written each day of the week, where Saturday is highlighted with the highest mean cells written of 42", barChartCaption: "This chart shows average cells written each day of the week across notebooks in the “Journal: Getting Started with Data Viz” collection, 25 April – 11 June 2020.", tableCaption: "This table shows average cells written each day of the week across notebooks 25 April – 11 June 2020. Saturday has the highest mean cells written at 42."}; return Object.assign(dataObjectTarget, extraPropertiesSource); }3a:[{"id":"4d16383bcf78e318942ab0e452497def429bd4b388cda43c64ffa5a48dea3bf577e9b7176df47a75520f1cec7685eee9fcd930d45db85ccad810e76a4d984128","href":"https://static.observableusercontent.com/files/4d16383bcf78e318942ab0e452497def429bd4b388cda43c64ffa5a48dea3bf577e9b7176df47a75520f1cec7685eee9fcd930d45db85ccad810e76a4d984128","name":"Cells in Journal_ Getting Started with Data Viz - Journal cells - 12 Jun 2020.csv","type":"text/csv","lastModified":1592018970448.423,"size":10718}] 30:{"title":"13 June 2020: Accessible Bar Chart and Accessible Data Table","cells":[{"id":0,"value":"md`# 13 June 2020: Accessible Bar Chart and Accessible Data Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`After [12 June 2020: Styled Bar Chart](https://observablehq.com/@didoesdigital/12-june-2020-styled-bar-chart), I want to dig into accessibility.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7933,"value":"md`I'm continuing to chart the cells I've written across notebooks in Observable in: [Journal: Getting Started with Data Viz](https://observablehq.com/collection/@didoesdigital/journal-getting-started-with-data-viz-collection).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8420,"value":"md`The following charts and tables have been tested only by me, using VoiceOver on a Mac in Safari and Chrome. Always test with real users and diverse users for production code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7473,"value":"md`## Accessible Bar chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8414,"value":"md`For this bar chart, I used the following resources:\n\n- [An intro to designing accessible data visualizations by Sarah L. Fossheim](https://fossheim.io/writing/posts/accessible-dataviz-design/).\n- [An introduction to accessible data visualizations with D3.js by Sarah L. Fossheim](https://fossheim.io/writing/posts/accessible-dataviz-d3-intro/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7982,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":8218,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":8262,"value":"md`What else could be included:\n\n- Units for the X and Y axes.\n- Labels for the X and Y axes.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8109,"value":"md`## Accessible Data Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8169,"value":"md`Following the guidelines in [WCAG: Understanding Success Criterion 1.1.1: Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) to provide a data table alternative to a chart, here's an accessible data table:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8017,"value":"accessibleDataTable = render_data_table(data, {caption: data.tableCaption, columns: [data.xAxisLabel, data.yAxisLabel], focusable: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8015,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":8173,"value":"md`**Caveat**: According to [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/), we should *only* be adding the \\`tabindex=\"0\"\\` if the table content is truly overflowing, requiring sideways scrolling to view all the content. Either remove \\`tabindex=\"0\"\\` if the table content fits on small screens or ensure the content is wide enough to require scrolling. You could also calculate the content width using JavaScript and conditionally apply the \\`tabindex=\"0\"\\` property.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8196,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":8116,"value":"md`## Linked chart and table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8164,"value":"md`Next, I connect the chart to the table by wrapping them both in a \\`figure\\` element. Alternatively, I might have used a text link to the long description adjacent to the image as explained in [Web Accessibility initiative: Complex Images](https://www.w3.org/WAI/tutorials/images/complex/#a-text-link-to-the-long-description-adjacent-to-the-image).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8119,"value":"linkedChartAndTable = {\n return html`\n <figure role=\"group\">\n ${accessibleChart.cloneNode(true)}\n <figcaption>\n <h2 class=\"heading\">Overview</h2>\n <p class=\"paragraph\">${data.barChartCaption}</p>\n <h2 class=\"heading\">Values</h2>\n ${accessibleDataTable.cloneNode(true)}\n </figcaption>\n </figure>\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8224,"value":"md`**Caveat:** using both the SVG \\`<title>\\` element *and* the \\`<figcaption>\\` is redundant. If you're going to combine a chart with a data table in a figure group like this, remove the SVG \\`<title>\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8431,"value":"md`Well, I'm happy with today's progress. I learned a lot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8434,"value":"md`I was surprised to find nothing when [searching on Observable for \"accessible chart\"](https://observablehq.com/search?query=accessible%20chart). I hope that changes in the future and that this notebook helps.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7396,"value":"md`## Resources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8443,"value":"md`Here are the resources I used…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8445,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":8447,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":8449,"value":"\nmd`\nCharts and tables together:\n\n- [Web Accessibility initiative: Complex Images](https://www.w3.org/WAI/tutorials/images/complex/)—this describes how to semantically tie a chart to a long description of it and to a related data table.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8451,"value":"\nmd`\nContrast:\n\n- [Understanding Success Criterion 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html)\n- [WebAIM: Contrast and Color Accessibility - Understanding WCAG 2 Contrast and Color Requirements](https://webaim.org/articles/contrast/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8453,"value":"\nmd`\nComplex images:\n\n- [Web-AIM: Alt text](https://webaim.org/techniques/alttext/)\n- [Functional Accessibility Evaluator 2.1: Long description for complex images](https://fae.disability.illinois.edu/rulesets/IMAGE_6/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8455,"value":"\nmd`\nLine length:\n\n- [WCAG Visual Presentation: Understanding SC 1.4.8](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8006,"value":"\nmd`\nData visualization and accessibility in general:\n\n- [Data Visualization Accessibility: Where Are We Now, and What’s Next? by Melanie Mazanec](https://medium.com/nightingale/data-visualization-accessibility-where-are-we-now-and-whats-next-b2c9eeac4e8b?source=friends_link&sk=6fece70739cec2f7841b538c8b014db1)\n- [Why Accessibility Is at the Heart of Data Visualization by Doug Schepers](https://medium.com/nightingale/accessibility-is-at-the-heart-of-data-visualization-64a38d6c505b?source=friends_link&sk=7758de447dbc30bf4ef3d20298743ba6)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8458,"value":"\nmd`\nPatterns:\n\n- [Hero patterns](https://www.heropatterns.com/) for SVG patterns to use in charts.\n- [MDN: pattern](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern)\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":8046,"value":"md`I previously covered more detail about data tables in:\n\n- [30 May 2020: Data Tables](https://observablehq.com/@didoesdigital/30-may-2020-data-tables?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)\n- [31 May 2020: Wikipedia Data Tables](https://observablehq.com/@didoesdigital/31-may-2020-wikipedia-data-tables?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7321,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8329,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.x))\n .range([0, width - margin.right])\n .padding(0.1);","pinned":true,"hidden":false,"mode":"ojs"},{"id":8325,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0));","pinned":true,"hidden":false,"mode":"ojs"},{"id":7487,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.y)]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":7496,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .style(\"font-weight\", 800)\n .text(data.yAxisLabel));","pinned":true,"hidden":false,"mode":"ojs"},{"id":7482,"value":"height = 450;","pinned":true,"hidden":false,"mode":"ojs"},{"id":7477,"value":"margin = ({top: 72, right: 0, bottom: 60, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8009,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":7618,"value":"typographyStyles = html`<style>\n@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');\n\ntext, table {\n fill: #282541;\n font: 400 16px/1.4 \"Noto Sans\", sans-serif;\n}\n\n.heading,\n.paragraph {\n fill: #282541;\n font: 400 16px/1.4 \"Noto Sans\", sans-serif;\n}\n.heading {\n font: 700 24px/1.4 \"Noto Sans\", sans-serif;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8102,"value":"barChartStyles = html`<style>\n.domain {\n stroke: #cdcccf;\n}\n.tick line {\n stroke: #cdcccf;\n}\n.bar {\n fill: url(#dots);\n}\n</style>\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8043,"value":"dataTableStyles = html`<style>\ncaption {\n white-space: initial;\n text-align: left;\n padding: 8px 0;\n max-width: 35em;\n}\n\ntable {\n border-collapse: collapse;\n}\n\nth {\n background: #F6F6F6;\n}\n\nth, td {\n border: 1px solid #ECECEF;\n text-align: left;\n padding: 8px;\n}\n\ntd:first-of-type {\n font-weight: 800;\n}\n\n.table-container {\n overflow-x: auto;\n white-space: nowrap;\n width: ${width}px;\n min-width: ${width}px;\n}\n</style>\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8152,"value":"figureStyles = html`<style>\nfigure {\n max-width: inherit; \n}\n\nfigcaption {\n color: #282541;\n}\n</style>\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":7302,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":7326,"value":"d3 = require(\"d3@5\", \"d3-array@2.4\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"} </article></body></html>

32:Td0c,accessibleChart = { const barColor = "#766FAE"; const patternColor = "#2D2A4A"; const activeColor = "#5C5597"; const svg = d3.create("svg") .attr("title", data.barChartTitle) .attr("viewBox", [0, 0, width, height]); const maxY = d3.max(data, d => d.y); const pattern = svg.append("defs") .append("pattern") .attr("id", "dots") .attr("x", 0) .attr("y", 0) .attr("width", 60) .attr("height", 60) .attr("patternUnits", "userSpaceOnUse") svg.append("text") .attr("id", "chart-title") .attr("x", 0) .attr("y", 0) .attr("dy", "1em") .style("font-weight", "800") .style("font-size", "clamp(.7rem, 2.5vw, 1.2rem)") // minimum, preferred, maximum .text("Average number of cells written 25 April – 11 June 2020"); const legend = svg.append("g"); // Invisible legend title legend.attr("aria-label", "Legend"); // // Visible legend title (increase margins to use this) // legend.append("text") // .text("Legend") // .attr("x", margin.left / 2) // .attr("y", margin.top * 0.55) // .attr("class", "Legend"); legend.append("rect") .attr("role", "presentation") .attr("fill", "url(#dots)") .attr("width", 13) .attr("height", 13) .attr("rx", 2) .attr("x", margin.left / 2) .attr("y", margin.top * 0.66); legend.append("text") .text("Highest average cells written") .attr("x", margin.left / 2 + 20) .attr("y", margin.top * 0.66 + 12); pattern.append("rect") .attr("role", "presentation") .attr("fill", barColor) .attr("x", 0) .attr("y", 0) .attr("width", 60) .attr("height", 60); pattern.append("path") .attr("fill", patternColor) .attr("d", `${patternPathD}`); svg.append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("rect") .attr("role", "presentation") .attr("class", d => d.y === maxY ? "bar" : "") .attr("fill", d => d.y === maxY ? activeColor : barColor) .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .attr("height", d => y(0) - y(d.y)) .attr("width", x.bandwidth()); const barLabels = svg.append("g") .attr("id", "bar-values") .attr("fill", "#202630") .attr("text-anchor", "middle") .style("text-shadow", "white 1px 1px, white -1px -1px, white 1px -1px, white -1px 1px") .selectAll(".label") .data(data) .join("text"); // Day of week barLabels.append("tspan") .text(d => d.y === maxY ? "Highest average cells written, " + d.x + ":" : d.x + ":") .attr("class", "x-label") .attr("text-anchor", "start") // .attr("x", d => x(d.x)) // Use for debugging .attr("x", -width) .attr("y", d => y(d.y)) .attr("dy", "-.5em"); // Average number of cells barLabels.append("tspan") .text(d => d.y) .attr("class", "y-label") .attr("text-anchor", "middle") .attr("x", (d, i) => x(d.x) + x.bandwidth() / 2) .attr("y", d => y(d.y)) .attr("dy", "-.5em"); svg.append("g") .attr("class", "x-axis") .call(xAxis) .attr("aria-hidden", "true"); svg.append("text") .attr("id", "source") .attr("x", width) .attr("y", height) .attr("dy", "-1em") .attr("text-anchor", "end") .text('@DiDoesDigital'); return svg.node(); }33:T844,md`Chart accessibility considerations: - The bar colors have sufficient contrast with the background for "graphical objects". - The text color has sufficient contrast with the background. - The highlighted bar is styled using an SVG \`\` so that it's not identifiable by color alone. For example, color-blind folk may perceive the pattern where they may not perceive the change in color. (It's fairly pointless though. If it had a better purpose, the pattern would also be explained using a legend.) - The SVG element has a \`\` element that provides an accessible, short-text description. - The data values are included directly instead of showing a Y Axis so that blind people using a screen-reader that cannot infer the value from the bar height and Y Axis ticks and labels can understand the information shown. - A sensible reading order for the X Axis labels and bar values e.g. "Sat: 42, Sun: 31…" instead of "Sat, Sun, … 42, 31, …" - \`aria-label="Legend"\` is read before legend itself, which is read before reading the chart values. - The legend text, "Highest average cells written", is included during reading of the bar with that pattern applied. - \`.attr("role", "presentation")\` applied to all \`rect\` elements to hide them from assistive technology. - The typeface is [Noto Sans](https://fonts.google.com/specimen/Noto+Sans?sidebar.open&selection.family=Noto+Sans:wght@400;700#standard-styles), which uses a single-barrel, "schoolbook" "g" (see [A new typeface for Parliament by Jack Craig, Parliamentary Digital Service](https://pds.blog.parliament.uk/2018/04/23/a-new-typeface-for-parliament/) for more details), has a high x-height, is legible at small sizes, and supports over 30 scripts: > When text is rendered by a computer, sometimes there will be characters in the text that can not be displayed, because no font that supports them is available to the computer. When this occurs, small boxes are shown to represent the characters. We call those small boxes “tofu,” and we want to remove tofu from the Web. This is how the Noto font families got their name. `34:T41f,render_data_table = (data, options = {}) => { let caption = ""; let ariaLabelledbyCaption = ""; if (options.caption) { caption = `<caption id="caption">${options.caption}</caption>`; ariaLabelledbyCaption = `aria-labelledby="caption"`; } let theadRowHeaderCells; if (options.columns) { theadRowHeaderCells = options.columns.map((d) => { return `<th scope="col">${d}</th>` }); } else { theadRowHeaderCells = Object.keys(data[0]).map((d, i) => { return `<th scope="col">${d}</th>` }); } let focusable = 'tabindex="0"'; if (options.focusable === false) { focusable = ''; } return html` <div class="table-container" ${focusable} role="group" ${ariaLabelledbyCaption}> <table> ${caption} <thead> <tr>${theadRowHeaderCells}</tr> <thead> <tbody> ${data.map(row => { return html`<tr>${Object.values(row).map(col => { return `<td>${col}</td>`; })}</tr>`; })} </tbody> </table> </div> `}35:T752,md`Data table accessibility considerations: - Caption element is present and describes the data table: [Using caption elements to associate data table captions with data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html). - The caption text has a max width style applied using \`em\` units to prevent long line lengths to ensure readability: [C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized](https://www.w3.org/TR/WCAG20-TECHS/C20.html). - The table is properly structured with \`<thead>\` and \`<tbody>\` elements. - \`th\` elements have \`scope="col"\` attributes applied: [H63: Using the scope attribute to associate header cells and data cells in data tables](https://www.w3.org/TR/WCAG20-TECHS/H63.html). - The increased \`font-weight\` of the first \`td\` cell in each row is purely a presentational style choice. - The containing \`div.table-container\` has \`overflow-x: auto;\` applied to ensure wide content can be reached via scrolling on small screens: [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/). - The \`tabindex="0"\` ensures the scrollable region is focusable by keyboard users: [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/). - The \`aria-labelledby="caption"\` points to the element with \`id="caption"\` to indicate what element describes it to explain the scrollable region: [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/). - The \` role="group"\` ensures we can apply the \`aria-labelledby=""\` attribute: [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/). - The table styling, \`white-space: nowrap;\`, ensures the text does not wrap at spaces, but instead stays on one line, keeping the table height down. `36:T450, md` Accessible charts: - [An intro to designing accessible data visualizations by Sarah L. Fossheim](https://fossheim.io/writing/posts/accessible-dataviz-design/) - [An introduction to accessible data visualizations with D3.js by Sarah L. Fossheim](https://fossheim.io/writing/posts/accessible-dataviz-d3-intro/) - [Accessibility at Penn State | Charts & Accessibility](https://accessibility.psu.edu/images/charts/) - [WCAG: Understanding Success Criterion 1.1.1: Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) > A bar chart compares how many widgets were sold in June, July, and August. The short label says, "Figure one - Sales in June, July and August." The longer description identifies the type of chart, provides a high-level summary of the data, trends and implications comparable to those available from the chart. Where possible and practical, the actual data is provided in a table. - [MDN: SVG title](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title) - [Accessible SVGs by Heather Migliorisi](https://css-tricks.com/accessible-svgs/) `37:T40c, md` Accessible data tables: - [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/) - [Web Accessibility initiative: Tables Concepts](https://www.w3.org/WAI/tutorials/tables/) - [Web Accessibility initiative: Tables Tips and Tricks](https://www.w3.org/WAI/tutorials/tables/tips/) - [Creating Accessible Tables](https://webaim.org/techniques/tables/data): don't use \`<table summary="">\` - [MDN: HTML table advanced features and accessibility](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced) - [MDN: caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)—caption should be first element of the table - [WCAG: Using caption elements to associate data table captions with data tables](https://www.w3.org/TR/WCAG20-TECHS/H39.html) - [Caption & Summary](https://www.w3.org/WAI/tutorials/tables/caption-summary/#using-aria-describedby-to-provide-a-table-summary) - [Table captions](https://datatables.net/blog/2014-11-07)—shows how to style a data table caption `38:T10fc,// patternPathD = "M22,21.910316 L22,26 L19.9989006,26 C10.0613799,26 2,34.0588745 2,44 C2,53.9433113 10.0583823,62 19.9989006,62 L22,62 L22,66.0897789 C30.0119364,66.8120156 36.7852126,71.8280516 39.9995613,78.820232 C43.2123852,71.8285229 49.9832383,66.8116352 58,66.089684 L58,62 L60.0010994,62 C69.9386201,62 78,53.9411255 78,44 C78,34.0566887 69.9416177,26 60.0010994,26 L58,26 L58,21.9102211 C49.9880636,21.1879844 43.2147874,16.1719484 40.0004387,9.17976804 C36.7876148,16.1714771 30.0167617,21.1883648 22,21.910316 L22,21.910316 Z M54,58 L54,62.6957274 C48.4256128,64.0124934 43.5445087,67.1235896 40,71.385704 C36.4554913,67.1235896 31.5743872,64.0124934 26,62.6957274 L26,58 L20.0071931,58 C12.2712339,58 6,51.7336865 6,44 C6,36.2680135 12.2753906,30 20.0071931,30 L26,30 L26,25.3042726 C31.5743872,23.9875066 36.4554913,20.8764104 40,16.614296 C43.5445087,20.8764104 48.4256128,23.9875066 54,25.3042726 L54,30 L59.9928069,30 C67.7287661,30 74,36.2663135 74,44 C74,51.7319865 67.7246094,58 59.9928069,58 L54,58 L54,58 Z M42,88 C42,78.0588745 50.0613799,70 59.9989006,70 L62,70 L62,65.910316 L62,65.910316 C70.0163968,65.1883977 76.7869984,60.1719338 80,53.1807228 L80,60.614296 C76.4554913,64.8764104 71.5743872,67.9875066 66,69.3042726 L66,74 L60.0071931,74 C52.2753906,74 46,80.2680135 46,88 L42,88 Z M38,88 C38,78.0566887 29.9416177,70 20.0010994,70 L18,70 L18,65.9102211 C9.98806359,65.1879844 3.21478738,60.1719484 0.000438743025,53.179768 L0,60.614296 C3.54450873,64.8764104 8.42561275,67.9875066 14,69.3042726 L14,74 L19.9928069,74 C27.7287661,74 34,80.2663135 34,88 L38,88 Z M42,7.10542736e-15 C42,9.94331128 50.0583823,18 59.9989006,18 L62,18 L62,22.0897789 C70.0119364,22.8120156 76.7852126,27.8280516 79.9995613,34.820232 L80,27.385704 C76.4554913,23.1235896 71.5743872,20.0124934 66,18.6957274 L66,14 L60.0071931,14 C52.2712339,14 46,7.73368655 46,1.42108547e-14 L42,1.42108547e-14 L42,7.10542736e-15 Z M-2.27373675e-13,34.8192772 C3.21300164,27.8280662 9.98360316,22.8116023 18,22.089684 L18,18 L20.0010994,18 C29.9386201,18 38,9.9411255 38,7.10542736e-15 L34,7.10542736e-15 C34,7.7319865 27.7246094,14 19.9928069,14 L14,14 L14,14 L14,18.6957274 C8.42561275,20.0124934 3.54450873,23.1235896 8.31903435e-11,27.385704 L2.84217094e-14,34.8192772 L-2.27373675e-13,34.8192772 Z" patternPathD = "M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z"; 39:T572,data = { const timeParser = d3.timeParse("%d %b %Y"); const csvString = await FileAttachment("Cells in Journal_ Getting Started with Data Viz - Journal cells - 12 Jun 2020.csv").text(); const rowConversionFunction = ({ "Title": title, "URL": url, "Number of cells": y, "Date": x }) => ({ title, url, x: timeParser(x), dayOfWeek: timeParser(x), y: +y }); let dataObjectTarget = d3.csvParse(csvString, rowConversionFunction); dataObjectTarget = d3.rollups(dataObjectTarget, v => d3.format("d")(d3.mean(v, d => d.y)), d => d3.timeFormat("%a")(d.dayOfWeek)) .map(d => ({x: d[0], y: d[1] })); const extraPropertiesSource = { xAxisLabel: "Day of the week", yAxisLabel: "Cells (mean)", barChartTitle: "This bar chart shows average cells written each day of the week, where Saturday is highlighted with the highest mean cells written of 42", barChartCaption: "This chart shows average cells written each day of the week across notebooks in the “Journal: Getting Started with Data Viz” collection, 25 April – 11 June 2020.", tableCaption: "This table shows average cells written each day of the week across notebooks 25 April – 11 June 2020. Saturday has the highest mean cells written at 42."}; return Object.assign(dataObjectTarget, extraPropertiesSource); }3a:[{"id":"4d16383bcf78e318942ab0e452497def429bd4b388cda43c64ffa5a48dea3bf577e9b7176df47a75520f1cec7685eee9fcd930d45db85ccad810e76a4d984128","href":"https://static.observableusercontent.com/files/4d16383bcf78e318942ab0e452497def429bd4b388cda43c64ffa5a48dea3bf577e9b7176df47a75520f1cec7685eee9fcd930d45db85ccad810e76a4d984128","name":"Cells in Journal_ Getting Started with Data Viz - Journal cells - 12 Jun 2020.csv","type":"text/csv","lastModified":1592018970448.423,"size":10718}] 30:{"title":"13 June 2020: Accessible Bar Chart and Accessible Data Table","cells":[{"id":0,"value":"md`# 13 June 2020: Accessible Bar Chart and Accessible Data Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`After [12 June 2020: Styled Bar Chart](https://observablehq.com/@didoesdigital/12-june-2020-styled-bar-chart), I want to dig into accessibility.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7933,"value":"md`I'm continuing to chart the cells I've written across notebooks in Observable in: [Journal: Getting Started with Data Viz](https://observablehq.com/collection/@didoesdigital/journal-getting-started-with-data-viz-collection).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8420,"value":"md`The following charts and tables have been tested only by me, using VoiceOver on a Mac in Safari and Chrome. Always test with real users and diverse users for production code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7473,"value":"md`## Accessible Bar chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8414,"value":"md`For this bar chart, I used the following resources:\n\n- [An intro to designing accessible data visualizations by Sarah L. Fossheim](https://fossheim.io/writing/posts/accessible-dataviz-design/).\n- [An introduction to accessible data visualizations with D3.js by Sarah L. Fossheim](https://fossheim.io/writing/posts/accessible-dataviz-d3-intro/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7982,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":8218,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":8262,"value":"md`What else could be included:\n\n- Units for the X and Y axes.\n- Labels for the X and Y axes.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8109,"value":"md`## Accessible Data Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8169,"value":"md`Following the guidelines in [WCAG: Understanding Success Criterion 1.1.1: Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) to provide a data table alternative to a chart, here's an accessible data table:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8017,"value":"accessibleDataTable = render_data_table(data, {caption: data.tableCaption, columns: [data.xAxisLabel, data.yAxisLabel], focusable: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8015,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":8173,"value":"md`**Caveat**: According to [Data tables by Heydon Pickering](https://inclusive-components.design/data-tables/), we should *only* be adding the \\`tabindex=\"0\"\\` if the table content is truly overflowing, requiring sideways scrolling to view all the content. Either remove \\`tabindex=\"0\"\\` if the table content fits on small screens or ensure the content is wide enough to require scrolling. You could also calculate the content width using JavaScript and conditionally apply the \\`tabindex=\"0\"\\` property.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8196,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":8116,"value":"md`## Linked chart and table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8164,"value":"md`Next, I connect the chart to the table by wrapping them both in a \\`figure\\` element. Alternatively, I might have used a text link to the long description adjacent to the image as explained in [Web Accessibility initiative: Complex Images](https://www.w3.org/WAI/tutorials/images/complex/#a-text-link-to-the-long-description-adjacent-to-the-image).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8119,"value":"linkedChartAndTable = {\n return html`\n <figure role=\"group\">\n ${accessibleChart.cloneNode(true)}\n <figcaption>\n <h2 class=\"heading\">Overview</h2>\n <p class=\"paragraph\">${data.barChartCaption}</p>\n <h2 class=\"heading\">Values</h2>\n ${accessibleDataTable.cloneNode(true)}\n </figcaption>\n </figure>\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8224,"value":"md`**Caveat:** using both the SVG \\`<title>\\` element *and* the \\`<figcaption>\\` is redundant. If you're going to combine a chart with a data table in a figure group like this, remove the SVG \\`<title>\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8431,"value":"md`Well, I'm happy with today's progress. I learned a lot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8434,"value":"md`I was surprised to find nothing when [searching on Observable for \"accessible chart\"](https://observablehq.com/search?query=accessible%20chart). I hope that changes in the future and that this notebook helps.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7396,"value":"md`## Resources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8443,"value":"md`Here are the resources I used…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8445,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":8447,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":8449,"value":"\nmd`\nCharts and tables together:\n\n- [Web Accessibility initiative: Complex Images](https://www.w3.org/WAI/tutorials/images/complex/)—this describes how to semantically tie a chart to a long description of it and to a related data table.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8451,"value":"\nmd`\nContrast:\n\n- [Understanding Success Criterion 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html)\n- [WebAIM: Contrast and Color Accessibility - Understanding WCAG 2 Contrast and Color Requirements](https://webaim.org/articles/contrast/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8453,"value":"\nmd`\nComplex images:\n\n- [Web-AIM: Alt text](https://webaim.org/techniques/alttext/)\n- [Functional Accessibility Evaluator 2.1: Long description for complex images](https://fae.disability.illinois.edu/rulesets/IMAGE_6/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8455,"value":"\nmd`\nLine length:\n\n- [WCAG Visual Presentation: Understanding SC 1.4.8](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8006,"value":"\nmd`\nData visualization and accessibility in general:\n\n- [Data Visualization Accessibility: Where Are We Now, and What’s Next? by Melanie Mazanec](https://medium.com/nightingale/data-visualization-accessibility-where-are-we-now-and-whats-next-b2c9eeac4e8b?source=friends_link&sk=6fece70739cec2f7841b538c8b014db1)\n- [Why Accessibility Is at the Heart of Data Visualization by Doug Schepers](https://medium.com/nightingale/accessibility-is-at-the-heart-of-data-visualization-64a38d6c505b?source=friends_link&sk=7758de447dbc30bf4ef3d20298743ba6)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8458,"value":"\nmd`\nPatterns:\n\n- [Hero patterns](https://www.heropatterns.com/) for SVG patterns to use in charts.\n- [MDN: pattern](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern)\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":8046,"value":"md`I previously covered more detail about data tables in:\n\n- [30 May 2020: Data Tables](https://observablehq.com/@didoesdigital/30-may-2020-data-tables?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)\n- [31 May 2020: Wikipedia Data Tables](https://observablehq.com/@didoesdigital/31-may-2020-wikipedia-data-tables?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7321,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8329,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.x))\n .range([0, width - margin.right])\n .padding(0.1);","pinned":true,"hidden":false,"mode":"ojs"},{"id":8325,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0));","pinned":true,"hidden":false,"mode":"ojs"},{"id":7487,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.y)]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":7496,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .style(\"font-weight\", 800)\n .text(data.yAxisLabel));","pinned":true,"hidden":false,"mode":"ojs"},{"id":7482,"value":"height = 450;","pinned":true,"hidden":false,"mode":"ojs"},{"id":7477,"value":"margin = ({top: 72, right: 0, bottom: 60, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8009,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":7618,"value":"typographyStyles = html`<style>\n@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');\n\ntext, table {\n fill: #282541;\n font: 400 16px/1.4 \"Noto Sans\", sans-serif;\n}\n\n.heading,\n.paragraph {\n fill: #282541;\n font: 400 16px/1.4 \"Noto Sans\", sans-serif;\n}\n.heading {\n font: 700 24px/1.4 \"Noto Sans\", sans-serif;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8102,"value":"barChartStyles = html`<style>\n.domain {\n stroke: #cdcccf;\n}\n.tick line {\n stroke: #cdcccf;\n}\n.bar {\n fill: url(#dots);\n}\n</style>\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8043,"value":"dataTableStyles = html`<style>\ncaption {\n white-space: initial;\n text-align: left;\n padding: 8px 0;\n max-width: 35em;\n}\n\ntable {\n border-collapse: collapse;\n}\n\nth {\n background: #F6F6F6;\n}\n\nth, td {\n border: 1px solid #ECECEF;\n text-align: left;\n padding: 8px;\n}\n\ntd:first-of-type {\n font-weight: 800;\n}\n\n.table-container {\n overflow-x: auto;\n white-space: nowrap;\n width: ${width}px;\n min-width: ${width}px;\n}\n</style>\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8152,"value":"figureStyles = html`<style>\nfigure {\n max-width: inherit; \n}\n\nfigcaption {\n color: #282541;\n}\n</style>\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":7302,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":7326,"value":"d3 = require(\"d3@5\", \"d3-array@2.4\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"} </article></body></html>