Best Practices

[oldoc63]

New web design trends come and go, and many times they are aesthetically appealing, but they are not always the most usable or accessible.

You now know enough principles of accessibility and usability to be able to judge if these trends will create problems for your users. Let’s reason through a few examples.

Text Overlaid on Images

White text overlaid on an image is a popular design trend. However, it doesn’t adhere to standards as the contrast is often too low. Adding a dark transparent overlay on top of the image could increase the contrast and provide better legibility.

Removing Input Labels

Another trend often seen in web design is the removal of labels above input fields, sometimes relying on placeholder text instead to identify the input field.

While this enhances the aesthetic quality of a design in some instances, it can hinder a user’s ability to identify which input they are attempting to fill out. This is particularly true for low vision users because the placeholder text is often light gray and low contrast. This also creates problems for users employing screen readers, because the form’s placeholder text is not always narrated.

Buttons and Links

There has been a trend towards flat and minimal design in recent years. This trend has improved usability in some ways, as it has encouraged designers to remove visual effects that are not contributing to the usability of their site.

However, minimalism can go too far, especially if it obscures how users should navigate the site. Visual contrast is especially important for buttons and links because these are the tools our users employ to navigate. Color alone should not be used to indicate clickability, as this will cause challenges for low vision and color-blind users.

Taking into consideration color choices, contrast, and font legibility will help you evaluate new design trends, and reduce the chance of new designs introducing accessibility barriers.

[oldoc63]

• Let’s get started by adding the word search to the search button. This will make this feature more obvious to users with low vision, more accessible to people using screen readers, and it will also save the function of our site if that icon ever fails to load! In index.html, add the word Search after this piece of code: <i class="fa fa-search"></i>.

• The white title font on top of the cupcake image could still be more readable. Let’s fix this by arranging a semi-transparent overlay, to make the image darker and the contrast with the white font more striking. The overlay is actually already created for you, you just need to move everything in the right order! The CSS z-index property determines the order in which different elements are stacked. An element with a greater value is stacked in front of elements with lesser values. The overlay is currently behind the main image. Change this in styles.css by setting the overlay:before selector to have a z-index property of 1.

• Now we can see that the overlay is making the image darker. But oops, now the overlay is also making our title text darker! That’s not good for contrast. Change the z-index of our title (hint: look for the h1 CSS selector) to equal 2.

[oldoc63]

Review

You made the cupcake recipe site look much better! You practiced some new CSS syntax, and you learned the power of visual contrast, for both overall design, and for accessibility.

You gained some knowledge on web accessibility and how to make your websites usable for all users.

Remember, the keys to building a more visually inclusive Web are:

Using contrast so our text and colors provide better visual cues
Using correct font size so our content is legible
Creating user interfaces that are enhanced by, but not dependent on, color

Following these guidelines can increase the usability of our websites. In the next lesson, you will learn semantic HTML tags, which improve the accessibility of sites for people using a screen reader.