Aesthetic Appeal vs. Accessibility: The Design Dilemma

Aesthetics vs. accessibility

To begin, let's define what we mean by web aesthetics and accessibility. Web aesthetics refers to the visual design of a website, including the arrangement of content, choices of colors, styles of fonts, the inclusion of pictures, animations, and components that users interact with (user interface elements).

Accessibility, on the other hand, refers to the ease with which users can access and use a website, regardless of any physical or cognitive disabilities they may have. This includes considerations such as font size, color contrast, alternative text for images, and navigational structure.

At first glance, it may seem like web aesthetics and accessibility are at odds with each other. After all, a visually stunning website may require certain design choices that make it less accessible to some users. For example, a website that uses a lot of images and animations may be visually impressive, but it may also take longer to load, making it difficult for users with slow internet connections to access. Similarly, a website that uses small, light-colored fonts on a white background may look sleek, but it may be difficult for users with visual impairments to read.

Finding the balance

However, it's important to note that web aesthetics and accessibility are not necessarily mutually exclusive.

In fact, a well-designed website can be both visually appealing and highly accessible.

For example, a website that uses high-contrast colors, large fonts, and clear navigational elements can be both visually stunning and easy for users with disabilities to access and use.

So, what does this tension between web aesthetics and accessibility tell us about the nature of design? At its core, design is about solving problems.

A designer's job is to find the best possible solution to a given problem, whether that problem is how to create a visually stunning website or how to make that website accessible to all users.

This means that designers must be willing to make trade-offs and compromises in order to find the best possible solution.

In the case of web design, this means that designers must be willing to sacrifice some aesthetic elements in order to make their websites more accessible.

However, this doesn't mean that accessibility has to come at the expense of aesthetics. Rather, it means that designers must be creative and innovative in finding ways to make their websites both visually stunning and highly accessible.

Popular trends of attractive but inaccessible design

The pursuit of a visually stunning website can sometimes lead to design choices that make the site difficult or impossible to access for some users. Below we discuss some of the worst practices of beautiful but inaccessible design.

1. Low contrast color schemes

Low contrast text can significantly impact the user experience, particularly for users with visual impairments. When the contrast between text and background colors is insufficient, the text may be difficult or impossible to read for users with low vision or color blindness. This can cause frustration and hinder the user's ability to access information on the website.

Moreover, low contrast can also affect users with normal vision, especially in low light conditions or on low-quality displays. The text may appear blurry or difficult to read, leading to eye strain and fatigue. This can cause users to leave the website or seek out alternative sources of information, ultimately impacting the website's engagement and user retention metrics.

Contrast checking tools

Such tools as Contrast Checker by WebAIM can be a helpful way to ensure that your website's color scheme is accessible and easy to read for all users. These tools allow you to input your website's colors and evaluate the contrast between them, based on Web Content Accessibility Guidelines (WCAG) standards. By using a contrast checker, you can easily identify areas where the color contrast is too low, and make necessary adjustments to improve accessibility. This can include adjusting the foreground and background colors, or choosing different color schemes altogether.

2. Unnecessary motion

Motion design can be visually appealing, but it can also be distracting and overwhelming for some users, particularly those with cognitive or vestibular disorders. Designers should be mindful of the type and amount of motion used in their designs, and ensure that it doesn't interfere with the user's ability to access the content.

This includes various hover effects. While hover effects can add interactivity and depth to a website, they can also be confusing for users with mobility or dexterity issues. Hover effects can make it difficult for users to navigate the site, particularly if they're using a touch screen device.

Here are some examples of safe, risky, and non-compliant motion effects:

1. Safe motion effects: Safe motion effects are those that do not pose a significant risk to users with various abilities and needs. Examples of safe motion effects might include subtle animations that help guide a user's eye towards important content, or simple transitions between pages that help users keep track of their location within the website.
2. Risky motion effects: Risky motion effects are those that may pose a risk to users with certain disabilities, such as those with vestibular disorders or epilepsy. Examples of risky motion effects might include animations that move too quickly or have a strobing effect, as these can cause nausea or dizziness in some users.
3. Non-compliant motion effects: Non-compliant motion effects are those that violate accessibility guidelines and make it difficult or impossible for certain users to access the website. Examples of non-compliant motion effects might include animations that are not able to be paused or stopped by the user, or that are triggered automatically without user input.

To create accessible motion effects, designers should prioritize user control and autonomy, and avoid animations or transitions that could be distracting or overwhelming for some users. It's important to test any motion effects with a variety of users, including those with disabilities, to ensure that they are safe and compliant with accessibility guidelines. Additionally, designers can consult resources such as the WCAG guidelines or accessibility testing tools to help identify potential accessibility issues and ensure that their designs are accessible to all users.

3. Automatic audio or video

While audio and video can be engaging and visually impressive, they can also be incredibly disruptive and frustrating for users, particularly those with sensory processing difficulties. Users may have difficulty controlling or stopping the audio or video, which can lead to confusion and frustration. Not to mention the distraction for users who may be working in quiet environments, such as libraries or offices.

In addition, automatic audio or video playing can interfere with assistive technology, such as screen readers, that users with visual impairments may rely on to navigate the website. This can make it difficult or impossible for these users to access the content they need, further impeding their ability to use the website effectively.

Overall, automatic audio or video playing can create a significant barrier to accessibility, causing frustration and difficulty for users with various abilities and needs. Designers should prioritize user control and autonomy, and avoid automatic playing of audio or video content, ensuring that all users can access the content they need without interference.

4. Overuse of decorative elements

Overuse of decorative elements can be a major issue for accessibility, as it can make it difficult for users to distinguish between important content and purely decorative elements. This can be especially problematic for users with visual impairments, who may rely on screen readers or other assistive technologies to navigate a website.

The main problem with decorative elements is that they can clutter a website and make it harder for users to find what they are looking for. For example, if a website uses a lot of decorative icons or images, it may be difficult for users to distinguish between those elements and more important content like navigation links or headings.

One way to solve this issue is to use decorative elements sparingly, and to ensure that they are clearly labeled as such. This can be done by adding an "alt" attribute to images, which describes the image in text for users who are unable to see it. Additionally, designers can use color, size, or position to differentiate between decorative elements and important content.

Another solution is to simplify the overall design of the website, and to prioritize user needs over aesthetic preferences. By focusing on the user experience and ensuring that the website is easy to navigate and understand, designers can create a more accessible and inclusive experience for all users.

5. Forms: placeholders instead of labels

Using placeholders instead of labels in forms is a common trend in modern web design. It is believed that placeholders can save space and make the form look cleaner and more aesthetically pleasing. However, this design practice can be problematic for accessibility.

Placeholders are not a substitute for labels, as they disappear once the user starts filling in the form. This can be a problem for users who rely on screen readers or other assistive technologies to navigate the web. Without labels, they may not know what information is expected in each field, which can lead to confusion and errors.

Additionally, placeholders are often displayed in a lighter and less visible color than labels. This can be difficult for users with low vision or color blindness to see and read, further hindering their ability to understand the purpose of the form fields.

To make forms more accessible, designers should use both labels and placeholders. Labels should be displayed next to or above each form field, with a clear and descriptive text that explains what information is required. Placeholders can be used to provide additional context or guidance for users, but they should not be the sole means of identifying form fields.

In summary, while placeholders can be useful in providing additional guidance for users, they should not be used as a replacement for labels. Using both labels and placeholders can help ensure that forms are accessible to all users, regardless of their abilities or assistive technology usage.

6. Non-intuitive navigational elements

Complex navigational elements, such as hidden menus or non-standard icons, can be confusing for users and make it difficult for them to find the information they need. This can be particularly problematic for users with cognitive disabilities or older users who may not be as familiar with modern web design conventions.

Lets talk about "burger menu" - a common design pattern that involves hiding navigation options behind a three-line icon in the corner of the screen. The use of a burger menu can be a convenient way to condense a large amount of navigation into a smaller space, but it should be used with caution. In some cases, it may not be necessary to use a burger menu at all.

For example, if a website has only a few main pages, it may be more intuitive to have those pages listed out in the main navigation bar rather than hiding them behind a burger menu. Similarly, if the website is designed for a specific audience that may not be familiar with the concept of a burger menu, it may be better to stick with a more traditional navigation bar.

In addition, it's important to consider the context of the website and its users. If the website is designed for mobile users who are accustomed to seeing burger menus, then it may make sense to use one. However, if the website is primarily accessed on desktop computers or by users who are not familiar with the burger menu icon, it may be better to use a different type of navigation.

Ultimately, the decision to use a burger menu or not should be based on the needs and expectations of the website's users, rather than simply following a trend or using it as a default option.

7. Poorly formatted text and small or non-adjustable font sizes

Text that is poorly formatted, such as using multiple fonts, sizes, and colors within the same paragraph, can be difficult for users with visual impairments to read. Designers should aim for simple, clean typography that is easy to read for all users.

Talking about font text size, websites with small or non-adjustable font sizes can be difficult for users with visual impairments to read. Designers should ensure that the font size is large enough to be easily read by all users, and provide an option for users to adjust the font size if necessary.

8. Using images instead of text

Using images instead of text can be a major issue when it comes to accessibility. When designers use images to convey important information such as buttons or banners, it can create a barrier for users who rely on assistive technologies such as screen readers or those with visual impairments. This is because screen readers cannot read images, and those with visual impairments may not be able to see the images clearly.

While there are some exceptions, such as logos and badges, it is important to use text instead of images whenever possible. For example, instead of using an image for a "Submit" button, it is better to use the word "Submit" in text form. This ensures that all users, regardless of their abilities, can access and understand the information.

If there is a specific reason why an image must be used, designers can add alternative text, also known as alt text, to the image. Alt text provides a description of the image and its purpose to assistive technologies. This allows screen readers to read the description aloud to users with visual impairments, making the information accessible to them.

It is worth noting that there has been a shift away from using images for buttons and other functional elements in recent years, in part due to the growing awareness of accessibility issues. Many designers now prioritize using text for buttons, as well as ensuring that the text is sufficiently large and high-contrast. This trend is certainly encouraging and represents a step in the right direction towards creating more inclusive and accessible web design.

Conclusion

Ultimately, the tension between web aesthetics and accessibility is a reminder that design is not just about creating beautiful things. It's about solving problems and finding the best possible solution to a given challenge.

As designers, we must be willing to put the needs of our users first, make the necessary trade-offs and compromises, and above all, be open to innovation. This approach enables us to shape a web environment that's not only visually striking, but also welcoming and accessible to everyone.