Is Your “Aesthetic” Accessible?

by Posted on

By Ashi Franke

Overview

Just like fashion, architecture, and music, web design evolves over time as it follows trends and advancements in technology. These changes have been fairly drastic over the past thirty years as web designers gained the ability to publish images, style pages with Cascading Style Sheets (CSS), and add interaction with programming languages like JavaScript (JS).

Screenshot of WorldWideWeb, the world's first web browser. It's greyscale and outdated.
The world’s first web browser, WorldWideWeb (1990) — Web Design Museum
Screenshot of the Apple iPhone website in 2020, which is sleek and modern.
iPhone product landing page (2020) — Apple

For many designers, the web is a creative space without the common limitations of print design, enabling them to go above and beyond in their work. But, as new web design trends gain traction, they often introduce serious accessibility barriers for users.

So, as we enter the 2020s, how can we design and develop user interfaces (UI) that are just as usable as they are beautiful?

In this blog post, we’ll explore five major trends in user interface design (UID) and how to make them accessible:

  1. Minimalism
  2. Stylized Typography
  3. Dark Mode
  4. Vibrant Color Schemes
  5. Animation

Web Accessibility Basics

Hand of a person using a refreshable braille display at a computer.
Source: How Do People Who Are Blind Use Computers and Other Technology?

Defining Web Accessibility

When we talk about web accessibility, this primarily refers to making web content accessible to people with disabilities and impairments.

Making web content accessible benefits all users, regardless of their abilities.

Guidelines for Accessible Web Content

In order to make web content accessible, designers and developers follow a set of recommendations called the Web Content Accessibility Guidelines, or WCAG.

The WCAG is part of a series of web accessibility guidelines published by the World Wide Web Consortium (W3C)’s Web Accessibility Initiative (WAI). The most recent version of this publication, WCAG 2.1, was published on June 5, 2018, and it’s the international standard for the internet.

While the WCAG may seem complicated at a glance, it’s actually a very helpful reference for designing a usable, accessible, and efficient website.

Principles of Web Accessibility

According to the WCAG, a website must meet the following four principles to be considered accessible:

  1. Perceivable: All content on a website must be perceivable to all users. Nothing can be invisible to all of a user’s senses. For example, if a photo on a webpage didn’t have alternative text (an image description), a user with blindness wouldn’t be able to tell what the photo was.11
  2. Operable: A website can’t require interaction that a user can’t perform. For example, if a webpage required a user to use a mouse, it would be difficult or even impossible to use by people with certain motor disabilities.10
  3. Understandable: Information and controls on a website must be understandable for the user. For example, if a user makes an error while typing something into a form field, they need to be aware of the error and understand what was incorrect.16
  4. Robust: A website must be built in a way that works with old technology, new technology, and assistive technology. For example, if a website used styling alone to define the headings of a page rather than using actual heading tags, it would be difficult or impossible for screen readers to parse the information on the page.13

Why Accessibility is Important

In January 2017, the U.S. Access Board updated Section 508: an amendment to The Rehabilitation Act of 1973 that protects the right of people with disabilities to have equal access to electronic and information technology. In this update, the recommendations from the WCAG became the official standard for determining whether websites, electronic documents, and software were accessible.

Basically, federal agencies and contractors are required by law to make their websites accessible, as defined in the WCAG.

Beyond that, web designers and developers have a moral responsibility to make their websites accessible. Why create barriers for users when you can just as easily build bridges?

A purple, minimalist graphic showing user interface elements, like buttons, progress bars, and placeholders.
Source: Google Material Components

Minimalism

About Minimalism

Minimalism originated as a Western art movement in the 1960s and early 1970s. In art and design, minimalism is characterized by the use of extremely simple forms to achieve the maximum impact.

In recent years, web designers have integrated minimalism into their work to achieve simple, sleek UI. This typically includes icons, solid colors, and spacious layouts.

Problems and Solutions in Minimalist UI Design

In true minimalist design, function follows form — meaning, the interface is designed in a way that meets the user’s goals first, and design comes second. But, in many cases, minimalist UI is oversimplified, leaving users to guess how the interface works.

Three icons with ambiguous meanings. One is a block with an arrow inside it, one is a a box with a triangle at the bottom, and one is a donut with stripes.

Problem:  Icons are used for UI elements but their meaning is unclear.

Three icons with clear labels: Open in New Tab, AirPlay, and Support.

Solution:  Add descriptive text to icons so all users know their meaning.

Three image buttons with coffee cups in different colors. A cursor hovering over the middle button reveals text that says, "Coffee Mug in Blue, $4.99."

Problem:  User interaction is needed to reveal information, like text that only appears on hover.

Three image buttons with text labels that say, "Coffee Mug in Pink, $4.99," "Coffee Mug in Blue, $4.99," and "Coffee Mug in Purple, $4.99."

Solution:  Text is always visible. No important information is hidden from the user.

Screenshot of the Mort Modern Pro mini site, showcasing a typeface mimicking the style of typographer Mortimer Leach. The name of the font and some other letters appear in a colorful, maze-like grid.
Source: Mort Modern Pro Mini Site (Lost Type)

Stylized Typography

About Stylized Typography

Typography is the style, arrangement, and appearance of text, and a typeface is the letters, numbers, and symbols that make up a design of type. On the web, a font is a single weight, width, and style of a typeface.

Problems and Solutions in Stylized Typography

With CSS and variable type, designers have a lot of flexibility for using highly stylized typography on the web, but this can sometimes create unnecessary accessibility barriers.

A pink rectangle with text that says, "The quick brown fox jumps over the lazy dog." The typeface is thin and somewhat difficult to read.

Problem:  Hairline typefaces are difficult for people with dyslexia or low vision to read.

A pink rectangle with text that says, "The quick brown fox jumps over the lazy dog." The typeface is a regular weight and fairly easy to read.

Solution:  Avoid hairline typography when possible, or reserve it for very large headings.

A navy-colored box of text in all-caps: "Veni, vidi, vici - Veni, vidi, vici is a Latin phrase popularly attributed to Julius Caesar who, according to Appian, used the phrase in a letter to the Roman Senate around 47 BC after he had achieved a quick victory in his short war against Pharnaces II of Pontus at the Battle of Zela."

Problem:  All-caps text is difficult to read for users with dyslexia.

A navy-colored box of text with an all-caps heading and sentence-case paragraph: "Veni, vidi, vici - Veni, vidi, vici is a Latin phrase popularly attributed to Julius Caesar who, according to Appian, used the phrase in a letter to the Roman Senate around 47 BC after he had achieved a quick victory in his short war against Pharnaces II of Pontus at the Battle of Zela."

Solution:  Select a font family with both uppercase and lowercase letters. If you must use all-caps text, use it sparingly, and use a text-transformation rather than typing the content in all-caps.

Problem:  Text is fixed at a certain size and doesn’t scale with page zoom.

Solution:  Use CSS to create fluid typography.

Remember that the #1 purpose of a website is to communicate information. When type is readable, it’s accessible!

Screenshot of the "Popular This Month" section of the CSS-Tricks homepage. The interface is dark with bright orange and pink accents.
Source: CSS-Tricks

Dark Mode

About Dark Mode

Dark mode — also known as light-on-dark color scheme, night mode, or dark UI — is a user interface with a color scheme where the background is dark and the foreground (text, icons, controls) is light.

Staring at a bright screen all day can cause eyestrain for sighted users, so dark mode is a great option when eyes need a break. While some websites and applications are designed to be dark at all times (e.g., CSS Tricks, CodePen, and Spotify), others give users the option to toggle between dark and light mode (e.g., Twitter, Slack, and Brackets).

Problems and Solutions in Dark UI Design

The dark UI trend is (quite literally) easy on the eyes, but it can create accessibility barriers for people with low vision.

User interface card with a dark indigo background and purple text, which is difficult to read.

Problem:  Dark interfaces are often low-contrast, which can be difficult to read for people with fair to low vision.

User interface card with a dark indigo background and white text, which is easier to read.

Solution:  Use high-contrast color combinations to improve readability.

If you’re unsure if your UI has high enough contrast, use a contrast checker!

Homepage for the "Celebrating 40 Years of Sculpture" website, which is bright orange with faint text and an abstract form drawn with lines.
Source: “Celebrating 40 Years of Sculpture” by Paradowski Creative

Vibrant Color Schemes

About Vibrant Color Schemes

For many web designers, vibrant color palettes are the key to a unique and memorable website. Color is a great way to set the mood for a page, support brand standards, and express your personal style.

Additionally, the popularity and availability of retina displays have made it possible to work with saturated colors like never before, since they display a wider range of colors on a brighter screen.

Problems and Solutions in Vibrant UI Design

Unfortunately, brightly-colored interfaces have many of the same issues as dark interfaces because of low-contrast color combinations. They can also be straining on the eyes for sighted users.

A lime green "Apply Now" button with off-white text that is difficult to read.

Problem: White text is used on a brightly colored button to grab the user’s attention, but the text is difficult to read.

A lime green "Apply Now" button with dark green text that is easier to read.

Solution: Use black or a darker color for text to improve the contrast.

Problem: A bright color is used for the background of a page to make it feel exciting, but it causes sighted users to strain their eyes when viewing the page.

Solution: Use bright colors for small elements on the page as an accent rather than the dominant page color.

Whenever possible, give users the option to turn on dark mode for a website or application with bright colors.

Animation of a paper being shredded by a delete button.
Source: “Shredder” by Hanna Jung

Animation

About Animation

Animation plays an important role in interactive design. Transitions can help make things like loading screens and drop-down menus feel natural, and animated feedback can help create a positive experience for users.

Problems and Solutions in Animated UI Design

Of course, animation can be overused and used poorly, creating accessibility barriers.

Problem:  Animations with flashing colors or quick movements can trigger seizures for some people. Animations can also distract and disorient users.

Solution:  Use animation sparingly and always avoid flashing colors.

Glossary

accessibility barriers
Conditions or obstacles that prevent individuals with disabilities from using or accessing knowledge and resources as effectively as individuals without disabilities. Common types of barriers include:
  • Media format: Information that is not available in a readable format for individuals with disabilities,
  • Perception: False expectations that individuals with disabilities are unable to contribute as much as their peers who have no disabilities,
  • Physical: Conditions in any structural environment that prevent or impede an individual with a disability from efficiently navigating the setting,
  • Systemic: Procedures, protocols, or policies that place undue burdens on individuals with disabilities, and
  • Technology: Software, electronic, or physical technologies that are not adaptable for use with assistive devices.
These are also called barriers to access or, simply, barriers.3
Cascading Style Sheets (CSS)
A programming language that describes how HTML elements are to be displayed on screen, paper, or in other media.5 Essentially, CSS defines how a user interface looks — like the layout, colors, and typography.
disability
Any condition of the body or mind (impairment) that makes it more difficult for the person with the condition to do certain activities (activity limitation) and interact with the world around them (participation restrictions). There are many types of disabilities, such as those that affect a person’s:
  • Communicating
  • Hearing
  • Learning
  • Mental health
  • Movement
  • Remembering
  • Social relationships
  • Thinking
  • Vision
According to the World Health Organization (WHO), disability has three dimensions: impairment, activity limitation, and participation restrictions.6, 8
JavaScript (JS)
A scripting or programming language that allows you to implement complex features on web pages, like timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc.20
user interface (UI)
The series of screens, pages, and visual elements — like buttons and icons — that enable a person to interact with a product or service.15
user interface design (UID)
The design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.17
web content
Any textual, visual, or audible content on a website. This can include text, images, videos, sound files, etc. This is also simply called content.
Web Content Accessibility Guidelines (WCAG)
A document that defines a wide range of recommendations for making web content more accessible18, published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.19

References

  1. Accessibility News: The Section 508 Update – Section 508
  2. ADA and Website Accessibility Compliance: What’s New in 2018 – Bureau of Internet Accessibility (BOIA)
  3. Barriers to access — Accessibility at Indiana University (IU)
  4. Contrast Checker – WebAIM (Web Accessibility in Mind)
  5. CSS Introduction — W3Schools
  6. Disability and Health Overview — Centers for Disease Control and Prevention (CDC)
  7. Fluid Typography – Geoff Graham, CSS Tricks
  8. International Classification of Functioning, Disability and Health (ICF) — World Health Organization (WHO)
  9. IT Accessibility Laws and Policies – Section 508
  10. Operable, Guideline 2.1: Keyboard Accessible — Web Content Accessibility Guidelines (WCAG) 2.1
  11. Perceivable, Guideline 1.1: Text Alternatives — Web Content Accessibility Guidelines (WCAG) 2.1
  12. Rehabilitation Act of 1973 — US Access Board
  13. Robust, Guideline 4.1: Compatible — Web Content Accessibility Guidelines (WCAG) 2.1
  14. Top 11 web design trends to rule in 2020 – Katarina Radovanovic, PopArt Studio
  15. UI vs. UX: What’s the difference between user interface and user experience? — UserTesting Blog
  16. Understandable, Guideline 3.3: Input Assistance — Web Content Accessibility Guidelines (WCAG) 2.1
  17. User interface design — Wikipedia
  18. Web Content Accessibility Guidelines (WCAG) 2.1 — World Wide Web Consortium (W3C)
  19. Web Content Accessibility Guidelines — Wikipedia
  20. What is JavaScript? — Mozilla Developer Network (MDN) Web Docs
Back To Top

Published by agfranke

3 Replies to “Is Your “Aesthetic” Accessible?”

  1. What a wonderful article. Great Job!! So much hard work and dedication went into creating such an informative blog post. This is definitely note worthy!!

  2. Technology has definitely changed over time. It seems to continually advancing. I found the major trends: Minimalism, Stylized typography, Dark Mode, Vibrant Color Schemes, and Animation, very interesting. This blog was very informative and intriguing.

  3. This is really important information, here. I really appreciate the lengths you’ve gone to make your article so accessible. Your article is very well-written and I can tell you put a lot of work into it. You’ve done an excellent job at making web design more interesting for me to read about!

Comments are closed.