Last year, I put together a talk called “Invisible Visualization” on making accessible data visualizations. Several people have asked me about it, so I thought I’d write a post about it.
By “accessible”, I mean able to be consumed and understood by people with a variety of sensory needs, including people with visual limitations, cognitive impairments, mobility challenges, and other considerations. I provided a few simple ways to expose the data in SVG images, but mostly I described different constraints and suggested ways of thinking about the problems.
I didn’t want to lecture people about the need for making their content accessible; I wanted to excite them about the possibilities of doing so. It’s great that there are legal regulations addressing the needs of people with disabilities (like the “Section 508” laws here in the US), but that’s not going to empower and motivate developers and designers to want to meet these kinds of design constraints and solve these kinds of technical challenges. I sought to avoid the “threat and guilt” trap that I’ve seen too many accessibility talks fall into.
I just found this combinatorial comment trapped in my spam filter. It’s interesting to see how the raw script is composed, so they can randomly select phrases, perhaps to throw off spam filters; this one was obviously a misfire.
It’s like a Choose-Your-Own-Adventure or Ad-Lib, but for spam.
I was impressed that it did have some minimal contextualization, automatically pulling in the title of my previous post and of my blog itself (“Annotators Anonymous � Reinventing Fire”), but was disappointed that they don’t have some sort of topic map to try to pull in related terms to truly customize the comment in a more sophisticated way.
It’s much longer than a typical spam, and pretty repetitive, with several greeting intros, so I assume that in addition to selecting phrases, whole paragraphs were included or removed. It’s not clear if this was posted by a bot, or by a human who was meant to manually select the phrases and context; I hope for the sake of some underpaid person that it was a bot.
I’m rather skeptical about the topic of the link they chose, to “burberry outlet”, which seems to be some sort of knockoff purse vendor, and is unlikely to appeal to my audience; I’d have preferred something like a knockoff electronics shop in China, which would have had at least minimal appeal.
It linked to songsketches.com (a relatively cool domain name, presumably once populated with more compelling content), and it was posted by “firstname.lastname@example.org” (IP address 126.96.36.199) on 2014/04/05 at 11:22 am ET.
Some of my favorite highlights:
It asks if I get a lot of spam, and how I combat it (very meta!)
There is a section with a variety of smileys and winkies, giving them the emotional range of a fine actor
The adjective options (and there are a lot of them!) are all very positive and encouraging, a touch I appreciate and which flatters my ego.
C+ for content, D for spelling (quite a few errors, which I’d guess would make the spam more detectable, and which frankly grates on my nerves), F for execution. However, I will give them a passing grade overall, because they did show their work.
SVG has a few metadata features intended specifically for accessibility, and also provides the ability to use real text instead of images for textual content, just like HTML. This combination of text and metadata serves as one of the cornerstones of SVG’s accessibility; there are other features, such as scalability and navigation features, but this post will focus on the descriptive capabilities of SVG.
I was recently looped into a discussion on the @longdesc attribute in HTML which dealt in part with SVG accessibility, a subject I’m fascinated by. The specific debate is whether a @longdesc value should be applied for SVG, or whether SVG’s native accessibility features should be used, or both.
Let me explain @longdesc. For short descriptions of a picture, a few words to a few sentences, you can simply include the text in the <img> element’s @alt attribute. The @longdesc attribute of an <img> element allows a content author to add a URL that leads to a longer text description of the image. You can read more in this excellent article on @longdesc by WebAIM.
SVG provides a different way to provide text descriptions: the <title> and <desc> elements, which can be a child of any graphic or container element in SVG, and which contain text descriptions of the element. The <title> is meant for shortish names, while the <desc> can provide arbitrarily long descriptions; nothing in the SVG spec limits the length of these elements, but choosing the appropriate text is a best practice (as for any prose). These metadata elements can be read out via screenreaders (accessibility technology that speaks the available text aloud), along with the content of the <text>, <tspan>, and <textPath> elements.
Because each SVG shape (or group of shapes) can have its own <title> and <desc>, a certain amount of structure and sequential flow is available to these screen readers. Each text or metadata element is read out in document order. Together, the series of text passages can comprise a complete description of the SVG graphic. Which is kinda cool… self-describing images!
Well, that’s the idea, anyway. Now let’s look at it in practice, and specifically, at authoring SVG accessible content, and support in browsers and screenreaders.
Note: though I offer some specific guidance here, this is not really a tutorial; it’s more a background article on the topic, partly from a standardization point of view. I’ll be writing a tutorial aimed at developers and designers soon on WebPlatform.org.
I’ve long been an advocate of wrapping (or “flowing” or “multi-line”) text in SVG. This is basic functionality, and people have been asking for it since SVG started.
I’m also an advocate for moving features out of SVG and into CSS, like gradients, animation, compositing, filters, and so on; the benefits of a single code base for HTML and SVG applications, and ease of learning and maintenance, are obvious.
So, I was excited when the CSS WG took up work to allow wrapping text to arbitrary shapes, like circles or stars, not just boxes. This will enable a whole new magazine-style layout that will benefit web sites and ebooks alike. But I was disappointed when I found out that this work had some recent setbacks and delays.
So, I’m calling for a simple solution now, while we wait for the more complete solution later. And the nice thing is, my solution also relies on CSS!
Several times recently, people have asked on IRC how they can use nice fonts with SVG. My answer in the long-ago past, when Adobe’s excellent SVG Viewer plugin roamed the Earth, was to use SVG Fonts directly embedded in the SVG file… but that’s no longer practical with the current varied browser support.
By far the easiest way to do this today is to use webfonts, such as WOFF.
Authoring tools, like Inkscape and Adobe Illustrator, should simply manage this for authors, but until that happens, I thought I’d share a relatively simple workflow that has helped others. (Warning: I will use the words font and typeface with careless abandon to semantics in this article, though I know the difference. I’m afraid the more sensitive souls among you may suffer apoplectic righteous indignation.)
I will walk you through this workflow step-by-step, but if you get lost, just look at the source code… it’s pretty self-explanatory.
Find a font you like. For this example, I chose Riesling, an Art Deco typeface by “Bright Ideas”. I made sure the font was free and didn’t have any restrictions for online or commercial use.
Upload the font to FontSquirrel’s @font-face generator, and download the resulting package. This contains the webfonts, as well as some sample files (though not an example of how to use the files in SVG).
Copy the resulting webfont files (*.eot, *.ttf, *.woff, *.svg) into the same directory as the SVG file that will reference them. (Note: do not confuse the SVG file in the FontSquirrel package for a content file; it is an SVG font, with no rendering content.)
Copy the CSS @font-face style rule from the FontSquirrel package file (“stylesheet.css”), and put it in your SVG’s <style> element.
Optionally, for local testing, install the original TTF file as a system font, and add the local value to the @font-face style rule
Add a style rule for text elements, using the resulting font-family. In my example, I also created a style rule for textPath elements.
Since I’ve mentioned SVG Fonts a couple of times, I thought I’d leave you with a final note about what the future seems to hold for them.
SVG Fonts were added in SVG 1.0, way back in 1999, as a way to embed fonts in the same file, using vectors and all the capabilities of SVG, including separate fill and stroke (which could be gradients or other paint sources), and even exotic features like clip-paths, animation, and so on; Jérémie Patonnier has a great article on the topic. As cool as this is, it doesn’t necessarily work well with existing font engines… The Adobe SVG Viewer had support for SVG Fonts, and Opera and WebKit added support for the less-powerful SVG Tiny 1.2 subset as well; but Mozilla and Microsoft decided not to add support for SVG Fonts, and that limits their usefulness. It doesn’t seem likely that SVG2 (being developed now) will include SVG Fonts, not necessarily even the more limited subset (though there is not yet consensus in the SVG Working Group).
In practical usage, SVG Fonts were once the only way to use webfonts on iOS devices (e.g. the iPhone and iPad), which is why FontSquirrel includes them in their font-face package; but this is no longer the case, and iOS 4.2 added support for TTF fonts, which reportedly perform better. I expect this use of SVG Fonts to dwindle away… people will naturally want to use as few font formats as possible.
But for all of you out there who, like me, love the cool things you can do with SVG Fonts that aren’t possible in traditional outline font formats, don’t despair! Even as I write this, a proposal is being prepared by the SVG glyphs for OpenType Community Group to add a subset of SVG to OpenType, for more interesting typeface capabilities.
I have Libertarian friends who think Ron Paul has a chance at the GOP nomination… My intuition is that they are engaging in wishful thinking. My best guess is Romney will take it, but I’m hoping for Cain, for 2 reasons:
It would be kind of awesome to have 2 black candidates for President of the United States; and
I like the idea of Obama going up against McCain and then Cain… it would confuse future schoolchildren.
But should my guess prove correct, and Paul lose the Republican nomination, where would that leave him? He’s garnered quite a lot of support in some polls, and that might encourage him enough to consider splitting off again to run as an independent. After all, he is 76 years old, and may not have that many more chances to run (though he’s pretty spry), so he may as well throw it all in the ring for 2012. (Why independent and not Libertarian? He’s already got the Libertarian vote, and independent status might get him a few people who wouldn’t vote strict Libertarian… it’s a safer label.)
This is just a simple essay on how I see the world, and how I came to that view, the first in a set of posts I’m labeling philosophy. There’s no real point to it, no political or technical agenda… just some reflection and thinking out loud. I’ve never formally studied philosophy, and I’m sure these thoughts are probably not particularly original, but I arrived at them organically through my own life, in what passes for wisdom. Megan, my wife, laughs at me whenever I start a sentence with “I have a theory…”; apparently, I have a lot of theories. I have an active imagination, and I’m very opinionated; I like to try to figure out how the world works.
The way the mind works fascinates me in particular, and my understandings and beliefs about it have changed and evolved significantly through my adult life. I’m recording these thoughts now for the entertainment of some future me. (more…)
This week is our first Geek Week at W3C. The idea is to have a week where we improve our skills, collaborate with each other on prototypes and fun projects that help W3C, and to come up for air from our everyday duties. I’m working on a few projects, some small and some larger.
One of my projects is to make a plugin for Thunderbird, my email client of choice, which exposes the Archived-At email message header field, normally hidden, as a hyperlink. This is useful for W3C work because we often discuss specific email messages during teleconferences (“telcons”), and we want to share links to (or otherwise find or browse to) the message in W3C’s email archives. It’s also handy when you are composing messages and want to drop in links referring to other emails. (I do way too much of both of these.)
I’ve made extensions for Firefox before, but never for Thunderbird, so this was an interesting project for me.