A website is welcoming to LGBTQ+ visitors when its forms, photographs and wording show that the organisation expects them. Having a rainbow flag in the footer does not achieve the same effect. A visitor decides whether an organisation had someone like them in mind when they reach the first form or page of text.
What message does a form send to a visitor?
If a form only offers ‘Mr’ and ‘Mrs’, or ‘Male’ and ‘Female’, a non-binary visitor will feel that their answer has not been considered. Only ask for information that you will use, make questions about gender and pronouns optional and offer a free-text answer option. Ask yourself if you really need to know someone’s gender when they fill in a form on your website. You can find more details in our article Asking for pronouns and gender on a website form.
Which photographs should you use?
Wherever possible, use photographs of your own members, volunteers and events, as stock photographs of LGBTQ+ people tend to depict only young, white, able-bodied people. However, not everyone in a photograph may be out to their family or employer. Ask each recognisable person for permission before publishing a photograph on your website or social media, and remove a photograph promptly if someone asks you to.
When writing the alt text, describe what is visible and avoid guessing a person’s gender or identity. ‘Two volunteers carrying a banner at Pride Amsterdam’ is more accurate than ‘A lesbian couple at Pride Amsterdam’, as this assumes that the two people are a couple.
Read our own visual representation philosophy.
Which words should you check for inclusivity?
Check your website’s pages and automatic emails for words that assume a gender or family status. ‘Partner’ is inclusive, whereas ‘husband or wife’ is not. An email that opens with ‘Dear Alex Jansen’ does not require a title, whereas ‘Dear Mr Jansen’ necessitates an educated guess.
How about inclusivity and accessibility?
Accessibility is part of inclusivity. LGBTQ+ visitors may be blind, deaf, or dyslexic, so a website that cannot be read by a screen reader is not welcoming to them. Follow the Web Content Accessibility Guidelines (WCAG).
Rainbow colours in particular need to be checked. For example, yellow or light orange text on a white background does not meet the WCAG’s required contrast ratio of 4.5:1 for body text. Use rainbow colours for decoration only, and ensure that text is dark on a light background.
How can you tell if your website is welcoming?
Ask three people from your community who differ in terms of age, gender identity and ability to complete a task on the website, such as signing up as a member, while you observe without offering any assistance. The parts of the website where people hesitate or stop are the areas that need to be changed first. Repeat the exercise once a year, as both the community and the website will change over time.
Need help figuring out how accessible your website is? Send us an email at hello@fourteenrockets.com.
