With the current state of web apps, we can rely on various UI elements to interact with users. With the Web Speech API, we can develop rich web applications with natural user interactions and minimal visual interface, using voice commands. In this tutorial, Tomomi Imura will use the API to create an artificial intelligence (AI) voice chat interface in the browser. The app will listen to the user’s voice and reply with a synthetic voice. Because the Web Speech API is still experimental, the app works only in supported browsers. The features used for this article, both speech recognition and speech synthesis, are currently only in the Chromium-based browsers, including Chrome 25+ and Opera 27+, while Firefox, Edge and Safari support only speech synthesis at the moment.
Read more…
Recent analysis from VoiceLabs estimates that 24.5 million voice-driven devices will be shipped this year, almost four times as many as last year. As experience designers, we now have the opportunity to design voice experiences and interfaces! In this article, Lyndon Cerejo will look at how a typical genie in a bottle works, discuss the steps involved in designing voice experiences, and illustrate these steps by designing a voice app for Alexa.
Read more…
Accessibility has always been a slightly unsettling realm for web developers. Surrounded with myths, misunderstandings, and contradicting best practices, it used to be a domain for a small group of experts who would “add” accessibility on top of the finished product. With our new book, we get to the bottom of it all! Written by Heydon Pickering, a well-respected accessibility expert, the book includes dozens of practical examples of accessible interface components and inclusive design workflow, applicable to your work right away. With this book, you’ll know exactly how to keep interfaces accessible from the very start, and how to design and build inclusive websites without hassle and unnecessary code.
Read more…
Websites aren’t just meant to look good – they are meant to be easy to use for everyone, including people who are color-blind. There are many types of color blindness but it comes down to not seeing color clearly, getting colors mixed up, or not being able to differentiate between certain colors. In this article, Adam Silver will cover the majority of problems color-blind people experience when using websites, by providing 13 tips to improve their experience - something which can often benefit people with normal vision too.
Read more…
Websites aren’t just meant to look good – they are meant to be easy to use for everyone, including people who are color-blind. There are many types of color blindness but it comes down to not seeing color clearly, getting colors mixed up, or not being able to differentiate between certain colors. In this article, Adam Silver will cover the majority of problems color-blind people experience when using websites, by providing 13 tips to improve their experience - something which can often benefit people with normal vision too.
Read more…
If you write CSS for a living, it is important to understand how to write valid CSS property values correctly. Once you understand how different values can be combined or multiplied, the CSS property value syntax becomes much easier to comprehend. The following syntax can be hard to understand if you don’t know the various symbols and how they work. However, it is worth taking the time to learn. If you understand how the W3C defines property values, you will be able to understand any of the W3C’s CSS specifications.
Read more…
An ever-growing number of web users around the world are living with dementia. They have very varied levels of computer literacy and may be experiencing some of the following issues: memory loss, confusion, issues with vision and perception. In this article, Laurence Ivil and Paul Myles will share some lessons they learned along the way about making a dementia-friendly front end on a tight budget. By making websites more accessible to a growing group of users who are so often excluded from the benefits that the internet has to offer, designers are not only supporting people living with dementia, but also those with similar accessibility challenges.
Read more…
Rodney Rehm understood that ARIA could help him write web applications without having to bike-shed class names for various states. You can care about accessibility issues without being affected by a disability yourself. In many ways, making your apps and sites accessible benefits everyone. ally.js helps you accomplish that. ally.js is positioning itself as a center for collaborating on accessibility-related features, by providing low-level tools to other libraries and frameworks as well as high-level functions to developers. If you start working together you might just get somewhere!
Read more…
We proudly craft affordable, practical books for pros like yourself who want to improve skills and make a difference. Our printed Smashing Books deliver in-depth knowledge and expertise shared by experts and practitioners from the industry. We strongly believe in print and in the benefits of tangible books — they are our editorial flagships. No fluff, no theory — just actionable insights applicable to your work right away. In this article, you will find all of our Smashing Books, which look damn good on a coffee table!
Read more…
Despite our pursuit to do a better job every day, sometimes we forget about accessibility, the practice of designing and developing in a way that’s inclusive of people with disabilities.These days, we build a lot of client-rendered web applications, also known as single-page apps, JavaScript MVCs and MV-whatever. AngularJS, React, Ember, Backbone.js, Spine: You may have used or seen one of these JavaScript frameworks in a recent project. Common user experience-related characteristics include asynchronous postbacks, animated page transitions, and dynamic UI filtering. In this article, Marcy Sutton will explore techniques for building accessible client-rendered web applications, making our jobs as web creators even more worthwhile.
Read more…
