Accessible design tools for a more inclusive world wide web

When we think of accessible design, we often think of things like wheelchair ramps, elevators, large bathroom stalls, and reserved parking spaces. Unfortunately, much of the world is still inaccessible to people with disabilities, leaving many with no choice but to use the Internet to access essential services.

But what if the internet is not accessible?

Transition to Internet access

1 in 5 Canadians has a disability – that’s 6.2 million people! Access should not be an afterthought when 20 percent of our population struggles with systematic exclusion. As a brand, if you take the necessary steps to have an accessible website and social media, you can better offer your services to many people who are not involved in many aspects of our daily lives.

While scrolling through our phones is a mindless task for many of us, it is a complex process for the visually impaired, illiterate, and other people with disabilities. Fortunately, there are many ways we can make our websites and social media pages more accessible and easier for everyone to navigate.

Our graphic design team has recently completed training An incredible company called Accessibrand, which aims to help businesses understand the ins and outs of website accessibility and how we can improve it. Going into the workshop we thought we had a good understanding of online access, but were blown away by how much we learned and all the areas we could improve on.

Here are some tips from our designer Michelle Slobodian on how brands can make their websites easier for everyone to navigate.

Color contrast is everything.

Making sure that your website has good color contrast between text and graphics will make it much easier for people with visual impairments and reading difficulties to read. For those of us with 20/20 vision, we can notice a difference in how difficult it is to read text with poor background contrast. Imagine how difficult it is for the disabled.

You can use this to test the color contrast of your website. Free web accessibility comparison checker Enter the HTML color code of your text and background from WebAIM and the software will give you a color contrast ratio. We require at least a 4.5 or higher for writing.

Let’s say you’re struggling to choose a color palette for your brand and want to make sure it has good contrast. In that case, this An accessible palette developer It follows the steps outlined in Color Safe Web Content Accessibility Guidelines 2.0 (WGAC).

Alt-text and image descriptions

In our training with Accessbrand, our instructor showed us what it’s like to use a screen reader. Michelle was annoyed at how difficult it was to keep track of the screen reader as she navigated through our website.

We thought we had a very accessible website, but we were shocked at how bad it was! The workshop set things up so well that we identified the problems and looked for ways to fix them.

Adding full-text descriptions to your website allows visually impaired users to understand graphics without actually seeing them. Screen readers will automatically detect alt-text embedded in an image, even if the text is not displayed on the screen.

Since many platforms do not have options for embedding alt-text, adding image descriptions to the body copy of your posts can be very useful on social media.

Navigation icons

For those with literacy challenges such as dyslexia, it can be difficult to see large text on the web. Figuring out what to click and where to go can be a stressful and time-consuming experience, but it’s a lot easier if there are signs and icons to guide you!

Michelle loves using this database. Universal icons and symbols from Google. Simply download your icon files, and you can change them to match your brand colors and your website design. Remember, it’s all about that nice color contrast!

Plugins

We have been talking amazingly Website plugins that provide customizable accessibility features. These allow users to change text size, spacing, cursor size, contrast, alignment and more!

Want to try it yourself? We’ve added a UserWay Accessibility widget to this. Virtual website. Click the icon in the upper left corner to see all the ways you can customize your online experience! Of course, it can be a process of trial and error, especially if you use a mobile device. However, it has proved incredibly useful in meeting the needs of the various communities that access this site.

Using fonts in responsive websites

Accessing a website on your laptop often looks very different from what it does on an iPhone screen. We call these ‘responsive websites’, and they automatically change alignment and layout based on your device.

Responsive websites can pose a challenge in terms of accessibility. Some fonts may be easier to read on your laptop but harder to read on handheld devices. These Font size guidelines for responsive websites It helps you make informed decisions about the fonts you use in your designs to prevent reading problems.

Not sure if your brand’s website meets WGAC 2.0 accessibility standards? We seriously recommend booking a workshop with Accessibrand! They’ll teach you ways to make your online presence more accessible and easier to navigate. They also cover other important topics. Intelligent and honorable representation When using images of people with disabilities in your designs and ads. It’s helped us in our ongoing journey to create a more welcoming and inclusive culture—here at the Uphouse office, in the digital realm, and around the world!