Access & A11y(s)

10. 10 Things for Rapid Response Web Accessibility

Episode Summary

New to the Web Content Accessibility Guidelines (WCAG)? It can be an overwhelming learning experience, so in this episode Rowan breaks down the top 10 things you can do right now to make your website more accessible for your full audience.

Episode Notes

Timestamps

Resources

Colour Checkers

WebAIM’s Contrast Checker (desktop)
WCAG Contrast Checker (extension) - (Chrome | Firefox)

Accessible Documents

Manual Testing

The A11y Project checklist

Music

Twists & Turns | The Paul Dunlea Group

Credit

This episode was inspired by Digital Accessibility Digest, Digital Accessibility Checklist: 10 Elements to Evaluate for Website Accessibility.

Episode Transcription

Ep 10 - The 10 Things for Rapid Response Web Accessibility

00:00 Intro

This is the All Access podcast Access & Allies. My name is Rowan; I’m the co-Founder of All Access and a web accessibility auditor for the government of British Columbia’s Digital Government team.

The goal of Access & Allies is to attempt to break down any digital accessibility topic under the sun to answer any and all of your questions around making digital tools more accessible. Thanks for tuning in, and if you prefer to read along, make sure to find this episode’s transcript in the notes — along with any resources I mention.

Now, let’s get started with today’s topic: The 10 Things for Rapid Response Web Accessibility.

00:36 Topic Intro

There is a lot of work that goes into making a website accessible so it is useable for its full potential audience. In fact, accessibility can take up to 30% of the overall development time!

And that’s just the planning and building. There’s also proper testing and maintenance to consider.

But let’s say yesterday you were asking yourself “what is digital accessibility?” and today you find yourself having to make your website compliant with the Web Content Accessibility Guidelines, or WCAG.

I have an itemized list of ten things you can focus on first, before doing a deep dive into the ins and outs of digital accessibility — because that deep dive is time consuming. And while the most meaningful change takes time and patience, this list will help you get the basics out of the way enough to make a big difference for a lot of folks out there who want to benefit from your content.

So with that, let’s get into it.

01:27 Structure

First up: Structure. Structure is the low hanging fruit on this list that is often and easily missed. Good structure can make or break user experience. Not only is it important to make your site components visually distinct, but it’s equally important to label your site’s structure accurately in the metadata.

Each page should have a clear, unique title.
And headings should be labelled in a logical order. It isn’t enough to change the font and bolden the text you intend to be a heading, they must be labelled as H1, H2, H3, and so on, and in a proper hierarchical order that makes sense.
And lists should be labelled as lists instead of just appearing as indented text with bullets. You can kinda see a trend happening here.
Tables are tricky, and it’s important to follow accessibility rules for tables when they appear. Define columns and rows appropriately and include alternative text and a table summary, and avoid empty cells. A good rule for tables is: use tables for tabular data and not for layout.

02:26 Navigation

The natural second to structure is navigation. One thing you can do is make sure your site is navigable. It isn’t just as simple as making sure your site has a visually clear path, although that is part of it.

Yes, you want to create a user experience where finding content is easy, and finding your way back is just as simple.

But you also want to make sure that you can easily navigate through the site using only the Tab key (Shift-Tab to go backwards), and Enter key. You should be able to see where your focus is at all times, and that focus should move through the page in a logical order. And anything interactive must be operable using only the keyboard’s navigation functions.

For our non-sighted users, accurate and informative labels for interactive elements and landmarks are essential for a positive user experience.

Now, something that often gets in the way of accessible navigation is pop ups or modal dialogs. Does your site have pop ups that moves or changes the visitor’s focus? If so, it’s a good idea to consider using alternative methods of communication or marketing.

03:27 Text

Number three on the list is text. Language is how we convey information from one person or entity to another. So the way your text shows up on your website is crucial. This is important for people who are near-sighted, who have cataracts, or colour blindness, as well as people with dyslexia, ADHD, and other processing-related disabilities.

Font size should not go below 12 points (it’s also important not to go too big with font size), and users should have the option to scale up or down the size of the font without compromising the page format or the structure.
You also want to make sure the colour of the font contrasts enough with its background. There are lots of resources out there to check colour contrast, and I will list a couple I personally find useful in the notes section.
If you are using colour to convey meaning, use a complimentary tool, like a symbol, to assist in conveying that meaning. For example, green text to indicate something good would have a check mark next to it.
And finally, double check that the font you are using is easily legible. Avoid script fonts and serif fonts, and if you can, even provide font alternatives for the user to choose from! This might include an accessible sans serif option like Arial, a monospace option, and something like Dyslexia Open, which I’ve talked about in a previous episode.

04:40 Hyperlinks

Hyperlinks are number four on this list and there are several considerations to keep in mind when it comes to these useful resource sharing tools. They should be:

Clear and descriptive
- Avoid hyperlinks that simply read “Click here” or “Read more”.
- Use concise language to communicate where the hyperlink leads.
Readable
- Hyperlinks should be in plain language and not in long URL format.
- The exception might be a short URL, for example www.allaccess.dev. Keep in mind a screen reader will read aloud every symbol and character as I just did.
- As part of the text of your website, you want to make sure they meet colour contrast minimums while standing out from the surrounding copy.
Distinct
- They should be easily identifiable and that doesn’t just mean meeting colour contrast minimums, but making sure they are a different colour, and that the text in some way other than colour also contrasts the surrounding copy.
  - The most common methods you tend to see are underlines and / or boldened hyperlinks. Just make sure to avoid italics as this tends to render fonts difficult to read for many folks.

And something to keep in mind with all interactive elements is that any new page should open in the same tab. If it opens in a new tab, make sure to have something that mentions it will open in a new tab, for example in the hyperlink itself or in an ARIA label.

05:59 Images

Fifth on the list (and we are at the half-way mark) is images like photos and illustrations. They can either be helpful or a hinderance, depending on how much thought is put into making them accessible.

Make sure all contextually significant imagery has alternative text (or, ‘alt text’). For more information on alt text, check out episode three of Access and Allies.
- This includes graphs, charts, infographics, and slides.
Ensure decorative images are treated as decorative images. Ignoring an image’s accessibility features just because it’s a colourful swoosh across your page will cause confusion, because a screen reader will only say “image”.
Make sure to meet those colour contrast minimums and again, don’t rely on colour alone to convey meaning.
And images with text on the image must have the message supplemented elsewhere, as in an image description in alt text and / or on the page. Remember that images are not html, and so screen readers cannot read text included in an image.

06:57 Forms

Number six is a big one: Forms. Make sure to test your forms with tab navigation and with a screen reader before releasing it out into the world, because these interactive tools can be accessibility nightmares. I will dedicate an episode of this podcast to accessible forms at a later date, but for now, here are a few things to keep in mind:

You should be able to tab through a form effectively, in a logical order.
Each action that must be taken on a form should have clear instructions, indicating what type of functionality the section entails. This means that drop-down menus, checkboxes, multiple selection, and so on should be identified accurately.
Instructions should go a step further for screen reader users, indicating where they should navigate to answer certain questions. For example, if text boxes are below or to the right of the question.
And finally, beware of timed content. I always advocate for not putting a time limit on forms. There are lots of reasons why someone might need more time; whether that’s disability, information retrieval, urgent childcare, etc. But if it’s a must for any reason, make sure the user has the option to extend the time limit.

08:03 Documents and Files

Number seven: documents and files. If you ever want to add a PDF or other file to your website, the first thing to ask yourself is “Can it be represented in HTML instead?” If the answer is ‘yes’, do that, because it will be way easier to make HTML accessible than any PDF. If the answer is ‘no’, ask yourself why. If the information is too complex, I assure you it is not accessible and should be broken down.

If there is no way around adding documents to your website, make sure they pass whatever accessibility checker is available to them. Microsoft products and Adobe all have accessibility tools for making sure your document is as accessible as possible.

There isn’t enough time to delve into how to make different document formats accessible here, but I will make sure to add some resources to the notes section to set you on your way.

Basically, the same principles of accessibility apply to documents, but there are different ways of getting there.

08:59 Media

Eighth on the list is media.

If your website contains video, it should also contain captions, subtitles, and transcripts, and potentially audio description of what is happening in the video.
If your website contains audio, there should be a text version to accompany it.
Any automatic animation or movement that’s added as a feature for your site can be distracting for people with various cognitive disabilities, and quick flashes pose the risk of triggering seizures for some users.
And if you do animate or use movement, make sure to respect prefers-reduced-motion, a system setting that can be leveraged by media queries to disable css driven transitions.

09:36 User Autonomy

Number nine is user autonomy. Moving right along, it’s important to provide an adaptable experience for your audience. Can they set the zoom level, the size of the text or font type without negatively impacting the page structure? Are there dark mode and high contrast options built into the site? And do those settings provide a full user experience?

09:57 Maintenance

We’re finally at number ten and last but not least is maintenance. Now that you’ve gone through the big ticket items for making your site accessible and inclusive, it’s important to not stop there. Keep learning about ways to make your site accessible, and create a maintenance process and policy to ensure your site gets regular attention with an accessibility lens.

Accessibility isn’t a one and done thing, it’s more like dental hygiene. You have to keep on top of it and floss every once in a while. Come up with a schedule to go through automatic and manual testing to ensure users with different accommodation needs are still able to access your content.

Due to the web’s fluid state, it’s easy to make a seemingly simple change that has big implications for assistive technology users.

10:41 Conclusion

In conclusion, implementing these 10 things for rapid response web accessibility can significantly improve the accessibility of your website. By focusing on structure, navigation, text, hyperlinks, images, forms, documents and files, media, user autonomy, and maintenance, you can ensure that your website is inclusive and usable for a wide range of users. Remember, accessibility is an ongoing process, so continue to educate yourself and prioritize accessibility in all aspects of your website development and maintenance.

I hope you have found this episode informative. While it’s a long list, it’s not exhaustive and these really are the most essential items for a more accessible user experience. So, just take it one step at a time. And one thing I recommend is that, if you know your site isn’t accessible but you are actively working on improvements, say as much towards the top of the home page and communicate your intentions. Then just make sure to follow through on them.

And check out that notes section as there are a bunch of neat tools to add to your roster to help you along this journey.

As always, it’s been fun talking at you and until next time on Access and Allies.