Adobe Creative Cloud

September 22, 2015 /

Making Your Website Design Accessible – Here’s What a Blind Accessibility Expert Has to Say on the Topic

Website accessibility is a tough topic. On one hand, there’s a lot of what can be considered common knowledge advice. But on the other, we felt that if we’re going to cover it, we need to go above that.

That’s why we’ve reached out to a blind accessibility expert and asked him for some actual real-world advice.

But hold off on that for a second. Let’s start somewhere else.

There’s only us here, so let’s be honest. Making a website design accessible does seem like a pain. Or additional work, at best, that you won’t necessarily get rewarded for.

Therefore accessibility is not immediately on our mind when we’re sitting in front of a blank screen and being work on a new project. We tend to focus on other things … what the logo should look like, how to design the content presentation, which layout is going to be effective.

This is understandable. I’m not judging. At the end of the day, the client is going to be much more concerned with all of that, than they will be with accessibility.

However.

Perhaps this isn’t the best path to follow as a web designer.

Perhaps we should step back and really notice the big picture … the picture of making sure that whatever we create should make the web an overall better place, and not just serve as means to an end for our client, or whatever purpose we’re building the site for.

The topic of web accessibility should be treated as crucially important. In fact, in some jurisdictions, it is mandatory by law for public websites to be accessible (to abide to the Web Content Accessibility Guidelines – WCAG – 2.0 – something we talked about a while ago on this blog). In most small business scenarios, things might not be as brutal, but they’re still worth thinking through and looking into closely.

In simple terms, a business with an inaccessible website is losing opportunities and underserving their customer base, which is never a good long term strategy.

So to understand the topic better, we’ve sat down with Bartek Lenarth – an accessibility expert from Poland, running his practice over at Dostepnosc.net (“dostępność” is Polish for accessibility) – and asked him a number of questions related to how we – designers – can make our websites more accessible.

dostepnosc

A little backstory:

Inaccessible websites is something that Bartek has been dealing with since the late nineties. As a blind person, he couldn’t consume website content like everyone else did, so he had to rely on screen reading software and other aids to get to the info he needed. Over the years, he’s learned a lot in regards to how an accessible website should be built and what to avoid during design and development.

Nowadays, Bartek helps businesses and gov institutions by testing and auditing their websites, pointing out what’s wrong, and suggesting possible improvements to make those websites accessible to everyone. In other words, he’s the perfect guy to give us a lesson here.

Here’s my talk with Bartek and the insights he shared:

Me: How many websites do you interact with that are difficult to navigate? And how severe are the problems on them?

Bartek: Luckily, the number of such websites has decreased in the last couple of years, but there’s still a lot of them out there.

I try not to share any specific numbers, as they don’t present any real insight (after all, the web is huge, so who knows what percent is inaccessible), but in general, I am not surprised at all to stumble upon a website that I can’t read on a daily basis.

When it comes to the issues, some are minor, but others prevent me from accessing the website entirely. The worst case scenarios are when an otherwise well-built website becomes completely inaccessible due to one “small” error. For instance, having a poorly executed CAPTCHA feature is often to blame.

If I had to, I’d say that around 10%+ of the websites I come across suffer from this sort of complete inaccessibility due to various “small” errors.

Why do you think so many sites are still inaccessible? Do site owners not see the benefits in having an accessible website? Or maybe there’s another factor at play here?

I think that the problem is more in development than it is in design or business goals.

For instance, not every developer realizes that a blind person might even use the web in its standard form – through a standard web browser and on a normal computer.

Sometimes when I try to point out that a given website doesn’t support navigating/browsing with a keyboard, I get asked, “Who even uses a keyboard to navigate a website these days?!” Well, blind people do. When you don’t use a mouse for obvious reason, what else is there if not the keyboard?

Every website from years ago could be navigated with a keyboard, why change this? Just to be “modern” for the sake of it?

What main problems do you encounter on websites these days?

Just to name a few really serious issues:

CAPTCHA codes. Those are a serious obstacle to anyone with any sort of vision impairment. After all, the principle of CAPTCHA is built around the assumption that the user is able to notice something and then describe what they see. Not everyone will pass such a test.

No keyboard support. If there’s no focus then I can’t navigate the website at all.

Documents and text saved as graphic files. Really, please use properly crafted PDFs instead of graphics. And don’t even dare to scan a document and save it as JPG.

Low contrast. Using it, you’re alienating a lot of users. Although screen reading software will cope, some people with certain vision impairments won’t be able to read your content.

Not using the HTML structure properly. H1s, H2s, paragraphs, block quotes, etc. Those were all invented to structure the content on the web properly. Please use them. Screen readers are perfect at recognizing the HTML structure and thus making the content of a webpage accessible.

How to test our websites for accessibility on our own if we don’t have an expert at hand?

Well, I do agree, having an expert at hand is the best approach here, but there’s still a lot that every designer or developer can do on their own.

The first thing you can do is perform an accessibility test through free tools like IDI Web Accessibility Checker, WAVE Web Accessibility Tool, or Cynthia Says. The downside is that the test can only be performed once the website is online.

achecker

Those types of tests also require the person to know how to analyze the final report, which isn’t always that obvious. The tools tend to generate a huge list of errors and issues. Some of those issues aren’t really that important and have very little impact on the overall accessibility of the site. Like with most things, there’s theory and then there’s practice, and the two aren’t always the same.

To get better results, you can start looking into paid tools and solutions, such as those provided by PowerMapper or based on Tenon.io.

powermapper

The other thing you can do, setting all those specialized tools aside is going the old school way and simply experiencing your website like a blind person would – through a screen reader. You can use a free one, like NVDA, or try some demo versions, like JAWS (not the movie).

nvaccess

They’re quite easy to use and can be mastered relatively quickly. How to test with them? Simply navigate your site with a keyboard (the tab key, arrows, etc.) and listen to what the screen reader tells you. Did it pick up on everything? If so, good job!

Also, can you reach every element on the page freely just with the keyboard, without using the mouse? Can you click without the mouse? Can you cancel a pop-up? Get deep here.

And really … if the project is of the high budget variety, contact a specialist, don’t try doing everything yourself. Sometimes even the smallest site element can render the whole page inaccessible. It’s easy to overlook things like that when you’re on your own.

Editor’s note. Also, don’t forget about our two in-house resources: our accessibility central, and our accessibility blog.

You did mention CAPTCHA to be a frequent troublemaker. What other small elements we need to be careful with while building a website? 

The most common problems are things like standard text content displayed as images. Even though this might sound like something people don’t do these days, many restaurant menus, for example, are still presented as images. Those are completely inaccessible for people using screen readers. Not to mention that those types of images oftentimes scale very badly on mobile devices.

The other thing I already mentioned is the lack of focus on the page, which is making keyboard navigation impossible. And this doesn’t only involve people with vision impairments. People with movement coordination problems prefer using keyboard than mouse as well.

Editor’s note. Here’s an example of good practice; even though it has its own problems, keyboard support works well at Gmail; they even have a visible cursor:

gmail

Low contrast. This one should go without saying, but for some reason, low contrast (text and background) is still considered an acceptable and good-looking design taste. When in fact, low contrast is a problem for more people than we’d like to believe it is.

Another thing, pop-ups. Basically everyone hates pop-ups, so they seem kind of obvious as something that’s not very accessible. But this is also about many types of soft pop-ups – the non-aggressive ones. For instance, a pop-up doesn’t need to take up the whole screen to be inaccessible. Sometimes even simple slide-in blocks are equally as troublesome.

Editor’s note. An example of this kind of pop-up over at Incapsula.com:

incapsula

And finally, the new evil … autoplay videos. The difficult part here, at least for me, is that I can’t quickly locate the video player, and also not all of them respond to keyboard control. So all I’m left with is some video playing in the background that I can’t interact with in any way.

What about individual site elements like forms, drop-down menus, etc? Should we treat them in any special way to make them accessible? Are there any simple methods that we should stick to?

There’s just one main rule when it comes to accessibility: Stick to the standards and the decade-old practices, and everything will be okay. (And if not everything, then at least most of it.)

The thing to remember is that websites are used by various people. People who might not be in the same situation as yourself. People who might have to deal with various disabilities or other difficulties that make browsing the web tougher for them. Why make their job even more difficult? Just so a site element can be 5% more visually pleasing?

Setting disabilities aside, we also have to realize that not everyone has the newest PC or Mac at their disposal. A lot of people – especially in developing countries – use older hardware, yet they want to be able to access information just as much.

So I guess the simplest advice I can give is to always think about other people and never assume that someone has a given tool or ability at their disposal.

The internet was meant to provide easy access to information. Don’t let your design stand in the way of this principle.

In other words, don’t be creative where you don’t need to be creative. Let a menu be simply a menu. Let a form be a form. Do you really need that CAPTCHA? Is removing spam entries really that of a chore? Why not let everyone in and then filter the inputs afterwards?

Is there anything specific we should know about mobile accessibility? Are there any differences?

Not really. The same rules apply. Mobile systems do whatever they can to emulate the desktop experience when it comes to consuming web content, so there’s nothing specific to do here.

Where do you see the space of web accessibility heading?

In general, a lot of things have changed over the years, and the direction is overall very positive.

Some years ago, we experienced a major revolution, where simple sites suddenly became very complex graphically, using a lot of animation and overall purposeless elements. They played music, they sung … a lot of bells and whistles (literally). This was a dark age for web accessibility.

But now, things are a lot better. The overall principles of what’s known as flat or material design make things a lot more readable for me, for every other blind person, and for everyone struggling with this sort of difficulties in general.

Things going back to simple again is possibly the best scenario that could ever happen for web accessibility.

And the business world seems to begin understanding this as well. Various business owners are now ready to invest in having proper websites built. The same thing goes for various web-based products and tools too. Accessibility is now a viable business strategy, and rightly so. (Editor’s note; for example, investing in accessibility is something that Ionut Neagu – the CEO of CodeinWP – pointed out in his transparency report as the next big focus for his business.)

Finally, let’s not forget that website accessibility also contributes to the site’s position in Google. Simply speaking, the easier things are to read, the more Google likes them. When we get down to it, common screen readers used by blind people are very similar to Google’s own bots and crawlers. In other words, you can bet that if a screen reader can’t read your site then Google won’t be able either.

I’m an optimist. But as I said, we’re not quite there yet in terms of having an overall accessible internet.

The takeaways

I’d like to take this opportunity to thank Bartek once again for taking part in this interview! That was a lot of great info, and surely something worth thinking about when working on next website designs.

The main takeaway for me is this: details matter more than anything else.

You can have an overall great and simple design, but if you put a poorly coded CAPTCHA on top of it, the whole site can be rendered inaccessible. The same thing goes for drop-down menus, and other small traps that might not even be noticed by the average user.

If you need an in-the-nutshell lesson? It’s this:

Embrace the old school.

Embrace the way people used the web a decade or two ago. Embrace the keyboard. It’s still a more efficient tool to navigate around certain web interfaces than the mouse (just go to Gmail and see for yourself – start with the arrow keys and see what happens).

Embrace the common web standards. Use the HTML headers as they were meant to be used (H1s, H2s, paragraphs, block quotes, emphasis tags, and so on). It makes screen reading software’s job possible.

And most importantly of all, if an element’s only purpose on the page is to look good, then you’re probably heading the wrong way.

Join the discussion

  • By Mark Thomas - 1:17 PM on October 17, 2015  

    Everything in proportion makes things look perfect. Thanks for sharing such an informative post. Its now easy to test our website even when an expert is not available .

  • By John George - 1:18 PM on October 17, 2015  

    Everything in proportion makes things look perfect. Thanks for sharing such an informative post. Its now easy to test our website even when an expert is not available .

  • By parash thapa - 8:00 AM on November 12, 2015  

    thinking about how to make website in mobail then what would you do.????