LGBTQ-inclusive web design

It’s pride week here in Stockholm, Sweden! So we thought we’d celebrate by sharing a few tips on how to create a LGBTQ-inclusive digital environment.

Computer with a big pride flag on it's screen.

Here at Axess Lab we specialise in accessibility and inclusive design – which is about making sure as many people as possible feel great about using your products and services.  Accessibility and inclusive design is often focused on people with disabilities, but let’s look at two concrete things you can do to make your digital products awesome from a pride perspective!

1. The gender question

Many forms include a question about the user’s gender.

Two radiobuttons with "Male" and "Female". The input is required to fil in.

Do you really need to know this information? If the answer isn’t a clear “yes”, then the best idea is probably to just remove it. A lot of services ask for users’ gender without really needing it. Simply not asking for gender is great because of a few reasons:

  1. You reduce the length of your form by one field. And it’s a fact that reducing the number of form fields increases conversion rates (searchenginepeople.com)
  2. Your users don’t start questioning your intents. A lot of companies ask for gender information to be able to send you specific marketing. Many users know this and get suspicious.
  3. You don’t risk excluding users who has another gender identity than the ones you specify.

If, however, you really need gender information you can ask for the information in an inclusive way.

The examples below are from the article Designing forms for gender diversity and inclusion by Sabrina Fonseca and the talk All inclusive design – excluding no gender by Sara Lerén (@HeedTheNeed).

The first step that many have already adapted is to add an alternative for “Other”. This is better – or should I say “less bad” – than the binary “Male/female”. But people who identify as male or female get their own categories while everyone else are mashed together to “other”. We can do better!

Radiobuttons Male, Female, Other.

Sometimes the simplest solutions are the best: a custom input field where the user can type whatever they want. Also note how you can explain why you need the gender information below the field.

Input field with label "My gender is", below it says "We want to know your gender because..."

You could include a custom input field after a male and female radio buttons, like this:

Male, Female and an input field.

Including a “Rather not say”, like in the example below, is great as well. It gives people the chance to skip the field, and many who identify as something other than male or female are extra cautious about sharing that information online. Seeing the huge problems with for example transphobia around the world, everyone will not want their gender identity registered in some online database. Combine the “Rather not say” alternative with a custom input field, and you’ve come a long way with little effort!

Input Female, Male, Rather not say and Custom.

If you want to go all-in, check out Facebook. They’ve done a lot of work with their gender questions. There’s a huge list of gender identity “tags” to choose from, and if you don’t find the correct one you can add to the list yourself. Also, they ask for your preferred pronoun, making it possible to prefer a gender neutral pronoun with examples on how it will be used: “Wish them a happy birthday”.

Facebook form with input for gender and a question "Which pronoun do you prefer?"

2. Choose inclusive images and illustrations

Our second tip to becoming more LGBTQ-friendly is to work with your images and illustrations.

A lot of people can rarely or never identify with the people that are represented in images or illustrations on websites, social media and the like. What you choose to display there says a lot about who your target audience is, so make sure it’s as diverse as possible to feel relevant to all your potential users.

Break as many norms as possible in your imagery. Show women playing sport, men taking care of kids, a person in a wheelchair coding, a family with two dads and so on. And make sure not everyone in your images are white.

Below are some great examples of inclusive images you can get inspired by.

The Swedish army fight for LGBTQ-rights:

Person in the army fingerpainting rainbow on their face. Text: "We don't always march straight".

Facebook shows icons of two men instead of a man and a woman when two men get married:

Facebook icons two men for male marriage.

I recommend everyone to check out this Swedish guide: Images that change the world. Even if you don’t know Swedish, just flip through the guide and look at the great images, you’ll get the point!

Here’s one of the images featured in it, pointing out that older LGBTQ-couples are extremely rare to see in images.

Two older women kissing.

Here’s a great banner image on Stångåstaden a Swedish site for renting apartments:

Top banner on a site with image of two men hugging each other lovingly.

The Swedish youth clinic site has some awesome, inclusive illustrations on their site. The great thing about the one below is that it’s on a page about friendship. It’s not on a page about dating with disabilities. So they picked an inclusive image without making a point of it. This is a great way to help widen the norms we live by.

Black girl in wheelchair with boy not in a wheelchair, hearts surrounding them. Illustration.

Sometimes it can be difficult to find inclusive images, especially on regular stock photography sites. But luckily Jenny Hellenberg (@jenhell) shared some good tips with me, so here are some great places to look for images with diversity:

Screenshot of lgbtq photos on a stock photo site Twenty20.

Hope this inspired you to keep improving your inclusive design!
Happy pride everyone!

Get notified when we write new stuff

About once a month we write an article about accessibility or usability, that's just as awesome as this one! #HumbleBrag

Simply drop your email below.

We work world wide, if you need help send us an email!
hello@axesslab.com