The Anatomy of an Accessible Auto-Suggest

About this presentation

<span style="font-weight: 400;">Google first launched auto-suggest (aka Google Suggest) as a Google Labs project in 2004 saying it "... provides you with search suggestions, in real time, while you type".</span> <span style="font-weight: 400;">Since then, it's become commonplace on the web and is used pretty much everywhere from social media sites like Twitter and Facebook, to shopping sites like eBay and Amazon, and even in occupation validation for credit card applications.</span> <span style="font-weight: 400;">With auto-suggest plugins available for all the latest frameworks and libraries, implementation couldn't be simpler.</span> <span style="font-weight: 400;">But what about accessibility?</span> <span style="font-weight: 400;">This talk will look at what makes an accessible auto-suggest. You'll see examples that don’t work, and examples that do.</span> <span style="font-weight: 400;">You'll go through:</span> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Required ARIA roles, states and properties</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Keyboard access</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Marking up the input field</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Announcing the suggestions</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Navigating to the suggestions list</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Making a selection</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Closing the suggestions list</span></li> </ul> <span style="font-weight: 400;">You'll leave with an understanding of how to make auto-suggest accessible - and some code to help you do it.</span>