Book Image

UX for the Web

By : Marli Ritter, Cara Winterbottom
Book Image

UX for the Web

By: Marli Ritter, Cara Winterbottom

Overview of this book

If you want to create web apps that are not only beautiful to look at, but also easy to use and fully accessible to everyone, including people with special needs, this book will provide you with the basic building blocks to achieve just that. The book starts with the basics of UX, the relationship between Human-Centered Design (HCD), Human-Computer Interaction (HCI), and the User-Centered Design (UCD) Process; it gradually takes you through the best practices to create a web app that stands out from your competitors. You’ll also learn how to create an emotional connection with the user to increase user interaction and client retention by different means of communication channels. We’ll guide you through the steps in developing an effective UX strategy through user research and persona creation and how to bring that UX strategy to life with beautiful, yet functional designs that cater for complex features with micro interactions. Practical UX methodologies such as creating a solid Information Architecture (IA), wireframes, and prototypes will be discussed in detail. We’ll also show you how to test your designs with representative users, and ensure that they are usable on different devices, browsers and assistive technologies. Lastly, we’ll focus on making your web app fully accessible from a development and design perspective by taking you through the Web Content Accessibility Guidelines (WCAG).
Table of Contents (19 chapters)
Title Page
About the Authors
About the Authors
About the Reviewer
Customer Feedback

An overview of WAI-ARIA

The ARIA guidelines have a strong focus on ensuring scripted and dynamic content as well as interactive controls, such as sliders and menus, to be accessible with a keyboard. Most modern browsers and scripting libraries support ARIA, which consists of three main components, namely roles, properties, and states.


ARIA roles are an attribute given to elements to identify what their role or purpose is. Most HTML elements have a default role assigned to them, which can be overwritten to adjust the semantic context of the page structure and the elements that live within. In the following example, the <role="menu"> was given to the <ul> tag to give context to the list, and ensure that the screen reader knows this is not a normal list of items, but in fact a menu:

<ul role="menu">
 <li><a href="index.html">Home</li>
 <li><a href="delivery-rates.html">Our delivery service</li>
 <li><a href="contact.html"&gt...