` element within the section of the SVG for the mark.","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"Updating our last chart, we may like the description (title) of each bar in the chart to include the day, temperature, and weather conditions. Like other attributes of the mark, we can either provide the name of a column as the title or write an arrow function if we need to do some additional processing on the data. In our case, we want to turn combine 3 different data points (date, temperature, conditions) into a single text description, so we'll write an arrow function. ","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"We can also use JavaScript [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to format the text. A template literal allows you to easily create strings by inserting values from variables, among other uses. It is surrounded with tick \\` characters instead of quotes. Within the text, you can use `$\\{variableName}` to insert the value of a variable into the string. To write an arrow function that combines the date, temperature, and conditions, we may do something like:","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"```\nd => `$\\{d.datetime}: $\\{d.tempmax} degrees and $\\{d.conditions.toLowerCase()} conditions.`\n```","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"We can make our title easier to read by remembering to use the Date class's [`toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) method to define some options.","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"dateOptions = { return {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'} }","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"Then a better version of our function might be:","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"```\nd => `$\\{new Date(d.datetime).toLocaleString(\"en-US\", dateOptions)}: $\\{d.tempmax} degrees and $\\{d.conditions.toLowerCase()} conditions.`\n```","pinned":false,"hidden":false,"mode":"md"},{"id":199,"value":"With this function used to compute the values for `title` in our temperature chart, you can hover over each of the labels to see the results. The titles can also be read using a screen reader.","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"Plot.plot({\n ariaLabel: \"Weather Chart\",\n ariaDescription: \"Bar chart of daily high temperatures for Denver during April 2022, showing temperatures mostly in the 40s to 60s and all but three days with partially cloudy conditions\",\n color: {\n legend: true,\n type: 'categorical',\n scheme: 'set2'\n },\n x: {\n label: \"April 2022\",\n labelAnchor: \"center\"\n },\n y: {\n label: \"Max Temperature (F)\"\n },\n marks: [\n Plot.rectY(data, {\n x: d => new Date(d.datetime), \n interval: d3.utcDay,\n y: \"tempmax\",\n fill: \"conditions\",\n title: d => `${new Date(d.datetime).toLocaleString(\"en-US\", dateOptions)}: ${d.tempmax} degrees and ${d.conditions.toLowerCase()} conditions.`\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"## Checking your work","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"The best way to understand how your chart will be read is to use a screen reader yourself. You can also use your browser's developer tools to Inspect the chart element and see how your labels have been applied. If you're using Firefox, you can [Inspect Accessibility Properties](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/) to focus in on how your labels and descriptions would be seen by a screen reader.","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"Data from [Visual Crossing](visualcrossing.com)","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"data = {\n const d = await FileAttachment(\"denver-april-weather.csv\").csv({typed: true});\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"Inputs.table(data);","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"} </article></body></html>

31:[{"id":"5bb5063bed82ddd27cc0f2baf2eaab0c6783bb7cf8ba2e9df8885ec268c614a2e6e72d3d5b4370bff35f5abdd342e29f83f161b13907c296c75317515c955f2f","href":"https://static.observableusercontent.com/files/5bb5063bed82ddd27cc0f2baf2eaab0c6783bb7cf8ba2e9df8885ec268c614a2e6e72d3d5b4370bff35f5abdd342e29f83f161b13907c296c75317515c955f2f","name":"denver-april-weather.csv","type":"text/csv","lastModified":1653341414793.602,"size":9662}] 2f:{"title":"Accessibility and Observable Plot","cells":[{"id":0,"value":"# Accessibility and Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"This site is for students in EDPX3200/4200: Data Visualization at University of Denver, though others are welcome to reuse any content as they see fit.","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"Observable Plot uses [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) to make its charts accessible. This feature was only added recently, in February 2022, so many tutorials do not yet demonstrate how to write accessible chart descriptions with Plot. However, it is possible!","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"## Some background: Scalable Vector Graphics (SVG) and ARIA","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"Observable Plot and D3 use [Scalable Vector Graphics (SVG)](https://developer.mozilla.org/en-US/docs/Web/SVG) to draw charts. SVG is not a bitmap format, like an image or the p5.js Canvas. SVGs are defined using the syntax of HTML, using elements and their attributes to define the visual properties of a diagram. As a simple example, the three circles below are created using SVG code to define their shape, location, and radius.","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":63,"value":"Because SVGs are created using a text-based format, there is an opportunity to describe both the entire diagram as well as its parts. For example, I can update this code to add an ARIA label to provide an accessible name for the diagram, as well as a more detailed description.","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":77,"value":"If I needed to provide more detail, I could also provide a label and description for each `` element in this example. In this simple case, our general description is probably enough detail.","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"## Adding ARIA Labels and Descriptions to Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"Observable Plot allows you to create an ARIA label and description for the entire chart, as well as other accessibility features for individual marks. When calling the `plot()` function, pass in an object with the following properties assigned a value:","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"- **`ariaLabel`**: an [accessible name](https://w3c.github.io/aria/#dfn-accessible-name) to [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) your chart, short and concise\n- **`ariaDescription`**: a longer [description](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description) to provide more context","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"In the example below, the label is \"Temperature Chart\" with a longer description following Amy Cesal's guide, [Writing Alt Text for Data Visualization](https://nightingaledvs.com/writing-alt-text-for-data-visualization/), published in Nightingale.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Plot.rectY(data, {y: d => d.tempmax,x: d => d.datetime, interval: d3.utcDay }).plot({\n ariaLabel: \"Temperature Chart\",\n ariaDescription: \"Bar chart of daily high temperatures for Denver during April 2022, with temperatures mostly in the 40s to 60s\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"In the example, one large object is passed to `Plot.plot()` including the ARIA label and description, as well as an array of marks.","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"Plot.plot({\n ariaLabel: \"Weather Chart\",\n ariaDescription: \"Bar chart of daily high temperatures for Denver during April 2022, showing temperatures mostly in the 40s to 60s and all but three days with partially cloudy conditions\",\n color: {\n legend: true,\n type: 'categorical',\n scheme: 'set2'\n },\n x: {\n label: \"April 2022\",\n labelAnchor: \"center\"\n },\n y: {\n label: \"Max Temperature (F)\"\n },\n marks: [\n Plot.rectY(data, {\n x: d => new Date(d.datetime), \n interval: d3.utcDay,\n y: \"tempmax\",\n fill: \"conditions\",\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"## Labeling individual marks with titles","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"In addition to labeling the whole chart, you can label individual marks using the `title` attribute. The title will be read by a screen reader, and also provide tooltip (hover) text for your element. This will add a `` element within the section of the SVG for the mark.","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"Updating our last chart, we may like the description (title) of each bar in the chart to include the day, temperature, and weather conditions. Like other attributes of the mark, we can either provide the name of a column as the title or write an arrow function if we need to do some additional processing on the data. In our case, we want to turn combine 3 different data points (date, temperature, conditions) into a single text description, so we'll write an arrow function. ","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"We can also use JavaScript [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to format the text. A template literal allows you to easily create strings by inserting values from variables, among other uses. It is surrounded with tick \\` characters instead of quotes. Within the text, you can use `$\\{variableName}` to insert the value of a variable into the string. To write an arrow function that combines the date, temperature, and conditions, we may do something like:","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"```\nd => `$\\{d.datetime}: $\\{d.tempmax} degrees and $\\{d.conditions.toLowerCase()} conditions.`\n```","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"We can make our title easier to read by remembering to use the Date class's [`toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) method to define some options.","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"dateOptions = { return {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'} }","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"Then a better version of our function might be:","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"```\nd => `$\\{new Date(d.datetime).toLocaleString(\"en-US\", dateOptions)}: $\\{d.tempmax} degrees and $\\{d.conditions.toLowerCase()} conditions.`\n```","pinned":false,"hidden":false,"mode":"md"},{"id":199,"value":"With this function used to compute the values for `title` in our temperature chart, you can hover over each of the labels to see the results. The titles can also be read using a screen reader.","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"Plot.plot({\n ariaLabel: \"Weather Chart\",\n ariaDescription: \"Bar chart of daily high temperatures for Denver during April 2022, showing temperatures mostly in the 40s to 60s and all but three days with partially cloudy conditions\",\n color: {\n legend: true,\n type: 'categorical',\n scheme: 'set2'\n },\n x: {\n label: \"April 2022\",\n labelAnchor: \"center\"\n },\n y: {\n label: \"Max Temperature (F)\"\n },\n marks: [\n Plot.rectY(data, {\n x: d => new Date(d.datetime), \n interval: d3.utcDay,\n y: \"tempmax\",\n fill: \"conditions\",\n title: d => `${new Date(d.datetime).toLocaleString(\"en-US\", dateOptions)}: ${d.tempmax} degrees and ${d.conditions.toLowerCase()} conditions.`\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"## Checking your work","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"The best way to understand how your chart will be read is to use a screen reader yourself. You can also use your browser's developer tools to Inspect the chart element and see how your labels have been applied. If you're using Firefox, you can [Inspect Accessibility Properties](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/) to focus in on how your labels and descriptions would be seen by a screen reader.","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"Data from [Visual Crossing](visualcrossing.com)","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"data = {\n const d = await FileAttachment(\"denver-april-weather.csv\").csv({typed: true});\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"Inputs.table(data);","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"} </article></body></html>