Hello,
I was thinking about using lettering.js, but I was wondering if the result (outputting so many spans) was really accessible.
What do you think?
Regards,
-jj. 
They mention the possible destruction of the universe if one were to wrap spans around every single letter on a web page… so that’s already out there.
Other than turning the page load into a crawl, I can’t see any obvious accessibility issue… this is of course assuming that users without JS are getting readable text (that the weirdo font isn’t required for legibility… also that the weirdo font itself IS legible). Also that you don’t have any other styles for these spans that would break without JS.
One thing I notice as an @font-face blocker is, the weirdo fonts are naturally larger or smaller than the web-safe backups. Then the applied CSS is written on the assumption that the weirdo font appears. This can make the default/backup font too big (not so big a deal) or too small (I see this a lot) or break out of containers, break layouts, etc. Hopefully you’ve found a font who has a web-safe font with an equivalent font-size, line-height and kerning (replacing web fonts with a narrow font like Arial Narrow means when Arial Narrow doesn’t appear, the text is way way wider than Arial Narrow loaders see).
Also be careful with sizing. Once you have named nodes as children of your block (assuming you’re using this in headers etc), setting em font sizes on children means you can get size and line-height differences between spans and loose anonymous text:
<h1>Some anonymous text <span>text in a named node</span> more anonymous text</h1>
h1 {
font-size: 1em;
/no explicit line height/
}
h1 span {
font-size: .9em;
line-height: 1em;
}
The span would be different than the non-span text in some UAs in this case. So while the example I see on github has spans around everyone in the block, if there’s a possibility of mixing and matching anywhere, you could run into inconsistencies. Which makes reading difficult for many.
I have a block of text on my pages which wrap spans around each letter in order to give each one its own thang. With the screen readers I’ve tested it with, I can still either just hear the whole word, or arrow to hear letter by letter as if the spans weren’t there. That’s even with the spans turned into CSS blocks. It didn’t matter.
This seems to make sense with spans anyway: when you have a block like the h1 in their example, the browser makes
-an h1 box, which is a static block
-multiple anonymous inline boxes around each word inside
-and manually-added inline elements are named inline boxes (they are spans or b’s or whatever they are, not anonymous). Inline boxes sit next to each other comfortably and so far as I know, unless CSS interferes, inline boxes act the same whether anonymous or not.
I could be wrong. You might like to read this, especially if you scroll down to where you can see some generated font and logical boxes. Baron states there that anonymous boxes should follow the same rules.
My point is to have fine grain controler over letters in terms of positionning.
No weirdo fonts. ANd I have a fallback.
I just wanna make sure that a bunch of spans won’t be a problem in terms of accessibility for screen readers, for example. So I understand it’s ok to use lettering.js.
Off Topic:
You have that thing with the end of the world and the apocalypse, don’t you?
If you were specifically worried about screen readers, and if what you have will look pretty much like the code example I saw on github (a span around every letter involved), screen readers should deal as well with it as they do with manually added spans. In something like SayAll, or even reading-by-line, they’ll see your block element as a unit and just read it. Spans being inlines, they don’t make a fuss over them, and usually ignore them.
One exception would be, if I have a group of anonymous text and then I need another group to always start a new line, I’ll wrap that stuff in a span and set display: block to it. For readers who are doing the read-by-line thing, that may count as a new line, so they’ll pause after the text above and wait for me to down-arrow to the next “line”. Also if a <br> tag is used. Depends on the reader though.
You should be safe. If you build something and still aren’t sure, you could always post it here or somewhere and get some testing done.
Off Topic:
It’s when the zombies come. And HTML5.