5 easy steps to an accessible website
Accessibility isn’t just a buzzword in the digital world anymore. It’s a standard, a best practice and, in some places such as Ontario, it’s the law. By now, you likely know that it’s in your best interest to get accessible not just to be compliant to legislation but also because accessible websites are the easiest to use for anybody, especially those on mobile devices. Accessible content is also easier for you to write and maintain and for your readers to understand. So, what’s stopping you? The two main reasons our clients aren’t compliant are—you guessed it—time and money.
This blog will help give you an overall understanding of what you need to look for to ensure accessibility, which we’ve organized as the 5 steps of accessibility you need to take to ensure your website is open to all.
The 5 steps (or pillars) to an accessible website are:
- Development and design
- Website widgets
- Policies and training
Before we get into the nitty gritty, we wanted to provide you with a few resources you might need in your journey toward accessibility. You’ve probably heard of WCAG, W3C, ADOA, ADA, and so on, but these letters don’t mean much without context.
To simplify things, the Web Content Accessibility Guidelines (WCAG) is a universal set of guidelines put out by the World Wide Web Consortium (W3C). To keep things simple and universal, most governments use WCAG to form their accessibility laws as it allows them to lean on predetermined guidelines that are easy to find and understand. As is the case in the Accessibility for Ontarians with Disabilities Act (AODA) in Ontario, Canada, and the Americans with Disabilities Act (ADA) in the United States, in conjunction with Section 508 of the Rehabilitation Act and Section 255 of the Communications Act.
Now that you know what you’re looking for, let’s dig into what you need for each pillar and why your site might not be meeting accessibility right now.
WCAG has criteria to test against to ensure a website is compatible, which are as follows.
The following checkpoints are designed to help users read content on the website:
- Site designed using CSS allowing for user-defined stylesheets to override default styling.
- Buttons to increase/decrease text size by at least 200%.
- Colour Contrast – all colours checked for contrast/ability to easily read.
The following checkpoints are designed to help users navigate the website:
- All content can be accessed via the keyboard only.
- Multiple ways to navigate and find content–search, quick links and navigation
- Pages are structured using headings.
- “Skip to content” link to bypass site menu structure and go directly to the page content.
- Pause button on rotating content (e.g., rotating homepage banners and news)
The following checkpoints are designed to help users site content and structure:
- Consistent navigation structure across all pages.
- The website code allows assistive technologies use to determine page structure and language.
- Content management system (CMS) provides ability to manage content in a way which is readable and understandable
- Ability to set site structure via heading tags (H1, H2… H6)
- Supports use of Table Caption, Abbreviation, and Acronym tags to provide definitions
The following checkpoints are designed to make the site usable by a variety of browsers and assistive technologies:
- Compliant with W3C HTML 5 and CSS 3 website standards.
- Use standard code libraries for browser compatibility—jQuery, Modernizr
- Website is tested with JAWS, NVDA and ZoomText—three of the most popular assistive technologies in Canada.
- Website is tested with all major browsers—IE 9 to 11, Firefox, Chrome, Safari, Mobile Safari, Mobile Chrome.
Now, onto each element you need to check to ensure your website’s accessibility on a complete scale.
1. Development and Design
The development—often referred to as the design—of your site includes cascading style sheets (better known as CSS), colour contrast, and all the items happening behind the scenes to ensure that your website is both usable and navigable by assistive technology and devices. This can be one of the hardest parts of your website to keep accessible because the control of the development rests in the hands of the website’s developer, which often is not the website owner (i.e., not you).
If your site isn’t passing the criteria of accessibility described above, there’s probably a few reasons, starting with the age of your website and the technology that was originally used to build it. Some websites may have been developed and designed more than eight years ago. Even websites hitting their fifth birthday can contain some clunky design by today’s standards. The issue here is while websites stay the same, assistive technologies and accessibility software continue to advance. This means that remediating your site for development and content could take weeks and carries a significant price tag. In these instances, it might be better to redesign your website and launch a brand new, beautiful accessible site rather than continue to try to remediate the old site by fitting a square into a circle, so to speak.
It's not that we don’t recommend remediating older websites to make them accessible (we encourage this), it’s just that sometimes fighting against old technology can cost more than your website is worth when for the same price or slightly more, you can have a brand-new website that is both accessible and a joy to use.
Pro tip: If your website is more than five years old, consider investing in a brand new, beautiful website that is built for accessibility and comes with accessible widgets to help your users find what they’re looking for all on a site that is both stunning and a pleasure to use. Contact us if you’d like more information on how we can help make your new website dream a reality.
The obvious meaning of content on a website is literally the words that are written on the page, but there’s more to it than that. Not all content is created equally and content that goes on a web page is—and should be—very different than content that is created exclusively for the printed page. If your content is going to be featured in both mediums, always follow accessible and web content writing rules. Not only will this make your content accessible online, it’ll make it easier to read in print as well as make your life a whole lot easier if you’re a regular content contributor at your organization.
Online content writing—or writing for the web—is ruled by several guiding principles that can be boiled down to the following key elements, which we refer to as technical content. This includes your Headings, Alt text, Links and Tables, or as we refer to it, HALT. Learn to use these items in an accessible way from the first draft and not only will you save hours of time per page, you’ll get to watch your website content flourish.
Styling and structure
Beyond the technical elements of content (HALT), other aspects of your writing can affect your accessibility. These are most often the font stylings you use on your website and how you structure your page. As a rule, avoid unexplained acronyms and jargon, use only sans serif fonts, structure your page in a way that cuts out the clutter and focuses only on the information your users need, and avoid font stylings such as bold, all caps, italics and coloured text to draw attention to your content (this is what your properly tagged Headings are for)!
While anyone can “do” web writing, they need proper training as the foundation to get there, and we recommend having all content contributors and approvers trained in Writing for the Web. Although this isn’t a complete list of what to look for in your content, following these tips will help get your content more accessible.
Pro tip: As a bonus, not only will writing with these tips shorten your effort and make your website more accessible, it’ll also help with your search engine optimization (SEO) without you even trying!
3. Website Widgets
Website widgets sometimes come with your website (and good ones will be scalable to your website), but you also likely have third-party tools attached to your site, such as an online calendar, appointment booking tool, ecommerce forms or by-law repositories in the case of municipalities. A common misconception is that if you don’t control the tools, accessibility is not your responsibility. As a rule (and as far as the law is concerned), if you paid to have something on your website, the onus is on you to ensure that solution or tool is accessible. A good place to start is to contact the developers of these widgets, tools or add-ons to find out if they meet compliance.
Much like the development and design pillar of accessibility, the age of your widgets and the technology used to build them at that time is likely the number one barrier to their accessibility. And like with development, the person or company who created the widget is often the only one who can adjust or modify it. Unlike websites that tend to scale for about five or six years, this might not always be possible with widgets and tools. Think video games, smartphone and apps. Once a version is released, some updates will be delivered to fix common bugs or issues, but most of the investment goes into the next iteration of the item. It’s often the same with website tools. The good news is that updated tools can offer more features, one of which is often better accessibility.
When we say that all aspects of your website should be accessible, we mean everything, and that includes every PDF, flyer or form you have on your website. Now, while making PDFs and forms accessible is very possible, it requires the proper training to create accessible documents from the start as well as to remediate old documents and create accessible fillable forms for your users. Like content, accessible forms are much easier for users to navigate through, regardless of ability. There are also tools out there—such as our Form Builder solution—that offer easy ways to make accessible fillable forms with bonus functionality, such as ecommerce or digital signatures.
Pro tip: A disclaimer that says a user can request a document in an accessible format is not an accessible way to present content and is (under some legislation such as the AODA) not permitted by law.
5. Policies and Training
Having an accessible website is great, but you need to keep it accessible going forward to get the full benefit both for your budget and your users.
To keep your website accessible (and successful), we recommend implementing the following:
- Website Writing Style Guide for content writers and contributors (that includes writing for the web and accessibility best practices)
- Accessibility Policy for your website and documents, which should include running scans and testing content and design on a regularly scheduled basis
- Training staff in Writing for the Web and Accessibility for web page content writing and remediation
- Training staff in Accessible Documents for PDF creation and remediation
Ensuring everyone in your organization is onboard with an Accessibility-First Mindset by implementing internal training sessions such as lunch and learns, all staff meetings, and through internal and council policies is key to keeping your site accessible now and in the future.
Pro tip: To change your organization’s approach to accessibility, enact change from the top down. Once leadership (such as senior management or council) adopts an accessibility-first mindset and makes it a strategic priority, the rest of your staff is more likely to embrace this mindset.
We offer solutions and training for all pillars of accessibility. Connect with us to learn about where your website stands, what solutions are best for you, and how we might be able to help. You might even fall under one of our website price agreements or be a good fit for our out-of-the-box solutions. We can also create custom websites and tools to equip your site with some of the most cutting-edge solutions for the public sector and in the industry.
Contact us today to get started and remember, accessibility isn’t just the law; it’s the right thing to do.