Accessibility

How to Create a Multilingual Website

Having a multilingual website means your website is available in more than one language. This is another aspect of Web Accessibility we love talking about here. There are two considerations: do you want your website back end to be in a language other than English? Or do you want to have your website served to your viewer in their preferred language?

Even here in Canada with our two official languages, I’d love to suggest that all Canadian websites should be multilingual and have a French and English version just by default – wouldn’t that be something? But as far as I can see, multilingual websites are typically only offered by government organizations.

And what are the stats showing? It’s easy to be complacent and presume that just because the majority of the internet is English speaking, this “global” language will suffice. But things get a little more complicated when you read stats from Google. 

In fact, the majority of online searches are conducted in languages other than English… And, when we say the majority of the Internet is English speaking, it makes up just 25%. Not much of a majority, is it?

Why does it matter if online searches being conducted in other languages? Simply put, if your online shop isn’t in the language your potential customer is using, you won’t appear in search results.

i18n or Internationalization is a big consideration for many companies, large and small. It can be dangerous to assume that your client base is comfortable with transacting online in just English. Whether you’re looking to improve your user experience (UX) by offering your site in multiple languages, or you want to improve your buyer’s experience online, there are things you need to consider – and things to avoid! – with your multilingual website.

5 Things to Avoid When Building a Multi Language Website

#1. Back away from Google Translate

Do NOT rely on Google Translate! It can be helpful to a certain extent, but the worst thing you could do to translate your website would be to copy and paste whole content into Google Translate, and back again. Google Translate can be helpful for ensuring that visitors will get a general idea of what you’re trying to say. But, cultures and keywords are different across the globe, and it’s not always just about translation (see #4 below!). Google Translate is NOT FOR YOU.

#2. Too Many Duplicate Pages in your Menu

The last thing you want to see is a menu bar with three home pages in three different languages. Three versions of every single page will overload your menu bar, and really diminish the user experience for your visitors. This is where having a language switcher comes in, where you have different versions of your site in different languages. This kind of multilingual website can make for a much smoother user experience!

#3. Using Fonts That Aren’t International

It’s easy to forget, but make sure you choose a font that displays special characters. French accents (like this: é) can totally change the meaning and pronunciation of a word, so they’re important to include and get right. You can read more about font choices here.

#4. Including Culturally Insensitive Photos, Words, Phrases

Watch out for outdated stock photos. Make sure images you’re using are inclusive and represent the people you’re writing for. If you’ve translated your site into 50 different languages, but only show images of one country, people, food, your message is not going to get across. The same applies to the language and words you use. And beware of unintentional ethnocentrism (cultural superiority complex) or even just cultural bias within your writing – are you really writing for a diverse international audience? Consider partnering with a local to translate your content. The Neil Patel article link above also recommends this, and really it’s the perfect solution.

#5. Messing Up Date and Time

1/10/2021.

Wait – is it Jan 10 2021 or Oct 1 2021? This is a small, simple thing that causes endless confusion on all sides of the ocean. Avoid it entirely by just writing out the full date instead: for example, January 10, 2021.

How to Easily Create a Multilingual WordPress Site

If you’re working on a WordPress site, luckily you’ve got some pretty straightforward options. If your site theme isn’t already translation-ready (which means that it already supports multiple languages) then stop right now and just change it. This will involve some revamping of your website, obviously, but this is probably your easiest strategy. I mean, honestly, designers need to be accounting for this already in their design; if they’re not, doesn’t it make you wonder what else they’re skipping? And this is WordPress, which offers the most user-friendly options for improving your website’s accessibility.

If you’re totally committed to your existing theme and for some reason you’re unwilling to change (although may I add, if you’ve been using the same design for over a year it’s probably time to consider updating it just to stay fresh) then there are plugins available for WordPress sites. WPML plugin is the most common, which can translate pages, posts, custom types, taxonomy, menus and even the theme’s texts. It is also great for multilingual website SEO, which is a critical feature. Here’s what WPML itself says it does:

WPML lets you fully optimize your site for SEO in multiple languages.

  • You have full control over how URLs look.
  • You can set SEO meta information for translations.
  • Translations are linked together.
  • Sitemaps include the correct pages and pass Google Webmasters validation.

With WPML, search engines understand your site’s structure and drive the right traffic to the right languages. Sounds pretty critical, right?

You can also read this WPBeginner article for some suggestions on creating a WordPress multilingual site.

Create a Multilingual Website With Other Site Builders

It’s true, there are other website builders out there, with varying features and levels of success.

Wix used to make you duplicate and translate all of your pages, but now their Wix Editor is integrated with Wix Multilingual (sites on Wix ADI are not integrated at time of this writing.) I have to point out that their own support forums encourage users to use Google Translate. (See my Tip #1 above for why that’s NOT a good idea.)

Weebly offers a few apps. From what I can tell, these are paid add-ons. Weebly’s Tutorials are outdated and reference using third-party services, many of which are no longer available, to translate your website content. I do not know if there is now a built-in feature – no offense to any Weebly lovers out there, but I doubt it.

With Squarespace, you’ll have to manually create each set of pages for each language you want to offer – or create a whole separate website for each language. And you’d probably need to upgrade your subscription in order to handle that number of pages.

Shopify does not offer its own native solution to make your store multilingual, but there are a couple different options – although only one of them really makes any sense. You can have multiple stores (this might sound like a good idea at first, but it’s a nightmare to manage and maintain) OR you can use a multilingual app. The most common right now is an app called Weglot, which will let you add hundreds of languages to your store in minutes. It claims to take care of detecting and automatically translating the whole of your Shopify site (including checkout and email notifications), and it also handles the multilingual SEO of your newly translated store. 

Conclusion

Creating a multilingual website isn’t particularly easy, but it should be part of your natural development process. Adding a multi-language option for your website doesn’t have to be highly technical, but you or your web designer should have a good handle on how it will impact the usability of your website, AND your SEO.

At the very least, you can easily research into your target audience and what languages they speak at home. In Canada, Wikipedia offers demographics based on Stats Canada surveys, so it’s not that hard to find – and the results just might surprise you.

Screen Readers: Website design for non-visual users

Designing for website accessibility for users with little to no vision, and using Screen Readers

As a user who doesn’t experience any real vision or textile considerations, I find discussions about accessibility within the internet space fascinating.

A few months ago I attended a webinar presented by a near-blind web developer. She offered a chance to experience what surfing the internet is like for someone who uses a screen reader. It was an absolutely mind blowing experience. 

As a web designer who has full control of my sensory faculties, it can be hard to keep other users’ experiences at hand when designing or redesigning a website. The good news is that if you take these things into consideration, you actually end up with a better-designed website that is easier for search engines to find, and often cleaner in code too. 

There are a few options for internet users who have screen readers to help them surf the web. Note I’m basing pretty much all of this article on this one webinar presented by one user, so some of these assumptions may be biased.

Screen Readers

The screen reader provides a really interesting way to looking at your website’s layout. A screen reader uses an “accessibility tree”. This “tree” comes up when the user’s browser recognizes the reader itself.

Your website title is the first thing read by the Reader. Guess what that means? If your website title is “Stephanie Sedgwick”, that doesn’t tell the visitor anything much at all. However, if the title is “Stephanie Sedgwick, web and graphic designer”, that at least tells them what they can expect if they visit my site. But as a visually impaired person, chances are good a “web designer” website is going to be loaded with images they can’t even see.

Even better, maybe you want to have your title be interesting enough to get their attention – such as, “Steph Sedgwick, providing functional, accessible web and graphic design”. That would at least indicate it might be worth their time to click on my website link and actually visit the site.

The image here is from Speckyboy.com. Check out the related article here: https://speckyboy.com/myths-about-how-blind-people-use-the-internet/

from Speckyboy.com: David Ball blindfold testing websites

A Different Approach

Divide & Conquer

If you’re visually impaired, you can’t take in a website in “one glance”. It’s just not possible visually, but it’s also an impossible goal with readers. Best you can do is ensure your page is divided into regions or chunks that the screen reader can make sense of. ie., Header, Footer, Nav, Main. This will at least give an experienced visitor a sense of the chunks of the page as well as the layout.

List Element

A “list element” will tell screen reader what’s there (ie. “list of 12 items”, ordered or unordered). This can be really helpful if your main menu has a drop-down function. Your visitor can’t see the little notch indicating that there’s a drop-down menu to be found, so they certainly can’t hover their mouse there. And a screen reader needs to be able to recognize that element in order to describe it  to the visitor.

Contact Forms

One of the biggest takeaways from this webinar was a really small thing that makes a massive difference to overall usability. many of us started removing the label on contact form fields because we felt it interfered with a “minimal” design approach. But if you’re using a screen reader, there is nothing to indicate if they’re on the right section. What if you wanted to send a message to the company whose website you’re on? You may be successful in tabbing your way over to the form, but what if you accidentally hit tab too many times and don’t realize it? If your screen reader can’t tell you that you’re on the last name field rather than the email field, you’re going to have a really hard time entering any information into the form collection.

Submit Buttons

Another contact form issue is when the post-submission message is not visible, or appears at the wrong time. Imagine how frustrating it would be to get through the data collection form, only to be unsure whether your message was sent or not. If there’s nothing to indicate to the reader that it was successful, or the success message pops up before you’ve hit “submit”, what kind of an experience is that to offer your visitor? Pretty sure they wouldn’t bother to dig up your phone number to call  you and sort it out.

Too many H1 tags

If you can’t visually scan a page to see what it’s trying to tell you, you need to rely on the html markup to have your reader interpret it for you. If you have H1 tags all over the place, it makes for a very confusing experience.Where’s the important info? What are the different sections?

Sidebars and footers

How many web designers like to clutter up the sidebar and footer with nifty-looking widgets? Full disclosure, I’ve done it myself. What about a sidebar widget that shows recent blog posts, category links, share links, newsletter signups, graphics that don’t include any alt text, ads in the sidebar, “Quick Summary” which aren’t quick at all when you’re not sighted.

High-contrast themes

Some websites offer an option to change their theme from light to dark, offering a high-contrast text version of the site for easier legibility. This is a nice function, although not very helpful for non-visual users. One example of this application is tink.uk.

The Experiment

As part of the webinar, the presenter, Leonie, took us on a screen share to test a specific website: mass.gov. This is the government site for the state of Massachusetts, and handles pretty much every information reference an individual or business would need: tax refunds, food stamp programs, your UI benefits, licenses, permits, you name it – if you need to find out how to do something in Massachusetts, that’s the site you need to go to. We listened and watched as she tried to navigate her way to find the Unemployment Insurance application on that website. 

Leonie, a self-described “very experienced” web surfer, followed her reader’s interpretation of the website. The main menu didn’t follow the standard for software “menu”. While she was attempting to figure out where to try finding the information she wanted, a pop-up appeared on her screen. Us sighted users watching her screenshot knew it was a sign-up request, but there were no cues to tell the screen reader how to interpret it. So Leonie was left trying various things to try to figure out what as going on. She tried hitting the Esc button, which brought her to a search form, and without any way to interpreting the visual cues that were being given, she had no idea how to proceed. She ended up giving up and exiting from the website – long after most of us would have given up in frustration. 

Edge doesn’t support html a11y. But don’t discard it – and Internet Explorer – too quickly; the reality is that there are a lot of screen reader users that are still on older versions of reader technology that rely on IE. Other browsers, however, are pretty good, and many offer extensions that you can try. You can also test a variety of screen readers to really help you understand your web user experience. There are readers available on a few platforms including Windows (open source readers such as NVDA and Firefox), Mac (voiceover only), Android (Talkback), and Apple devices (Rotor). 

Best tips for designing accessible websites

Guess what? For sighted developers, testing doesn’t have to be complicated. Try this handy tip: cover your screen. Or just turn it off. You don’t actually need to use screen readers to get a sense of what your site “looks” like! That will help you to “see” what kind of experience your website actually offers for non-visual users.

When in doubt, KISS. 

Keep It Simple, Stupid.

Really, we don’t need to say anything else here. But if you’re still reading this, then consider these basics:

Field Labels – If you’re thinking about removing field labels because you think it clutters up your design, think twice – what other functions might those labels serve? Is there another way you can clean up your forms and still keep the labels there?

Media Players – Play/pause buttons can be really tricky for non-visual users to understand. This makes perfect sense to me, because even as a sighted user an automatically playing video can cause instant anxiety while I madly click around trying to find the way to shut it off. If the volume is on, it’s even more anxiety-inducing. It’s awfully similar to my reaction to alarm clocks, actually. Autoplay = OFF!

Handy Tools – There are also some browser screen readers that can be of some help to us sighted developers and designers. At the time of this writing, Chrome offers an extension called ChromeVox. For desktop users, this screen reader is also found in Chromebooks. Although it’s not commonly used by people with vision impairment, it can be a useful pairing for testing purposes. For more info about readers, try www.hollier.info/browserpairing/

Interested in more? Try some of my other articles here, and be sure to check out Smashing Magazine in the link below.

Leonie’s webinar was so useful on promoting accessible usability, it is now available for free on smashingmagazine.com/2019/02/accessibility-webinar. I highly recommend it for anyone, not just web designers and developers.

How to Make Sure Your Website is Accessible

No matter what platform you’re using (WordPress, Shopify, Wix, or something else) there’s really no excuse for not making your website accessible.

There are, in fact, all kinds of reasons to start thinking about web accessibility (or #a11y, if you’re into numeryms). In the US, having a Shopify website that isn’t accessible can actually open you up to legal risk.

What is web accessibility?

Web accessibility is usually considered in terms of visitors with disabilities – whether you can actually see that image or button, or read that text, or click a link without a mouse, etc. But it is really just a more complete and holistic integration of UX, or user experience. This article won’t go into depth, but this is one of my favourite topics so feel free to check out my other articles about accessibility.

The key takeaway is that making your website accessible makes it available to MORE VISITORS, not just for anyone with physical disabilities. And that includes opening up your website experience to an enormous range of abilities, such as vision (colour blindness, shortsightedness, poor to no vision), motor ability (using a mouse vs not able to use a mouse), language, and so much more.

Great, more work. Or is it?

Are you rolling your eyes right now at the notion of having to fit in “extra” work like this when you’re already balancing so many tasks? Never mind trying to achieve your ideal work-life balance. But part of what needs to change is that idea that this is “extra”. Instead, think of it as foundational to creating a site experience that is equally valuable for anyone. It’s also, in case you’re not catching my passion about this, your responsibility as a good corporate citizen and as a web designer or developer.

Having to make an accessible site is not a punishment – it’s a duty and an opportunity. Don’t forget that if your site is easier for everyone (not just those with disabilities) to use it is also easier for them to buy from you. And often web accessibility really does make it easier for everyone to use the site and improves engagement.

So what do you do next? Well, there are some options; keep reading.

Key Areas Your Site is Failing at Accessibility

In the article at the top about a sued Shopify website, they identify key areas where your site is likely breaking the rules. (All of these are also shown in my own UX and Accessibility article.) These faults, listed in no particular order, apply to all website platforms:

  1. You use color as the only means to convey a functionality on the site, without a backup like text. This means colorblind people will struggle. Older visitors can also struggle if the contrast is too low.
  2. Primary keyboard navigation is not set up for your main navigation elements, which is necessary for blind users to use your site.
  3. Videos – no closed captions or don’t have transcripts linked.
  4. No alt and title information on images, so blind users are unable to understand what an image is.
  5. There are mistakes in your HTML code that make it harder for screen readers (the software that reads websites to blind users) to interpret and read your site.

Accessible WordPress Websites

I’m not gonna lie, WordPress is one of my favourite platforms. Although it started out primarily for bloggers, it has long become integrated to many business and e-commerce websites of all kinds and stripes. The WordPress Accessibility Coding Standards state that “All new or updated code released in WordPress must conform with the WCAG 2.0 guidelines at level AA.” You can read more about it or even get involved yourself helping out or testing code on the Make WordPress Accessible.

Accessible Shopify Sites

Use a Shopify theme that is accessible from the start. If you’re designing a theme yourself, then use the web accessibility standards WCAG 2.0 as a guide. This Shopify article on designing with accessibility in mind also gives some guidelines for what to do when using tables and pricing structures that you might find helpful. But be warned, if part of your accessibility goal is to be multilingual, you’re going to need more info: more here.

Accessible Squarespace Sites

Again, choose your themes wisely. Squarespace does offer some guidance as to how to make your sites accessible, and it’s pretty much the same as what I’m telling you in my UX and Accessibility (alt text, colours, proper use of headings, etc). In an older Squarespace support forum, I did find this answer re accessibility for visually impaired visitors using screen readers:

Squarespace’s templates are structured in a way that enables you to create a site that can be easily read and browsed by assistive software. They use HTML5 role attributes and microformatting to clearly define important elements on the page, such as navigation or header/footer areas, and use CSS in the design of your content, which provides flexibility in how your content is presented to screen readers. Squarespace’s help site has additional strategies for improving your site’s accessibility.

However, it also went on to say: “It’s important to note that some Squarespace elements may not be fully accessible.”  Augh!

Wix, Weebly, or other “free” drag-and-drop editors

I don’t normally have a lot of very nice things to say about these so-called freebies. Don’t get me wrong, they’re okay – but do you really want your website to just be “okay”? However, for the purposes of this article, it turns out Wix, at least, does make accessibility reasonably straightforward.

I don’t currently have any websites operating on Wix myself, so I can’t test this personally. But according to this Wix support article, it sounds like Wix tries to make website accessibility easy to manage, although you still have to hunt it down in your settings. Adding alt text, “turning on” keyboard accessibility and making sure your headers are correct are all shown very clearly in this article. They also offer a few theme templates that are accessible in that link. Again, I haven’t yet tested these templates myself, and I’m curious to know how well they perform.

At the time of this writing, Weebly doesn’t seem to be as up-front about their accessibility practices as Wix. In fact, all I could really find on their own support pages was a very generic reference to web accessibility with links to web accessibility evaluation tools. From what I could tell browsing through their community forums, there’s been a great deal of pressure this last year to improve, so perhaps they’re getting on the bus, so to speak. As of July 2018, they were advising clients on their Education version to add html code directly to their pages to address the lack of H1 heading labels, which is a pretty crummy workaround for the average non-webperson. Boo, Weebly.

So what do you do?

Step 1 – Audit.

Assess what the current compliance issues are and what level of effort is necessary to fix them. You might hire an agency to do this, or decide to run it yourself, but you need to make sure the team member leading the audit is comfortable with the various rules and has proper time to go through each element of compliance.

Evaluation Tools: WebAIM offers their WAVE evaluation tool, which may be a great start for you.

Step 2 – One-time fixes to address all the findings from the audit.

Step 3 – Change up your processes to make sure your website stays compliant.

This doesn’t have to be a big deal – it’s not that different from remembering to optimize your images before you upload them to your site. (You are doing that, right…??)

If this all seems beyond your time or capacity, or if you skimmed right down to the end because this whole thing just makes you tired, drop me a line and I’m happy to help.

Internationalization and your Website

What is Internationalization?

The word “Internationalization” is often abbreviated to “i18n”, which is a numerym. “i18n” is used because there are 18 letters between the ‘i’ and the ‘n’. Accessibility, by the way, uses the numerym “a11y”.

Following some research and webinars on internationalization and your website (thanks @elibelly and the Smashing Magazine crew), this is really a fascinating topic. It’s not new – there are web standards to help regulate it, and in fact a whole section devoted to it on W3C. But in terms of Accessibility, making your website available to all users is a pretty big deal. And that includes more than *just* language choices.

Access to the Web for all has been a fundamental concern and goal of the World Wide Web Consortium since the beginning. Unfortunately, it is easy to overlook the needs of people from cultures different to your own, or who use different languages or writing systems. If you do overlook those needs, you will inadvertently present barriers to the use of your technology or content for many people around the world – and even in your own area.

Localizers

Internationalization and your website even includes your cookies. Did you know that when your website is served to a visitor, your website is adapted to local language and culture in the target market? These are often (although not always) done via cookies. This is a whole lot more than just translating the language – although that can have pretty significant impacts as well (see my article here about Accessibility). So whether your visitor is in the same province, state or country, localizers will deliver the site based on their location – not yours.

Localization can occur based on your IP address, your server location, and sometimes even your computer’s OS. You know all those cookie notifications that you get on some websites? Localization is part of the service offered by those cookies. Among other things, it can help ensure that if you’re selling a product that’s available only in Europe, you won’t necessarily find it when doing a search from Canada.

Among the many technical elements which can be localized are: date and time formats, currency formats, number formats, address and telephone number formats, units of measure and connection speed.

Localizer Date Elements

internationalization and your website, calendar date format examples
See the map referenced at: https://www.atlasobscura.com/articles/map-mondays-wtf-is-wrong-with-canada-s-time

19/01/19 vs 01/19/19

The only reason you can figure this out is because we’ve passed the 12th date of the month.

Let’s take just one of those technical elements. Date alone can be enough to make you toss your desk contents in frustration. I published this article on January 19, 2019. So which date format above looks right to you?

If you’re in the US, congratulations. You’re one of the very few countries who use MM/DD/YYYY (month/day/year) as a standard format.  Side note: please tell me you’re not using the MM/DD/YY format as I did above for 19/01/19, which is even more confusing.  So, you might say I published this article on 01/19/2019.

In most of the rest of the world, the day is written first and the year last (DD/MM/YYYY) – ie., this article published on 19/01/2019 – although in some places like China, Korea and Iran, this order is flipped (YYYY/MM/DD) – or 2019/01/19.

Another side note: Americans themselves can’t decide which format to use, and have waffled back and forth throughout the last 250 years.

First and Last Name Requests

Naming conventions in the West vs in China.

Internationalization and your website even includes your basic contact form. A pretty standard form in North America asks for first name and last name, and makes those fields “required”. We don’t even really think about it. But in some countries, for example Indonesia, the Western naming practice of a given first name and a family  last name  isn’t used. So, faced with a contact form that requires them to enter something in the “last name” field is confusing and even rude.

And colour of those field entries should be another concern too. Maybe you thought having the font in your contact form show as red because you think it matches your colour palette. But in some countries such as China, Japan and Korea, you should never write the name of a living person in red ink. And don’t be tempted to write this advice off just because your website may not be serving visitors who live in those countries. What about the Chinese, Japanese or Korean (or more!) folks living or visiting in your target area who will see your website?

Left-to-right and Right-to-left

Internationalization and your website also has to include linguistic and cultural issues. For example, a sentence that is constructed by combining several phrases together in one language may be impossible to translate sensibly in a language with a different sentence structure.

For example, in the Japanese translation of “Page 1 of 34” all elements in the phrase would be in reverse order. Your application must not restrict the order in which these elements can be combined.

Specifications for technologies such as widgets and voice browsers should also avoid locking developers into an English-biased syntax for such things as composing messages or firing events associated with text.

Graphic illustrating order of words between English and Hindi.
Graphic illustrating order of words between English and Finnish

Now, some of this is beyond what you might get into if you’re working as a designer using pre-made platforms like WordPress or Shopify. But maybe you need to check and make sure those platforms are doing as much as they can to ensure these accessibility practices are being followed.

But symbols are okay, right?

A circle may represent ‘yes’ in Japan, and a check mark ‘no’.

Oh boy, no! Symbolism (just like emojis – haven’t you ever been confused by what an emoji means? They even render differently on different devices!) can be culture-specific. For example, the check mark means “correct” or “OK” in many countries. In some countries, however, such as Japan, it can be used to mean that something is  incorrect. Japanese localizers may need to convert check marks to circles (their symbol for “correct”) as part of the localization process. 

The point of all this is that design – whether we’re talking about a website, a widget on a website, a web application, or a whole content management system – needs to be flexible enough to accommodate local needs. And to have an accessible website that complies with true #a11y, then #i18n is a critical component.

UX Design & Accessibility

Accessibility should equal  Usability for all.

A design is only useful if it’s accessible to the user:  any user, anywhere, any time. We often mistake the concept of accessibility as involving people with disabilities. But accessibility is simply a function of access. If UX is your user’s experience, then an accessible UX just means that more users can have a positive digital experience on your website. And that means a more positive experience with your company.

The good news is that there are standards for accessibility, and these are easy to understand. Better still, if we consider them at the start of the design process, we’ll find them easy to implement. People with a visual impairment, for example, may not be able to read the text on your website. However, if you have properly formatted your text, they’ll be able to use screen reading software to  hear  your words.

And think about interaction with your site’s content. Is important content only contained in buttons or images? That might hide them entirely for someone who can’t “see” them the way you can. How will a user with limited vision or limited physical mobility figure out they need to click on that button or image?

Designing for accessibility takes some forethought. Examine your options in the planning phase and stay focused on accessibility throughout development. It’s easy to get caught up in the substance of your work and forget about this essential point. Keep it in mind, and test your designs often to be certain that your efforts are successful.

Types of User Needs

We are all, designers and users, different.

Language

Is your website targeted to just one locale or geographic area? That doesn’t mean that the design you do say, in English, is only going to be read by English speaking people. Did you know that only about 25% of web users speak English as their first language? What happens when your site is translated?

If you’re using designs that are built by others, make sure they’re “translation-ready”. If you’re determined to use one that isn’t translation-ready (for goodness sake, why not??) check into third-party options to provide that support. For WordPress sites, there are plugins available that offer translation (check this out). Depending on the plugin you choose, please remember to include language switchers in the header or footer so visitors not only know they have an option but they can choose their preference easily.

Visual

Long-sightedness, blindness, colour blindness, are all forms of visual abilities you should consider in your design. What you can check for:

  1. Colour contrast. Ensuring your text and buttons have significant colour contrast is a pretty simple method. Here’s one simple tool.
  2. Don’t rely on colour changes for visual cues. When showing errors on the screen, add an icon or include a title to the message. Consider adding a visual cue such as font weight or underline text style to linked text in a paragraph, so the links stand out. And if you need to include graphs and charts, try making them in black and white first to see if you can still understand them.
  3. Use focus indicators. Have you noticed the blue outlines that sometimes show up around links, inputs, and buttons? These outlines are called focus indicators. Focus indicators help people know which element has the keyboard focus and help them understand where they are when navigating your site. These are great for visual and mobility impairments including carpal tunnel injuries – AND for those who navigate websites using their keyboard instead of a mouse!
  4. Write useful alt text for images or other non-text content. People with low vision often make use of screen readers to “hear” the web. These tools convert text to speech so that the person can hear the words on a site. So make it descriptive – not just “picture”, your camera’s default title “IMG_date_size.jpg”, or even worse, a long string of numbers and letters.

There are two ways that you can present alternative text:

  1. Within the <img alt=”text“> attribute of the image element.
  2. Within context or surroundings of the image itself. 

This needs to be done even if the image is purely decorative or if it creates redundancy because the surrounding context already explains the content. Having an empty <img alt=”text“> attribute will make screen readers skip it. If you don’t write any alt text, some screen readers will read the file name to the individual. That’s the worst experience you can provide.

Pro tip: Your SEO can benefit from your alt text too!

  • Don’t forget your font choices too – check my article here for basic guidelines.

Motor/Mobility

This category doesn’t just extend to problems with the use of the  hands  and/or  arms  (which are very likely to cause problems with web accessibility), but also with other muscular or skeletal conditions. If, for example, your company were to feature in a trade-show booth, you’d need to consider how someone in a wheelchair could access that booth, and turn around and exit it on completing the task. So why wouldn’t you consider your website navigation similarly?

What you can check for:

  • Support keyboard navigation. Keyboard accessibility is one of the most critical aspects of web accessibility. People with motor disabilities, blind people that rely on screen readers, people that don’t have precise muscle control, and even power users are dependent on a keyboard to navigate content.
  • Focus indicators (as Visual #3 above)
  • Accessible forms. Users who cannot use a mouse navigate web pages with the keyboard. Forms that use JavaScript to manipulate form data, set focus, change form elements, or submit forms, can create interactions that only work with a mouse. Ensure that your web site forms can be understood and operated with the keyboard alone.

*People who use screen readers usually navigate through a form using the Tab key to jump through the form controls. The label elements are read for each form control. Any non-label text, as placeholder text, is usually skipped over. Read some more guidelines.

Keyboard navigation throughout the website

Many folks will choose to skip the mouse and use the < Tab > key on your keyboard to navigate through interactive elements on a web page: links, buttons, or input fields.

As you navigate through a page, the order of the interactive elements is essential, and the navigation must be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom, header, main navigation, content buttons and inputs, and finally the footer.

A good practice is testing your site only using a keyboard. Use the < Tab > key to move through links and forms. Test using the < Enter > key to select an element. Verify that all the interactive components are predictable and in order. If you can navigate through all your site without a mouse, you’re in a good spot!

Auditory

Do you post lots of videos on your website or social media? The easiest thing you can do is add  Captions, captions, captions!  Auditory disabilities affect the hearing and come in varying degrees of severity, up to and including total deafness.

But guess what else is affected – how you visit websites while in public areas. Sometimes reading the captions is just more polite than forcing everyone around you to listen to your video.

Learning

Learning and cognitive abilities can also influence accessibility. Do you regularly write content that you’d need a university degree to comprehend? There are lots of tools available to help make sure your written content is easy to understand. Having said that, it can be very difficult to translate technical language into an accessible format, and there may be occasions when it just seems impossible, or when that language is necessary (for example, in a blog post).

But if you’re trying to capture the attention of a busy, multitasking individual on your homepage, you might want to consider simplifying your message.

Multitasking

Think about  yourself  as a user. Do you ever try to use your cell phone while you’re walking around? And no, I’m not just talking about texting and walking (watch out!)

How does it feel when you’re trying to multitask? How about when you’re looking for a business on your phone, your kids are yapping at you or each other, and you’re trying to find their address or phone number directly from their website? Do you abandon the website and try something else instead – or abandon the potential visit in frustration?

Designing Accessible Websites

As designers, we have the power and responsibility to make sure that everyone has access to what we create regardless of ability, context, or situation. The great thing about making our work accessible is that it brings a better experience to everyone.

There’s a myth that making a website accessible is difficult and expensive, but it doesn’t have to be. Designing a product from scratch that meets the requirements for accessibility doesn’t add extra features or content; therefore there shouldn’t be additional cost and effort.

In fact, it should be a no-brainer: an accessible website is easier for everyone to visit, not just for visitors with disabilities. It also improves your SEO, search engine optimization, and it can even include making your website deliver faster, which is great for visitors with unreliable internet speeds.

Fixing Existing Websites

Fixing a site that is already inaccessible may require some effort, though. If you do a quick search for accessibility checks for website, you’ll find a range of options available, most of them for free. So there’s no reason not to at least check your website and see how it ranks.

IDI Web Accessibility Checker: https://achecker.ca/checker/index.php

I used the one listed above to check my own site while writing this, and was both happy and disgusted to be told that I have “only” 13 errors on my homepage. Luckily, those were relatively minor and I fixed them quickly and easily. BUT it also told me I have 371 potential violations (yikes!)

Conclusion

As designers, it is our responsibility to champion accessibility. It is often forgotten or merely added as an afterthought. But with accessible design, we make technology usable to all people regardless of their abilities, economic situation, age, education, or geographic location.

Design responsibly. Make the online world better, for everyone.

Geek out some more with some of my other articles on web accessibility here: