[{"data":1,"prerenderedAt":291},["ShallowReactive",2],{"project-41764635":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":35,"aspects":36,"strip":42,"post_text":45,"what":46,"said":75,"maker_in_thread":162,"shape":171,"grid":176,"attempts":254,"same_week":255,"maker_shows":44,"maker_hidden":283,"reader_version":284,"card":285},"41764635","ARIA DevTools","Visualization of website accessibility tree","title","Show HN: Visualization of website accessibility tree","https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Faria-devtools\u002Fdneemiigcbbgbdjlcdjjnianlikimpck","chromewebstore.google.com","ziolko",1728297516,2024,272,32,252,3515,8,"legend","dev_tools","browser accessibility testing","browser_extension",[24,25,26,27,28],"accessibility tree","wcag","screen reader","aria","accessibility testing","mixed",0.414,{"positive":18,"neutral":32,"mixed":33,"critical":34},6,0,2,16,{"performance":37,"idea":39,"design":40,"execution":41},{"positive":38,"critical":33},1,{"positive":34,"critical":33},{"positive":38,"critical":33},{"positive":33,"critical":34},[43,33,44,33,33,43,33,33,33,33,43,43,33,44,38,33,44,33,38,33,33,33,43,33,44,33,43,44,43,33,44,43],5,3,"When COVID-19 started I needed something to get busy to not go crazy. I happened to work on our app WCAG compliance for a few months at the time and was frustrated by the state of of accessibility-related tools for developers.\n\nI've spend two months delivering a tool that is easy to understand and helps catching accessibility issues on my apps. A few years later it's pretty popular despite being mostly abandoned.\n\nI will be happy to work on this further but honestly lost my enthusiasm some time ago. I'd love to get in touch with some company in the accessibility testing space and discuss how t",{"problem":47,"audience":53,"pricing":62,"motivation":63,"time_to_build":67,"stack":71,"openness":72,"stage":73,"team_size":74},{"value":48,"source":49,"evidence":50},"Hard to see how screen readers interpret a page; existing accessibility tools are poor for developers.","maker",[51],{"id":52},"post",{"value":54,"source":55,"evidence":56},"Developers checking website accessibility","inferred",[57,58],{"id":52},{"id":59,"by":60,"text":61},"41765798","notjustanymike","A very handy tool for spot checking, but also training. My benefit from this visualization will be demonstrating to non-technical how to people to think about accessibility…",null,{"value":64,"source":49,"evidence":65},"Frustration with existing accessibility tools while doing WCAG work during COVID-19.",[66],{"id":52},{"value":68,"source":49,"evidence":69},"Two months of work.",[70],{"id":52},[],"open_source","launched","solo",{"praise":76,"objections":100,"requests":112,"questions":123,"alternatives":135},[77,94],{"value":78,"source":79,"evidence":80},"Clean, useful visualization for spot checking accessibility","commenter",[81,82,86,90],{"id":59,"by":60,"text":61},{"id":83,"by":84,"text":85},"41766661","afloatboat","Pretty clean, I like it. I tested it out on a page I'm developing that has some meta data on a TV show. One of the elements is a set of divs each containing span with an…",{"id":87,"by":88,"text":89},"41765089","Leimi","Super useful, great job.",{"id":91,"by":92,"text":93},"41769597","Evan-Purkhiser","I’ve been using this for years now thank you so much for building this!!",{"value":95,"source":49,"evidence":96},"Mirrors screen reader experience, including keyboard navigation and tables",[97],{"id":98,"by":11,"text":99},"41766518","When I designed the tool I've tried to mirror the experience of screen readers users instead of only displaying ARIA roles and properties. For example you have to navigate the…",[101,108],{"value":102,"source":79,"evidence":103},"Does not show aria-label values and displays ::before content",[104,105],{"id":83,"by":84,"text":85},{"id":106,"by":84,"text":107},"41768550","I can't link the page, but this is a cleaned up DOM output (the extra spans\u002Fdivs are components): `\u003Cdiv>\u003Cdiv>\u003Cspan aria-label=\"IMDb rating\" title=\"IMDb rating\">IMDb…",{"value":109,"source":49,"evidence":110},"Maker says it is mostly abandoned and lacks enthusiasm to keep working on it",[111],{"id":52},[113],{"value":114,"source":79,"evidence":115},"Support iframes, which needs broader permissions",[116,120],{"id":117,"by":118,"text":119},"41765953","yreg","Thank you, this looks great! Could you please run it inside iframes as well? Being able to use this in the Storybook\u002FPlayroom would be awesome. --- Firefox link:…",{"id":121,"by":11,"text":122},"41768063","I am super glad you like it! The primary reason I haven't introduced support for iframes is that it requires much wider permissions (instead of just access to the current tab…",[124],{"value":125,"source":79,"evidence":126},"How does it compare to Chrome DevTools accessibility features?",[127,131],{"id":128,"by":129,"text":130},"41766338","Someone","How does this compare to Chrome’s built-in tooling (https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools\u002Faccessibility\u002Freference)?",{"id":132,"by":133,"text":134},"41766347","antriani_","Does it offer any additional features compared to the accessibility view in Chrome DevTools?",[136,144,155],{"value":137,"source":79,"evidence":138},"Chrome DevTools accessibility tree",[139,140],{"id":128,"by":129,"text":130},{"id":141,"by":142,"text":143},"41774335","freetonik","Great idea and implementation, thank you, I’ll definitely use it for my side project. Coincidentally, I just watched a talk by Mandy Michael [1] about HTML performance and…",{"value":145,"source":79,"evidence":146},"WAVE",[147,151],{"id":148,"by":149,"text":150},"41765118","vladde","Looks neat, and way more clean than https:\u002F\u002Fwave.webaim.org\u002F",{"id":152,"by":153,"text":154},"41771008","InvisGhost","Definitely more accurate however it's UX is awful and doesn't do a good job of prioritizing issues. It sucks that you basically have to install a screen reader app to get the…",{"value":156,"source":79,"evidence":157},"Polypane accessibility tree",[158],{"id":159,"by":160,"text":161},"41769451","kilian","Very cool. I recently implemented my own accessibility tree visualization [1] Yours is very interesting, getting away from the tree itself to a visualization more focused on…",{"comments":32,"answered":34,"key":163},[164,165,168],{"id":121,"text":122},{"id":166,"text":167},"41765182","Thank you! I really think there's a lot of potential in ARIA DevTools. It's quite popular (at least for my standards) but I never had any connection with people that live and…",{"id":169,"text":170},"41767134","Is there a chance to get a link to the page? I'd love to try it out and fix.",{"commenters":172,"max_depth":173,"maker_replies":32,"first_comment_mins":174,"lifespan_hours":175},19,7,39,53,[177,179,181,184,188,190,192,196,198,202,205,206,208,210,211,214,216,218,221,224,227,229,231,234,237,238,240,242,246,248,250,252],[117,33,43,178,118,33],"project\u002Fpositive\u002Fperformance",[121,33,33,180,11,38],"maker\u002Fneutral\u002Fprivacy",[182,33,44,183,153,33],"41770994","project\u002Fneutral\u002Fnone",[185,33,33,186,187,33],"41772056","commenter\u002Fneutral\u002Fnone","dimal",[189,33,33,186,118,33],"41776816",[59,38,43,191,60,33],"project\u002Fpositive\u002Fidea",[193,38,33,194,195,33],"41770320","other\u002Fneutral\u002Fnone","Muromec",[197,38,33,194,60,33],"41788850",[199,38,33,200,201,33],"41773606","other\u002Fneutral\u002Fidea","_bin_",[203,38,33,204,60,33],"41788840","commenter\u002Fneutral\u002Fidea",[159,34,43,191,160,33],[148,44,43,207,149,33],"project\u002Fpositive\u002Fdesign",[166,44,33,209,11,38],"maker\u002Fpositive\u002Fnone",[152,44,44,183,153,33],[83,212,38,213,84,33],4,"project\u002Fcritical\u002Fexecution",[169,212,33,215,11,38],"maker\u002Fneutral\u002Fnone",[106,212,44,217,84,33],"project\u002Fneutral\u002Fexecution",[219,212,33,220,11,38],"41774443","maker\u002Fpositive\u002Fexecution",[222,212,38,213,223,33],"41776894","extra88",[225,212,33,226,84,33],"41777178","commenter\u002Fneutral\u002Fexecution",[228,212,33,226,223,33],"41781154",[230,212,33,186,84,33],"41781872",[232,43,43,209,233,33],"41764873","ChrisMarshallNY",[235,32,33,200,236,33],"41777273","ximm",[128,173,44,183,129,33],[98,173,33,239,11,38],"maker\u002Fpositive\u002Fidea",[141,18,43,241,142,33],"project\u002Fpositive\u002Fnone",[243,244,44,183,245,33],"41766966",9,"danng87",[91,247,43,241,92,33],10,[249,247,33,209,11,38],"41787209",[132,251,44,183,133,33],11,[87,253,43,241,88,33],12,[],[256,260,265,269,273,278],{"id":257,"name":258,"points":259,"category":20},"41742278","One",506,{"id":261,"name":262,"points":263,"category":264},"41776878","Kotlin Money",427,"languages",{"id":266,"name":267,"points":268,"category":20},"41780297","Player.style",392,{"id":270,"name":271,"points":272,"category":20},"41740568","Chebyshev approximation calculator",278,{"id":274,"name":275,"points":276,"category":277},"41743327","LiveKit Agents",266,"ai",{"id":279,"name":280,"points":281,"category":282},"41780255","URL expander",213,"other",false,"v2",{"id":286,"name":5,"line":6,"ai":283,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":287,"top":18,"kw":288,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":289,"url":9,"mix":290,"praise":78,"objection":102,"sub":21},41764635,0.41,[24,25,26,27,28],"50300500005503103010005030535035",[18,32,33,34],1793991101990]