WebAIM announces updates to the WAVE tool

WebAIM announced several updates to the WAVE tool. I always spend time in my accessibility classes telling students about the importance of accessibility testing. The WAVE tool is generally at the top of my list.

About a year ago, I wrote How to Use the WAVE tool to Boost Site Accessibility. I don’t want to revamp that post, but I do want to call attention to the updates.

A number of the updates deal with “smarter ARIA and HTML5 evaluation logic.” This includes HTML5 structural elements and ARIA landmarks. There are improvements in support for aria-labelledby and aria-describedby including a new icon for broken ARIA references.

There are some scripting changes that allow evaluation of dynamically generated content. There’s a new indicator for skipped heading levels and for big blocks of justified text. The Firefox extension is going to go away, but the Chrome extension will still be supported.

Still the Same

Click on an alert icon to see a brief explanation of the accessibility issue identified by the WAVE tool

Click on an icon to see a brief explanation of the accessibility issue identified by the WAVE tool

Using the tool on the web remains basically the same. You enter your URL in the form at wave.webaim.org. The results of the evaluation are displayed over a representation of your page with icons indicating errors, alerts, features, structural elements, HTML5 and ARIA, and contrast errors. Clicking on an icon gives you a brief explanation of the meaning, with a link for more information.

Most importantly for web developers and web educators, the WAVE tool is still a valuable tool to help identify accessibility issues in sites.


O’Reilly EBook: Design for Voice Interfaces

Design for Voice Interfaces

O’Reilly Media is offering an ebook called Design for Voice Interfaces: Building Products that Talk by Laura Klein. It’s only 30 pages long and worth reading. It gives a brief background, talks about current issues in designing VUI and concludes with a few helpful resources to get you started learning more about it.

You definitely can’t beat the price for this informative book. It’s free.

The Pros and Cons of 5 Current Web Design Trends

The Pros and Cons of 5 Current Web Design Trends

Photo Credit: Daniel Kulinski (https://flic.kr/p/bWHeie)

By Jason OConnor

I feel like an old man. While preparing to write this article I can clearly recall a time when I used the Netscape browser to load my favorite search engine Alta Vista using my tortoise-speed dial-up internet connection back in 1998.

From this seventeen-year altitude I have seen a lot of web design trends come and go, with only the best becoming relatively standard.

However, like dog and cat years, the internet has an adjusted time too; I’m not sure exactly what it is but for every real year that passes, it seems like the internet experiences many years of trends, growth and development.

And along with the internet itself, its users have become much more sophisticated, both in how they use and perceive the internet and what they expect.

Today’s web designers have their work cut out for them.

Web design trends come and go like any other, but certain aspects can really take hold by the majority of website designers and builders. At the end of 2015 going into 2016 I can see a number of trends that are wildly popular now. Let’s take a look at five of the most prominent.

1. Simplicity

Web designers and companies are becoming more refined in their understanding of how people interact with websites. They are starting to realize a useful concept called the paradox of choice. American psychologist Barry Schwartz penned a book called The Paradox of Choice – Why More Is Less in 2004 where he explains that eliminating consumer choices is a good thing that can reduce shopper anxiety.

This extends to websites where the more choices a site visitor is given the less likely they are to choose anything and maybe they just leave.

So simplicity is what designers are shooting for now. Web users scan content and simplicity facilitates scanning. Apps are leading the way in this and websites are following. Apps are minimal, fast and intuitive. This is because they perform better with consumers, so websites are now emulating this trend.

Pros: Companies can benefit by offering less choices on a page or site because it allows them to funnel site visitors exactly the way they want in order to maximize the chances of them taking a desired action (signing up for something or purchasing). For example, if they only choice a visitor has is to buy, they are more likely to buy.

Cons: If a desired action is not possible on a site, the site risks losing a certain percentage of visitors simply because the choice they are looking for doesn’t exist. And what happens if a company’s site is designed around flawed assumptions? The site’s sparse design elements may be missing the mark completely.

2. Flat Design

Flat design is a style defined by a lack of glossy or three-dimensional visual effects. Three-dimensional effects, skeuomorphism and realism are the opposites of flat design and used to be very popular.

Now flat design is taking over. 3D effects like raised buttons or sunken form fields, Skeuomorphism which is unnecessary, ornamental design features that copy the real world like navigation tabs, and realism which is similar to skeuomorphism but exists only for aesthetic purposes are all being replaced by simple, flat design.

Pros: Flat design helps in making a site appear simple and easy to digest. And as discussed above, simplicity can be advantageous.

Cons: Flat design can sacrifice usability in the name of aesthetics. Although the web is still in its early years, there are already standards. For example, the blue underlined word or phrase signifies that it is a link. This is a standard and most web users know this intuitively now. Flat design can cause users to get confused or discouraged because of a lack of standards.

3. Fewer Stock Photos, More Illustrations

Another emerging trend that will continue through 2016 and beyond is the use of illustrations over stock photos.

Pros: Illustrations are easily scalable for responsive design. An illustration will look the exact same on a smart phone as it will on a large computer monitor. They also load faster than photos. And with illustrations, you can create any image; you are not limited to existing stock photos.

Cons: Photos are much better at invoking emotions, the goal of every marketer. Photos can feel a lot more personal. And photos can help in establishing credibility (think C-level head shots and corporate building photos), another priority of marketers

4. Hero Images

This one is everywhere now. A hero image – a term from the printing industry – is a huge, full-width image that is immediately apparent upon loading a page.

Pros: Hero images offer the web designer the ability to really evoke emotion as soon as a user sees their page. And because of its size, it can also communicate a large amount of information quickly. They can make a web page beautiful, stunning and memorable.

Cons: Large images like hero images can make pages load more slowly, which is a big turn off for users and search engines alike. Hero images sometimes can be overwhelming and too in-your-face. Large images can make a page feel cluttered or confusing. And I often see typography that is lost because it is overlaying a hero image, another thing designers need to avoid.

5. Scrolling Over Clicking

Again, apps are leading the way in this. Any smart phone user knows it is a lot easier to scroll than it is to click. Website design is really beginning to mimic this. You now often see web pages that fill up the whole screen and expect that you scroll down to see the rest of the content.

Pros: Scrolling is better for usability because it speeds up the ability to scan pages and is much easier to do than clicking when using tiny screens like smart phones. And scrolling avoids breaking the user’s reading flow.

Cons: A certain percentage of users will not even realize scrolling is an option on a page and therefore miss most of a page’s content. This has happened to me where I load a page, and see a big white space above the fold and not realize that I need to scroll down to see the actual content.

Of course there are other popular trends today too, but the five discussed above seem to be everywhere now. As web designers, we need to remain aware of all our options when designing and we must be discerning when it comes to following today’s design soup-de-jour. And above all, regardless of the trends we emulate, the site visitor’s wants and needs must be our primary guiding force.

Jason OConnor is a web designer and marketer who owns and operates OakWebWorks.com, a full service Internet firm that helps clients from all over the world.

Amara Makes Video More Accessible

I just discovered a subtitling tool called Amara that is a global captioning and translation project for video. I’m a couple of years behind the times. In case you haven’t heard of it either, here’s an introduction to the tool.

Amara is now helping with translations and captioning in many places. They say their caption editor is easy to use. I didn’t try it out, but it’s free. Amara also provides you with a way to connect to others around the world who might be willing to help translate and caption a video into another language. Since translating and or captioning a video is a labor intensive process, it’s interesting that this web-based tool is using the idea of crowd sourcing the work.

  • There’s a good review of how using the tool works at PCWorld. The review is a couple of years old so there may be improvements since then.
  • The Global Voices Community Blog has a recently updated post of instructions for translators who use Amara.
  • Vimeo, TED, and many other organizations partnered with Amara. TED provides a set of tutorials for Amara users.

Their Twitter account is @AmaraSubs. Their Facebook page is Amara Community. Neither have frequent postings, but they are worth following if you are interested in accessibility or teach accessibility in your web education classes or at conferences.

Nat & Lo’s 20% Project

Nat and Lo in front of a Google sign

When you work at Google, you get to spend 20% of your time doing something you think of yourself. Googlers Natalie Hammel and Lorraine Yurshansky decided to spend their time creating a web series about projects at Google. They call it “Nat & Lo’s 20% Project.”

Their videos are on YouTube. Watch the first one and you can subscribe to their YouTube channel and/or select the next video you want to watch. I suggest watching them all. You’ll get an inside view of some of the things that make Google so ubiquitous in your life.