Accessibility and Inclusion

Whether you’re creating content for the web, social media, or print, it’s important to consider whether your work will be accessible to audiences of different abilities. Furthermore, as Paraqlet aims to reach diverse audiences, you should ensure your content reflects a wide variety of perspectives.

Accessibility

For accessibility guidelines not explicitly discussed below, refer to Web Content Accessibility Guidelines 2.2. Web content should achieve at least Level AA compliance when designing content. Better yet, strive for Level AAA compliance whenever you can.

Accessibility in social media content

Learn about how to ensure create accessible social media content from the guidelines below.

Emojis

Emojis can be a fun way to express emotions in your content or to add interesting visual contrast in plain text. However, there are guidelines to which you must adhere when using them to ensure your content remains accessible:

  • Place important information before emojis.

  • Use emojis in moderation. Avoid repeating emojis or using too many in quick succession.

  • Avoid using emojis as bullet points.

Hashtags

Capitalize each word in a hashtag, including articles, prepositions, and conjunctions. This helps screen readers and text-to-speech software parse words separately, improving readability.

  • #ConnectionAndCommunity

  • #Paraqlet

  • #ANightToRemember

  • #BIPOCVoices

URLs

Avoid using long URLs in your social media content, especially if the platform you’re working on does not support rich text. Use a URL shortener such as TinyURL to ensure the URL does not affect readability or accessibility.

Do not end a sentence with a URL, as readers may mistake the period at the end of the sentence as part of the URL. Avoid starting a sentence with a URL.

For URLs in web content, use descriptive hyperlink text to ensure readability for links. To learn more, see Descriptive writing.

ASCII art

ASCII art uses alphanumeric characters, punctuation marks, and other characters from the American Standard Code for Information Interchange (ASCII) to form pictures.

ASCII art is inaccessible to those using screen readers or text-to-speech programs. These programs will read aloud each individual character, which can become tedious. Additionally, ASCII art is not responsive, meaning the formatting can shift depending on the device or browser the user is using to view your content.

The most accessible way to include ASCII art in your content is to create it in a blank word processor document, take a screenshot, and include alt text describing the artwork.

Alt text: ASCII art of a cat’s face with a surprised expression.

See Accessibility in audio-visual content for more information on alt text.

Accessibility in audio-visual content

For photographs and graphics, including those that include text (e.g. Instagram posts), provide alt text describing the image for audiences with visual impairments. When the platform you are using provides a specific place to write alt text, use that. Otherwise, write alt text in the caption of your post.

Describe the content such that the user can understand it without needing to see the visuals. You do not need to write alt text for decorative photographs or graphics (those that do not convey useful information to users).

Alt text: A Black woman in a purple sweater and lilac eyeshadow holds a phone, tapping the screen while smiling.

Avoid using flashing lights or strobing content in videos. If you must use flashing or strobing content, provide a warning at the beginning of the video.

  • Warning: This video includes flashing lights.

  • Warning: The following video contains strobing content.

Refrain from having audio and videos on websites autoplay. Ensure there is a mechanism to control the volume of audio-visual content that exists independent of system volume controls.

Captions and transcripts

For video and audio content, provide closed captioning and accurate transcripts, respectively. Include all speech and sounds that are necessary to understand the content (e.g. applause). For videos, include descriptions of any visuals that are necessary to understand the content.

Make sure to use a readable font for captions and transcripts; refrain from using overly decorative fonts such as script or calligraphic typefaces.

When you create closed captions, follow the guidelines below to ensure cohesion across Paraqlet’s audio-visual content:

  • All captions should have white text on a translucent black background.

  • Captions should be at least 22 pt size by default.

  • A single occurrence of captions should not exceed three lines in length.

  • During long intervals of silence, remove the last caption frame.

  • Avoid over-using emojis in shortform video (e.g. TikTok, Instagram reels) captions. Do not use emojis in longform video (e.g. YouTube) captions. For more information on accessibility in emoji usage, see Emojis.

For audio transcripts, follow the guidelines below:

  • Use the same typeface and font size for transcripts as for other written content that corresponds to your content (such as a transcript for a podcast episode that corresponds to a certain blog post). Use headings to separate a transcript from other written content.

  • Include the transcript directly below the audio it describes.

  • When transcribing speech, make it clear who is speaking by including a dialogue tag formatted in bold just prior to the spoken words.

    • Upon the first usage of the speaker’s name, write out their full name. In future uses, just write the speaker’s surname. Include a colon after the speaker’s name.

  • Separate each speaker’s dialogue into different paragraphs for readability.

  • Describe any background sounds or soundbites that are important to understanding the audio content. Place descriptions in between square brackets in their own paragraphs.

Here is what a transcript of part of a podcast might look like:

[Upbeat instrumental sting]

Sylvain Labonté: Hi there. I’m Sylvain Labonté, founder of Sylvain Studios. Welcome back to another episode of Snapshot. Today, I have with me a good friend and colleague, Victoria Cuervo.

Victoria Cuervo: Thanks for having me, Sylvain!

Labonté: Of course! We’ll be talking all about landscape photography, starting with understanding how to use light.

Cuervo: Landscape photography often uses natural light like sunlight to convey depth and emotion in compositions.

Content visibility

It is important to ensure users can clearly see the text of your content against the background.

WCAG requires a contrast ratio of at least 4:5:1 for normal text and at least 3:1 for large text to achieve Level AA compliance. To achieve Level AAA compliance, you need at least a 7:1 contrast ratio for normal text and at least 4:5:1 ratio for normal text.

You can use an online tool such as the WebAIM Contrast Checker to see if the colors you have chosen meet WCAG color contrast standards.

Do not rely on color alone to convey information. For instance, links should be both underlined and colored differently from plain text. Headings should be both bolded and a larger size than body text.

WCAG does not specify minimum text sizes for content accessibility. A good starting point is 16px (12pt) font for body text and 24px (18pt) for headers.

Responsive web design

Assume users view your content on a variety of different devices, including smartphones and tablets. Adhere to the guidelines below to ensure all users can enjoy a high-quality experience:

  • Write brief but descriptive headlines and image captions.

  • Make sure your paragraphs and content sections are short. Users should ideally not have to scroll down in order to see the full paragraph on a smartphone.

  • With tables, limit the number of columns.

    • Avoid compressing columns into a narrow space by setting a minimum width for the columns (e.g. if you are styling a table in CSS).

    • Make the header row sticky; that is, anchor the header row to the top of the screen as the user scrolls down to see more rows in the table.

Smartphones, desktop computers, tablets, and other devices all receive the same code. Be aware that a website’s content is rearranged to fit different screen sizes, so three columns of content on a desktop may become two on a tablet or one on a smartphone. Whereas a desktop user may be able to find the content they want relatively easily, a smartphone user may have to endure long periods of scrolling. For this reason, test your web content on a mobile device first before doing so for a desktop or PC.

Ideally, users should be able to resize text—save for captions and images of text—up to 200% without losing content or functionality. To test this, display your content in a web browser or emulator and zoom in to 200%. Check to see if the content’s visibility or functionality changes. If it does, try reformatting your content to be more responsive.

Accessibility in written content

As discussed in Accessibility in audio-visual content, it is important to provide alt text for visual content. This helps ensure users with screen readers can enjoy your audio-visual content. It is equally as important to ensure written content is accessible to those with disabilities.

Learn about how to ensure accessibility for written content from the guidelines below.

Structuring content for accessibility

Use brief, informative titles and headings to describe the different sections of your written content. Headings should group together related paragraphs and provide a clear outline of your content.

For instance, in a blog post on the impact of Paraqlet’s work on a fictional small business, Beyond Extraordinary, you might organize your writing into sections that following a narrative flow, including headings that denote those sections.

  • Why Beyond Extraordinary came to Paraqlet

    • Background

    • Problem statement

  • Paraqlet’s solution

  • Developing the solution

  • Implementing the solution

  • Impact of Paraqlet’s work on Beyond Extraordinary

Descriptive writing

Provide alt text for audio-visual content. See Accessibility in audio-visual content for more information on alt text.

Use informative hyperlink text. Refrain from using phrases such as Click here and Read more without additional description, as they do not provide sufficient context for users with screen readers to understand the destination of a hyperlink. In the example below, the underlined words represent hyperlinks.

Write this Instead of

Check out our case studies for more information on the work we’ve done for clients in the past.

Click here for more information.

You can find more information on the event on the "Events" page of our website.

You can find more information on the event here.

Read the Beyond Extraordinary case study in our Portfolio to learn how we helped this small business spread the word about their products.

Read more in our Portfolio.

Avoid using download links (those that cause the user’s browser to download a file or folder when clicked). When a hyperlink links out to a document, such as a PDF, include information on the document type and size between a pair of square brackets. Separate the document type and size with a semicolon.

  • Read our proposal document [PDF; 1,900 KB] to learn more about Paraqlet’s upcoming collaboration with Beyond Extraordinary.

  • Review the request for proposal [PDF; 758 KB] to learn about what we’re looking for.

Don’t include links in titles, headings, or subheadings. Avoid placing multiple links to the same resource on the same page. Do not include punctuation in hyperlink text unless it is part of a proper noun, or you need to add quotation marks to denote a page name or title.

Inclusion

We want Paraqlet to be an inclusive organization. That inclusivity extends to how we communicate our brand values, work, and stories. Learn about how to create inclusive content from the guidelines below.

Inclusive imagery

Choose generic images that are appropriate regardless of a user’s country of origin. Be aware of your target audience and select imagery that resonates with them while avoiding images with negative connotations.

When selecting graphics or images to accompany your content, follow these guidelines:

  • Avoid hand gestures, which may have different meanings depending on their cultural context.

  • Avoid imagery of famous buildings or landmarks, which may be associated with politics or religion, or have legal protection against using such imagery for commercial purposes.

  • Do not use country flags to denote languages, as many countries have several different official and unofficial languages.

In addition, try to select imagery that depicts diversity on the basis of factors such as:

  • Race and culture

  • Gender identity and expression

  • Age

  • Ability

  • Sexual orientation and family structure

  • Socioeconomic class

Inclusive writing

Use the guidelines below to ensure your content stays inclusive and represents a wide spectrum of audiences.

Gender-inclusive communication

Avoid addressing audiences (e.g. in videos) with gendered language such as guys or ladies and gentlemen. Instead, select a gender-neutral alternative such as everyone or folks.

Avoid using new, less common variations of terms that are already gender neutral (e.g. folx instead of folks) or terms that are deliberately gendered (e.g. womxn instead of women). Such variations may interfere with content accessibility. For more information on content accessibility, see Accessibility.

Constructions such as Latinx and Latine as gender-neutral alternatives to Latino and Latina, as well as Filipinx in place of Filipino and Filipina, are contested. Because these constructions do not translate smoothly into the gendered languages of Spanish and Tagolog, respectively, refrain from using them. Instead, use the grammatically masculine Latino and Filipino to refer to people of the respective backgrounds.

On a case-by-case basis, you may use the above constructions if specifically requested (e.g. if a person you are interviewing for a blog post specifically requests to be referred to as Latinx instead of Latino).

Likewise, be sure to ask for a person’s pronouns and use them as requested consistently throughout your content. If someone uses multiple pronouns (e.g. she/they, he/they, he/she/they), ask about preferred usage, such as:

  • Whether they would like to switch between pronouns

  • How they would like you to switch between pronouns throughout your content, if applicable

  • Whether they have a stronger preference towards one specific pronoun

Gender-neutral communication

Refrain from using gendered third-person pronouns (e.g. his, hers) in generic references or hypothetical scenarios. Instead, rewrite sentences to use the singular they pronoun or second-person pronouns (e.g. you, your, yours).

Write this Instead of

When you want to share a document with someone, type their email address into the field labeled Share Document.

When you want to share a document with someone, type his or her email address into the field labeled Share Document.

A user can grant his collaborators different permissions by accessing the Share panel.

You can grant your collaborators different permissions by accessing the Share panel.

See Pronouns for guidance on using pronouns in your content.

Use gender-neutral alternatives for common terms when available.

Gender-neutral alternatives for common terms
Use this Instead of

Chair, moderator

Chairman, chairwoman

Humanity

Mankind

Workforce, staff, employees, personnel

Manpower

Synthetic, artificial, manufactured

Manmade

Operates

Mans

Firefighter

Fireman

Police officer

Policeman, policewoman

Council member

Councilman, councilwoman

Refrain from using unfamiliar constructions (e.g. snowperson instead of snowman) for the sake of gender neutrality.

Anti-racist language

Use good judgement when engaging with language in an anti-racist manner. When determining whether a certain word or phrase can do more harm than good, ask yourself questions such as:

  • Does this language imply otherness or exclusion?

  • Does this language imply some cultures are monolithic?

    • That is, does it fail to capture the nuances between cultures of similar geographic origin?

  • Does this language make me uncomfortable, even if I can’t exactly articulate why?

  • Is this language a metaphor?

    • If so, what are the implications of the metaphor?

      • Does it place a positive connotation on whiteness and a negative connotation on blackness?

  • Are there any people who may be offended by this language on the basis of race or cultural background?

  • What is the etymology of the word or phrase? Does it have racist origins?

Refrain from using slang terms that could be viewed as culturally appropriative, such as spirit animal and guru.

Writing in languages other than English

Refrain from italicizing or otherwise applying special formatting to words you write in a language other than English. This includes loanwords and quotations from people who are speaking or writing in a language other than English.

  • Looking at the agency’s graphic design work, Étienne noted there was a certain je ne sais quoi about their art style.

  • "When the lyric soprano started singing those first lines, 'Quando m’en vo soletta per la via,'" the critic said, "I swear the whole theater was transfixed. She was magnetic!"

Note that the same grammar guidelines from Grammar and Mechanics apply when using a non-English language as when using English. Similarly, formatting guidelines from Formatting and Content apply when formatting non-English text.