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 Operable principle.
Touch Target Size and Spacing
touch targets should be at least 9 mm high by 9 mm wide
touch targets close to the minimum size should be surrounded by a small amount of inactive space
Touchscreen Gestures
Gestures should be as easy as possible to carry out and two-step gestures should be avoided
To prevent unintentional actions, “elements accessed via touch interaction should generally trigger an event (e.g. navigation, submits) only when the touchend event is fired (i.e. when all of the following are true: the user has lifted the finger off the screen, the last position of the finger is inside the actionable element, and the last position of the finger equals the position at touchstart).”
Device Manipulation Gestures
These suggestions are for manipulations such as shaking or tilting:
Developers should still provide touch and keyboard operable alternative control options
Provide onscreen indicators that remind people how and when to use device manipulation gestures
Button Placement
Place interactive elements where they can be easily reached when the device is held in different positions or by different hands
A new open source tool, Responsive Image Breakpoints Generator, should be at the top of your to-do list of new things to learn to use. Developed by Cloudinary and offered to web designers for immediate use, the tool describes itself,
Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. It’s time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.
After you choose what you want the breakpoints generator to do for you, you can then download a zip file which contains the HTML5 code which uses the srcset attribute of the img element to set up the responsive breakpoints. The zip file also contains all the images that are referenced in the srcset attributes.
For a longer description of the tool, see this excellent article at Smashing Magazine, which explains a bit more about the tool.
Two excellent videos from Akamai Technologies are available explaining how to code for responsive images. The first is written by Mat Marquis, the second by Yoav Weiss.
Both films go quickly and bear watching more than once.
It’s the end of an era. The web site that dedicated itself to publishing articles about best practices and web standards at webstandardssherpa.com is shutting down.
Here’s how Aaron Gustafson, the founder, put it in his announcement on Facebook.
It is with a heavy heart that I announce that we are closing Web Standards Sherpa. As of April 2, we will be archiving the site in order to keep the valuable insights and techniques shared by our authors available in perpetuity.
To make that archive a reality, the Sherpas teamed up with Environments for Humans to create an online conference called Sherpa Summit. The summit features four expert sessions and live Q&A roundtable sessions that will let attendees from all over the world take part.
The online conference is on April 2, and you can save 20% if you register now using the discount code SHERPA.
UPDATE: Because of illness, the Sherpa Summit had to be postponed until April 23. A side effect of the delay is that you get more Sherpas for the Round Table Q+A’s: Steve Fisher and Dan Rubin!
The editor’s draft (emphasis on draft) for Level 4 Selectors from the W3C mentions some potential new pseudo selectors that the W3C describes as functional.
The matches-any Pseudo Class
This allows you to create a selector that targets a comma separated list of selectors. Here’s the syntax.
In CSS3, only one selector was allow for this pseudo class. Now you can have a comma separated list as the syntax shows.
For example:
a:not([rel="prev"], [rel="next"]) {
color: red;
}
The has Pseudo Class
This is a relational pseudo-class. It’s mentioned in the W3C draft document I mentioned, but it’s not mentioned in other places. I’m not sure if that means it’s brand new or was already discarded.
For example:
a:has(> img) {
border: none;
}
That selector would remove a border from an <a> element that contain an <img> child.
Support?
You can check your efforts to work with these new CSS4 potential selectors using the test at css4-selectors.com. There’s also a list of all selectors from CSS1 to CSS4 on that site, but it does not mention the :has selector.
Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
Among those text alternatives is where alt text (or alternative text) for an image is used.
The HTML5 specification states that all images must have an alt attribute. Here’s the fine print. All images must have an alt attribute, but there are times when the alt attribute can be empty or null. That is, the attribute has to be there, but there might be nothing in it. Like this:
<img src="image.png" alt="">
When is null alt text acceptable?
There are times when the text surrounding an image gives the alt text of the image. It’s part of the content. Therefore, to put the same information in an alt attribute becomes redundant and unnecessary.
Here’s an example from the blog Old Ain’t Dead in the section where the most popular posts are displayed. Alt text is shown using the tools in the Web Developer Toolbar.
The alt text and the clickable link are the same
You can see that the alt text for the image is exactly the same as the link text that goes with it. On a screen reader, a user would have to listen to the same text read twice. It would be better if these images had null alt text because the function of the link is explained by the text accompanying it.
Look at how Twitter deals with null alt text.
An example of null alt text
If the alt text for Twitter avatars was not null, but in fact contained the name of the Twitter account, then the name would be spoken twice in a screen reader. In the example above, with null alt text, you would hear “Jeffrey Zeldman” spoken once only because of the null alt text.
Even if you couldn’t see the little profile image, you’d still know it was Jeffrey Zeldman’s twitter account.
What about when images are not loaded or otherwise not displayed by the browser?
If you consider the two examples already mentioned – the list of top posts and the Twitter avatars – in neither situation would null alt text on the image result in the user becoming confused. The information is there in text form and it’s all that is needed.
What if the text surrounding the image does not explain what the image is?
In that case, put a description in the alt attribute that explains the function of the image or provides the content of the image.
I’ve been attempting to sort out in my own mind exactly what I needed to be teaching students about responsive images. For a while, things have been a bit wobbly in this area and there were no definite best practice ideas. Thanks to the Responsive Images Community Group, I think a consensus on best practice has gelled for now.
Srcset and sizes
I’m sure you’ve heard about the new picture element. Before you think about using it, you need to know when you can use the familiar img element.
The majority of the time, the srcset and sizes attributes of the img element will be what front end developers use.
This example shows srcset with img and options for display density.
The src attribute is the fallback image. The “1.5x” means 1.5 device pixels per CSS pixel, and is a larger image. The 2x means 2 device pixels per CSS pixel, and again, refers to a larger image. It means you have prepared 3 versions of the same image and uploaded them.
Here’s an example of code using an img element with srcset and sizes attributes.
The srcset attribute lets you give a comma separated list of image file paths. The second example used w to specify width to the browser and vw to specify viewport width. Instead of display density, the second example uses media queries to designate images from the list. Again, you have prepared 3 images in different sizes and have them on the server.
Whether you’ve prepared your code to work with pixel density or using widths, the result is the browser makes a choice as to which image will work best. The browser decides which image of the listed images fits the situation by evaluating resolution, viewport size, even bandwidth, and chooses the best image for the situation.
You can also add add the sizes attribute. The sizes attribute tells the browser how many pixels it needs by describing the final rendered width of the image. To make the image occupy a third of the viewport, the code would be:
sizes="33.3vw"
With sizes, you provide a CSS length that describes the image’s rendered width. CSS lengths can be either absolute (150px or 20em) or relative to the viewport as in 33.3vw. As with fonts or other relative measures, the relative to the viewport value is what offers the responsive rendering. The 100vw measure is the default length and would be used if no other conditions matched.
Value can be in px, ems, or vw.
In the second example above the sizes attribute uses media query width descriptors with values in ems or vw (viewport width). The first value is a media condition (a media query without the media type) and the second value is a length. Note, the default length is not matched to a media query.
You can use only the srcset or both srcset and sizes attributes with the img element.
When you need to do more than resize an image
So, when do you use the picture element?
Sometimes an image won’t work if it is simply sized differently for different devices. It might need to be cropped or have some other type of what is called art direction work done on it. In this situation, you want to give a list of different images to the browser to use in different situations. Perhaps they’ve been cropped. If the image contain words, perhaps the text has been reworked for different size displays. They are not merely resized versions of a single image, but completely reworked images meant to fit different situations.
Use the picture element with multiple source elements for this situation.
Embedded in the picture element are source elements with images paths, media queries, display density designations – all the things we saw with the img element, but here the source elements link to images that have been altered in some way. The last thing nested in the picture element is a fallback img element.
OMG
That’s a lot of new information for someone who grew up on the old style image tags. New length measures, new elements, new attributes. I’m not sure I really have it clearly understood. Writing this was one way to help me work it all out in my mind. If any of you see where I’m foggy or misunderstand something, please offer suggestions.
