The Silicon Valley hype machine is drooling all over itself again this week with the release of the latest project from Evan Williams and Biz Stone, the guys that sorta brought you Twitter. My initial reaction to Medium is Pinterest meets Blogger or Tumblr with a dash of Digg, Reddit and Slashdot thrown in for spice, and a lean amount of content to peruse this week (but that will likely change soon enough). However, with a focus on “content”, I figured I’d look at the accessibility of the latest web wunderkind.
Sadly, I’m not surprised with what I found. We start this journey at a category page called “Look What I Made – A place to share the results of your hard work.”
While I’ve long argued that “only one H1 per page” isn’t really or even should be a rule, I think I would have to draw the line at less than 11. Yes, 11 <h1>s on one page. For realz.
Ee – lev – en
Unique Link Text
I figured, OK, with 11 <h1>s, maybe we’ll be lucky and have 11 unique link texts. Yippee, we do… except the entire <h1> PLUS the entire text body of each article preview is one giant link. Yep. Check out this doozy:
<a href="/p/c503f5f91693" class="item-link-wrap"> <span class="image" style="background-image:url('//d233eq3e3p3cv0.cloudfront.net/fit/c/750/220/ 0*CoQcQ3zm3oUvgAJ3.jpeg');"> </span> <div class="item-content wf"> <h1>Our own bacon</h1> <p class="snippet">My buddy Dave Le welded his first smoker four years ago, and we knew almost immediately what we’d be using it for: bacon, and lots of it. We started buying pork bellies from Prather Ranch and then experimented with different cures and wood mixes til we got exactly the flavor we were looking for. Until my son was born last year, we regularly made hundred pound batches of bacon that seemed to disappear as fast as we could slice and package them. After a one year hiatus, we’re getting back to making bacon and looking forward to making our friends happy with salty, smoky goodness.</p> </div> <div class="meta wf"> <span class="author">By: Ryan Freitas</span> <span class="magnitude">9.2</span> </div> </a>
What I wouldn’t give to strap Biz and Evan into some chairs and make them listen to this in JAWs or VoiceOver today. Seriously guys? You’re supposed to exemplify the brightest and best of what Silicon Valley has to offer, and this is the excrement you deliver? This is a brand new product, allegedly unique and with no competition. There were no release deadlines to meet, no external pressures to launch it quickly and then remediate. No, this was a brand new product that could have been done right, from the ground up. But they didn’t. They seemingly didn’t spend 10 minutes even thinking about accessibility.
Images with Alt text
Ha ha ha ha ha ha ha ha ha……
See comments re: Images with alt text. (a.k.a. None)
Color Contrast and Luminosity
WCAG 2 has developed an algorithm that can be used to measure foreground and background contrast (Luminosity) based upon the needs of low vision and color-impaired user requirements. The magic number for for “smaller” text (up to ~16px) is 4.5:1, while the same number for larger text is 3:1. Over the years I personally have been pretty lenient about these numbers and the measurement of “small” versus “large”: as long as the page got it into the ball park, I would give it a nod. After all, is there really a significant difference between a luminosity score of 4.3:1 versus 4.5:1? And do I judge 17px fonts with the 4.5:1 ratio or the 3:1 ratio?
None-the-less, there does reach a point where the ratio becomes obviously problematic. Like tiny silver-gray text(#969393) on a white background, and a luminosity score of 3.0:1, or a tiny pale green (#60BF73) number and icon on white with a score of 2.28:1. These are obvious failures to me. Looking at the body text (#7F7F7F) on white, with a luminosity score of 4:1 – I dunno, its a technical fail, but hardly the most critical failure on this page. Exploring individual articles, and the ‘first’ paragraph is a gray on gray mess (Foreground: #9d9d9d, Background: #f9f9f9) with a luminosity score of 2.58:1 – a clear fail.
Finally, I can report something good: yes, there is visible tab focus when tabbing through the page. Mind you, that visible tab focus is on each ARTICLE thanks to the super-link wrapped around each article, but at least the visible sign was there.
Screen reader test
Finally, I fired up a screen reader and had a walk through the page that way. Because each snippet text was a link (all multi-sentance glory of it), I was constantly reminded during the reading that I was either on a link or a visited link. Navigating via headings and tabbing worked (if you ignored the fact that all articles started with <h1>s). I didn’t record anything horrible, but the repeating of “visited link” became annoying.
The design esthetic of the entire site screamed to me “Made for MBP” (whatever…), and Zeldman’s recent “larger font is sexy” impact is quite apparent (which is good for accessibility too). Overall however I cannot suppress my disappointment that something that could have been simply and elegantly accessible from the start fails on so many basic and simple levels. My evaluation is hardly complete, and I’m sure I’ve likely missed some things, but honestly, the big issues I noted screamed at me so loudly, that the smaller issues simply can’t compete.
Less than a day after posting this article, I was approached (via Twitter) by somebody at Medium stating: “…accessibility improvements are absolutely on the way for Medium. I appreciate the concern. May I ping you once there’s updates?” Of course the answer was yes, but the lesson to be learned here is that making accessibility a feature to be added at a future release is already the wrong approach.
Building things right the first time is simpler and cheaper than retro-fitting and fixing things after the fact. (Imagine tiling and painting a bathroom before ensuring the plumbing pipes were installed…). At any rate, we shall see.
Another person suggested that having both the headlines and “teasers” click-able was actually an accessibility benefit. While it is true that larger click targets are beneficial for users with mobility impairments (lacking fine motor control), at issue is not that it is just the teaser that is click-able, it is the entire article that is made click-able, as the following screen shot (showing Medium minus the CSS) will illustrate:
A issue is the length of any given article: should someone post a 1500 word essay, then the link text would be 1500 words long. I think we can all pretty much agree that this would be excessive.