Accessibility Guidelines for Smore Users
Creating accessible flyers and newsletters ensures that all members of our community, including people who use screen readers, keyboard navigation, or other assistive technologies, can fully access your content. When building materials in Smore, it’s important to follow ADA and WCAG principles to ensure clarity, inclusiveness, and equal access for all readers. This guide provides the key practices you should follow to make every Smore publication accessible and compliant.
1. Use Clear Text Structure
- Organize content with headings and subheadings in logical hierarchy structure.
- Smore does not support semantic HTML headings, so full WCAG 2.1 compliance for heading structure is not possible. However, using a consistent visual hierarchy with Titles, Subtitles, and bolded section labels improves clarity and supports several WCAG principles, including understandable content and meaningful headings (Headings must be clear and describe the topic or purpose.).
- Keep paragraphs short and concise for easy reading.
2. High Contrast Text & Background
- Ensure sufficient contrast between text and background (at least 4.5:1 for body text).
- Use dark text on a light background or light text on a dark background.
3. Add Alt Text for Images
- Provide descriptive alt text for meaningful images (e.g., "Golden retriever playing in the park").
- If the image conveys meaning (e.g., a chart, a photo of a person, a logo used to represent the organization), you must provide descriptive alt text.
- Add alt text through image settings in Smore.
- There is no explicit "mark as decorative" option in current Smore. Leave the alt text field completely blank for images that are purely decorative.
4. Use Legible Fonts
- Recommend choosing simple, clear fonts (e.g., Arial, Verdana, Helvetica).
- Avoiding images of text unless necessary.
- Readable spacing. If increasing spacing, your content must still be readable and not overlap or break.
5. Don't Rely on Color Alone
- Use other indicators (e.g., text labels, icons) in addition to color to convey information.
- Avoid certain color combinations like red-green or blue-yellow.
6. Descriptive Links
- Use descriptive link text (e.g., "Learn more about our product" instead of "Click Here").
7. Ensure Accessible Forms
- Label all form fields clearly.
- Provide instructions that are easy to follow.
8. Keyboard Accessibility
- Ensure all interactive elements (e.g., buttons or forms) can be accessed with the keyboard.
9. Check Audio/Video
- All videos with prerecorded audio or synchronized speech must include captions that show spoken dialogue and important sounds, so everyone can understand the content.
- Captions must include spoken dialogue and relevant non-speech sounds (like [applause], [door creaks], etc.).
- If you have audio-only content (like a podcast or narration without visuals), you must provide a text transcript. The transcript should include all spoken words and important sounds.
-
Under WCAG 2.1 Level A and AA, you must provide audio descriptions whenever important visual information is not expressed through existing audio.
10. Responsive Design
- Test your design on mobile devices to ensure it looks good and is easy to read.
11. Avoid Flashing or Moving Elements
- Avoid flashing or rapidly moving content that could trigger seizures.
12. Simple Design & Clear CTA
- Recommend keeping the design simple and uncluttered, which helps users with cognitive disabilities, attention difficulties, or screen readers navigate more easily.
- Provide a clear call-to-action (CTA) for users to follow.
13. Making Keyboard Reading Order Correct
-
Add content in the reading sequence you want
-
Use simple, single-column designs for important content
-
Avoid splitting related information across blocks
-
Minimize use of embeds or floating elements
-
Test focus order using Tab before publishing
14. Test for Accessibility
- Use tools like WAVE, Lighthouse or Axe to check for accessibility issues (e.g., missing alt text or low contrast).
-
Test your newsletter on different devices (desktop, tablet, mobile) to ensure it's legible and accessible.