Boogie with us

Tag: user inclusion

Posted on

Thoughtful and Inclusive Websites: Why Website Accessibility Is Important and How to Make Them More Accessible.

When a website is designed and built to address a diverse range of individual’s needs, more users have equal access to information. Website accessibility empowers users with agency, arming them with a sense of meaningful purpose and responsibility throughout their customer journey often leading to improvements in general customer experience and loyalty. 

According to a published report from November 2021 by the World Health Organization, over 1 billion people live with some form of disability. This is about 15% of the world’s population. Accessible design considerations target and address the very needs of those who are experiencing some form of disability. Let’s take a moment to consider the various ways an accessible website can help achieve your overall business goals and improve customer experience.

Website Accessibility is Crucial for Equal Access to Information

Accessible design and development creates easy to navigate, functional tools that every user can use. For customers with disabilities, accessible experience is essential for equal access. However, accessible development can be useful to all users experiencing various forms of disabilities or socioeconomic and situational limitations, for instance:

  • Subtitles benefit more than users who are hearing impaired. They can be helpful for people who are in noisy or shared environments where sound cannot be heard, access to headphones are limited or when they are unable to use speakers or other personal sound systems. 
  • People whose abilities are varied and changing daily due to age or impairment.
  • Those who are experiencing temporary disabilities due to an injury.
  • People experiencing cognitive, learning and developmental difficulties.
  • People experiencing situational circumstances. For example, a busy parent who needs to be able to navigate your website with only one hand, while carrying around a baby with the other.

Building An Accessible Website Is A Sound Business Decision

There are many competitive advantages to having an inclusive website. Building a more accessible website better positions you to serve users that your competitors cannot. You’ll have lower bounce rates by reducing the number of users who immediately leave your page because they rely on other assistive technology. Your page’s overall SEO improves since Google considers accessibility essential; it is a factor in ranking and indexing websites.

Because of the prevalence of internet usage and its significance in our daily lives, many countries are acknowledging user experience and accessibility. For many businesses building accessible websites is no longer just a moral act. It is now officially required through The Americans with Disabilities Act. The ADA mandates that businesses open to the public provide full and equal enjoyment of their goods, services, facilities, privileges, advantages, or accommodations to people with disabilities. Examples of businesses open to the public:

  • Retail stores and other sales or retail establishments
  • Banks
  • Hotels, inns, and motels
  • Hospitals and medical offices
  • Food and drink establishments
  • Auditoriums, theaters, and sports arenas

Tips for Building an Accessible Website 

These are a few simple steps to get started building a more accessible website: 

Semantic HTML–

Semantic HTML is the foundation of any website, and using purposeful code is the foundation of an accessible website. Many accessibility tools, such as screen readers rely on Semantic HTML to help guide a user through a page. When done incorrectly, it can make it difficult, if not impossible, for a user to navigate your website. While many developers may not use all of the semantic elements available, opting for non-semantic elements like <div> or <span>, one semantic element all developers use are H tags. 

Using H tags is similar to writing an outline for a paper as shown in the below image on the right. Rather than thinking of the H tags as size dependent as shown in the below image on the left, it is important to keep in mind that they also need to be used for content sorting. 

Alternative Text 

When an image exists on a page, alternative text helps users of screen readers to have the images described to them accurately. A screen reader is a type of assistive technology that translates what is being displayed on the screen to audio or braille. It’s important that you describe what is happening in the image, give context, and don’t give a one-word description like “person.” Instead, opt for something like “woman riding through the countryside on a bike.”

Give Buttons and Link Accessible Names or Descriptive Labels 

A simple “learn more” button can leave some users of adaptive tech asking, “What am I learning more about?” In an ideal world, all buttons would use descriptive text that details what clicking that specific button would do, but that is not always the case. If you are unable to change the button text for various design reasons, for instance the button size, or it is an icon, you can write a brief description of what the button does and add it to the button using an aria-label; now users of screen readers know exactly what the button does. 

Supporting Keyboard Navigation is Crucial For Accessibility

The keyboard is vital to people with disabilities. People with motor disabilities and those experiencing visual impairment rely on screen readers, people who do not possess precise muscle control, and even power users, are dependent on a keyboard to navigate content. Ensuring that a webpage can be accessed solely using the keyboard and that clickable items have “Focus” states, so users understand what they are selecting is an important part of making a website accessible.

Form Labels and Instructions Are Key For Website Accessibility

Website forms can often possess disadvantages that prevent screen reader users from understanding them. Using “Placeholder Text”  as labels is one of the biggest mistakes when designing a form. While the simplistic design can be appealing because it saves space and looks better in the design context, “Placeholder Text” is unforgiving to those who are unable to see your design. People who rely on screen readers typically navigate through a form using the Tab key to jump through the form controls. The elements are read for each form control. Any non-label text, such as “Placeholder Text”, is skipped over. This prevents the user from completing the form, and we wouldn’t want anyone missing out on signing up for something extraordinary on your site!  

When tasked with building a form that solely uses “Placeholder Text”, our developers will add form labels while using CSS to conceal them. The form retains the integrity and vision of the client while keeping the form accessible to all.

When you design and develop websites with inclusivity and accessibility in mind,  you create a space where every user can thrive and have an experience that is both empowering and limitless.

It takes a dedicated team to create a fully accessible user experience.  This requires additional development work, knowledge and experience. Let us help you ensure that your website is accessible and inclusive for a broader audience.

Posted on

User Inclusion Through Agnostic Personas 

There’s a good chance you and your marketing or product team have personas in hand. They are an indispensable tool for creating meaningful, personalized experiences for your customers, prospects, and users. Have you ever wondered if the personas that you have are effective? Are they accurately representing your audience segments?

Well, you aren’t alone. Re-evaluating your personas is a great exercise and we highly recommend doing so. There are many lenses through which you can perform that evaluation, and we want to share some insight on making your personas more inclusive.

What are personas?

Personas are an important UX tool to aid in helping brands and organizations speak to sections of their audience. They can be presented as an infographic or visualization that describes a specific user type which has defined characteristics that make the segment unique from another segment. Personas highlight opportunities for personalized communication and experiences that resonate with the motivations, behaviors, and needs of subsets of the total audience that a brand might be looking to connect with. By creating personalized experiences for each persona, there is a higher likelihood that they will purchase, develop brand affinity, and have a positive experience or develop a positive sentiment toward your company.

The Persona Misconception: “Person” vs. “PersonA”.

When creating a persona, you have to identify common characteristics across many users to start creating a target to aim for. However, this approach is often taken a step further than it needs to be, and suddenly we’re looking at a character profile of a person instead of a group of people. Companies will put in a lot of time and effort into gathering data for a set of personas, and they want to put all of that data to use (rightly so), but this often ends in a very specific scenario for a very specific person, which in the end defeats the purpose of a persona. Here is a short example:

“Jamie Richardson is a 25 year old female, and she lives in Shaker Heights, Ohio. She has a 4 year degree from University of Miami and a yearly income of $45,000. She is single, has no kids, and makes all of the purchasing decisions for her 1-person household.”

There is not a very high likelihood that an entire user segment aligns with all of these characteristics, but it’s very common to see this kind of hyper-specific demographic data in personas today. While there are benefits in certain situations to using this detailed approach, more often than not, it creates a persona that is not representative of the entire audience segment. This approach is, in our experience, a byproduct of the templatized way personas have been taught and inherited into the UX practice.

This process of turning personas into a person often begins with demographics, the first defining features of a persona, and the desire to create a tangible representation of the audience group. So marketers start to attach ages, marital statuses, family make-up, and genders to the persona that are not providing any intrinsic value to the persona, but rather excluding users unnecessarily. You might look critically at your existing personas and ask questions like: Why is this persona 52 years old? Why do they have 2 children? Is it relevant that they attended this specific school? Looking critically through this lens is a great way to identify if there is superfluous information added to personas to make them “look like a persona” when in reality these key demographics give nothing to the overall persona.

The Persona Golden Rule(s)

We’d love to share with you a few tips that we use when establishing our personas. As an exercise, you can apply these recommendations to your existing personas and see what kind of difference it makes.

  1. If it does not add value, make it agnostic.
  • Ages become age ranges
    • If a defined age is really important to your segment, then by all means, go with a specific age for your persona. If not, go with an age range – it’s more inclusive of the segment you are speaking to.
  • Genders become neutral. Use they/them pronouns.
    • This is a great opportunity to expand the way your internal team thinks about the members of an audience segment. You may have chosen a gendered name or user story to convey the needs or motivations of your persona, but that may actually be limiting your effectiveness. If there isn’t a strong case for the persona to be gendered, try shifting to gender-neutral pronouns.
  • Names are changed to archetypes (ex. John turns into The Realist)
    • Similar to shifting from gendered to gender-neutral pronouns, the shift to archetypes from names can better represent your persona. Names can carry a lot of unintended information about geolocation, gender, ethnicity, or class that could unintentionally bias how you approach and message to that audience segment. Archetypes of behavior or motivation keep the focus on user needs, motivations, and behaviors. 
  • Locations are removed, or generalized to larger regions
    • Does your audience segment live in a particular country, region, city, or town? If not, we’d recommend that you not include that type of location information in your persona – it may not be representative of the entire persona group and/or it may not be relevant to how they make their decisions.

2. If it DOES add value, make sure that is documented somewhere in the persona.

Of course, there are times when you DO want to include all of the things we just called out – as long as they are factors that uniquely speak to all the members of the audience segment the persona represents. Here are a few examples.

  • This persona is 50 because that is the average age of menopause.
  • This persona is male because the majority of our audience is male.
  • This persona is named John because that is a common American name representative of the audience segment.
  • This persona is based in San Francisco because this user type is often found in silicon valley.

When evaluating the Do’s and Don’ts, you can apply a value test to the persona.  If you were to send this persona in an email to a stakeholder who has no other context besides what is stated on the persona, will all of the information presented make sense? If not, revise. 

Keep in mind that when an unnecessary piece of information is added to a persona, such as gender, you are automatically removing every other gender from that user group. Only add information if it is relevant and valuable.

Not sure if your personas are meeting your needs? Let’s chat! Our team of experts can help evaluate, revamp, or create net-new personas for your organization.