Web Design Trends And Accessibility

The year is 2015. Web design is not like it used to be.

Nowadays, many websites are criticised for looking and feeling similar to each other. The website of company X might look almost identical to company Y’s website. Why would people create sites that look just the same as every other site, you might ask? Well, design templates might be one of the culprits. In addition, there are a couple of trends in web design these days that might be to blame.

Now, I’m not here to bash on all those familiar-looking websites. Instead, I’ll be taking a look at some of the most prevalent trends, and see how nice (or not nice) they play with accessibility. After all, content was king in 1996 and to this day still is, and a website that doesn’t serve its content in an accessible manner, is a failing website. Okay, enough banter. Let’s get to it.

Accessibility

“It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with diverse abilities.”

This is a quote from the World Wide Web Consortium’s accessibility standard. They go on to explain that “diverse abilities” includes people with disabilities, elderly and those living in rural areas or developing countries. So what does this mean? It means that it shouldn’t matter whether a person has a certain disability or is 90 years old. He/she should still be able to access the content of your website.

Still not convinced that accessibility is a big deal? How about this: The UN has recognized access to the web as a basic human right. I mean, it’s up there with free speech, how much more of a big deal can it get?

Now that we all know what accessibility means and we all agree that it’s important, let’s see how some of the currently most popular web design trends respect it.

Responsive Design And display: none;

Perhaps the most prevalent of all trends, more or less a best practice by now, responsive design is all about making your site usable across various devices and screen sizes. In and by itself, responsive design doesn’t really affect accessibility. However, many designers decide to remove content on the mobile/tablet design of a website to save space, only displaying it on the desktop design. Without getting too technical, they use the display: none; property in their CSS. This not only visually hides the content, it hides the content from screen readers as well. If you were to try and access this content with a screen reader, you’d be out of luck. Now, if the content isn’t visible on the screen, why should screen readers have access to it, right? Well, not exactly. Imagine a FAQ-section of a page; a bunch of questions listed below each other. To see the answer to a question, you need to click the question. For someone who can see the question and is able to click it, no problem. However, if you use a screen reader, it’s probably because you can’t see the page content all that well (or at all). Chances are you won’t be able to click the question. As a result, the answer will never be made visible.

So what can we do to visually hide content, but still have it accessible to screen readers? Web standards advocate at Microsoft, Aaron Gustafson lists a couple of techniques. Again, trying to not get too technical here, but using position: absolute; left: -999em; in your CSS seems to be his choice of technique. So basically, instead of actually hiding the content, the content is just moved off-screen.

The same technique can be applied to form labels. They need to be accessible to screen readers. I can not vouch for this story, but Chris Coyier over at css-tricks.com tells of a blind girl who was going to apply for college, but the form was missing label elements. As a result she didn’t know what information to put in what fields. I am not blind myself, but I can imagine this was a less than decent experience for the girl.

Hamburger Menu

Minimalistic design has come and gone as a trend in many design disciplines through the years. In web design, one approach to being minimalistic is hiding the site navigation behind a menu resembling a hamburger. Three short lines, vertically stacked above each other, that when clicked, display the site navigation. The site navigation usually comes sliding in from the edge of the screen, meaning that it’s actually using the technique from the previous paragraph; it’s not hidden, just moved off-screen. Therefore, screen readers should have no problem with it. However, there’s a constant discussion whether the hamburger menu is a blessing or a curse. Yes, it saves space, and in my personal opinion, looks nice, but is it understandable? As many mobile applications use similar menu solutions, one could argue that for the younger generation, who surrounds themselves with mobile applications every day, the hamburger menu is no problem.

However, accessibility involves content being accessible for all age groups. Many elderly are not used to using the web at all. Most likely they would have no idea what the three lines mean. As with everything, there are exceptions; some elderly might have no trouble with the menu. Now, I don’t have the solution to this challenge (I guess no one does, yet. That’s probably why people are still discussing it) A general rule of thumb would be to:

  1. Consider your target audience. If elderly, or others you might think doesn’t know the hamburger menu, makes up a large part of your target audience, chances are the hamburger menu is not the way to go.
  2. User test. Perform some simple user testing to see whether people understand how to use the hamburger menu.

There is another obvious accessibility challenge with the hamburger menu as well. Just by being positioned off-screen by default, navigation options are hidden. As they say: “Out of sight, out of mind”. It can be cumbersome to tell what your navigation choices are, or where on the website you are currently at, when the navigation is hidden behind a button click. This is something a designer needs to be aware of, and weigh against the positives, before deciding to use the hamburger menu or not.

Long Scroll

The constant increase in mobile Internet usage has brought with it a design trend; the long scroll. Earlier, when the Internet was mostly accessed through desktops and laptops, designers tried to avoid forcing the users to scroll long distances to see content. You might have heard the term “Above the fold”? Originally used to refer to the most important or eye-catching story in the newspaper, that would be placed, well, above the fold of the paper, where it would be most visible. For a long time, a lot of web designers tried to follow this “rule”, by placing the most important parts of a website above the fold of the website, that is, the part of the website you can see without scrolling down. Occasionally this resulted in a bunch of content crammed together at the top of the page. However, mobile devices has resurrected our (including designers) acceptance of scrolling. Social media with their constantly updating feeds of information deserve a lot of credit for this. So, instead of placing pieces of content on their separate pages, many websites now put a lot of information further down (below the fold, imagine that!) the page instead.

How does this relate to accessibility? Well, when you need to scroll down the page, you usually have no idea what information to expect. It’s kind of a “let’s scroll and see what I find” situation. When content was split up over several pages instead, you’d have to click on a button or menu item (aka hyperlinks) to get there. Usually this hyperlink would be labelled according to the content it linked to, giving you an idea of what information to expect to be presented to you. In this case it’s more of a “I want to find contact information so I click the contact button” situation. This means that long scrolling is probably best used for sites where the users have no apparent goal other than to “see what they find” (social media is a good example of this). For sites where the users have a concrete goal, long scroll might considerably reduce the accessibility of the content.

Long scroll, depending on how it’s used, might speed of the use of websites. Clicking around takes time. Not only do you first have to find the hyperlink you’re looking for. You also have to wait for the new page to load, then reorient yourself on that page. Now, this might not be directly related to accessibility per its definition, but it’s still an important factor to keep in mind when setting up the information architecture of your site (which does relate to accessibility).

Summing it up

As you can see, trends are cool and all, but they do come with a few accessibility caveats that all designers should be aware of. After all, what’s a cool looking design without content that can be accessed? Before I end I just want to stress that there are many other design trends as well that require extra thought when it comes to accessibility. The three I’ve mentioned in this post are just some of the more popular ones at the time of writing. Now, go create your accessible website!