Hello and welcome to our Web Accessibility 101 webinar. You can watch the video which has subtitles, or read an overview of the key points from the video in the blog post below.
Web accessibility 101
My name is Ella, and today I’m going to explain the basics of web accessibility: what it is, why it matters, and how to get started. Whether you're completely new to the topic or just looking for a refresher, I’ll be covering all the basics, so no prior knowledge is required.
Agenda
- A quick introduction about myself and how I got into web accessibility
- What web accessibility actually is and why it’s important
- Examples of how people with disabilities use the web in practice
- Common accessibility problems and how to fix them
- An overview of WCAG (Web Content Accessibility Guidelines), the international standard for accessibility
- How you can contribute to improving accessibility in your role
We have a lot to cover, so let’s dive right in.
About me
Before we get started on accessibility, let me quickly introduce myself. I’m Ella, a web accessibility specialist and front-end developer at Catalyst. My journey into accessibility began during my first year as a developer when I attended an introductory accessibility forum. That event opened my eyes to how people with disabilities experience the web, and it completely changed my perspective.
As a front-end developer, I have always focused on making websites functional and visually appealing. I hadn’t considered accessibility until that point, but learning about it gave me a new appreciation for ensuring that everyone, regardless of ability, can access the content we create.
What is web accessibility?
By definition, web accessibility is the practice of making websites usable for everyone, including people with disabilities. It’s about ensuring that no one is excluded from accessing and interacting with online content.
Some might think web accessibility only benefits disabled users, but that’s a misconception. Accessibility improves the experience for everyone. You might not have a disability now, but accessibility features could benefit you later in life, or they might help a friend or family member.
According to the World Health Organization, 1.3 billion people worldwide have a significant disability. In New Zealand, that’s around 24% of the population. If your website isn’t accessible, you could be excluding one in four people from using it. That’s a staggering number of potential users lost.
Why should you care?
Web accessibility isn’t just about doing the right thing—there are plenty of practical reasons to care. These are a few key ones:
- Extending market reach: The global spending power of disabled people is over $6 trillion. Making your website accessible opens up your market to millions of potential customers.
- Enhancing your brand: An accessible website signals that your business values inclusivity, which is great for your brand image.
- Minimising legal risk: Many countries have laws requiring websites to be accessible. Failing to comply can result in lawsuits, as seen with companies like Burger King and Domino's, who were sued for having inaccessible websites.
Understanding different types of disabilities
To truly understand accessibility, it’s helpful to know the types of disabilities people experience and how they affect web use. Disabilities can be permanent, temporary, or situational. For example:
- Permanent: A person who is blind or deaf.
- Temporary: Someone with a short-term injury, like a broken arm or an ear infection.
- Situational: A person in a noisy environment who can't hear audio content, or someone trying to view their phone screen in bright sunlight.
Common accessibility problems
Let’s explore a few common accessibility issues and how to resolve them:
1. Colour contrast
Colour contrast refers to how easily the text or object on your website stands out against the background. Poor contrast makes content hard to read, especially for those with visual impairments like colour blindness.
Solution: Use online contrast checkers, like the one from WebAIM, to ensure your text meets minimum contrast ratio standards.
2. Alt text for images
Alt text is the written description of an image, which screen readers use to describe the image to visually impaired users. Missing or poorly written alt text is a common issue.
Solution: Provide descriptive alt text that conveys the function or purpose of the image. For decorative images, use blank alt text (alt="") to ensure screen readers skip over them.
3. Focus indicators
A focus indicator shows which element a user is currently interacting with when they navigate using a keyboard. Many websites either lack a focus indicator or have one that is hard to see.
Solution: Ensure your website includes a clear and visible focus indicator for all interactive elements. Avoid using outline: none in your CSS unless you replace it with a custom, visible focus indicator.
WCAG: Measuring Accessibility
The Web Content Accessibility Guidelines (WCAG) are the global standard for measuring web accessibility. The guidelines are divided into three compliance levels: A, AA, and AAA.
Most websites aim for WCAG 2.1 AA, which covers a wide range of accessibility features.
How to get started
Ready to make your website accessible? Start by asking yourself the following:
- What are the legal accessibility requirements in your region?
- What version of WCAG and compliance level do you want to achieve?
- Which parts of your website need reviewing first?
- Do you need to provide additional staff training or external support?
Everyone can contribute to accessibility
No matter your role, there’s something you can do to improve web accessibility. These are really quick tips, but there is plenty more you can learn and do:
- Product Managers: Lead the planning and implementation of accessibility features.
- Designers: Ensure designs meet accessibility requirements, like sufficient colour contrast.
- Developers: Write semantic HTML and ensure proper use of ARIA attributes.
- Content Authors: Use simple language and proper heading structure.
Useful resources
Here are some excellent resources to help you on your accessibility journey:
- WebAIM(external link): Easy accessibility tips for designers, developers, and writers.
- WCAG 2.2(external link): The official WCAG 2.2 guidelines.
- WebAIM Contrast Checker(external link): A tool for checking colour contrast.
You can also check out our blog for other helpful accessibility tips and tricks.
Web accessibility might seem daunting at first, but breaking it down into manageable steps makes it easier. By incorporating accessibility into your processes, you’re not just benefiting people with disabilities—you’re enhancing the experience for all users.
If you have any questions or want to learn more about how we can help you improve accessibility, don’t hesitate to contact our accessibility team at Catalyst.
