As a Mural facilitator or owner, it’s important to support collaborators with vision impairments so they can have a fun and engaging Mural experience. By following the recommendations in this article, you can create a more accessible and inclusive session.
Contents
Before your meeting
One of the best ways to facilitate an inclusive mural is to get started ahead of time. The tips below will help participants start the session feeling relaxed and ready:
Provide attendees links to our articles on keyboard shortcuts, screen readers, and Mural resources so they can familiarize themselves with how Mural works and all the ways to access its features.
Send out a link to your mural and the meeting agenda so attendees know what to expect.
Remind all invitees that they can reach out to the facilitator for support before, during, or after the session.
Note: Facilitate the most accessible meeting possible by checking out the template on Accessibility best practices for Mural facilitators and the companion article on accessibility.
Create a logical and accessible layout
When thinking about the layout for your mural, first consider which type of canvas you want to use, how to organize it, and the scale best suited to collaborators with vision impairments. Be creative and accessible! Use the tips below to help you get started.
Decide which type of mural
There are two types of canvases for your mural: The infinite canvas and the resizable canvas. Consider the needs of your collaborators when deciding which to use:
End users with low vision may find the infinite canvas more beneficial because the dot grid helps participants know how zoomed in (or out) they are.
Magnifier users often find that the resizable canvas provides better orientation because the boundaries are defined.
Screen reader users will receive a screen reader announcement about their zoom level as they zoom in and out in either version of Mural.
Organize content that’s easy to find and follow
A well-organized and accessible mural provides content in a central location and uses whitespace, bullet points, and sections to break up large chunks of text.
Use Mural’s tools to help collaborators navigate with ease:
Frameworks - Areas organized into templates for events, calendars, and much more.
Outline - Organized links to areas that lead directly to those objects when clicked.
Tables - Organize your thoughts and add, delete, and customize columns and rows.
Grouped objects - Objects organized together that function as a single item.
Facilitator-lock - Prevents collaborators from unintentionally moving items.
Other helpful organization tips:
Consider creating a section to store links. Paste links directly into a mural (rather than in a sticky note, for example) to make them more noticeable on the canvas.
Provide written instructions for activities.
Determine the scale
Scaling impacts the readability of content such as text, images, and links. In general, you should use default sizes for text and objects when scaling a mural. This enables collaborators with vision impairments to navigate more easily when zooming in and out.
Mural provides zoom up to 400%. Use the shortcuts Control + Alt + 0 (Option + Command + 0 on a Mac) to zoom to 100% or press Control and + (Command and + on a Mac) to zoom up to 400%.
Accessible fonts and text sizes
Using an accessible font and text size in Mural is easy!
Consider the following tips for accessible font:
Choose an accessible sans-serif font, like Mural’s default font, ABC Social. Sans-serif fonts are fonts without tails (serifs) at the end of letter strokes.
Use a 16-pixel minimum font in default-sized mural sticky notes and paragraphs. When a mural is zoomed to 100%, the default text size is comparable to 16 pixels, so no extra work is needed on your part!
Use caution in how much text you include in a sticky note. The text shrinks as you type more. Mural’s resizable paragraphs are a good alternative to sticky notes when you need to include lots of information.
Use Mural’s pop-out objects feature. You’ll select an object and press the X key to magnify the text without zooming in.
Limit underlining to links only.
Avoid chunks of italics and all caps.
Descriptive titles, headings, and links
If you only read the titles, headings, and links in each section of your mural, would you understand what the sections were about?
The quickest way to help visually impaired collaborators understand the information in your mural is to write descriptive titles, headings, and links. Use the tips below:
Include a title or heading for each section
Titles and headings should summarize the subject matter in a few words, like a tiny synopsis of the section.
To create accessible headings:
Be concise and don’t duplicate headings or link language. Write different descriptive headings for each new section of content. Using the same headings and link language for more than one section of your mural can be confusing, especially for screen reader users. However, if a link leads to the same page, you may use the same description each time, but be careful to avoid link clutter.
Ensure titles and headings make sense out of context. Screen readers are able to pull a list of headings and links, so it’s important they make sense out of context. Let’s look at some examples:
Links that say “Click here” don’t provide screen reader users information on where a link leads.
A link that says “Learn about pandas,” or simply “pandas” gives the reader more specific information.
The title of this article, the section headings, and the links within are examples of how you can sum up a subject with descriptive language.
Avoid using the word “link” in descriptions. Screen readers usually announce a link when they find one. So, a link that says, “Click this link about pandas” would be announced as “Click this link about link pandas.” Instead, say “Learn about pandas” and link the word pandas.
Accessible images, GIFs, and videos
Non-text content such as images, GIFs, and videos should always include a text alternative that describes their meaning. Use the following tips for creating text alternatives in Mural.
Add captions to images and GIFs
Mural allows you to provide captions as a text alternative.
To write effective captions:
Be both brief and accurate. Captions should be as concise as possible without losing the meaning of the non-text content.
Provide a text equivalent for any information within an image or GIF. GIFs often feature dialogue, sayings, and phrases.
Images and GIFs that are decorative (for example, logos) or described in the main text don’t need a text alternative. You may want to note in the caption that the image is decorative. Be sure to include any descriptions in the main text near the image or GIF they describe.
Describe what’s important
Consider the meaning and purpose of an image or a GIF when writing captions:
Captions in Mural are a text alternative to non-text content.
For example, an image of a panda eating bamboo should include a caption that reads something like, “A panda eating bamboo.”
Consider the most important elements of the non-text content: Include the people, actions, emotions, locations, and movies or tv shows that are relevant to understanding the image or GIF.
Don't say "image of" or "graphic of" in the caption. Most screen readers announce any images and GIFs they find (similar to how they announce links, mentioned above).
Use GIFs and videos with audio descriptions when possible. Audio descriptions are the verbal equivalent of text alternatives in that they describe any relevant images, text, or actions.
Note: Need more information about GIFs? Read our article, Best practices for accessible GIFs in Mural.
Accessible color
Ensuring objects and text have sufficient color contrast is a key part of creating an accessible mural for people with vision impairments.
Use these tips to create accessible color:
Check WebAIM's color contrast ratios to ensure they meet WCAG (Web Content Accessibility Guidelines).
Ensure the contrast for links and the main text is at least 4.5:1 against the adjacent background (3:1 for large text, which is defined as 14-point or 18.66-pixel bolded fonts or unbolded fonts that are or 18 points or 24 pixels or larger.).
Use accessible Mural features
Mural provides accessible options for text colors, background colors, and objects:
Use Mural’s default black text against the default sticky note colors (with the exception of black) in the left text menu to guarantee sufficient color contrast.
Include a background color with sufficient contrast when using Mural’s pop-out objects feature. This helps the text stand out.
Use the thickest border options to create more visible objects.
Label connectors to describe what the connector represents rather than relying on its color.
Use a color-blind accessible color palette
When you're working with collaborators who are color-blind, you should choose accessible color palettes.
Use these tips to guide your color selection:
Try a color checker or color-blind simulator. There are great resources out there that can help you choose color palettes or test your own colors to see how they might be viewed by people with various types of color blindness.
Use whitespace when possible to differentiate between colors.
Don't use color alone to convey information. Use patterns, shapes, and text to distinguish information. Mural has connectors and shapes that you can also label so that you don't have to rely on color.
If color is necessary (for example, a chart or graph), use a text alternative to convey the same information. Color names are available on hover in the color palette.
Add tags to colors. Tags are a convenient option for collaborators who are color-blind to distinguish between colors if needed.
Try our color-blind accessible color samples! The colors are similar to the original sticky note colors. Check out our template, Accessibility best practices for Mural, to quickly grab these samples, or use the HEX color codes:
Orange: #FF9004.
Purple: #AB99FD.
Green: #8BF77C.
Pink: #FFC1E3.
Blue: #AEF2FD.
Yellow: #FDFF6D.
Note: We're in the process of implementing custom, accessible color palettes and will provide updates when we have more information.
Do you have best practice tips you'd like to share for facilitating accessible and inclusive meetings? Mural’s DS+A (Design System & Accessibility) team would love to hear from you. Please contact the team at accessibility@mural.co.