Read

7 tips for writing effective alt text

1. If you’re including words that matter, make sure they’re text, not part of an image.
2. If images matter, make sure they have alt text.
3. Caption your videos (and describe key visuals that aren’t obvious from the dialogue).
4. Keep it short. Describe what’s essential—not every detail. What would someone need to know if they couldn’t see it?
5. Don’t say “image of.” Screen readers already know it’s an image.
6. If an image is decorative and adds no value? Leave the alt text empty. (Yes, that’s okay, not everything needs a description.)
7. Focus on purpose, not aesthetics. Alt text should sound natural, clear, and human.

Examples of bad vs. good alt text

Example: Diagram of a workflow

• Bad: “Image of a flowchart with boxes and arrows.”
• Good: “A workflow showing the three steps for submitting an expense report, including: 1. Upload receipts. 2. Submit spreadsheet with totals. 3. Update quarterly budget.”

Example: Photo of people collaborating

• Bad: “Group of four people sitting at a table smiling.”
• Good: “Team members collaborating during a project planning session.”

Example: A chart showing a sales increase

• Bad: “Bar chart with blue and green bars representing quarterly growth.”
• Good: “Our Q1 and Q2 sales comparative chart shows Q1 sales at $1,000,000 and Q2 sales at $1,200,000 for a sales increase of 20% from Q1 to Q2.”

Bottom line

If an image helps your learners understand something, be sure to describe what they need to know from that image clearly, simply, and with any specific detail needed to have a full understanding.

Don’t forget videos…

If anything is show in a video that isn’t read aloud, learners may be missing out on that information or context. Just as with alt tags, if you’re showing something important, be sure to describe it.

For a video, this means having the narrator or speaker read out any important information that’s on screen, which then ensures it’s in captions and transcripts for easy readability.

Follow these tips and other accessibility best practices to help every learner engage with your course content.

The post A guide for writing effective alt text for learning content appeared first on Say Yeah!.

Here’s the 6-Step Quick-Start Guide to Designing for Learner Choice to help you get there.

Listen

Read

Can learners access key information in more than one way?

Offer text, audio, visuals, and captions so all learners can best perceive essential content.

Is your course easy to navigate?

Provide clear navigation, structure, headings, jump-ahead options, and replay capabilities.

Can learners control pace and flow?

Chunk content, allow pause, replay, and skip functionality, and don’t set arbitrary time limits.

Are you offering flexibility in how learners consume content?

Let learners read, listen, watch, or do — choice drives access and engagement.

Do learners have multiple ways to explore the topic?

Include varied means of engagement such as scenarios, discussions, reflections, and practice activities.

Are you supporting different ways of processing complex ideas?

Break down dense information with an effective mix of narration, visuals, examples, and summaries.

Go deeper with The learner-focused 6-step cognitive load checklist.

Bring multi-modal content to your Rise courses today

Automatically deliver an immersive narrative experience to your Rise courses with Shine.

See how Shine works

The post The 6-step quick-start guide to designing for learner choice appeared first on Say Yeah!.

When your course feels heavy, overwhelming, or hard to finish, cognitive load may be the culprit.

Here’s a quick checklist to help lighten that load so learners stay engaged and actually absorb what you’re teaching.

Listen

Read

Chunk your content

Break big topics into smaller, bite-sized sections. Think “one idea per screen” or “one task at a time.”

Sequence logically

Build a clear path: what should learners understand first, next, and last? Avoid jumping around or assuming learners can connect all the dots on their own.

Optimize prior knowledge

If learners need background info, provide it first — or at least activate what they already know before diving in.

Minimize distractions

Remove unnecessary visuals, animations, or awkward interface elements that pull attention away from core learning.

Use modelling or step-by-step examples

Use demonstrations and worked examples to reduce guesswork and help learners focus on what matters.

Use multimedia wisely

Complement visuals, text, and audio — but avoid overloading.

Don’t just duplicate content across modalities in a way that forces learners to review the material without consideration of how each modality can best be used to support the content; let each format support learning in its own way.

Pro tip

Sometimes as experts, we’re blind to cognitive load — we forget what it’s like to not know.

Step back and ask:

What’s essential here?

Where might someone new to the topic struggle to keep up?

Use this checklist as a quick review anytime you’re preparing or revising a course.

Remember: reducing cognitive load isn’t about simplifying your content — it’s about making the content work for learners rather than making learners work harder to unpack the content.

Dig deeper into cognitive load and dual coding theory

If you’d like to dig deeper into the learning science related to both the cognitive load and dual coding theories, I encourage you to follow Dr Nidhi Sachdeva, who demonstrated these best practices at this year’s Canadian eLearning Conference.

You can also subscribe to the latest learning + technology insights from me, Say Yeah CEO, Lee Dale.

Sign me up

The post The learner-focused 6-step cognitive load checklist appeared first on Say Yeah!.

Presented at TESS 2024 by Lee Dale & Christine Zaza, with Chris Fernlund, the faculty guide to unlocking accessibility in eLearning presentation deck offers an overview of accessibility-related:

• Opportunities & Impact
• Untangling the Confusion
• Recommended Resources

The top resources selected to help educators and educational organizations confidently deliver more accessible eLearning include:

• Say Yeah’s Educator’s Guide to 
Delivering Accessible Online Courses
• University of Waterloo’s 
Postsecondary Course Accessibility Guide
• eCampusOntario’s
Digital Accessibility Hub

Download the deck PDF

Subscribe to our newsletter for the latest learning + tech news

The post A faculty guide to unlocking accessibility in eLearning presentation deck. appeared first on Say Yeah!.

When using images of people in your product or marketing content, those images should reflect the full range of diversity across your audience.

To consider your audience and their representation across your product and marketing content, you’ll need to reflect on the following:

• examples you describe
• photos or illustrations you use
• people who may be showcased as part of a video, podcast, event, or even the content writing team

A great way to get started with creating more inclusive content is to review your current content photography and illustration to confirm that the people shown in these images reflect the full diversity of your audience.

If you find that some of your audience is underrepresented, here are some excellent stock photography and illustration resources to help you update your existing content and plan your next update with inclusivity in mind.

Stock photography and illustration resources

Explore these 8 photography and illustration resources to bring more diversity and representation to your content.

Disability:IN

Disability:IN offers disability-inclusive stock photography to encourage corporations to use this in recruitment material, marketing material, internal and external communications, and more.

Browse Disability:IN photos

Affect the Verb: Disabled and Here

Disabled and Here is a disability-led effort to provide free & inclusive stock images from a disabled perspective, with photos and illustrations celebrating disabled Black, Indigenous, and people of color (BIPOC).

Browse Diabled and Here photos

WOC in Tech Chat

The WOC in Tech community has shared a series of photos representing women of colour in tech. Their ask is that we use these images in pieces about entrepreneurs, software engineers, infosec professionals, IT analysts, marketers, and other people who make up the tech ecosystem in order to show a different representation of all women in tech.

Browse WOC in Tech photos

Black Illustrations

Black Illustrations includes both free and paid illustrations of Black people across a variety of categories such as business, design, disability, LGBTQ+, and more.

Browse Black Illustrations

Tonl

Tonl offers a paid collection of culturally diverse stock photos that represent the true world we live in.

Browse Tonl photos

Nappy

Nappy offers a free collection of beautiful photos of Black and Brown people.

Browse Nappy photos

The Gender Spectrum Collection

The Gender Spectrum Collection is a non-commercial, free stock photo library featuring images of trans and non-binary models that go beyond the clichés. This collection aims to help media better represent members of these communities as people not necessarily defined by their gender identities—people with careers, relationships, talents, passions, and home lives.

Browse Gender Spectrum photos

The Noun Project

The Noun Project has a series of photo collections offered for free with attribution or with a paid commercial license. Their collections include Diversity in Tech and more.

Browse Diversity in Tech photos

Pexels

While not exclusively providing underrepresented photos and topics, Pexels has been growing its diversity, accessibility, Black, pride, and other collections by working with many creators from diverse backgrounds.

Browse Pexels photos

Create more inclusive products and services

We offer a wealth of insight and expertise on inclusive design and delivering more inclusive products, services, and educational experiences. Reach out for the latest insights and to explore how we can work together to realize the bottom-line benefits of designing for market diversity.

Get in touch

The post Images and representation: creating more inclusive content appeared first on Say Yeah!.

If you’re looking to launch an improved website in 2022, now’s the time to investigate platform options and find the right website builder for your organization, without sacrificing accessibility, and the market growth and content engagement benefits that come with a more accessible website.

Our comparison

We looked at each of the major website builders along with other popular website and content management platforms to compare them across a range of accessibility factors needed for meeting standards like WCAG 2.X, and ranked them against each other to see which ones made it the easiest to build an accessible website effectively.

Accessibility scoring legend

• 
  does not support most accessibility considerations
• 
  supports some accessibility considerations
• 
  accessibility considerations can be met, but it will take work
• 
  almost out-of-the-box accessibility

Squarespace accessibility

Squarespace requires a moderate degree of custom code, depending on the template.

• Headings Yes


• Landmarks Partial


• Skip navigation Yes


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Partial


• Alt tags Yes

Wix accessibility

Wix requires custom code and some setting changes.

• Headings Yes


• Landmarks Yes


• Skip navigation Yes


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Partial


• Alt tags Yes

GoDaddy accessibility

GoDaddy’s template maker does not provide accessibility settings and does not allow for custom code.

• Headings Yes


• Landmarks Yes


• Skip navigation No


• Tab index Partial


• Visible focus ring Yes


• ARIA labels No


• Alt tags Yes

EditorX accessibility

Accessibility is not fully possible within the current EditorX system.

• Headings Yes


• Landmarks Partial


• Skip navigation No


• Tab index Partial


• Visible focus ring Yes


• ARIA labels No


• Alt tags Yes

Weebly accessibility

Weebly requires a high degree of custom code.

• Headings Partial


• Landmarks Custom


• Skip navigation Custom


• Tab index Partial


• Visible focus ring Yes


• ARIA labels Custom


• Alt tags Yes

Webflow accessibility

Implementation with Webflow is straightforward, but requires some code knowledge.

• Headings Yes


• Landmarks Yes


• Skip navigation Custom


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Yes


• Alt tags Yes

WordPress accessibility

Wordpress requires extensive custom code, but all of the required items for accessibility are possible.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

Drupal accessibility

Like WordPress, Drupal requires extensive custom code, but all of the required items for accessibility are possible.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

Joomla accessibility

Like WordPress/Drupal, Joomla requires extensive custom code, but all of the required items for accessibility are possible.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

Headless CMS accessibility

A Headless CMS requires extensive custom code, but all of the required items for accessibility are possible and the system is easier to use for advanced accessibility items.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

The winners

Squarespace for business owners

Squarespace is the most out-of-the-box accessibility-ready platform, and unlike competitors, does not require a lot of extra work on the part of someone setting up a site to enable accessibility features. These factors make it a great fit for business owners who want to get started with an accessible website without as much design or development time required.

Webflow for designers

Webflow is the best we tested out of all no-code website builders, with ease of use, built-in accessibility features, and customizability all at your disposal when creating a more accessible website.

Headless CMS for developers

A headless CMS such as Contentful, Ghost, Netlify, Sanity, Storyblok, or Strapi is an excellent choice in cases where you are working with a capable developer. A headless CMS offers advanced customizability for any and all accessibility needs, and is a blank slate full of possibilities for usability, design, and accessibility across your website.

An as-is template isn’t necessarily enough to be accessible

Although several of these platforms have taken the time to enhance their platforms’ accessibility, it’s typically more complicated to ensure your site is compliant when using one of these platforms.

For example, to make content on your site accessible, you’ll want to make sure that you have features like a skip navigation link, landmarks on the page for screen readers, and appropriate ARIA labels when needed.

Some of these features are not available on these platforms. When they are available, it may take some manual work to set them up, and your development team may not have all the answers.

If you need help navigating these standards in order to deliver an accessible website that opens up access to market and improves content engagement for all of your customers, get in touch.

Our accessibility-focused approach

By focusing on making your site accessible across content, design, and development requirements right from the start, and providing resources to your team to continue these efforts longer term, our approach helps save your team from costly rework and retrofitting your site later while guiding you towards maintaining your accessibility objectives with every content update.

When a site is built with this approach, you can focus on maintaining your site’s accessibility and continually improving other areas of your website without needing to spend time fixing larger accessibility issues across your whole website.

Looking for additional support on making a more usable, accessible, and inclusive website?

Get started with our Essential Website Audit to uncover issues with your current website, or get in touch to learn more about our accessible website design services.

Get in touch

The post 2022 Website Builder Accessibility Review (WBAR): choosing the best platform for your organization appeared first on Say Yeah!.

It’s key to make sure these accessibility details are taken care of when you’re working on a new site or with your next site update since, without them, you could be preventing some of your audience from using your site effectively (or using your site at all).

An accessible website opens up new market opportunities by ensuring all the information on your website is available to disabled users or people with other accommodation needs.

Accessible websites also help improve access for all by ensuring your content is as understandable and available as possible across all devices and potential use cases.

Let’s walk through the areas you’ll need to consider and implement for an accessible Webflow site.

Landmarks and page structure

Webflow makes structuring your pages for screen readers and keyboards fairly straight-forward with changes to a few different settings on your page elements.

A survey from WebAim found that almost 60% of screen reader users used landmarks at least occasionally when browsing websites.

One of the most important things you’ll want to implement is landmarks. The best way to do this is by looking at your page’s major elements (navigation, footer, the main body of your page) and making sure the appropriate landmark is set.

Webflow steps for setting landmarks

Click on any element. In the right sidebar, click on the element Settings to set its Tag (Webflow’s setting for landmarks). Your navigation landmark will typically already be taken care of by Webflow if you’re using a navbar component, but you’ll need to set the main container for your content as “Main” and your footer as “Footer” in these settings.

Adding a skip navigation link

Another crucial part of making a website accessible is ensuring that screen reader users or keyboard-only users can skip having to go through your navigation links every time they reach a new page of your site. Webflow doesn’t have a built-in way to do this yet, so a skip navigation will need to be built into your site using custom code.

Webflow steps for adding a skip navigation link

This tutorial will help you implement the functional part of the skip navigation (which you’ll need to add to each of your pages and templates) and this guide will provide the necessary code to hide the skip navigation until it is revealed by tabbing to it.

By combining these two tutorials, you’ll be able to add skip navigation to your site, making it more usable for keyboard-only and screen reader users.

Make sure to create a site map page

One accessibility standard that’s often overlooked is support for multiple ways to navigate through a site easily. Your menu and link structure will typically take care of one way of doing this, but adding a site map is key to making the rest of your site’s pages discoverable.

Something that often gets confused in this process is the difference between a sitemap for search engine indexing (e.g. an XML/auto-generated site map) and a site map page that is available to your site’s users. Webflow will auto-generate an SEO sitemap for you if the setting is enabled, but a site map for your users will need to be created by you using a standard Webflow page.

Webflow steps for creating a site map page

To make a site map page:

1. structure a page with an overall heading of “Site Map”;
2. add headers for each of the main categories of pages on your site;
3. include links to every page of your site on this page under the appropriate categories.

This page on our volunteer org site for Together is an example of a simple site map for accessibility purposes created with Webflow.

Bonus: site map pages are also a benefit for SEO (search engine optimization) as they highlight and link to all the most important pages of your site.

Adding this page to your website and linking it in the footer will ensure that anyone looking for a specific page can find it more easily, especially if your site does not have search functionality, and it will also provide an extra boost to your SEO.

Making your site’s menu accessible

Another part of making a Webflow site accessible is making sure your menu works and is usable for all of your users.

This can involve many considerations depending on dropdowns, hover states, and more, but at its most basic, you should ensure that you add a state change (e.g. an underline on hover and selection) rather than just a colour change, and make sure that all menu items have a focus state when a keyboard user tabs to them.

Webflow steps for more accessible menus

Typically, all Webflow stock navigation will have focus states, but you will need to add underlines yourself so that changes on hover are also more accessible.

Ensure your Webflow forms are accessible

Forms can often present a complex accessibility challenge, but Webflow settings are available to make accessible forms without any custom code.

Some tips to boost your form’s accessibility

Ensure error states have a symbol and text associated with them, along with any colour change you might use to indicate errors.

The Webflow default is just an error message with a colour change, but colour changes aren’t necessarily visible to everyone, which is why an error symbol is a great addition. As an example, we like to use a rounded triangle with an exclamation mark inside of it.

Make sure your form labels are properly associated with the fields (this will also ensure your form responses make sense!)

To do this, in the settings for each text field, ensure the name is the same as the field label above. This ensures no confusion about which field belongs to which label.

One additional step to ensure your form fields are fully ARIA compliant (necessary for accessibility in many cases) is to change the name of your field to be a custom HTML field, to create a “for” label. This change ensures that screen readers can better understand the fields used.

This tutorial from Jeff S can help you implement these changes for your form fields

Ensure your focus states for your form fields have enough contrast and are present for all fields.

The focus states on your form field are a way for users to tell which field they are currently filling out when using a keyboard to navigate. It’s best to use a combination of a thicker box around the field, a contrast change in the colour, and/or a shadow around the field to ensure the focus states are as clear as possible.

A form field without focus, before it is clicked or navigated to.

The form field with the focus state when navigated to or clicked on. This is an example of a focus state that uses a darker colour, and a thicker border to ensure the change in state is more perceivable.

Webflow accessibility tools and resources

As you’re putting your site together, be sure to take advantage of Webflow’s built-in accessibility capabilities and learning resources.

Baked into Webflow is the ability to add alternative text descriptions to each of your images. You can also make your site more accessible by making sure you use correct headings, e.g. an H2 should come before an H3.

Webflow has recently released an accessibility tool right in the designer that will catch a lot of these smaller issues for you automatically.

You can also learn more about accessibility basics from Webflow university.

Webflow is a great accessibility platform for your site

Webflow accessibility can seem daunting, but it’s totally doable by following our Webflow accessibility guide along with general content, design, and code accessibility best practices. In fact, Webflow is one of the top website platforms we’ve reviewed for accessibility. It’s up to you to take advantage of this great opportunity to make your site more accessible to your audience!

And, by doing this work as you’re putting your site together, you’ll make sure you don’t have to reconstruct your template later in order to make your site, and your content, more accessible to everyone.

Looking for additional support on making a more usable, accessible, and inclusive website?

Get started with our Inclusive Website Audit to uncover issues with your current website or get in touch to learn more about our accessible website design services.

Get in touch

The post How to make Webflow sites accessible—a step-by-step guide appeared first on Say Yeah!.

If you’re looking to launch an improved website in 2021, now’s the time to investigate platform options and find the right website builder for your organization, without sacrificing accessibility.

Our comparison

We looked at each of the major website builders and compared them across a range of accessibility factors needed for meeting standards like WCAG 2.X, and ranked them against each other to see which ones made it the easiest to build an accessible website effectively.

Accessibility scoring legend

• 
  does not support most accessibility considerations
• 
  supports some accessibility considerations
• 
  accessibility considerations can be met, but it will take work
• 
  almost out-of-the-box accessibility

Squarespace accessibility

Squarespace requires a high degree of custom code

• Headings Yes


• Landmarks Partial


• Skip navigation Partial


• Tab index Yes


• Visible focus ring Partial


• ARIA labels Partial


• Alt tags Yes

Wix accessibility

Wix requires custom code and some setting changes

• Headings Yes


• Landmarks Yes


• Skip navigation No


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Partial


• Alt tags Yes

EditorX accessibility

Accessibility is not fully possible within the current EditorX system

• Headings Yes


• Landmarks Partial


• Skip navigation No


• Tab index Partial


• Visible focus ring Yes


• ARIA labels No


• Alt tags Yes

Weebly accessibility

Weebly requires a high degree of custom code

• Headings Partial


• Landmarks No


• Skip navigation Custom


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Custom


• Alt tags Yes

Webflow accessibility

Implementation with Webflow is straightforward, but requires some code knowledge

• Headings Yes


• Landmarks Yes


• Skip navigation Custom


• Tab index Yes


• Visible focus ring Yes


• ARIA labels Yes


• Alt tags Yes

WordPress accessibility

Wordpress requires extensive custom code, but all of the required items for accessibility are possible.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

Headless CMS accessibility

Headless CMSs require extensive custom code, but all of the required items for accessibility are possible and the system is easier to use for advanced accessibility items.

• Headings Custom


• Landmarks Custom


• Skip navigation Custom


• Tab index Custom


• Visible focus ring Custom


• ARIA labels Custom


• Alt tags Custom

The winners

Webflow for designers

Webflow is the best we tested out of all no-code website builders, with ease of use, built-in accessibility features, and customizability all at your disposal when creating a more accessible website.

Headless CMS for developers

A headless CMS is an excellent choice in cases where you are working with a capable developer. A headless CMS offers advanced customizability for any and all accessibility needs, and is a blank slate full of possibilities for usability, design, and accessibility across your website.

An as-is template isn’t necessarily enough to be accessible

Although several of these platforms have taken the time to enhance their platforms’ accessibility, it’s typically more complicated to ensure your site is compliant when using one of these platforms.

For example, to make content on your site accessible, you’ll want to make sure that you have features like a skip navigation link, landmarks on the page for screen readers, and appropriate ARIA labels when needed. Many of these features are not available on these platforms, and if they are, it may take some manual work to set them up.

The more flexible the platform, the more likely you’ll be able to add these features, but even platforms like Webflow require manual coding to add features like a skip navigation link.

How to choose between WordPress, Webflow, and a Headless CMS

WordPress is a more open-ended and complex option for building a custom site. Because of its maturity as a platform, and the flexibility that comes from not using an existing template, it can be a good solution for making sites that require custom features that wouldn’t be available in a typical template builder.

Webflow is great for many simpler use cases that may have previously been powered by WordPress. Webflow solves several performance issues and other optimization issues, in addition to accessibility, that otherwise require a lot of manual testing and development work when using WordPress. Webflow is prebuilt with accessibility in mind in its components and features, meaning less work is required to make it accessible, even when starting completely from scratch.

For websites being built by a capable development team, a headless CMS system is likely the most ideal combination of flexibility, performance, content management, and development efficiency. Typically offering infinite flexibility and component workflows, a headless CMS can win out over Webflow when you need more control over advanced accessibility attributes or wish to more easily provide a rich content management system for everyday content managers.

Making a website accessible relies on choosing a platform that allows you to make the accessibility adjustments necessary and take an accessibility-centred approach to building your website from the start. Considering who will be helping you build out your website, who will be managing your content on an ongoing basis, and who will be responsible for ongoing maintenance and hosting are all key considerations of selecting the right platform for your needs.

Our accessibility-focused approach

By focusing on making your site accessible across content, design, and development requirements right from the start, and providing resources to your team to continue these efforts longer term, our approach helps save your team from costly rework and retrofitting your site later while guiding you towards maintaining your accessibility objectives with every content update.

When a site is built with this approach, you can focus on maintaining your site’s accessibility and continually improving other areas of your website without needing to spend time fixing larger accessibility issues across your whole website.

Looking for additional support on making a more usable, accessible, and inclusive website?

Get started with our Essential Website Audit to uncover issues with your current website, or get in touch to learn more about our accessible website design services.

Get in touch

The post 2021 Website Builder Accessibility Review (WBAR): choosing the best platform for your organization appeared first on Say Yeah!.

Achieving Digital Excellence

With this guide, you’ll learn how to:

• Define an effective service delivery roadmap, meeting organizational and market needs
• Execute at a high level across all stages of product and service delivery
• Plan, scope, and evaluate systems that can make a measurable impact
• Continuously improve customer experience and service delivery efforts

Download the guide PDF

The post Achieving Digital Excellence Guide appeared first on Say Yeah!.