Fifteen Design Trends from an Accessibility Perspective

At the beginning of every year, the Internet becomes flooded with articles predicting the years newest website trends. These articles are then eaten up by hungry designers looking to keep their work as fresh as possible. Unfortunately, while some of these trends are breathtaking and innovative, not all of them keep Universal Access in mind. Like giving children candy for dinner, just because it can be done does not always mean it should.

I’ve read a few dozen articles and compiled a list of fifteen Design Trends that are most common amongst them and will be reviewing them based on their accessibility (and why or why not they should be encouraged).

Initially, I was going to put them in clear “good” and “bad” categories, but the results weren’t entirely so black and white. Instead, I’ve split the trends into approximate categories to try and keep things simple.

Themes and Schemes

Here I’ll be focusing on trends that revolve around color and typeface aesthetic and how they affect accessibility.

Vintage

As the age-old adage goes, “there is nothing new under the sun” and that is very apparent in vintage or retro web designs popping up everywhere. These are generally accompanied by fonts that remind one of the old west (like the Awwward winning “Bohem“) or an old diner our folks probably shared their first milkshake in.

While these websites are often charming and nostalgic, they come with some accessibility risks. The fonts I mentioned can be very difficult for someone to read, like Webflow’s nod to old Word Art (warning: load screen for that site contains flashing lights). When you’re not using crisp and clear typefaces, you force your users to try harder to read your content (if it’s even possible at all, depending on the user). This isn’t good for your users or your brand.

On the more classically vintage side of things, you need to worry about color scheme. Generally, vintage involves a lot of sepias, tans, and dark browns, mimicking the style of old photographs. While there are a lot of other accessibility “no-no’s” on this site, Magneti Marelli 100 has a very vintage aesthetic without taking color contrast into account. Many users probably can’t see much of the content on this site, especially when the text is highlighting itself with poor contrast as it goes, essentially erasing content for low vision users at a very rapid pace.

Does that mean you have to avoid vintage and retro looks altogether? Not at all! It’s just important to keep readability and contrast in mind.

Black and White

With minimalistic aesthetics gradually gaining momentum in popularity over the years, I am most thrilled about strict black and white color schemes. One of the biggest accessibility issues on the web right now is color contrast, which is unfortunate considering low-vision and/or colorblind users are not uncommon. So seeing beautiful websites with the most contrast one could ask for is a wonderful development.

It’s also proof that trendiness and accessibility are not mutually exclusive. While a high contrast color scheme alone does not an accessible website make, it’s definitely a step in the right direction.

Luminous and “Dark Mode”

While these are two separate trends, they often go hand-in-hand (or should). In recent years, making websites look more like a web app and copying that “app” user interface aesthetic has been rapidly gaining popularity in web design. With more people using computers and phones every day, many common apps have a “Dark Mode,” using darker greys and blacks instead of whites and light grey in order to be easier on the eyes.

Luminous color schemes tend to be the addition of bright neon colors, giving your website a glowy “POP” effect. A good example of this is the Asus ROG Phone website.

Luminous websites look absolutely fantastic. Unfortunately, designers will often try using them on light scheme websites which should be avoided. Bright colors are NOTORIOUSLY difficult in terms of color contrast for accessibility. For example:

Cyan, hot pink, and neon green are probably the most commonly used colors on Luminous websites; unfortunately, unless they’re also using these colors on a dark background, their content is potentially not being seen by anyone with low vision.

Luminous and Dark Mode scheme websites generally only benefit each other. Using bright colors on a dark background ensures visibility for all users, while keeping your website looking snazzy and futuristic.

Oversized Text

Making text larger than life seems to be “in” this year. Now you may think “Large text, that makes it easier to read, right?” Not always. There is such a thing as being “too big.” You don’t exactly see people fighting for the very front-row seat in a movie theatre – it makes it harder to take in the entire movie as a whole. If a user has to actually move their eyes across the entire screen to take in a single word, it’s probably TOO big. This gets even more complicated when a design decides to oversize more than one word. It often leads to scrunched up text that makes it difficult for users without visual impairments to read correctly on the first try, not to mention users with cognitive disabilities or reading disorders.

Here is an example of oversized text:

At that size, it’s harder to make out that “Bet Hannon” is two words, same with “Business Website.” This example isn’t actually too bad considering this post is restricted by the website’s margins (in fact, with some spacing adjustments, the above example could be perfectly accessible). When oversized text becomes an issue is generally when used with absolutely no margins or padding, making it spread from one side of the browser to the other, as seen on HalloBasis (flashing lights warning, hovering over the text causes it to invert in color). Reading that title is a potential nightmare for some users.

I’m not saying “No! You absolutely have to keep your text with THIS SPECIFIED AMOUNT OF PIXELS!” Just keep in mind, making your text too extreme in either size direction could potentially cause reading difficulty for your users.

Outlined Text

Outlined text, often combined with solid text, is another up-and-coming trend. This one is pretty tricky, and ultimately falls under the category of “if you’re not making it EASIER to read, you’re probably making it harder.”

Outlined text definitely poses an issue for readability. Not even just for accessibility purposes but for day-to-day users, also. As someone with no visual impairments to speak of, outlined text requires me to actually read every word individually because once it falls into my peripherals, it loses its readability. While I’m fully aware you want to keep users on your website for as long as possible, you shouldn’t go out of your way to make them spend more time there just trying to figure out what your content says.

Ultimately, I wouldn’t recommend excessive use of outlined text.

Layouts and Organization

Yep, even something as seemingly mundane as how to organize content on a page can be “hot or not.” And that’s what we’ll be focusing on for the following trends.

Grids

Card grids seem to be surfacing as this year’s hip layout, something that is also reminiscent of many apps or often have the “Windows 10” aesthetic. The nauseating liquid animations aside (we’ll talk about that later), Frames for Future is a good example of a grid-based layout.

Ultimately, this isn’t a terrible way at all to organize your content. As long as the developer keeps proper reading order in mind for screen readers, there’s no reason a grid or card-based layout would prevent your website from being accessible.

Layering and Floating Objects

When you get right down to it, the layering and floating object trend is a modern twist on scrapbooking. It’s the clever overlap of elements on a page. The homepage of Curt Thompson MD is a fantastic example of layering. They look absolutely stunning while not sacrificing readability.

However, not ALL layering is inherently accessible. Another common use of layering is splitting text over two different backgrounds, Art’s District Craft Kitchen for example. While the light tan color of their heading “Good Times with Great Friends” is accessible on the black background, it becomes much harder (to impossible) to read when overlapping with the (albeit delicious looking) photo of the burger, even with the text’s soft drop shadow.

So when layering your website, the most important thing to keep in mind is making sure you’re not sacrificing readability or visibility to accomplish it.

White Space

I’ve always been a fan of white space; however, in terms of accessibility, it’s definitely something you should be careful with. There is such a thing as TOO MUCH white space. If you put too much white space in any design, even a user with no impairments could question if there’s anything left and miss content.

Keep in mind, “white space” does NOT mean literally empty space that is white. I often find my clients shunning the idea of white space as they tend to imagine literal empty space that is the color white. The term “white space” simply means negative space without content. It can be any color and sometimes even contain a subtle graphic. It’s just decorative space that doesn’t contain much content.

Minimalist Menus

This might be one of my favorite trends. When helping out clients re-work their content, I would say a large percentage of the content time is spent reorganizing an overly complex menu that can sometimes go well in a fourth tier (as in a great-grandchild of a main menu item).

Figuring out your necessary 1-4 items you want to direct your users to is great for accessibility and helps streamline the every-day user experience. Especially with the “go go go” nature of people these days and with our attention spans getting smaller and smaller, the last thing people want to do is scour a complex mega menu to find what they’re looking for.

The downside of this trend from an accessibility point of view is often people are replacing the menu all together with a pre-collapsed toggle (known as a “hamburger” menu and what you would see when viewing a responsive site on a mobile device). To be AA accessible compliant, you need to have your menu visible and available. So creating that extra step for users is something I can’t get on board with, especially with older users in mind who aren’t familiar with a hamburger menu and may overlook a small icon in the corner altogether.

Graphics, Animation and Audiovisual

Nothing jazzes up some flat content more than a photo or some icons, and ever they have their own trends! Considering most trends seem to revolve heavily around decorative displays, I feel it’s important to mention the old saying of “Just because it’s popular does not mean it’s good.”

3D Visuals

I’m going to start off with possibly my least favorite trend is 3D explosions everywhere! Not only are these heavy on your bandwidth, they are absolutely terrible for cognitive disabilities (and I can speak from experience here). Most of the examples of these sites are triggered by some sort of scroll (which already put keyboard users at a disadvantage) and often animated, and I personally can’t be on them for more than a few seconds before becoming absolutely nauseated by the motion.

Meta Conference is a good example of 3D Visuals, which is a shame because otherwise it’s visually stunning.

I feel like the concept of 3D visuals isn’t a poor one inherently, but the current execution is just one that feels unnecessary and wastes a user’s time to get through. And to roll the dice on whether or not you’re going to make a user dizzy just by going to your website is not a gamble I would personally make. I get it, people are excited by the things technology is capable of now; that being said, I don’t feel the need to make my users feel like they’re having a psychedelic trip when they’re just trying to find out what time a meetup starts or how much a product is.

Scroll-Based

This is another trend that has been slowly crawling into the spotlight over the last few years, often combined with parallax effects. Unfortunately, most of these websites are nearly unusable for keyboard users. Keyboard users are not are rare as one might think. Yes, screen reader users use a keyboard to navigate, as do those with severe motor disabilities. But what about someone with a broken arm, or whose arthritis is acting up because it’s cold out – here’s one that’s a little close to home for most: someone on a laptop without a mouse.

Apple Air Pods Pro is a good example of a scroll-based website. Every event is based on scroll position and is a pain to manage if you’re not using a mouse. Using the arrow keys is a slow and tedious process and getting through it just using a trackpad is frustrating, especially since trackpads aren’t always consistently responsive, especially on an older or well-used machine. Now, I have to give credit where credit is due – while the Air Pod’s site is not “situation” accessible, that does not mean it’s not technically accessible. Another downside to scroll-based websites is that very often they’re not accessible with a screenreader depending on how the page was developed. Screen readers will read the plain text and if it’s completely set to not display until after a certain event, it won’t read any information past what is available above the fold. I was pleasantly surprised when the entire Air Pods page was completely accessible to a screen reader, so I must applaud the developers for keeping that in mind.

With that said, I would avoid scroll-based design, especially when you can use alternative animations to get similar effects without sacrificing accessibility (situational or permanent), especially if you’re not certain you can accomplish the development while still keeping the content intact.

Animations and Liquid Animations

Subtle animations and user-triggered animations are both flooding the design market at the moment. When it comes to accessibility, animations need to walk a very tight rope. Something animating too fast or too wildly can cause someone with a cognitive disability frustration, confusion, or dizziness. An animation going too fast or changing colour rapidly can even trigger a seizure in someone who is photo epileptic. User-triggered animations can be frustrating for someone using a keyboard or who physically can’t use a mouse or trackpad, or even prevent content being read at all if the user-triggered action reveals vital information.

Adult Swim’s Toonami (warning: this site’s transitions contain flashing lights) site is an example of user-triggered animations. They did a great job at making this site keyboard accessible – I was able to navigate it perfectly. However, the zippy transition animation between slides (by either scrolling or manual navigation) is very risky for cognitive or photo epileptic users. Shantell Martin’s website, to me, is absolutely stunning and creative, but the animations and wobbly hover effect can potentially be jarring if I user is sensitive to unexpected movement or be distracting to users with a learning or cognitive disability.

Getting back to a previous example, Frames for Future and Kulbachny are examples of liquid animation I would avoid. They’re uncontrollable, so a user can’t turn them off, and they can be very nauseating or dizzying for users. I assume they’re appealing to some due to their hypnotic nature, but I wouldn’t encourage their implementation knowing it has potential negative effects for someone.

Animations aren’t inherently inaccessible. I would definitely avoid full site animations, animations restricted to mouse-only movement or animations that are too quick or colorful.

Hand-drawn Icons

This is possibly the least harmless of the current trends. Icons are cute and a fantastic way to add a pop of decoration to a website. We’re all familiar with FontAwesome and Dashicon, two examples of great web icon services for implementing a vast array of icons for a seemingly endless amount of possibilities. Perhaps people are getting tired of seeing the same design across many sites or they’re just feeling inspired, but hand-drawn icons are starting to pop up everywhere. And many of them are absolutely adorable!

I found that statement to be incredibly insightful, and very true!

I’m excited to see more of these icons pop up and even try them myself! From an accessibility standpoint, there’s not much to say. Since they’re custom images, make sure you give them proper alt text if necessary or leave it blank so they browser will mark it as a decorative image. As a side note, make sure you’re following brand guidelines if you’re also implementing icons for social media.

Mixing Photography with Graphics

This is also a trend that doesn’t have a lot of risks attached to it. We’ve actually been seeing a similar concept in stock photos for many years. Now it’s evolved more into having real-life photos of people interacting with the graphic elements of a website. The Constance Burke website is a good example of mixing photography and graphics.

It’s a good way to add an interesting and creative element to a website design with few to no accessibility issues. It will definitely be interesting to watch what designers do with this one!

Audio Experiences

I honestly am not sure how this became a trend. Nothing is more annoying than going to a website and being immediately blasted with strange audio. I wanna know who said, “I can’t figure out which tab this music is coming from, I wish all websites were like this!” And it comes with some pretty hefty accessibility risks.

Especially in the case of I Fly 2020, they actually use audio to give instructions and add additional content to the site. This is a big accessibility no-no! Not just for situational accessibility (like someone in a public place with their audio off), but for people who are hard of hearing or deaf. They will get none of that additional content and will have to figure out what to do without the assistance of the audio narrator (though at least they included the sub-titles on their videos which is a plus). Additionally, if music starts playing automatically and a person who is blind is on the site using a screen reader, they will have a much harder time figuring out how to turn it off than a sighted user.

For accessibility, you want to keep your user in control of their experience. Whether it’s because they have circumstances that require a controlled environment, like autism, or because they need assistive technology, forcing a user into an audio experience is just not a trend that should be an option. At the very least, it should always be “opt in” and not “opt out.”

Conclusion

Obviously, these aren’t all the trends circling the design world at the moment, but they definitely seemed to be the ones that most seem to agree were trendy. And in most of these cases, their accessibility is subjective or completely depends on how they were developed so it’s very difficult to absolutely label any of them “accessible” or “not accessible.”

Technology changes so much from year to year and we can do so many cool things now, but the most important thing to keep in mind is that the end-user is an imperfect human being and ultimately websites are made for them. Users come to websites from all walks of life and from an infinite variety of situations and that needs to be remembered and considered. Yes, many of your users are able-bodied and sitting at a desk with a mouse and a decent monitor, but many of them are juggling kids and a phone, have a broken arm, arthritis, blind, deaf, depressed, in a hurry, or even just had too much to drink, and they all need to be kept in mind because at the end of the day, they are the client.

The views and opinions in this article are that of the author and may not reflect those of AccessiCart.

---