How Medium can be made more accessible

Shouldn’t be hard to make editing work with a keyboard, too

Medium has rightly been praised for the elegance and simplicity of its interface and its focus on content. As a — eh — medium, it introduces a new publishing model that does away with the usual distinction between authors and readers. In this, it promotes inclusion, offering a platform for perspectives and views that are commonly excluded from mainstream news and online publishing. Opinions that would have been languishing unseen in some private blog are suddenly exposed to thousands of readers.

In his Medium article “You Can’t Start the Revolution from the Country Club”, Anil Dash has called inclusion one of the values that make the social web revolutionary, “empowering and enriching the lives of many people who aren’t privileged by geography, wealth, inheritance, social standing, or identity”.

You can extend this list to include people who aren’t privileged by good eyesight or the kind of motor control you need to use a mouse. For them, the digital revolution has brought tremendous benefits.

Picture yourself being blind. Before, you would have needed someone to read a newspaper to you (or you’d gone to the trouble of scanning and digitizing printed matter, hoping you scan the stuff that matters to you). Now, digital news and any other online content can be as accessible to you as to any sighted person. Navigation apps allow you to walk in unknown places on your own. Apps like FourSquare allow you to broadcast your current location to other people – now you can be found by your blind friends. Hungry? You just take a snapshot of a printed restaurant menu and immediately hear what’s on offer, at what price. In case you get stuck somewhere, you can even photograph your surroundings and get immediate help from sighted folks.

All that is needed to make this happen is digital content following a few rules that open it up to access by all – including blind and motor-impaired people. There is a full-blown W3C standard for this, the Web Content Accessibility Guidelines, but the bottom line requirements are actually quite simple. For example, you need to ensure that all your interactive stuff (your links, buttons and menus) can also be focused and activated via the keyboard – not just with the click of a mouse or the tap of a finger. This means that folks using the keyboard (because they can’t operate a mouse) and blind people using screen reader software can use the content in just the same way as any other non-disabled person.

Medium accessibility – where it excels and where it’s sorely lacking

Now let’s take a quick look at Medium. How does it fare in terms of accessibility? Is it inclusive enough to be used also by blind, low vision, and motor-impaired people?

First, the good news. Medium is a boon not just to low vision users, but to everyone who likes to crank up the text size a bit. Using your browser zoom function, you can easily enlarge text. The typography is excellent (a good font, perfect line length, sufficient white space), there is no clutter, and contrast is high.

Now what about blind people using screen reader software like JAWs, NVDA or Window-Eyes? Medium’s focus on content is certainly a good thing for them: they don’t need to wade through layers of navigation menus or extraneous content before they get to hear the meat of the page. However, blind people who are not based in an English-speaking country are in for a disappointment: English content is not read with an English voice and intonation – simply because Medium pages fail to include the lang tag that tells screen reader software the language of the page’s content.

A bigger disappointment awaits blind and motor-impaired users that sign up to contribute to Medium as commenter or author. The little floating note icons to the right of paragraphs that you get once signed up are well thought out from a usability perspective – they do not interfere with the reading experience and dynamically appear once users move the mouse cursor over a paragraph. A click then shifts the content to the left and brings up the option to leave a note.

Try that with a keyboard – it doesn’t work. The note icons next to the paragraphs don’t even appear as you tab through content – they never get the focus. As far as contributing is concerned, this means that Medium is currently inaccessible for blind people and other (motor-impaired) keyboard users.

The problem is also one of content structure and reading order. The reading order of screen reader users follows the source code order of the page. While the note icons appear next to paragraphs visually, they are actually all lumped together after the content — so it is hard, if not impossible, to establish the connection between note icon and corresponding paragraph. You can see this for yourself when disabling CSS in your browser.

Can it be changed?

It sure can. Each note icon and corresponding leave-a-note form could be positioned directly after the paragraph it relates to, so the association would be explicit independent of CSS style and formatting. In addition, note icons should be made keyboard-accessible so that activating them with the Enter or Return key would bring up the leave-a-note form. The icons would also need a meaningful (invisible) name so that blind users understand their function. Another W3C Standard, WAI-ARIA, may be used here to add the semantics needed.

It will be harder (perhaps not feasible) to make the text select function fully keyboard-accessible, too. (This function allows notes to be tied to particular user-selected phrases or expressions within a paragraph.) But that shouldn’t stop the developers of Medium to add the lang attribute to pages, and to add basic keyboard accessibility to their editing interface.