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
Take-Two has officially completed its $12.7 billion deal for social game developer Zynga, the two companies announced Monday.
Another single-serving site built around unnervingly convincing AI images. Can you tell what's fake and what's real?
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.
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.
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!
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.
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
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.
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.
Support for Business during Covid-19
Daily sars-cov-2 case counts in Canada
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
Microsoft’s GitHub subsidiary on Monday said it has agreed to buy npm. Terms of the deal weren’t disclosed.
The page we're linking to via target="_blank" gains partial access to the linking page via the window.opener object
The project was one of the first efforts that successfully convinced home users to donate some of their free computing time to help with research, and its success spawned a large number of related projects.
Today, Firefox began the rollout of encrypted DNS over HTTPS (DoH) by default for US-based users. The rollout will continue over the next few weeks to confirm no major issues are discovered as this new protocol is enabled for Firefox’s US-based users.
The site joins a growing list of companies whose staff and/or contractors have expressed public interest in unionizing, including Spin, Instacart and Pittsburgh-based Google technical workers, along with media outlets like BuzzFeed and Vox.