Diversity in Web Design

Web Content Accessibility Guidelines

The World Wide Web Consortium has Web Content Accessibility Guidelines (W.C.A.G.) that set international standards for accessibility. Their guidelines have four principles: perceivable, operable, understandable, and robust.

1. Perceivable: Users must perceive your website’s information and user interface.
2. Operable: Your site’s user interface and navigation must be operable.
3. Understandable: Your information and user interface must be easy to understand.
4. Robust: Your website must continue to work as disability technology evolves.

 

P.O.U.R. Principles

1. Website Perception

Many disabilities affect how a user perceives a website. Colorblind users will see your website differently than a user with full-color vision. There are many types of colorblindness: deuteranopia, protanopia, and tritanopia.

To help users distinguish your content by color, choose colors that don’t conflict with others in your color scheme. It’s also essential to ensure high contrast between your background color and text. The small text needs a higher contrast ratio than the large text. A sharp contrast makes the text easy to read.

Adobe’s Color Accessibility Tools help you see your color scheme as people with those disabilities would. Use the tools to ensure colorblind and low-vision visitors can still understand your content.

Blind users will likely use a screen reader to access your website. This means any non-text content needs to have text alternatives. For example, all images must have alt text that accurately describes the content. Similarly, all videos need captions. All text needs to be understandable and readable.

Summary:

To be perceivable, the interface and its content must be shown to a user to understand. Information that is not delivered in an easily understood way is inaccessible.

This includes giving text to individuals who cannot hear and audio to individuals who cannot see. It does not mean that all text should be read aloud. The information should be readable by screen readers and other assistive technologies.

Ask: Is there anything on the page that a user who is blind, deaf, has limited vision, or is colorblind would find hard to see?

2. User Interfaces and Operation

Your website should be easy to navigate and operate. Usabilitygeek recommends your website be simple enough to navigate by keyboard alone. Screen reader users must be able to perform all interactions on your website.

All form elements must have labels. This ensures forms are easy to fill out with assistive technology. Also, interactive features need to give feedback. Confirm form submissions and alert the user to any errors. When a user makes a mistake, explain clearly and suggest a fix.

Provide more than one way to navigate your site. Include a navigation bar, a search bar, and a site map. Breadcrumbs can also be helpful. They provide a trail back to the user’s entry point and can be based on history, attributes, or location in the website’s hierarchy. For example, a shoe shopping web page might have prominent> women’s> sandals > high heels breadcrumbs. Each word would be a link back to the relevant page.

Summary:

Not everyone uses the traditional keyboard and mouse to access the Internet. Some use adaptive devices or alternative technologies to accommodate disabilities or preferences. No matter what an individual’s input device is, all functions must be functional, especially those connected to navigation or dynamic elements.

Imagine a student who has undergone surgery on their hand or arm and cannot use a mouse. This student now must use a keyboard to navigate, and your website should offer keyboard navigation in each drop-down menu. 

Ask: Is it possible to use a keyboard to execute all the features on our website? Can the users control the website’s interactive parts? Is it simple to do things on the website?

3. Accessibility and SEO

Best practices for accessibility will help your search engine ranking. Google has a Lighthouse tool to help web developers improve a website’s quality. One of the key metrics is accessibility. When Google tells you how they rate a website, you should listen! Accessibility also improves your SEO score.

Meaningful page titles improve SEO and accessibility. A meaningful title allows users to understand a website’s purpose without visiting it. Search engines display each website’s title on their search results pages. Screen readers will read the page title first. Make sure users know they’re on the right page.

Lists help users and search engines understand your content. Screen readers will tell users that there is a list and how many items are in it. Search engines see a list in your content and know that lists are helpful for some searches.

Link text should be short, relevant, and essential. Descriptive links help users understand a link’s purpose before clicking. For example, text help has a good SEO and web accessibility overview. This shows search engines what a site is about.

Summary:

Users may perceive and use a website, but this does not mean they fully understand it. The link between the action and the outcome should be clear when a user acts. Websites that are easy to understand use simple, straightforward language and provide simple functionality.

The navigation on a website should be the same throughout. The flow should be clear, and the labels should be evident. If a user must complete a process, sufficient instructions should be provided. Useable websites are automatically more accessible. This is referred to as usability rather than accessibility.

Ask: Is all the content on the website presented straightforwardly? Is it simple to grasp all of the interactions?

4. Racial Diversity in Web Design

The United States is a diverse country with a complicated history of discrimination. People can discriminate by ethnicity, gender, age, or class.

According to Zippia’s demographic estimates, 66.1% of U.S. web designers are men. According to Wikipedia’s article on U.S. demographics, 49.5% of the U.S. population is men.

The most common ethnicity is White, with 64.5% of designers being white and 15.4% Asian. However, white people make up 61.6% of the entire U.S. population, while Asians make up only 6.2%. That means these two ethnicities are overrepresented in web design.

In contrast, 5.9% of U.S. designers are Black or African American. 12.4% of the entire U.S. population is Black or African American. They are underrepresented in web design.

Summary:

Your website must be compatible with and accessible on various devices, including assistive technology. Even as technology and user agents advance, content must remain accessible and interpretable.

Validators for HTML have been around for a long time. Robust is perhaps the most machine-verifiable of all the POUR concepts. Many automated accessibility solutions are also available. Of course, since machines do not grasp semantics, they cannot decide whether a specific element should have been utilized. They can only verify the accuracy of what they see with their own eyes.

Ask: Does the website only work with the most recent browsers and operating systems? Is it built according to the best standards?

 

How does representation affect design?

The main goal of diversity and accessibility in web design is to create content that everyone can understand. A diverse group with dissimilar backgrounds will have different ideas. Working with a diverse group can help ensure your content is easily understood. In an interview about the Black Experience in Graphic Design,

Bobby C. Martin Jr. says, “Better representation means better communication, which means information is more equitably shared — and knowledge is power.”

How can I improve diversity in the industry?

Bronwen Rees on UX Planet has suggestions for improving diversity in the design industry.

1. Look for new hires outside of your family and friends. This will help you find candidates with different opinions and processes than yours.
2. Become a professional mentor to someone with a different background. You will learn how someone else thinks and help them achieve their career goals.
3. Have flexible work-life policies. This will let you hire people who can’t maintain a strict 9-5 schedule. Single parents and disabled people could benefit from flexible policies.
4. Stand up against discrimination in the workplace. Challenge discriminatory assumptions and attitudes. Say something!
5. Seek feedback from diverse user groups. You’ll get unique insights you wouldn’t notice alone.

 

Guiding Principles for Diverse Content

Web designers need to think outside of their box to design for everyone. Another Lens has three guiding principles and many questions to ask yourself as you create your website.

1. Balance your bias. Ask yourself, “Am I challenging my assumptions?”
2. Consider the opposite. “What if I’m wrong? How can I tell? Who would disagree?”
3. Embrace a growth mindset. “Can I convince my audience to change their minds?”

By designing with diversity in mind, your website will be accessible to everyone. You must consider other people’s viewpoints and be open to user feedback. Make sure you consider these guiding principles before posting.

 

Five ways to improve accessibility

Check the color contrast on your website.

About 2.2 billion people have moderate to severe vision impairment. Many would not think twice about looking at a block of writing on different color backgrounds. Texts lacking contrast from experience can be a headache to read. Making your website WCAG 2.0 compliant will make their lives easier and help them engage with your site more freely.

Color Safe is a handy tool for choosing a color palette that is accessible to your work. You may also use WebAIM’s Color Contrast Checker to evaluate your previously selected colors. According to the W.C.A.G., the smallest contrast ratio between some text and its background should be 4.5 to 1. The ratio drops to 3 to 1 for bigger fonts, starting at 18pt for 14pt bold.

When displaying valuable information, do not rely on color.

Color is a powerful visual tool in both the actual and digital worlds. It adds presence, conveys attitude, and aids in information separation. Color has design advantages, but it can be inefficient when sharing information.

Never use color as the only visual signal for displaying crucial information. Color differences alone can be hard to distinguish for someone with color blindness. When presenting data to others, use an indicator other than colors, such as text labels or patterns.

Make your typography accessible.

You might feel that a text size of twelve is suitable for your website’s readers. Yet, the readers may disagree. Users might struggle to read such writing and leave your site without returning. As a result, keep in mind that users should always choose the font size. It will make reading a far more pleasurable experience.

Specific font sizes and styling can be troublesome for people with disabilities. Screen readers, for example, frequently neglect stylistic methods like strong and italics, rendering these styles worthless for blind users. If the writing is too small, individuals with limited vision or color blindness might not see it, while others may struggle to understand the italic typeface.

Use alternative text for images and non-text content

Alternative text allows users who cannot view pictures to get information. It helps people read aloud with assistive technology such as text-to-speech, speech input software, and websites that support the speech feature.

If a picture cannot be seen, the alternative text provides the image’s description. This is a text-based method of describing vital, helpful information about an image. Because it lends more meaning to the text nearby, it gives our viewers another technique for perceiving the image.

Create usable focus states.

Focus states are essential for ensuring that the user interface can be navigated without using a mouse and providing a positive experience for every user. People can browse and engage with a website using a focus state utilizing a keyboard, voice-activated software, or technology. Most web designers and developers overlook focus states, which shows that a sizable chunk of the population has a negative experience interacting with these user interfaces.

Takeaway

Diversity is often a challenge for designers in web design. However, it also presents a chance to create better solutions. We can bring new insights, perspectives, and a more comprehensive range of filters. By recognizing these challenges and working with diversity, the industry could evolve past its old ways.

This new mindset can impact a new age of acceptance and produce more creative solutions for our products and services. The most important part of diversity and inclusion is eliminating laziness and ignorance. If we work together, we can create a better, more inclusive society.