Categories
Accessibility

How to Make Your Online Presence Accessible

 February 5, 2021
 Regan Shrumm

The BC Museums Association gratefully acknowledges funding support of this project from the Government of Canada.

 

While many people take looking at social media and websites as a daily experience, for many individuals these platforms are not available due to lack of internet or are not attainable due to their lack of accessibility. The follow are some helpful tips for making your website and social media more approachable and reachable.

For Both Websites and Social Media:

Screen Readers

Test out any website or social media site to know what it would be like for individuals who are using screen readers (an assistive technology that reads out text on a computer often used by individuals who are blind or have low vision). There are several free screen reader applications that you can use including NVDA and Apple Voiceover.

Alt Text

Alternative text or alt-text is a brief textual explanation of an image, which should be concise and meaningful, but not compromise the detail for it to make sense. Usually, alt-text are around 200 characters or less. Alt-text is slightly different than captions, as captions do not need to focus on the visual component and can be a supplement to any image. While many people take looking at social media and websites as a daily experience, for many individuals these platforms are not available due to lack of internet or are not attainable due to their lack of accessibility. The follow are some helpful tips for making your website and social media more approachable and reachable.

Tiny figures bustling around the entrance of the World Trade Centre, which has open wall slats on either side of the entrance that connect at the ceiling to form an open triangle.

Image: Luca Bravo

Alt-text: Tiny figures bustling around the entrance of the World Trade Centre, which has open wall slats on either side of the entrance that connect at the ceiling to form an open triangle. Caption: The interior of the World Trade Centre in New York City.

Colour Contrast

Both colours and contrast are essential for accessibility in all forms including readability and prevention of triggers. There are free online tools, such as WebAIM’s colour contrast checker, which lets you experiment with foreground and background colours to ensure that the text is readable according to the Web Content Accessibility Guidelines (WCAG), which are the world standard for website accessibility. However, these guidelines do not always measure up in practical application. For example, while gray text on a white background can pass the colour contrast checker, it is always better to useblack text on a white background.

Language

  • Write in plain language, which means avoid jargon, idioms, slang, technical, and academic language.
  • Never use all caps in your text as it is hard to read aloud with screen readers
  • Limit the use of emojis
  • Use adequate font and font size- usually a san serif (like Times New Roman, Helvetica, and Calibri) and at least 18-point font for an online format
  • Use active voice rather than passive voice
    • Passive voice is when the subject is affected by the verb; for example, “The ball was thrown by the child.”
    • Active voice is when the subject is performing the verb; for example, “The child threw the ball.”
  • Use the Flesch-Kincaid Reading Test to check what the reading level is for your text. In general, it would be good to keep the reading level to 5th

A good example of this is comparing a Wikipedia article to a Simple English Wikipedia article, which is made for an easier reading experience, especially those who are learning English as a second language and for those with cognitive disabilities. For example, on Wikipedia, hegemony is defined as “the political, economic, or military predominance or control of one state over others.” In the Simple English Wikipedia article, hegemony is defined as “the power of one group over other groups.”.

Facebook

  • Ensure that your organization has an “About” section so that individuals can quickly have a point of entry for what your institution does
  • Include multiple ways to contact your organization, including email, phone number, website, and through Facebook messenger.
  • Add alt-text to any images
  • If you are posting video or audio, add the full transcripts in the comments

Twitter

  • For hashtags, always capitalize the first letter of each word. This allows for screen readers to better understand the words when it is read aloud. An example of this, often called camel-backing, is #DoThis not #dothis.
  • Put the following prefixes before any tweets that have photos, videos, or audio so screen readers know what to expect
    • Photos: [PIC]
    • Videos: [VIDEO]
    • Audio: [AUDIO]
  • Place any hashtags and @ mentions at the end of the tweet, this allows screen readers to fully read out the tweet without confusing the person using the device.

Instagram

  • Add alt-text to all your photos at the end of your posts
  • Add hashtags at the end of your post, and make sure the hashtags use camel-backing
  • Do not use the custom text fonts as these are not readable through screen readers

YouTube

YouTube creates machine-generated captions once you have clicked on that option. However, it can be quite inaccurate. Use YouTube’s caption editor to edit the caption to correct misspelling, remove “umms,” and correct the pacing of the captioning by shifting sentences to create more pauses.

Websites

  • Include multiple contact information, including phone number, email, and mailing address, for ways that people can request changes for accessibilities needs
  • Include an accessibility statement, which includes items like:
    • Are there stairs, power doors, ramps? How many stairs?
    • Is the accessible entrance in the front or back of the building?
    • How many accessible parking spots are there?
    • How many bike racks are there? Where are they located?
    • What is the closest public transportation? How many blocks away is the nearest stop to the building?
    • How many accessible washrooms are there? Do they have baby change tables? Are they individual stalls? Are they gender-neutral? Do they have safety grab bars or lifting aids? Are all of the bathrooms’ soap and paper towels at a lower height level?
    • Are food and drinks available to purchase or bring in? Are there vegetarian, vegan, gluten free, and/or dairy free products?
    • Are service animals welcome?
    • Are there any financial supports, such as free admission for certain days?
    • Can you have bags and coat in the museum with you? Are there lockers or a coat check? Is it free?
    • Is there seating? Where is it located? Does it have arm and back support?
    • Are there quiet areas if people get overstimulated?
    • Do you have a scent-reduction policy? If so, what is it?
  • Have section headings for any amount of text, as this can make the website more readable, especially when using a screen reader
  • Use a plugin for your website to make it more accessible, such as SoGo’s Accessibility Plugin, which can temporarily adjust your website to an individual’s needs. For example, by making it completely black and white, adding a bright or dark contrast, underlining links, and making the font size larger
  • Make sure that all PDFs are readable through a screen reader. This can be done using Acrobat Pro’s verifiable PDF accessibility tool.

Resources

Author’s Bio

Regan Shrumm is a queer, genderqueer, and disabled curator, educator, and administrator. They have been working in the museum field since 2010, and have worked at such institutions as the Art Gallery of Greater Victoria, the Museum of Northwest Arts, and the National Museum of Northwest Art. Their programming focuses on building and deepening community that is as accessible as possible for everyone.