Blog

We work on the Internet and are constantly consuming information. There's a lot of it out there. We'd forget it if we didn't write it down someplace…

Visual Lizard's blog covers everything from web standards to the muppets, from php to comic books to music, just about anything we find interesting

User Interface and Accessibility

Over the past five or six years we have seen a steady push toward quality accessibility in websites and web applications. From a development point of view this can initially look like a way to stifle creativity. A better way to look at it is an opportunity to come up with creative ways to implement a user experience that includes everyone.

For programming we have taken this accessibility to heart. We have developed our Catalyst CMS to start with accessibility as a default feature. We include keyboard based tab navigation, semantically correct html formatting, and we follow the W3C standards for accessibility for imagery, audio, and video. With these items available from minute one of development, it means that we are making sure that those with visual and physical disabilities are primary considerations as our projects progress.

What we have noticed when it comes to other CMS platforms is that their functionality takes an approach of being everything for everybody. Some of the accessibility requirements sometimes fall by the wayside, especially with open development for plugins and themes, third party developers do not always follow the standards that the core CMS developers require for their platforms. As a result, we see considerable inconsistency with the level of accessibility in sites and applications developed on these platforms.

When designing and developing with accessibility in mind, it forces the designers and developers to think through more thoroughly what features that would be considered cool, or really good marketing gimmicks. These elements may actually be a hinderance to the audience who cannot see or physically interact with an interface in ways that able-bodied audience members can.

When clients and designers are coming up with user interface ideas, we have seen concepts that look amazing and would be a real challenge to create. We then put on our accessibility advocate hat and look at those same ideas and we then need to torpedo the design. When I say torpedo, we are not giving the client or designer a hard no. We feel that it is important to bring up these accessibility issues so that our clients and designers are aware of how some of these interface ideas may leave out a portion of their potential customer or user base.

Here is a short list of things that we have noticed over time that should be considered to make for a better user interface experience.

  • Pop-ups and modals. Clicking or tapping an interface element that opens a layer above the primary interface can be a hinderance to how the user interacts with the page. A person with a visual disability needs to be informed in some way that a pop-up or modal has opened in a layer above the rest of the page and that some form of action needs to take place to either close the pop-up or interact with what has appeared in the pop-up in order to return to the rest of the site.
  • Small design elements or copy. If the copy or design elements are very small, it may be hard for a person who has a visual disability to read the copy, or if buttons and design elements are small, audience members with physical disabilities may not have the fine motor skills to position the cursor with precision.
  • Backgrounds and text colour. A busy background image with varying colours with copy over it can be extremely difficult to read. Background colours and copy colours that do not have enough contrast can have the same issue.

If you are like me, you really do not like automated pop-up elements. The ones that bother me the most are the ones that wait about a minute before they appear. You're in the middle of reading or watching the content you are visiting a site for, and right in the middle of your reading or viewing a pop-up or modal block appears causing you to lose your place or miss the specific moment in the video that you wanted to see. You are forced to stop and dismiss or interact with the pop-up before you can continue. Now imagine if you have a visual disability and your screen-reader is reading you an article, and suddenly it stops. If the modal doesn't somehow provide the screen-reader with information about what it is and why it is there, the user is not going to understand why the screen-reader stopped reading the content.

Imagine you have a disability like Cerebral Palsy. It is already difficult for you to interact with the base web page interface and now you required to move the cursor to the close link on the popup before you can continue reading.

I've used some pretty specific examples of where certain elements can cause difficulties. These examples provide glaring examples of why accessibility in user interface and design development needs to be a high priority.

Designers and Developers have a history of coming up with ways to help with accessibility. One of the best examples of this was having a font-size changing tool in the interface. It was a good attempt to make a website or web application accessible. Now however this is no longer required. Modern web browsers have zooming tools to increase font sizes. If an interface is designed properly, it takes advantage of the accessibility features of the browser itself. When developing with accessibility in mind, remember to work smarter, not harder. Since the browser can handle things like font-size changes, developing a stylesheet with font-sizes that are relative rather than absolute means the interface design can flex to work with the user's needs. It is important that our interface adapts to the user, and not the other way around.

Another item you may have noticed or wondered about. Autoplay of video or audio. We have been asked time and again about autoplaying videos (not so much for audio). The standard now is that autoplay is not acceptable. There are several reasons not to have autoplay in a web browser. Most of us don't want to be caught out watching movie trailers when we're supposed to be working. But the accessibility reason for this is about it being up to the audience member as to whether or not they want to watch a video or hear an audio clip. If an element autoplays, then the user has to start searching around to find out how to pause the media that is being played.

From a marketing perspective we understand that need to drive traffic to a product, service, or promote content. From the audience perspective however, this can be a distraction or an intrusion on their senses that they did not want. The audience wants to be on the site, but if they are inundated with unwanted visual or auditory stimuli the fastest way to make it stop is to close the tab or browser window. As a marketing person that is the last thing you want. Accessibility also means that the audience is provided the choice to listen to or view media. The audience doesn't want it forced upon them.

As the internet continues to evolve, we are now seeing a push by governments to legislate accessibility. So going forward keeping accessibility in mind and developing interfaces to be accessible means that your designs and your websites are ahead of the game and you won't have to go back and retrofit or rebuild.

Recommended Reading - A Book Apart: Accessibility for Everyone by Laura Kalbag

If you are having trouble with accessibility on your website or web application, please get in touch and we would be happy to help you out.

Holiday Break 2020

Happy Holidays everyone! Visual Lizard will be away from regular office duties for our annual break starting Dec 23, 2020. We will return Jan 04, 2021.

During that time servers will continue to be monitored 24/7. We will have intermittent access to email and phone. If anything should come up, please reach out via email to staff@ or call the office, 204-957-5520 and press 0.

And since we are all still social distancing and working from home, we dusted off the old Christmas Music Player. Enjoy!

We wish everyone inner peace, time to reflect, regroup, and energy to comeback together in 2021 with a renewed respect for each other, for the planet, and for everyone to start looking forward, rather than clinging to ways of the past.

Good riddance 2020 and Happy New Year!

“Click here”: You can’t tell me what to do!

For many years now it has been a personal sticking point for me that content writers for the internet continue to use expressions like “click here” or “click link” for anywhere in their content where they would like their audience to visit. Back when the internet was in its infancy this was a way for content creators to help their audience recognize a hyperlink to another page or website.

Many years later, with strong design skills being applied to designs across the webscape, we as developers have found it important to try to apply some standards to how content is presented. We still need to find ways to display hyperlinks to the audience, but those old terms are no longer required, or in some cases do not make sense.

There have been many articles written about why the term “click here” should no longer be used, and this includes the organization that promotes standards on the internet (W3C). This example provided the reasoning behind not using that old term. Not least of which is that it makes for easier reading.

Some people say that the reason they use “click here” is because everyone else does. That doesn’t make it best practice. Mark Caron’s Don’t use “click here” at medium.com expresses the reasons not to use it quite well, including the photo following the second paragraph.

One of the most important reasons not to use “click here” is for the accessibility reasons. People who have visual disabilities rely on technology that reads the content of a web page. This technology is amazing, but it can literally only read what it sees. Its artificial intelligence does not have the ability to interpret what it is seeing in the greater context of what is around it. It cannot tell the audience member who is listening to it that the “click here” it is reading is going to a page with relevant information, or if it is going to a page containing videos of cats in boxes (who doesn’t enjoy videos of cats in boxes). The wording used for hyperlinks should be more robust and relevant to the content that will be appearing rather than a demand that the audience interact with the content. As an example let's look at how a screen reader would interpret a link using "click here", and the same link using a context based approach.

  1. Click here for this article in Smashing Magazine about reasons not to use "click here" goes into this aspect of audience interaction.
  2. This article at Smashing Magazine about reasons not to use "click here" goes into this aspect of audience interaction.

In the first example, the screen reader is going to read out the following: "Link: Click here". This is then followed by what the person will be reading when they do click the link. The written context is there in this example, but it is not part of the hyperlink itself. It requires the audience member to interpret what is being read to them.

In the second example, the screen reader is going to read out the following: "Link: article at Smashing Magazine about reasons not to use "click here"... This is followed by some further detailed information about the article to which the link is associated. In this case the audience member doesn't need to interpret what the link is from its surrounding content. They can determine the context of the link by the words of the link itself.

The point being that while the content surrounding the “click here” may help a person interpret where that link may go, a person who cannot see that content doesn’t have the information to help them decide if the hyperlink is immediately worth clicking.

My significant other is an independent writer. She has told me that the majority of her writing colleagues see and use “click here” prolifically. The majority of their marketing is done online through websites and social media. When I brought up this issue, she was shocked at how much of an audience that she and her other writing colleagues could be missing out on by not following a practice of using context rich hyperlinks. Many of her colleagues write for their own websites as well as creating newsletters and cross-promotion blog articles with other writers. This article by Stephanie Leary is written from the point of view of a writer who works in WordPress, a platform used by a significant population of content creators.

This post has been focused mostly on the design and accessibility reasons not to use “click here”. From a user experience perspective, another reason not to use “click here” is because the consumption of web pages is no longer always in front of a screen with a keyboard and a mouse. The audience is more and more likely going to be interacting with content through a tablet or a phone. The Smashing Magazine article that was mentioned in the example above goes into further detail about how audience interaction is no longer restricted to one interaction style.

The articles that have been referenced here are all from years past, so this is not a new concept. I know this won’t change anything immediately… because it hasn’t yet… but by giving you the information we educate and inform.

Photo of kids sticking their tongues to a frozen flag pole. Credit: Matt Hollingsworth

Covid-19, Work From Home and Social Distancing

If you haven't been paying attention, or aren't taking this seriously, you should watch:

Visual Lizard will be helping flatten the curve by working from home over the foreseeable future. If you need to get ahold of us, please use basecamp, email, or the contact form.

Visual Lizard Will Be Reducing Our Office Time Considerably And Working From Home

Take care of yourself, help others if you are able, and listen to what the experts are telling us needs to be done. Stay safe, and remember that we are all in this together.

Government of Canada UPDATES:

Support for Business during Covid-19

Daily sars-cov-2 case counts in Canada

MB Government and MB Health UPDATES:

March 20, 2020 - Manitoba Government declares state of emergency. No gatherings over 50, 2m social distancing at all times, bars and restaurants can stay open, but no more than 50 people in the building at one time, same with stores that chose to remain open. See CBC news story for MB Mar 20 2020

MB GOV tracking all flights with confirmed COVID-19 cases

NorthForge/MB Gov setup a volunteer to help if you can (or request help if you need it) site

Economic Development Winnipeg has put together a very excellent resource for businesses during the Covid19 pandemic

Daily Links

Daily Links

Daily Links

Daily Links