At Say Yeah, we’re passionate about ensuring everyone has equal access to information and technology and prioritize accessibility in eLearning. However, we recognize that good intentions alone don’t always drive real progress.

In this article, we’ll explore the benefits and limitations of adopting EN 301 549 and what it means—and doesn’t mean—for enhancing accessibility for all.

What is the new accessibility standard EN 301 549?

EN 301 549 is a set of rules and guidelines designed to ensure that ICT products and services are accessible to people with disabilities. This includes things like websites, software, mobile apps, electronic devices, and more. The goal is to make sure that everyone, regardless of their abilities, can use these technologies effectively.

Why is EN 301 549 significant?

There are 6 significant outcomes of Canada adopting EN 301 549:

• Unified national standard
• Alignment with international standards
• Comprehensive coverage
• Promotion of inclusive design
• Potential to drive innovation
• Legal and regulatory clarity

Let’s explore these in more detail.

Unified national standard

Previously, accessibility standards varied across different provinces in Canada. Adopting EN 301 549 creates a single, cohesive standard that applies nationwide, ensuring consistency in accessibility requirements.

Alignment with international standards

By adopting a European standard, Canada aligns itself with global best practices in accessibility. This harmonization can facilitate international trade and cooperation, and make it easier for multinational companies to comply with accessibility requirements in multiple regions.

Comprehensive coverage

EN 301 549 covers a wide range of ICT products and services, from websites and software to mobile apps and hardware devices. This comprehensive approach ensures that accessibility is considered across all forms of digital interaction.

Promotion of inclusive design

The standard emphasizes integrating accessibility into the design and development process from the start. This proactive approach encourages the creation of more inclusive products and services, rather than retrofitting accessibility features later.

Potential to drive innovation

With a clear set of guidelines, companies are encouraged to innovate and develop new solutions that meet accessibility requirements. This can lead to advancements in technology that benefit everyone, not just those with disabilities.

Legal and regulatory clarity

Having a unified standard provides clearer guidelines for businesses and organizations, reducing confusion and helping them understand their legal obligations. This can lead to better compliance and improved accessibility across the board.

So what can we do better?

To truly improve accessibility, we must go beyond checklists and focus on understanding how people with disabilities interact with digital platforms. This involves:

Improving user experiences

Ensuring that digital interfaces are not only compliant but also user-friendly for individuals with disabilities. This requires continuous internal and user testing that includes feedback from the disability community.

Clarity in validation

Developing clear and practical methods to validate an accessible user experience that goes beyond general references to the WCAG. This should involve real-world testing and user validation to ensure that accessibility features genuinely enhance user experiences, but it begins with educating and practicing accessibility across content, design, and code.

At Say Yeah, we are committed to this approach. We believe that accessibility should be about creating inclusive and engaging experiences for all users.

To learn more, check out these three resources that highlight different ways people interact with websites, and the importance of improving these experiences and methods to ensure quality:

A look at the accessibility issues you probably forgot to test for

Delivering accessible online courses

An exciting inflection point for accessibility and inclusion

You can also dive deeper into the challenges of focusing solely on compliance with the 2023 AODA legislative review commissioned by the Ontario Government.

We are thrilled to see Canada taking steps toward a comprehensive accessibility standard, but we recognize that there is still much work to be done.

By prioritizing user experiences and developing clearer validation methods, we can create a more inclusive and equitable digital landscape for everyone.

Looking to deliver more accessible and inclusive digital experiences? We’re here to help.

Get in touch

The post Canada adopts new accessibility standard: EN 301 549 appeared first on Say Yeah!.

TechAccess, Oklahoma’s Premier Digital Accessibility Conference, will return for its annual edition on April 18 -20, 2023.

TechAccess Oklahoma is a free conference held by Oklahoma ABLE Tech to champion best practices in creating accessible digital content. If you create any form of digital content, from online courses to learning documents, best practices in accessibility equip you to serve the entire scope of your market.

Whether you work in video production, editorial or web development, join the free virtual event from April 18 – 20 to ensure everyone in your audience base can access your content.

Talks we’re excited about.

• Most Accessibility Learning is Broken: Let’s Fix It Together with Corbb O’Connor
• Small Shifts to Improve Digital Accessibility with Kate DeForest
• Getting Image Descriptions Right with Geoff Freed

View the full schedule

Win amazing prizes!

TechAccess Oklahoma is giving away a11y swag (books, t-shirts, and more) to select conference guests! Join the free conference and take the survey to qualify.

Register now

The post TechAccess Oklahoma 2023 – April 18-20 Event Invite appeared first on Say Yeah!.

Most importantly, we know course accessibility is a difficult outcome to reach. That’s not because it’s particularly expensive, challenging, or unattainable. On the contrary, it’s never been easier. But the processes to get there are not well understood.

This guide unpacks those processes succinctly, supporting you, the educator, in having direct and fruitful conversations with the technologists you work with or may hire to ensure they’re taking the steps necessary and, together, you’re able to deliver the best learning outcomes through more accessible online courses.

Guide highlights

• Understanding the value and importance of web accessibility
• A standard of practice for achieving and validating online course accessibility
• Understanding the steps necessary to coordinate with your technical support or course development team to confirm accessibility
• Use the Accessibility Validation Template to track your progress

The value of accessibility

Following accessibility practices allow us to increase course access and engagement while improving learning outcomes for all. Let’s look at the many benefits of ensuring accessibility for the courses you develop. An accessible online course:

• opens up access for all potential course participants by reducing barriers to accessing your course
• improves content engagement by providing multiple means of engagement with course content
• reduces overall effort by following a shared and documented set of web standards that avoid costly and time-consuming accessibility auditing and course retrofitting
• grows market share by setting ourselves apart from the competition and leading in access and engagement for all

So, how do we get there? First of all, it’s important to understand that accessibility is a collaborative effort across the course development team, including those people responsible for content, design, and code, or technical development.

Accessibility is collaborative

Accessibility objectives are reached through shared responsibilities across multi-disciplinary teams. When considering an online course system, accessibility is achieved across a collaborative mix of:

• Content and course development and input into the course system
• Design of the course and course system interface
• Code and setup of the technology system, learning management system (LMS), and course elements, including interactions

While design and code help enable content teams by providing tools to support their work, the content teams ensure access and engagement with every new piece of content they publish.

This mix of foundational and ongoing work is necessary to ensure accessibility is achieved and retained.

The best practices gap

Accessibility is achieved through a collaborative combination of content, design, and code that most organizations are not set up to follow.

Accessibility is supported by web standards that most developers do not fully understand.

Checklists and automated tools are seen as the solution, but automated tools are not enough.

Accessibility cannot be achieved without manual testing.

Automated tests can help point out the most glaring or obvious issues, but accessibility is more than a checklist of technical issues: it’s a user experience consideration.

User experience is measured by understanding how course participants will interact with your course.

Course participants may use screen readers, a keyboard only, zooming, and other assistive technology, in addition to mouse/touch and multiple screen sizes (such as a desktop, phone, or tablet).

Testing must be done to ensure that when users engage with an interface and content, it both works for users and, ideally, is enjoyable.

None of this can effectively be achieved without content, design, and code teams working together to set this foundation from the start.

Let’s look at how you can take next steps with your next course by having the information you need to hold your technology provider accountable.

Holding your technology provider accountable

Technology is an enabler. Online learning can bring increased equity for participants, improving course access and engagement.

However, how technology is used in online learning can create barriers. Standards-of-practice must be followed by technologists, and understood by course creators—including SMEs, educators, and instructional designers—to ensure technology is implemented and used effectively.

The following phases of course development must be practiced by your technology team, including:

• Establishing a standard of practice from the start
• Manual testing
• Automated tools & testing

In addition, you can participate in the accessibility validation process so you know your course is as open, accessible, and engaging as possible.

Let’s expand on these best practices so you can address these with your technology support and development teams.

Establishing a standard of practice from the start

Whether you’re using an off-the-shelf LMS or working on custom development, you should expect and be able to confirm the following:

• Web interfaces must be designed and developed using semantic HTML structuring and, when necessary for novel interactions, HTML’s ARIA functionality
• Mechanisms that allow content creators to add accessible content features such as image alt tags, page titles, video captions and transcripts must be provided
• Advice and feedback from disabled users, other developers, and industry professionals is essential when approaching novel interactive concepts to gain insight into how others have or may approach the problem based on their experience and best practices
• Interfaces must be tested internally and by external users to validate usability, accessibility, and inclusion across all methods of engagement, including:
  • mouse/touch
  • using only a keyboard
  • while zooming the interface
  • across different screen sizes
  • using a screen reader

Manual testing

Manual testing must ensure access by mouse/touch, keyboard, screen reader, and zoom across multiple screen sizes. Here’s what your technologist should be doing:

• Using a mobile phone to test touch interactions and smaller screen sizes
• Using a desktop computer with a mouse and/or trackpad
• Using only a keyboard to ensure a user can navigate and access functionality available on the website without using touch screens or a mouse
• Using a screen reader (desktop and smartphone) to ensure the site can be navigated and understood and that interactions function correctly (or have a suitable alternative) in a speech-only context
• Ensuring the site can be zoomed in and that the course and page layouts respond in a way that ensures content is visible and readable at a large scale

Automated tools & testing

The following automated practices and tools augment manual test processes and validate ongoing coding practices. Your technologist should confirm these practices and be able to share the results of any tests conducted, including:

• Code linting during the development process to identify syntax and typos that could introduce bugs
• Validating the output HTML with a validator to ensure it is properly formatted
• Testing the code with a combination of tools, which can include:
  • Deque’s AXE
  • TPGI’s Arc
  • IBM Equal Access Accessibility Checker
  • Lighthouse from Google
  • Others

Going a step further

The best way to verify accessibility is by asking a range of users to try the course to learn more about their experience. If you can plan or budget for some usability testing with a mix of users who typically interact with the web and courses differently, you’ll learn how to improve the course for everyone.

Connect with users who interact with the course across mouse/touch, keyboard, screen reader, while zooming, and across different screen sizes. Learn about their experiences, preferences, and perspective on your course. And further confirm how accessible your course is to everyday users.

Share what you know with an accessibility statement

When you’ve reviewed and confirmed the above yourself, or with the support of an experience technologist, developing an accessibility statement will help guide course participants who will interact with your course in different ways.

Let them know what works, how, and what you may know is missing, difficult, or could be improved. Give those users an option to contact you for support or to answer any other questions.

This accessibility statement is a great course resource that can be included as part of a course introduction, and can be provided ahead of starting the course and in course promotional material to signal your efforts to ensure your course works well for everyone.

Accessibility is a shared responsibility

It is essential to choose the right technologist that embeds accessibility from the onset of online learning planning and all throughout the course development process. The role of this technologist is to support the collaborative, proactive, and solution-focused approach this guide helps you deliver. With this approach, you can be part of revolutionizing the education industry by providing accessible and equitable access to online learning with every course you work on.

Collaboration among these three stakeholders: technologists, SMEs, and educators/instructional designers is key to achieving learning outcomes in online learning. Ultimately, leveraging the strengths of each of these experts to ensure no learner is prevented from engaging with course content and all are set up for a more equitable learning experience.

Looking to collaborate with online learning and accessibility specialists for your next course?

At Say Yeah, we have developed a comprehensive process for bridging educational and technology best practices that improve learning outcomes.

Get in touch if you’d like to improve collaboration, insights, and outcomes across your course development processes, ultimately delivering more effective, accessible, and equitable online courses.

Get in touch

Acknowledgement of Provincial Funding

This project is made possible with funding by the Government of Ontario and through eCampusOntario’s support of the Virtual Learning Strategy (VLS) and Ontario Exchange (OEX).

The post Delivering accessible online courses: an educator’s guide appeared first on Say Yeah!.

Looking to explore accessibility best practices across team functions in your organizations? Find answers to all your questions about accessible digital products and more at Axe-con 2023.

Axe-con provides insights into the critical role key players across functions like legal, design, management, product, etc., play in building accessible digital experiences.

Talks at the conference will feature case studies from enterprise companies leading in large-scale accessibility efforts and best practices and updates from technology leaders worldwide.

Attendance at the conference is free, and you can use your attendance towards continuing education (CE) towards IAAP certification.

Talks we’re excited about

• Ageism in Interfaces with Alex Tait
• Redesigning for Cognitive Ease with Alyssa Panetta
• Accessibility Maturity Models with Jonathan Thurston and James Thurston

Full program schedule

Join the free virtual conference

Registration is free! Sign up to access the live sessions and on-demand recordings of 60 sessions.

Save your seat

Ready to make your digital products more accessible to your audience?

We provide inclusive website design solutions that welcome your audiences to engage with your content, products, and services. Bring the best of front-end development to your projects with our web standards-based, usable, accessible, and inclusive work.

Get in touch

The post Axe-con, March 15-16, 2023 event invite appeared first on Say Yeah!.

Are you looking to integrate inclusive design into your organization’s product design framework? Get the latest insights on product inclusion at Inclusive Design 24, a free, 24-hour, online event that will take place on September 22.

The event will feature talks on inclusive web design, building accessible user experiences, documenting accessibility requirements, and more.

Following the success of last year’s talk, “There is no average person”, Say Yeah CEO Lee Dale will be hosting the following conversations at this year’s conference:

• A Designer’s Guide to Documenting Accessibility with Stéphanie Walter at 20:00 UTC (4:00 pm EST)
• An Inclusive Design Workflow for Teams with Scott Vinkle at 21:00 UTC (5:00 pm EST)

Catch these other great talks

• Design on the Spectrum: Creating a More Inclusive Workplace with Lona Moore at 16:00 UTC (noon EST)
• Beyond the Water’s Edge with Malcom Glenn at 18:00 UTC (2:00 pm EST)
• Performative Equity & Inclusion with Zariah Cameron at 19:00 UTC (3:00 pm EST)
• Building UX research practices for inclusion with Josh Kim and Maureen Barrientos at 23:00 UTC (7:00 pm EST)

View the full schedule

Watch the conference

This event is free, with no registration required. Join the conversation live on the Inclusive 24 YouTube channel. 

Ready to adopt an inclusive design framework that helps grow product access and engagement? 

Learn about our approach to inclusive design and how we can help create delightful experiences for your audience.

Get in touch

The post Inclusive Design 24 Conference, September 22, 2022 appeared first on Say Yeah!.

Over 90% of websites are fundamentally broken, actively limiting access to content and reducing engagement as a result of not following the standards and structure that make the web more usable and accessible for all.

In a 2021 study, The Baymard Institute uncovered that 94% of the top grossing e-commerce websites were not accessible.

“Basic accessibility issues severely disrupt those users who need accessibility considerations,” says the study, “and will prevent some from being able to effectively use the site to purchase products.”

WebAIM’s 2021 study of the 1,000,000 most popular websites uncovered that 97.4% of home pages had detected WCAG 2 failures.

The 6 most common web accessibility issues

These are the 6 most common (and easily fixable) web accessibility issues, as reported by WebAIM.

This lack of accessibility contributes significantly to the digital divide, but the issues that are making websites so broken impact much more than accessibility. That’s because the lack of accessibility is a symptom of underlying issues that impact usability, content engagement, performance and site management.

Going even further, many organizations don’t consider the mix of content, design and code that’s required to properly execute, maintain and effectively deliver a website that forms the hub of an exceptional omnichannel customer experience.

Let’s explore these gaps in more detail.

Here are three key questions everyone should be asking about their website:

1. How does your website best serve your marketing, sales, product, service and support teams?

Your website serves a series of cross-organizational purposes. Across sales, marketing, product, service and support, through to a cohesive customer experience, your website is a driver for activity and engagement across your organization.

Often, website objectives are driven by marketing, but talking to and identifying the needs of all the different organization stakeholders who rely on your website to engage with customers will uncover key use cases, content and transactional goals from across your organization.

These cross-organizational objectives will influence not only the design, but also the platform chosen, the features needed and the content strategy necessary for success.

2. How can your website effectively engage your target audience(s)?

Depending on the unique nature of your organization, there are potentially numerous external audiences that will rely on your website. These audiences can include any number of customer groups, partners, suppliers, job seekers, investors and more.

It’s essential to understand where these visitor groups are in their customer journey—what stage of a purchase or product cycle they’re in—to understand how your website will play a role in serving each customer group, while aligning to your cross-organization objectives.

This understanding of your audience will help shape the information architecture, content, calls to action and user flows across your website in order to grow audience engagement.

3. What is the right website platform for your organization?

Once you’ve established a content plan and defined transactional website flows that support your organizational and audience objectives, it’s time to consider the technology that will power your website.

With so many website and code platforms to choose from, the considerations of your staff and audience, as well as standards for performance, accessibility, content management, customization and ongoing management will form the basis for determining the best platform for your organization.

My team at Say Yeah has surveyed the top website builders and web development platforms in order to rank how well they support you in meeting website accessibility standards and requirements. Explore your options in-depth with the Website Builder Accessibility Review.

If you’re looking for more insight on the capability and performance of your current website, the Essential Website Audit answers two critical business questions:

Is your website broken?

How can you fix it?

This is your path to understanding how your current website platform supports your organization and what next steps you can take to better leverage your website as a critical marketing, sales, product, service and support tool.

You can achieve so much more with your next website refresh

It’s not always easy to know where to start when you’re reviewing the effectiveness of your website, planning to launch a new site, or looking to meet accessibility objectives. Remember to ask these three key questions in order to deliver a more effective, manageable and engaging website.

1. How does your website best serve your marketing, sales, product, service and support teams?
2. How can your website effectively engage your target audience(s)?
3. What is the right website platform for your organization?

This is the foundation for delivering a more inclusive website that helps your business better serve the full scope of your market, with your website as the hub of an exceptional omnichannel customer experience.

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 inclusive website design services.

Get in touch

The post How to build a more accessible website for your business: B2BeeMatch appeared first on Say Yeah!.

Among your potential customers, the majority of people have some form of vision need, from wearing glasses (or perhaps forgetting them), to trouble seeing contrast or colour, to a total loss of sight.

These different needs align with various design, product, and service considerations.

Let’s take a look at some key considerations for your website.

Considerations for blind users

Screen reader and keyboard navigation: your website, mobile application, or other software needs to have the ability to be navigated by keyboard and screen reader commands only, which requires the use of tab-key-based navigation and proper headings or landmarks on the page.

Text-first content: Your digital product and available content should not rely heavily on one mode of communication, such as images. To maximize content engagement, ensure that text is used to communicate information. Any images needed for context should have alternative image descriptions (also known as “alt tags”).

Considerations for other vision needs

Text size and zooming

People with certain vision conditions may require the text on their screen to be viewable at a larger size and zoomed in for increased visibility. Your product should accommodate a 200% zoom without compromising the appearance or requiring unintended horizontal scrolling.

Contrast is critical

Text needs to be at a high enough contrast level to ensure that even if someone is colour blind or has low visual acuity, the text is still readable and stands out from the background. For example, black text on white has the best colour contrast, and other combinations can be tested using a colour contrast checker.

Colour contrast isn’t enough

Ensuring an interface doesn’t rely on colour to create meaning or signify a change of state is critical. That’s because 1 in 12 men and 1 in 200 women are colour blind.

As an example, designing an error on a form to add an icon or symbol alongside explanatory text—not just a red outline of a form element that needs to be reviewed—helps this notice be understood by those who may be colour blind. In this case, they will be able to see the icon and take action as they otherwise may not have noticed the colour change.

This rule can be applied to your menu navigation and highlights as well, where you should include a shape change (such as an underline on a selected menu item), not just a colour change.

All of these different considerations can affect a large portion of your potential customer base. By considering these eyesight accommodations you’ll be well on your way to increasing access to and engagement with your content, products, and services.

Get started with making your website accessible

Not sure where to start?

Make your website more usable, accessible, and inclusive for all with the Inclusive Website Audit. Don’t miss out on expanding your reach and engagement!

Order an audit

Ready to take the next steps with your website?

Better serve your whole market with an accessible website that’s designed to support your business and increase engagement across your entire audience.

Get in touch

The post Increasing content engagement by accommodating people with vision needs appeared first on Say Yeah!.

Although building a site with Webflow takes care of many content, design, and code accessibility considerations, making a more accessible Webflow website requires a few extra steps.

In our guide, we’ll walk you through the different areas you’ll need to consider when making your Webflow site to ensure accessibility for all. These factors include everything from form fields, to accessible navigation, to the structure of your site’s pages.

It’s important to consider accessibility when launching or updating your website. You could be inadvertently preventing members of your audience from using your site effectively.

And the best time to plan for accessibility in your work is right now, so let’s get started!

Explore the guide

Webflow accessibility can seem daunting, but our guide will help you with the processes and step-by-step requirements to deliver a more accessible site.

Whether you’re in the process of launching a new site or are looking to improve an existing one, the Webflow accessibility guide will help make your site, and your content, available to everyone.

Looking for additional support making your Webflow site more accessible?

We’ve done the hard work of understanding these requirements, how to execute, and bring these practices to your team for ongoing improvements and future projects. Whether you’re launching something new or looking to improve an existing site, we can help.

Get in touch

The post Introducing our guide to making your Webflow site more accessible 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!.