ParentSquare

Color

Color makes content accessible by emphasizing visual elements (icons, text, labels) to communicate meaning. Color cannot be used as the only way to communicate meaning or an important change, because not everyone can see color differences.

Contrast is the difference between the lightness and darkness of two colors. Good color contrast makes content accessible by making text and controls easier to see and read. 

If you are using colors in ParentSquare, make sure the color has adequate contrast against the background color. The colors in the palette (available when making a post) are not all ADA compliant for a white background - only the first 2 rows are compliant against a white background, the bottom 2 rows are compliant against a black/dark background.

Use of Color Examples

Contrast

Contrast is the difference between the lightness and darkness of two colors. Good color contrast makes content accessible by making text and controls easier to see and read. Accessible contrast benefits people who have various types of colorblindness, have low vision, are neurodivergent, or are viewing content in different lighting conditions.

Contrast Checker Resources:

When reviewing existing content, visually scan text and controls for low contrast. Any combinations that look low contrast should probably be improved.

To check the contrast value between two colors, use the WebAIM Color Contrast Checker. The checker will calculate the value and tell you if the combination passes or fails. You can also use https://contrast-ratio.com. You should aim for a minimum contrast number of 4.5.

Alternative text, or alt text, is a short description of an image. Alt text makes images (photos, diagrams, logos) accessible by providing a meaningful text alternative for people who can’t see, access, or process the original image. Alt text is not the same as an image caption, but is added in the document’s code and usually not displayed.

Good alt text is accurate, short, contextual, and not repetitive.

• Accurate
  • Correctly describes the content or purpose of the image
• Short
  • Not longer than it needs to be
  • A few words to a few sentences, usually limited to 150 characters
• Contextual
  • Communicates the purpose of the image in context
  • When writing alt text ask yourself, Why is this here? Not just, What does this show?
• Not repetitive
  • Does not begin with “image of,” because assistive technology already identifies the image as an image
    • Can describe format or genre, such as “photograph of students lounging near Diag,” “pencil drawing of students at a table studying”
  • Does not repeat description provided in the caption or surrounding text

Alt Text Example:

Bad Alt Text: George Washington
Good Alt Text: A painting by artist Emanuel Leutze of George Washington crossing the Delaware River

Images that are used inline in the post should have an an alt tag ("Alternative Text" added to the image.) This allows people who rely on screen readers to understand what the image is about. It is a good practice to use descriptive text. Here’s how to add an alt tag:

1. Click the image in the post editor to view image menu.
2. Click Alternative Text, "i" icon to add alt text.
3. Type a description and click Save. Or, click Generate AI suggestion, and click Save.

Attaching Photos - ParentSquare Website

Make sure to add captions when uploading photos. Use descriptive captions as they will be used as captions as well as alt tags for these photos. Here’s how: 

1. When you upload photos, a text box will appear where you can add a caption.
2. Add descriptive text as caption.

Attaching Photos - ParentSquare App

1. When you upload photos, tap Add Captions, then Add Image Caption under each image.
2. Enter descriptive text for your caption.

Flyers that are embedded into posts will not be translated into a family's home language. They will also not be accessible by screen readers. 

To make sure the information you are sharing with families is accessible, you must type the message into your post. Then attach the flyer as a file to your post.

Correct Use of Sharing Information

This message will be translated and able to be read by a screen reader.

Incorrect Use of Sharing Information

This flyer is embedded (rather than attached a file and cannot be translated or read by a screen reader.

Attaching a flyer to your post

1. Start a New Post. 
2. Select ‘Attach Photos or Files’ in the left sidebar.

3. Click Select Files to Upload or Drag and Drop or Copy and Paste files to the center of the pop-up.
4. To add another file, click Upload Files below the previously attached files.
5. After you've added your file(s), click Upload. The number of attachments shows next to "Upload".

QR codes are a popular way to share information by scanning the code using a mobile device. However, by sharing a QR code through ParentSquare the majority of families will not be able to access the information because they are viewing the QR code on their phone and do not have any way to scan it. Only families viewing the ParentSquare message on their desktop computer will have the ability to scan the code with their phone.

Instead, share a link instead of a QR code for families to access information. Learn about best practices for using links below.

Attaching a flyer to your post

1. Start a New Post. 
2. Select ‘Attach Photos or Files’ in the left sidebar.

3. Click Select Files to Upload or Drag and Drop or Copy and Paste files to the center of the pop-up.
4. To add another file, click Upload Files below the previously attached files.
5. After you've added your file(s), click Upload. The number of attachments shows next to "Upload".

Links let users go to a new page or place on the web or in a digital document. Links make content accessible by making it clear where each link goes, with good link text.

Accessible link text is short, descriptive, understandable, and unique:

• Short — Just a few words, no more than 5 if possible
• Descriptive — Describes where it goes or what it does, so a user knows what will happen in advance
• Understandable — Text that is readable for humans, not a long URL string
• Unique — Not the same as other link text on the same page or document, unless it goes to the same place

Avoid phrases that are meaningless out of context such as “more,” “click here,” or “this article.” These links are confusing to people who are visually scanning content, or browsing content by links only with assistive technologies including screen readers.

• Keep emojis to the end of your message to avoid confusion for screen readers.
• Never use emojis to replace words as it will make your content inaccessible.
  • You cannot be sure people will interpret the emoji as you intended.
  • The alt text descriptions used by screen readers may not match your meaning of the emoji. Check the text descriptions of emojis at https://emojipedia.org/. 
  • Using emoji instead of words, increases cognitive load for everyone.
• Be aware, how emojis are presented depends on the device and operating system, so check to make sure they translate well across devices.
  • For example, the 🏚️ emoji has four different identifiers based on different operating systems: Abandoned House, Old House, Haunted House and Derelict House. 
• Don't place emojis or symbols in the middle of words, since it affects how they are read by screen readers
  • Example: the singer Ke$ha’s stage name was pronounced Key-dollar-sign-ha since the “S” in her name was replaced with a “$.”
• Don’t use emojis as bullet points:
  • Screen readers read each emoji’s alt text aloud. This makes it longer to read the list and risks muddling clarity.
• Use emojis, not emoticons.
  • Emojis have built-in alt text descriptions and will be parsed as text by a screen reader.
  • Emoticons are manipulated punctuation marks and will be read out as punctuation marks (e.g.  :-)  )

Typographical choices such as the size, shape and formatting can have a big impact on all users’ ability to read and understand information, as well as on users with dyslexia or other reading impairments. Additionally, assistive technology may not be able to convey when certain text formatting or symbols are used.

• Fonts should be easy to read, with sans serif fonts (e.g. Tahoma, Arial, Calibri) used for the body text
• Font size should be at least 12pt
• Avoid using ALL CAPS
• Avoid making text full-justified; align text to the left or center instead
• Avoid using underlined text for emphasis, as it may be confused with hyperlinks and can reduce accessibility.
• Information conveyed by text formatting (bold or italics, highlighted or strike-through) or symbols should be available through other accessible means.
  • Bad Example: This example highlights and bolds an important update, which may not be read by assistive technology and doesn’t clarify its significance.
  • Good Example: Important Update: This example adds text to supplement the visual indications of importance which can be read by assistive technology and conveys the significance in a useful way for all users. 

Plain language is writing that is easy to read and understand. Plain language makes content more accessible to everyone, and it can be used in different contexts. 

Make your writing more understandable by being concise, organized, clear, using common words, defining acronyms and avoiding jargon. For additional help use the Hemingway Editor and get a reading level score and other suggestions or Digital.gov’s Plain Language Guide.