Canva & Accessible Flyers

1. Open canva.com and sign in with your UA credentials (if your unit has Canva for Teams)
2. Choose a template or create a custom size
3. Start with a solid background color — busy photo backgrounds make text harder to read for everyone

Organize information in a clear, logical reading order — top to bottom, most important first:

1. Event/program title — largest text, highest contrast
2. Date, time, and location — prominent but secondary
3. Brief description — what it is and who it’s for
4. Call to action — register, RSVP, learn more
5. Contact information — email, phone, URL
6. Logos and branding — bottom or corner placement

Why order matters: When you provide a text alternative, you’ll list information in this same order. A logical visual hierarchy makes the text version natural to write.

• Font size: Minimum 24pt for body text on a standard flyer (8.5×11). Titles should be 36pt or larger.
• Font weight: Use medium or bold weights. Avoid thin/light weights that disappear at small sizes.
• Font choice: Stick to clean sans-serif fonts — Open Sans, Lato, Montserrat, or Atkinson Hyperlegible are excellent choices.
• Avoid: Script fonts, decorative fonts, all-uppercase for more than a few words, and fonts with ambiguous letterforms (where “I”, “l”, and “1” look alike).

• Primary text: Use Arizona Blue (#0C234B) or black on white/light backgrounds for body text
• Accent text: Arizona Red (#AB0520) on white is 7.3:1 — excellent for headings and emphasis
• Avoid: Light colors on light backgrounds, text directly on photos without an overlay
• Test: Use the WebAIM Contrast Checker to verify every text/background combination
• Don’t rely on color alone: If you color-code sections (e.g., red = deadline), also add a text label or icon

• Decorative images: Background patterns, border decorations — these get empty alt text (alt="") when published
• Informational images: Photos that convey meaning, icons that indicate actions — these need descriptive alt text
• Charts or data visuals: Always provide the data in text form alongside or below the visual
• UA logos: Alt text should be “University of Arizona” (or empty if the university name appears as text nearby)

Before exporting:

1. Hide all images and decorative elements mentally — does the text alone make sense?
2. Read content top-to-bottom, left-to-right — is the order logical?
3. Check that no essential information is conveyed only through visual position or color
4. Verify that dates, times, and locations are unambiguous (“Friday, March 6, 2026” not “this Friday”)

1. Select an image or graphic element
2. Click the “…” (More) menu on the element toolbar
3. Select “Alternative text”
4. Write a concise description (or mark as decorative)
5. This alt text carries through to some export formats (PDF)

1. Click the “Accessibility” button in the bottom toolbar (person icon)
2. Canva will flag:
   • Missing alt text on images
   • Low contrast text
   • Text that may be too small
3. Address each flagged issue before exporting

• Color palette generator: Canva suggests palettes — always verify contrast before using
• Text spacing controls: Adjust letter and line spacing for readability
• Grid and alignment tools: Maintain consistent visual structure
• Resize (Magic Resize): When resizing for different platforms, re-check that text remains large enough and contrast is maintained

If you must place text over a photograph:

1. Add a solid overlay: Use a semi-transparent rectangle (80–90% opacity) in UA Navy or white behind the text
2. Test the worst case: Check contrast against the lightest and darkest areas of the photo that show through
3. Better alternative: Use a solid color block for the text area and place the photo separately
4. Avoid: Transparent text overlays, text directly on busy images, gradient overlays that create uneven contrast

1. Best: Native HTML/text — Send your message as a web page or email with real text. No image needed.
2. Good: Image + full text alternative — Publish the flyer image alongside a complete text version of all content.
3. Acceptable: Image with comprehensive alt text — For simple flyers (short text), provide detailed alt text that includes all the information.
4. Unacceptable: Image alone — A flyer posted as a PNG/JPG with no alt text or text alternative.

When a flyer is published as an image, the alt text should include all essential information, not just a description of the visual design:

Poor alt text:

“Colorful flyer for upcoming event”

Good alt text (for simple flyers):

“Spring Research Symposium. Friday, March 13, 2026, 9 AM to 4 PM. Student Union Memorial Center, Rincon Room. Open to all UA students and faculty. Register at research.arizona.edu. Contact: symposium@arizona.edu”

For complex flyers with lots of content: Alt text has practical limits (~125 characters is the guideline, though not a hard technical limit). Use alt for a brief summary and provide a linked text alternative:

<img src="spring-symposium-flyer.png" 
     alt="Spring Research Symposium — full details in text below">
<!-- Full text version follows -->

1. For web publishing: Export as PNG + create an HTML text alternative on the same page
2. For email: Export as PNG + include all flyer text in the email body
3. For social media: Export as PNG + write all content in the post caption
4. For print: Export as PDF (Print quality) — accessibility applies to digital distribution, not physical paper
5. For attachments: Export as PDF with “Include text” option + add document title in File > Settings

1. Click Share → Download
2. Select PDF Standard or PDF Print
3. Check “Flatten PDF” — uncheck this (flattened PDFs are images, not selectable text)
4. Download and open in Adobe Acrobat to verify text is selectable
5. In Acrobat, add document title: File → Properties → Description → Title

Pattern: Flyer image + full text in the email body

Subject: Spring Research Symposium — March 13

[Flyer image with alt text: "Spring Research Symposium flyer — details below"]

Spring Research Symposium
Friday, March 13, 2026, 9:00 AM – 4:00 PM
Student Union Memorial Center, Rincon Room

Join us for a day of interdisciplinary research presentations...

Register: [link to registration page]
Questions: symposium@arizona.edu

Key rules:

• Never send a flyer image as the only content
• Include all text from the flyer in the email body
• Add alt text to the embedded image
• Use a descriptive subject line (not “See attached flyer”)
• For mass emails via Mailchimp or Emma, test with the preview/accessibility tools

Pattern: Flyer image as supplementary visual + HTML content as primary

<!-- Primary content — accessible HTML -->
<article>
  <h2>Spring Research Symposium</h2>
  <p><strong>Date:</strong> Friday, March 13, 2026</p>
  <p><strong>Time:</strong> 9:00 AM – 4:00 PM</p>
  <p><strong>Location:</strong> Student Union Memorial Center, Rincon Room</p>
  <p>Join us for a day of interdisciplinary research presentations...</p>
  <a href="/register">Register Now</a>
</article>

<!-- Supplementary visual — the flyer -->
<aside>
  <img src="symposium-flyer.png" 
       alt="Spring Research Symposium promotional flyer">
</aside>

Key rules:

• The web page content should stand alone without the image
• Use semantic HTML: headings, paragraphs, lists, links
• The flyer image is supplementary — a nice visual, not the information source
• Add the flyer image in an <aside> or at the end, not as the hero

Pattern: Image + full content in caption + platform alt text

1. Write the caption first — include all essential information from the flyer
2. Upload the image and add alt text through the platform’s accessibility feature:
   • Instagram: Advanced Settings → Write Alt Text
   • Facebook: Edit Photo → Alternative Text
   • X/Twitter: Add description (link in image upload)
   • LinkedIn: Alt text option on image upload
3. Hashtags: Use CamelCase (#AccessibilityMatters, not #accessibilitymatters)
4. Emojis: Use sparingly; screen readers read each emoji name aloud. Place at the end, not between words.

Pattern: Flyer as supporting visual + full HTML content in the announcement

1. Create a new Announcement or Content item
2. Write the full content in the HTML editor using headings, lists, and links
3. Insert the flyer image and add alt text through the image properties dialog
4. Do not upload a flyer image as the sole content of an announcement

Before (Inaccessible):

• Flyer posted as JPG on department website
• No alt text
• Light gray text on light blue background (2.8:1 contrast)
• Event details only in the image — no text on the page
• Date written as “Next Thursday” with no specific date

After (Accessible):

• Event details published as HTML on the web page (heading, date, time, location, description, registration link)
• Flyer image included as supplementary visual with alt text: “Wildcat Welcome event promotional flyer”
• UA Navy text on white background (14.2:1 contrast)
• Specific date: “Thursday, August 21, 2026”
• Registration link with descriptive text: “Register for Wildcat Welcome”

Before (Inaccessible):

• Multi-section newsletter designed entirely in Canva
• Exported as single PNG and emailed as the entire email body
• Screen readers announce only “image” (no alt text)
• Text at 10pt equivalent — unreadable when zoomed

After (Accessible):

• Newsletter content written as HTML email with proper headings and sections
• Individual graphics used as section illustrations with alt text
• All links are real HTML links (not “click here” text baked into images)
• Font size minimum 16px; headings 20–24px

• Started from a solid background (not a busy photo)
• Information follows a logical top-to-bottom hierarchy
• Font size is 24pt+ for body text (standard flyer size)
• Font is clean and readable (sans-serif, medium/bold weight)
• Color contrast meets 4.5:1 for normal text, 3:1 for large text
• Color is not the only way to convey information
• Text over images has a solid or semi-transparent overlay
• All dates include day of week, month, date, and year
• Contact information is complete (email, phone, or URL)

• Alt text added to meaningful images (via element menu)
• Ran Canva’s built-in accessibility checker
• Decorative elements don’t interfere with text readability
• Reading order makes sense when read top-to-bottom

• Chose appropriate export format (PNG for web/social, PDF for print/attachments)
• PDF is not flattened (text is selectable)
• Added document title to PDF exports (via Acrobat)

• Email: All flyer text repeated in the email body
• Web: HTML content is the primary information source, flyer is supplementary
• Social media: Full content in caption + platform alt text added
• LMS: Full content in announcement text + image has alt text
• Alt text for the flyer image includes all essential information (or references text below)