Designing the Conversation

A presentation at Beyond Tellerrand in November 2019 in Berlin, Germany by Aaron Gustafson

Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.

Video

Buzz and feedback

Here’s what was said about this presentation on social media.

Now @AaronGustafson on stage #btconf pic.twitter.com/CX3HwX4ycg
— trishi (@trishi_de) November 14, 2019
I’m so excited for the talk of @AaronGustafson about semantics on the Web at @btconf #btconf
Semantic is one of the foundation of the Web even if it is often overlooked by people. But a machine readable Web is the foundation of an accessible Web, therefore a human readable Web pic.twitter.com/9vnDLKBM7n
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
I love how @AaronGustafson is explaining to people how a future proof Web, compatible with smart assistant, should be tested with assistive technologies. AT like screen readers are the best way to test the #accessibility, but also if it’s really machine readable. #btconf @btconf
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
#btconf Yes I'm with @AaronGustafson on that, we need a sarcasm HTML tag!!!!
— St�phanie (at BeyondTellerrand Berlin 🇩🇪) (@WalterStephanie) November 14, 2019
Nice touch from @AaronGustafson to mention his pronouns at the beginning of the talk. I should do that, too.#btconf
— Eric Eggert (@yatil) November 14, 2019
During his talk for #btconf, @AaronGustafson is sharing his idea of a #sarcasm element in HTML. Beside the joke, I love the idea and it would be a great way to improve how #autistic folks can understand a content. Let’s push for this idea in HTML5 ✊ 😄
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
In his talk, @AaronGustafson is showing how easy and simple it is to create relation between contents and actions. Using “me”, “hreflang”, “download” attributes is a great way to add context and semantics to phrasing context for example, at no cost. #btconf
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
it me

—@AaronGustafson https://t.co/4Fo1Q7qBkU pic.twitter.com/qcahD3DVjf
— Jeremy Keith (@adactio) November 14, 2019
the rel=“me” attribute, useful for example when you have a link to a portfolio or bio at the end of an article
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
Kudos to @AaronGustafson to use recording of screen readers in his talk to explain the navigation by landmarks and headings heavily used by people using screen readers. Great way to explain the importance of markup and semantics when building web pages #btconf pic.twitter.com/c1CSTd8c66
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
There are so many better choices than <div> #btconf pic.twitter.com/cprhpdIiIo
— trishi (@trishi_de) November 14, 2019
Congratulations @AaronGustafson for this great wordplay! 🤣 https://t.co/1bn6Jnc2eN
— Anke Mehlert (@AnkeMehlert) November 14, 2019
Using div is not allowing users of assistive technologies to navigate by landmarks & headings. It can even impact the navigation between focusable elements if using div elements. If div is your go to element, it’s time for you to think about alterna-divs. #btconf @AaronGustafson
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
#btconf Alterna-divs, so many semantic alternatives to divs by @AaronGustafson pic.twitter.com/58XbKtjfs5
— St�phanie (at BeyondTellerrand Berlin 🇩🇪) (@WalterStephanie) November 14, 2019
“Alterna-divs” There’s do many better options than div. —@AaronGustafson #btconf pic.twitter.com/jaefzIsrNo
— Gunnar Bittersmann (@g16n) November 14, 2019
So many more meaningful alternatives to a div... @AaronGustafson

#btconf pic.twitter.com/8Y30Dtmcne
— Monique Dubbelman in Berlin for #btconf (@BOEmedia) November 14, 2019
Thinking about conversational design is not only important visually. Please pay attention to the way it will be heard by people using assistive technologies or smart assistant with voice-only interface. Conversation-based label can enhance the experience. @AaronGustafson #btconf
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
Every devs I know should watch this talk by @AaronGustafson going through the meaning and the right way of using HTML elements to bring meaning into our Web pages. #btconf
— Geoffrey Crofte 🐲 🇱🇺 (@geoffreycrofte) November 14, 2019
“Browers ignore what they don’t understand – that’s the power of working in layers.” —@AaronGustafson #btconf
— Gunnar Bittersmann (@g16n) November 14, 2019
#btconf Stop forcing your backend complexity on users. We should work harder so that our users don't have to. AMEN 🙏 @AaronGustafson pic.twitter.com/UppDI7LaNq
— St�phanie (at BeyondTellerrand Berlin 🇩🇪) (@WalterStephanie) November 14, 2019
Yes! I took me a long time to understand and apply this principle. Thanks to @AaronGustafson @btconf #complexity #confernce #btconf pic.twitter.com/3Inmu62VbP
— Don Ludwig (@donlu42) November 14, 2019
Oh ok @AaronGustafson is talking about that now. Perfect 😁
— Geoffrey Crofte 🐲 🇱🇺 (@geoffreycrofte) November 14, 2019
“We should work harder so our users don’t have to.” —@AaronGustafson #btconf pic.twitter.com/Muvzt0BmUg
— Gunnar Bittersmann (@g16n) November 14, 2019
.@AaronGustafson with a really thorough run through of using semantic elements to create more accessible and conversational interfaces. pic.twitter.com/qH77eEPjFJ
— Cassie Evans (@cassiecodes) November 14, 2019
“Don’t introduce unnecessary complexity” we have a tendency to push contraints and complexity on the user, like phone & credit card formatting when it is a backend problem. I’m sad of hearing this for 10 yrs without seeing a lot of improvement on the Web #btconf @AaronGustafson pic.twitter.com/JidHOb9zrt
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
Also because the Web is an endless succession of forms, using autocomplete can help assistive technologies & virtual assistant to fill forms for the users, reducing the error and formatting potential issues.
Thanks @AaronGustafson to push the usage of autocomplete during #btconf
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
Using asterisks & messages at the beginning of the form is not enough to explain what is required. Assistive technologies & virtual assistants will not get access to it. Using required & aria-required attribute on form input will make it machine readable. @AaronGustafson #btconf
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
Because back and forth with a server can cost a lot for our users on some network or plans where you pay depending of your data usage, doing input validation directly in the browser can help reducing errors and make completion easier. #btconf @AaronGustafson
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
But you can’t trust the client: you should use input validation on the browser side but also server side because data can always be manipulated. Which means that you have to be able to handle errors from the server on your platform, in an accessible way. #btconf @AaronGustafson
— Damien Senger • hiwelo. (@iamhiwelo) November 14, 2019
Putting the truth out there, @AaronGustafson at #btconf pic.twitter.com/8Qczk9RWZx
— Björn Odendahl (@nail7) November 14, 2019
Note to self:
<input aria-describedby="error-message" …>
<p id="error-message">…</p>#btconf @AaronGustafson
— Gunnar Bittersmann (@g16n) November 14, 2019
#btconf I really like how @AaronGustafson builds bridges between HTML semantics, voice interface and user experience, great talk, I need to send this talk to my developers!!
— St�phanie (at BeyondTellerrand Berlin 🇩🇪) (@WalterStephanie) November 14, 2019
Also <button>, rather than <div role="button"> which I've just seen in a page I was reviewing for #a11y.
— CoolfieldsConsulting (@coolfields) November 14, 2019
The truth by @aarongustafson #btconf @ Festsaal Kreuzberg https://t.co/yKqQnmHdnN
— hirsebirse (@hirsebirse) November 14, 2019
I would like to propose <snark>. Default styling is to render in sArCasM cAsE
— Fabian @ #btconf (@capnfabs) November 14, 2019
I second that. Who do we talk to to make this happen
— St�phanie (at BeyondTellerrand Berlin 🇩🇪) (@WalterStephanie) November 14, 2019
“How well does it fails?” – @adactio, « We should work harder so our users don’t have to » – @AaronGustafson. This mindset is what brings me back to attend the inclusive & inspirational @btconf! Ok, also the vibes of @tobilessnow 🕺! Thank you @marcthiele for maintaining it!
— morgan (@morgaaaan) November 14, 2019
HTML has a lot of power to nurture conversation with users. — @AaronGustafson #btconf pic.twitter.com/ylz7PBoA3Q
— Simona Ritrovato (@strillart) November 14, 2019
Great audience today! pic.twitter.com/WmdHC8NgAk
— Aaron Gustafson 🎤 #btconf 🇩🇪 (@AaronGustafson) November 14, 2019
If u are into html as i am this is sth. for u. Thx @AaronGustafson for this talk! ❤️ https://t.co/M6h082JHVz
— Fabian Tempel (@trilodge) November 14, 2019
“We should work harder so our users don’t have to.”

This is neck tattoo worthy.

(stole that from someone at #Fronteers earlier this year)

#btconf #UX #usability pic.twitter.com/JiAwiwNLdo
— UXallthethings (@UXallthethings) November 14, 2019
Have meaningful headings! #btconf
— trishi (@trishi_de) November 14, 2019
<b> is a lot like <span>
You can use <i> for sarcasm.#btconf
— trishi (@trishi_de) November 14, 2019
Oh <i> - it’s been a while! (It really shouldn’t have been) #btconf pic.twitter.com/rCSnZD8YY1
— Tom Loake #btconf (@TomLoake) November 14, 2019
<nosarcasm>+1 here!</nosarcasm> #BTCONF https://t.co/lUt5DnEkbH
— Monique Dubbelman in Berlin for #btconf (@BOEmedia) November 14, 2019
Designing the conversation with @AaronGustafson #btconf pic.twitter.com/Dbz7wvL1xv
— Bianca Kastl (@bkastl) November 14, 2019