41:null 42:["$","title",null,{"children":"A fun test, a useful tool, and getting me used to Observable: Alt Text Mad Libs | Cam | Observable"}] 48:[] 46:{"id":"b1facf656e228da5","slug":"alt-text-mad-libs","title":"A fun test, a useful tool, and getting me used to Observable: Alt Text Mad Libs","thumbnail":"54aa7df3a5967fef5e2254512a3876860b76df91cf0c55c46bcca9ef2bf39bd0","access_level":"public","create_time":"$D2023-01-14T03:00:02.836Z","update_time":"$D2023-01-14T06:22:06.752Z","view_time":null,"first_public_time":"$D2023-01-14T03:00:02.836Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8c5928be069bc383","login":"cam-rodriguez","name":"Cam","avatar_url":"https://avatars-next.observableusercontent.com/18826ed5a5b95a95a26c69b9b9ca9285ab2dce194f0f8cca478a1cbc96bea781","tier":"starter_2024","bio":"I'm an editor, cartographer and data journalist based in Chicago, doing fun data & graphics things for Chalkbeat and exploring data, engagement and investigative reporting at DePaul University. ","following":false},"version":138,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1315b585f60ce40d","login":"cam-rodriguez","name":"Cam","avatar_url":"https://avatars-next.observableusercontent.com/18826ed5a5b95a95a26c69b9b9ca9285ab2dce194f0f8cca478a1cbc96bea781","tier":null,"bio":"I'm an editor, cartographer and data journalist based in Chicago, doing fun data & graphics things for Chalkbeat and exploring data, engagement and investigative reporting at DePaul University. ","following":false}],"members":[{"type":"individual","id":"1315b585f60ce40d","login":"cam-rodriguez","name":"Cam","avatar_url":"https://avatars-next.observableusercontent.com/18826ed5a5b95a95a26c69b9b9ca9285ab2dce194f0f8cca478a1cbc96bea781","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A fun test, a useful tool, and getting me used to Observable: Alt Text Mad Libs","cells":[{"id":0,"value":"# A fun test, a useful tool, and getting me used to Observable: Alt Text Mad Libs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"### Background below, or jump to the tool [here](https://observablehq.com/d/b1facf656e228da5#cell-33).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"I regularly find myself writing up alt text, or image descriptions, for [graphics that I make](https://twitter.com/journo_cam/status/1587869255659388929). It's something that we all should do (as some people [know and make known](https://twitter.com/AltAwareness)!) but can be time-consuming on deadline or if you're catching people up on your work with a thread of viz. \n\nEnter: Alt Text Mad Libs! It's easy, not too code-heavy, and a fun little practice for myself in Javascript (which I am _not_ as good at) and Observable, which I'm newer to. Also... accessibility! And making accessibility, well, more accessible. If it only takes a second to generate alt-text for tweets, copy, or other posts, then maybe it'll be easier to make it more adopted.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"# Alt! Text! Mad! Libs!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"### Graphic data\nThe Madlibs-y part! Here, pick a graphic type, then fill out the prompts with words or phrases to best fit your needs. It might take a try or two!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"viewof type = Inputs.select([null].concat(types), {label: \"Select your graphic type here:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"platform = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"meaning = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"interpret = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"### Graphic metadata\nThe important stuff! Headlines, subheads, bylines and data sourcing.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"hed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"dek = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"byline = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"source = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"### Image description\n_An image description is a written caption that describes the essential information in an image._ ([cred](https://uxdesign.cc/how-to-write-an-image-description-2f30d3bf5546)). \n\nHere, describe the visual components of the image (ie, \"A map with a grey basemap with orange dots marking school locations, clustered in the northwest side of Winterfell\"; \"a bar chart with purple bars highlighting the change in graduation rates from 90% in 2019 to 100% in 2022\") like you were describing it to a friend over the phone, for example.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"id = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof button = {\n const form = html`