Preview of “What Comes Next is the Future” UPDATED

What Comes Next is the Future

What Comes Next is the Future is a documentary film about the future of web design as envisioned by the people who build the web.

Here’s the film description:

What Comes Next Is the Future is a documentary film about the web created by Bearded founder Matt Griffin. It is the story of Tim Berners-Lee’s creation – how it came to be, where it’s been, and where it’s going – as told by the people who build it.

In the film, Griffin knits together a narrative by mining dozens of conversations with important figures from throughout the web’s history including Jeffrey Zeldman, Denise Jacobs, Tim Berners-Lee, Ethan Marcotte, Chris Wilson, Lyza Danger Gardner, Eric Meyer, Irene Au, Alex Russell, Trent Walton, Val Head, Jonathan Snook and many more.

After you watch the preview, go to the site to see to the list of cities and dates for viewings or to sign up for updates. Update: the film is now available free on Vimeo.

Thanks to Eric Meyer for mentioning this documentary on Facebook, otherwise I might not have heard about it. Hope my mentioning it here helps even more people become aware of the film.

Image ©Bearded

New Accessibility Tutorial for Learners and Educators

The Paciello Group announced a new online interactive tutorial called Teach Access. The tutorial is well organized and allows the learner to do some coding and see the results. It’s a result of work done by The Paciello Group and the Teach Access organization.

Learners are encouraged to use Voice Over to verify results of their coding efforts. Instructions for using Voice Over are included.

Something this tutorial does that you don’t often see is offer instruction in ARIA attributes such as ‘aria-labelledby’ and ARIA roles such as ‘list’ and ‘listitem’.

Following the exercises involving code, there is a section on design principles that talks about color contrast, text size, copy writing, and photos and videos.

This tutorial is a very useful site for anyone who wants to learn about writing accessible web sites.


W3C’s WAI Creates Perspectives Videos for Accessibility Understanding

an image of a man with burned toast

Just as we all like different degrees of doneness in our toast, users need to be able to change the way text is displayed — changing the size, spacing, font, color, and more — in order to read the text. When text is changed, no information or functionality should be lost, the text should re-flow, and users shouldn’t have to scroll horizontally to read sentences.

A wonderful new resource from the W3C is a set of very short videos called Web Accessibility Perspectives. The videos take a particular aspect of web accessibility such as keyboard compatibility or clear layout and design and show how they are essential for people with disabilities and useful for everyone.

I picked one at random, the text to speech one, to share here. There are 10 videos in all. They are perfect for use in a class about accessibility or just for learning something about web accessibility if you’re trying to understand it yourself.



Attribute Selectors: All the Bells and Whistles

There are many types of selectors in CSS. If you’re still making your way through the darkness with nothing more than a few element selectors, a few classes, some ids, and the occasional pseudo selector, you need to find your way into the light with attribute selectors.

I wrote about Attribute Selectors in CSS back in 2008, but there are 3 new types of attribute selectors in CSS3. And they have good browser support.

Attribute Selector Basics

The basic syntax is to name an element, with an attribute in brackets following it, then give the CSS rule.

element[attribute] {
some rules here;

This rule, for example, would target any image with a title attribute.

img[title] {
some rules here;

This rule would target any anchor element with an href attribute.

a[href] {
some rules here;

Beyond that basic type of attribute selector, there are several operators can can be used to refine or broaden what you are selecting.

Using an equals sign, you can add specific values to the chosen attributes, making the selector even more precise. For example,

img[title="mybunny"] {
some rules here;

a[href=""] {
some rules here;

The first example would select any image with the exact title attribute “mybunny.” The second would choose any link going to exactly “,” but not to, say, “”

The ~= operator select elements with an attribute value containing a specified word.

i [lang~="en"] {
some rules here;

This would match any italic element with a language attribute of English.

The |= uses the syntax |= to match hyphenated elements. This most often is used in rules targeting specific language declarations, where you might have hyphenated attributes in an HTML element such as en-US or en-GB. An example selector is:

body [lang|="en"]{
some rules here;

New in CSS3

The ^= operator uses the caret (^) with the equals sign to select what something begins with. It will match elements that have an attribute containing a value that starts with the specified value. For example,

a[href^="https:"] {
some rules here;

That selector would match only anchor elements with an href that began with https:.

The *= operator will match elements that have an attribute which contains the specified value somewhere in the attribute value. For example,

a[href*=""] {
some rules here;

That would select any anchor element with an href value that contained somewhere. This gives you a much wider sweep than the simple = operator.

Finally, the $= operator uses the dollar sign ($), which matches to elements that have a  specified value at the end. Examples:

img[src$=".gif"] {
some rules here;

a[href$=".doc"] {
some rules here;

These two examples would select only image elements ending with .gif or only href attributes ending in .doc.

Summary: How to Apply WCAG 2.0 to Mobile Devices

This slideshow requires JavaScript.

This post simply serves as a summary of the 4 posts published recently that distill the information from the W3C about how the guidelines and principles of WCAG 2.0 apply to mobile devices.

I thought it would be useful to have a single post with links to each of the previous posts. The posts take the 4 POUR principles and explain what they mean in terms of mobile application.


Mobile Accessibility and the Robust Principle

Mobile Accessibility and the Robust Principle

The W3C wants to help developers understand how WCAG 2.0 applies on mobile devices. They recently issued the first working draft on the topic. The guidelines and principles of WCAG are explained using the POUR method: Perceivable, Operable, Understandable, Robust.

In this post I will distill the W3C information on the Robust principle.

The Keyboard

Set the virtual keyboard to the type of data entry required.

Data Entry

Make data entry as easy as possible by,

  • On-screen keyboard
  • Bluetooth keyboard
  • Speech or Touch
  • Use select menus, radio buttons, check boxes or automatically enter known information (e.g. date, time, location)

Support the Platform

Don’t disable the device’s platform characteristics such as zoom, larger fonts, and captions.

Mobile device image: William Hook