lists, sequences, matrices are a life blood of interactive computing.
in this document we explore improving the representation of lists in computational literature.
as we encode semantics in list representations, we'll discover inequities for both assistive technology users and abled users using the archaic python representations as a reference for rich web representations. ultimately, the html experience can be better for everyone.
# semantically meaningful lists
lists, sequences, matrices are a life blood of interactive computing.
in this document we explore improving the representation of lists in computational literature.
as we encode semantics in list representations, we'll discover inequities for both assistive technology users and abled users using the archaic python representations as a reference for rich web representations. ultimately, the html experience can be better for everyone.
lists, sequences, matrices are a life blood of interactive computing.
in this document we explore improving the representation of lists in computational literature.
as we encode semantics in list representations, we'll discover inequities for both assistive technology users and abled users using the archaic python representations as a reference for rich web representations. ultimately, the html experience can be better for everyone.
## a short listconsiderashortlistofintegerscalled<var>abc</var>.abc=[1,2,3]currently,theoutputfromthatpythonproducesforterminalapplicationsisprovidedina`pre`.```html<pre>{{shell.display_formatter.format([1,2,3])[0]["text/plain"]}}</pre>```thisrepresentationdestroystherichstructureofalist,andnoone(egassistivetechusers,crawlers)winswhenthesemanticstructureofobjectsisdestroyed.itwouldbebesttorepresentthe`list`isan`ol`whichmeansorderedlist.assistivetechusersbenefitfrompropersemantics.mostscreenreadershaveeasynavigationforlistsandannouncethesizeoftheelement.infact,listlengthmightnotbeapparenttoasighteduserwhileitismademorecleartoassistivetech.thedestructivenatureofthepre-formattedrepresentationsisanartifactofmappinginteractivecomputingintothebrowser.extendinginteractivecomputingtothebrowseroffersnewdegreesoffreedomthatmaintainthesemanticstructureofdisplayobjects.
## a semantic ordered list {%set_%}<olid=abc-simple>{%foriinrange(1,4)-%}<li>{{i}}</li>{%endfor-%}</ol>{%endset%}<figure>{{_}}<figcaption><figure>```html{{_}}```<figcaption>htmlfortheorderedlistrepresentation</figcaption></figure></figcaption></figure>inthisrepresentation,theorderedliststructureismaintainedandscreenreaderswillannouncethelistanditslength.lightcsscanbeaddedtocapturethevisualstructureofthepythonpre-cursor.inthisrepresentation,thelistisimplicitlyassociatedwiththevariable<var>abc</abc>withoutanyvisualoraudiblerelationships.
### css to style lists to look like python outputthestylechangesbelowbringvisualparitytostandardpythonrepresentation.{%set_%}ol{list-style-type:none;font-family:monospace;li{display:inline;}}ol[id^=abc-]{li:first-of-type:before{content:"[";}li:last-of-type:after{content:"]";}li+li:before{content:",";}}{%endset%}```css{{_}}```<style>{{_}}</style>unfortunately,the`content`attributesofthescreenreaderwillbereaderandthatwillcreatealotofnoise.itwouldbebesttoexplicitlyaddtheseglyphsandhidethemfromthescreenreader.
## a semantic ordered list https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol#attributeshttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinsethttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize{%setl=3%}{%set_%}<section><labelid=label-abc-short><var>abc</var></label><olstartreversedtypearia-labelledby=label-abc-shortid=abc>{%foriinrange(1,4)-%}<livalue={{loop.index}}aria-posinset={{loop.index}}aria-setsize={{l}}>{%ifloop.first-%}<spanaria-hidden=true>[</span>{%-endif-%}{{i}}<spanaria-hidden=true>{{",]"[loop.last]}}</span></li>{%endfor%}</ol></section>{%endset%}{{_}}```html{{_}}```somemotivationsforthedesignarelistedbelow:*an`ol`isnotlabellablesothe`for`attributeonthe`label`doesn't apply. [lists can have titles](https://www.scottohara.me/blog/2020/05/02/labelled-lists.html), and they can be used _situationally_`aria-labelledby`associatesthelabelwiththelist.matrices,lists,sequences,tensorsarecomminlyrepresentedinnotebookdocuments.alotofambiguitycanariseonapageforscreenreaderuserswhenthelistsareunlabeled.*thelabelforthescreenreadershouldbeexposedtoallusersandhiddenwithatoggle.thestandardrepresentationreliesonansighteduserstoconnecttheoutputdisplayswiththesourcecode.*itiscommontoshortenlonglists,the`aria-setsize`and`aria-posinset`attributesletuscapturethesesemantics.*punctuationthatrecapturesthatpythonrepresentationishiddenfromscreenreaders.*[WHATWG`ol`](https://html.spec.whatwg.org/#the-ol-element) permits `reversed` `type` and `start`.*[ARIA`role=listitem`]()permits`aria-setsize``aria-posinset`somechallengesstillexistinourrepresentationofthisshortlist.*sighteduserscan't easy discover the length of a long list.*structureislostbecausewedon't the type of items. is `a` an integer, float, or string?
## enriched labelling{%set_%}<labelid=label-abc><label><var>abc</var></label><labelaria-label="of type">:</label><outputid=type-abc><code>{{[].__class__.__name__}}</code></output><spanaria-hidden=true>of</span><labelaria-hidden=true>length</label><outputaria-hidden=true>3</output></label>{%endset%}<figure>{{_}}<figcaption><figure>```html{{_}}```<figcaption>htmlfortheorderedlistrepresentation</figcaption></figure></figcaption></figure>### type annotations provide further enrichment.