John Allsopp - A11y Driving Innovation - OZeWAI 2020 Keynote
![John Allsopp - A11y Driving Innovation - OZeWAI 2020 Keynote John Allsopp - A11y Driving Innovation - OZeWAI 2020 Keynote](/pic/john_allsopp_-_a11y_driving_innovation_-_ozewai_2020_keynote/OE9yN1FVNkhwaTA_.jpeg)
in march this year i realized that what i've been doing for 15 more years in-person conferences for web and digital designers and developers was no longer going to be possible for the foreseeable future i thought long about the opportunity that online presented for conferences particularly for us at web direction since in a market like australia we have access to far fewer potential attendees than in places like north america and europe and the cost of putting together a conference particularly when sourcing international speakers is typically considerably higher than if we were running our event in say europe or north america both places that we've done so but now there was no alternative well other than simply putting everything everything on hold for an indefinite period which really wasn't an option like many other events facing the same dilemma our first instinct was to reproduce as faithfully as possible the experience of an in-person event only online what i call the exactly the same only worse approach which we often see with cover versions of well-known songs now this instinct is far from unique to online events in fact it's almost a hallmark of digital transformation at least in the early stages of a transformation let me take you back to the mid-1990s as the web was starting to move into more popular consciousness initially web pages lacked any style at all indeed lactive in images but with the advent of images font tags html elements well html tables and frames humans did what humans do and bent these primitive tools almost entirely out of shape in the quest for killer websites now this book first published in 1996 and which you can still buy new copies of on amazon was in that year the number one bestseller on amazon not for web design or development or design more broadly or technology but number one of all books it helped transform web design to be honest in many ways it helped create it now a key concept it defined was of a third generation website pretty quick generations back then in the early 90s a third generation site he said uses typographic and visual layout principles to describe a page in two dimensions third generation site designers carefully specify the position and relationship of all elements on the page retaining fine control of the layout i'm hazarding a guess that a first generation website had was maybe plain old html and second generation had some images and font tags but actually who knows but let's take a little look at the premise of the book at the heart of the book and its techniques is this phrase retaining fine control of the layout as the web became more popular it was natural that those drawn to it were already using computers to publish information in the years leading up to the web desktop publishing powered by the apple macintosh elder page maker and adobe postscript had seen an explosion in the publication of magazines and the number of people with the requisite ability to publish using a computer desktop publishing was though a sustaining revolution for print making it more efficient to publish magazines newspapers and newsletters and it also led to an explosion of experimentation and creativity and somewhat democratized publishing but only up to a point the hardware and software required to publish still ran into many thousands of dollars even in the 1990s but still a fraction of the cost and expertise required to publish using more traditional typesetting technologies at the time but in one way it was really simply a continuation of what had come before the medium was still after all paper whose dimensions resolutions and other characteristics well exactly known and fixed in print the designer did have that fine control of the layouts but what about on the web well even in those early days long before smartphones tablets high resolution screens foldable screens the medium was still far more variable it could be different logical dpis depending on whether your user was on windows or macintosh colors could be grayscale 8-bit 16-bit or 32-bit window widths and heights while certainly not as variable as they are today could still vary quite a bit as well and the fonts available for designers to use were limited to those already installed on the user's machine with little if any overlap between those available on the mac and those on windows so a threadbare range of fonts at the very best of times in short this medium was not paper which was a huge source of frustration to many designers steeped in that technology which was frankly just about all designers moving to the web as i put it in an article i wrote right around that time killer websites are usually those which tame the wildness of the web constraining pages as if they were made of paper desktop publishing for the web and so what did designers do in response well again what we humans always do we look for hacks to fix these bugs creating killer websites outlines a series of techniques developed over this period a series of hacks to fix these bugs these included famously the use of tables for layout and one by one pixel spacer gifs used to precisely layout page design content there indeed is still a website for creating and serving spacer gifs which last year served 726 million 298 967 gifts now these techniques were also largely impossible without this new breed of woozy wig style tools as our designs and our markup would quickly descend into nested tables of nested tables which were not only impossible for developers to make sense of they were impossible for screen readers too as well ah you're thinking finally we get some sense of what all this has got to do with accessibility over the coming decade or so from that time in the mid to late 90s a new consensus slowly emerged among web designers centered around the importance of standards-based web development and a recognition of the importance of the first two of the three w's in www the world wide bit in particular the importance of accessibility in essence we learned that this incapacity of designers to control the exact layout of a page wasn't actually a bug at all it was a feature of this new medium before we leave this jurassic era of web design i want to pay attention to one other area of focus i've mentioned briefly one that actually persisted far longer than table-based layout and one that even adherence to standards-based css driven web design embraced image replacement techniques these they turn out actually have their own museum now image replacement techniques were an attempt to overcome that other limitation of the web that web designers often lamented the lack of access to fonts even css based designers wanted a richer palette of fonts and so a bevy of techniques that sought to allow the replacement of text with an image of that text coupled importantly with a way of exposing the text itself to a screen reader was developed and this went on for years you may remember or maybe not one of the breakthrough websites of this early standards era css zen garden which introduced countless web designers and developers to the possibilities of css for web design but which actually largely featured very tasteful uses of image replacement it was really only the arrival of proper widely supported font embedding techniques in the mid to late 2000s and services like typekit which saw these techniques fade away a designer's desire for control over their design does die hard the web's history has been this constant struggle between innovation or at the very least a quest for novelty which turns its back on the stretches and of established practices in the quest for the new and the web's foundations and principles which are often forgotten or downplayed in that quest for novelty and it's very often accessibility that suffers the most we've we still see that now more recently with the widespread adoption of frameworks like react which at least in their earlier incarnations often pay little attention to accessibility but that little detour aside let's come back to the beginning of this talk and march 2020 when we realized that for our events to even exist they'd need to move online i wanted to take a leaf from my own book and what we wanted to ensure was we simply didn't recreate the in-person conference online only worse so we didn't imagine having attendees carve out multiple straight days hour upon hour at a time staring at a screen even more than they already were having to what i really wanted to focus on was the opportunity to rethink the way content would work and how we could deliver it and in doing so importantly not to diminish the inclusiveness and accessibility of our events as we have often seen innovation does but to in fact increase it so today i'd like to take a look at a few of our decisions and how inclusion and accessibility was central to them and the benefits they brought not just for people with disabilities but far more broadly now almost all online events we've seen take place in this post-pandemic era have the following characteristics all carryovers from in-person events they take place over one or more full usually contiguous days presentations are 40 minutes to an hour they're delivered live and there's often live question and answer as well now almost none of these are a function of designing the best possible online event as i said they're carry overs from in-person events and many of these features of in-person events aren't even about creating the best possible in-person event they are artifacts of the economics and logistics of a in-person event why whole days why contiguous multiple days well the logistics and economics at in-person events require that format live delivery though sounds like something essential to an in-person event but as many conference organizations organizers will tell you there are countless horror stories of speakers running long over or significantly under time impacting the whole flow of a day then many people are hesitant or resistant to speaking in front of live audiences and so the experts we see are selected for confidence in front of a live audience something that isn't necessarily strongly correlated with expertise and in-person presentation often presents logistical barriers to people with disabilities people from countries where visas to say visit australia are hard to obtain in short those outside the mainstream and so this seemingly essential indeed in some ways defining feature of in-person events the live presentation may be less than it appears okay what about live question and answer surely a great opportunity for the audience to ask burning questions except time is usually very limited questions are of variable quality we've all heard the dreaded well this is more of an observation than a question opening a bit too often so meanwhile speakers are on the spot and and can't really address the question in any great depth and again it's far from inclusive people with anxiety about speaking in front of an audience people whose first language isn't the language of the conference these voices are often diminished or excluded from asking questions when netflix first started dropping entire seasons at once there was bafflement and much criticism of how the water cooler moment of shared prime time experience that was central to the tv experience was going to be lost leaving aside we'd move to a global world where tv series might take days months or years to arrive on a screen far from the metropolis of america but it turns out that artifact of the economics and logistics of primetime tv the water cooler moment of the shared experience once a week didn't actually make sense in a streaming world what does make sense is seeking the widest possible audience simultaneously no matter where they are in the world no matter what language they speak the shared experience still existed but in a different more inclusive way netflix subtitles and brilliantly dubs into numerous languages before they release a series and now their audience is vastly larger than even the most dominant terrestrial television company in no small part by rethinking the seemingly essential aspects of their delivery so back to our events taking a leaf out of netflix book we decided to question all our assumptions about what an event should look like so our events would take place over a longer time frame so far over a month each friday for half a day or so each week we recorded everything which enables tight editing with the occasional re-recording where the presentation needs it for technical or other reasons for example a nervous speaker who we then work with to deliver a better presentation and a raft of other enhancements that are only possible with pre-recorded content and i'll look at some of those enhancements shortly higher quality sound and vision better produced presentations are more accessible they stream more consistently and so are far less frustrating and more engaging for any audience we did feel that maintaining that live nature of the event by live streaming saw everyone was attending more or less simultaneously had its benefits in particular by enabling real-time conversation among attendees and with the speaker because they were no longer presenting it was pre-recorded this instinct seems to have been borne out by our experience to date where speakers and attendees engage and additional information and links are exchanged all in real time because the conversation requires little more than typing it hopefully is more inclusive addressing some of the concerns we identified earlier with live conference question and answer further as i mentioned before by pre-recording we opened up a number of opportunities to create greater value for all attendees and to considerably enhance accessibility whether for the deaf or hard of hearing or for blind folks and those with visual disabilities so to close out this presentation i'd like to look at a few of those our design decisions behind them and some of the technical aspects of how we implemented them and the lessons we learned what makes a good presentation well it's a delicate balance of a presenter in particular usually their voice and the slides and other screen based content which accompany the presentation this material may provide information examples but also mood and visual stimulus or subtle and sometimes not so subtle visual jokes so how can we address this for online conferences in a way that is accessible that's something we thought a lot about now when a presentation is live in person captioning is possible but expensive and challenging when it's live online it is typically more expensive more cumbersome and introduces more points of failure pre-recording helped us address many of these challenges they allowed for better quality captions which could be spell checked and edited to ensure acronyms and other more obscure terms were used correctly but because we were live streaming these pre-recorded presentations it didn't address the technical challenges of live streamed captions these days with the html5 element we're used to simply providing a webvtt file in a track element of the video element live streamed captions as i'm sure many in the audience know better than i do don't work like that in short they require an additional hardware encoder for ingesting cea-6 sorry cea-608 captions essentially the same that broadcast tv closed captioning systems use with of course the attendant cost effort and hardware and then many streaming providers like the one we've actually long used for hosting our on-demand videos only provide this level for enterprise customers all of which together made that really made the reality that this wasn't an option for us so we had to get a bit inventive at first i worked on an html5 video player that simulated live stream by synchronizing everyone attending the event to the same time in the video based on their local time and greenwich mean time the idea was we simply use a webvtt is a track for our html video element so anyone who wish could view the captions but this approach after no small effort ended up not being technically feasible so we went with a technique that also it happened opened up a whole lot of other accessibility benefits and benefits for all our users it's just we didn't realize it when we started we created a simple html based format that allowed srt more webvtt based subtitles to be embedded in a web page that the video was playing in as html some javascript then listened to the time changed event in the video player and using a bit of css we displayed the current caption if you've got captioning turned on right now while you watch me or if you turn it on this is actually what you'll be seeing as way is using the system that i'm going to talk a bit about now there are limitations that we're currently currently looking to address in particular when you full screen a video in browsers other than safari even if you set the zen index of the caption element to the maximum possible value the video will still obscure the captions but while this approach addressed challenges for the deaf and hard of hearing one challenging aspect of a presentation when it comes to accessibility is how visual they are so we considered having audio descriptions of what was on the screen and discussed with an expert audio describer this concept before together we included this was likely to be far too distracting because of course so much of a presentation is listening to someone speak but with our media synchronization system available we investigated and ultimately implemented an approach that not only made the slides more accessible for blind attendees it drew praise from sighted attendees as well so what we did was extract the text from the slides where the intent of the presenter was that the slides were to be read by the audience or where the slide was was more decorative or played a less literal role we described the content of the slide but because this was all text marked up in html screen readers could have access to it now simply because the text is on the page of course that doesn't make it accessible there are after all hundreds of slides during a conference the key here is that the slide text matches the current slide that the presenter is referring to so let's look at how we implemented that my original design pre-loaded the entire set of slides into the document all initially hidden using css and then as the presentation reaches that slide we show the text of the slider the challenge is a screen reader won't know that now is the time to read this particular slide but if you're familiar with with aria it sounds like a perfect job for live regions now a live region is a perceivable regions of a web page that are typically updated as a result of an external event when user focus may be elsewhere that sounds pretty good since these asynchronous areas are expected to update outside the user's area of focus assistive technologies such as screen readers have either been unaware of their existence or unable to process them for the user wicag aria has provided a collection of properties that allow the author to identify these regions so what we did was add arya live properties to an element that indicated the element would be updated and describes the types of updates that user agents ats and users can expect from the live regions but we have a challenge with our original design the live region actually doesn't change it's content that needs to change but in this case it was only the appearance so a screen reader won't be made aware of the changes to the document and so won't read them out because live regions only update when the content not their appearance change which seems like a sensible design decision the explicit use cases that are outlined for aria live include things like countdown timers chat applications and other content on the page where the content changes but slide decks or presentation systems are somewhat different and this presents a real liability typically in a slide deck think of say a keynote presentation the document contains all the slides and just simply shows the current one while hiding the rest so in order to support live regions for updating content that changes over time without impacting the way we had already built our application at least in the short term we decided to create a separate element as a live region and to populate this with the current slide text it's definitely a design decision we might revisit in future we set aria atomic another aria attribute to true as we want the whole element to be read out but it's probably redundant in this case as the entire content changes each time there is a new slide so what does this look like well sound like current slide text for the presentation screenshot of a certain web page showing a visualization of the collision of subatomic particles beside a text box explaining the concept of the speed of light current slide text for the presentation replay of comprehension and wonder scale with a bar highlighting the breadth of the scale between low and high wonder resonance current slide text for the presentation screenshot of the cern directory intro page demonstrating how the page worked a search bar at the top can be customized according to whether a user is looking for a certain employee scientist or more general information the rest of the page is divided into three sections with lists of hyperlinks okay when we actually hear it in action we realize it could be pretty overwhelming and quite distracting users can only turn it off by turning off their screen reader far from desirable although perhaps there are settings in some screen readers for turning on or off live regions though that's not something i could really find a lot of information about so if you know about it i'd love to hear more fortunately the way in which we set up our tabs which took some examples from the wikiag example website when a tab is not front most it has the hidden attributes set on it and screen readers in this case voiceover won't read that it'll even stop mid-sentence if we tab away from that element so extracting slide text isn't all we added to enrich online presentation in addition to captions we have a transcript that is live so as the presentation progresses the current part of the presentation is highlighted it uses essentially the same markup as our captioning system but shows the current caption in the context of what has just been said now whether this helps with comprehension particularly for example with those whose first language isn't the language of the presentation might be quite interesting to explore and while this synchronizes with the presentation by default we found this can be distracting and so we make an option for users to be able to turn it on and off now should this be something a screen reader reads aloud well we felt no since it's actually what the speaker is saying just as the captions are so we didn't make this a live region last but not least we have expert notes summarizing the presentation again synchronized to the presentation while my instinct is their value probably comes more post conference where a viewer can read through notes and then jump into that part of the presentation it's still something we put into our player system again whether this should be a live region wasn't even trickier decision our instinct is it would be really overwhelming and distracting to have it to have all this content read out typically one possibility might be to have this as an aria live region with the politeness level of off which would allow changes to be announced while this area is the focus of the user what we're going to do is keep an eye on what users actually do with this new platform but we'd love your thoughts as well since accessibility has been an important focus of my work as a web designer and developer and an educator in the many articles books and courses i've authored and delivered putting accessibility and inclusion at the heart of our reimagining what online events could be like was really non-negotiable for me with this project too often as we saw with our examples from the early days of web design but as we can also see with technology and innovation more generally accessibility and inclusion are considered burdens and costs to innovation things that can be put back in later rather than opportunities to really rethink and re-imagine how something can be done anew so how did all this play out in practice as i mentioned users without disabilities have praised some of the features i mentioned one longtime attendee of our in-person conferences wrote to me the transcript caption idea is awesome not just from an accessibility perspective but copy pasting snippets is so much easier than trying to scribble down notes which to be honest no simply never occurred to me as a benefit of what we were building with these features who knows what other benefits that we never imagined will emerge from this as well all of this innovation started from a desire to build a captioning system because existing captioning systems weren't feasible in our specific circumstance by building that capability and exploring what became possible when that functionality was in place not only have we built something far more inclusive or at least i hope but we've added unique value for all our users i hope too that's a lesson that others can learn accessibility as i don't have to tell people watching today is not simply a legal requirement or moral and ethical imperative it's an opportunity to explore possibilities otherwise unimagined if you're interested in looking more at the project it's on github it's very much a work in progress so please keep that in mind and if you're interested in making use of it as aussie way have for this conference do drop me a line i'd love to help thanks for your time again today and i hope you enjoy the rest of this fantastic conference have a great day you
2020-12-28 17:44