loading...

PSA / tire kicking dev.to for a11y

scottohara profile image Scott O'Really? ・2 min read

Giving this service a try. Being a markdown editor, seems to me that people who post here should be able to make accessible blog content, since it's totally in their control to do so.

The nice thing about markdown

Even if you aren't 100% familiar with markdown syntax, it accepts standard HTML as well, and that's pretty awesome.

So if you're placing an image into your post that conveys important information, then you can do something like:

<img src="my-image.jpg" 
  alt="meaningful text goes here to describe what one might infer from seeing the image">

as opposed to something like:

<img src="..." alt="designer">

which means as little to you in this example as it did in the context of the dev.to article I originally came across the rendered version of this image in.

Headings are important

Headings help contribute to the structured outline of a document. h1 or # in markdown represent the primary content of a document.

h2 or ## in markdown represent secondary topics related to the primary.

h3 or ### (and so on) represent sub-topics sub topics to the level before them...etc.

Point being that the use of headings have meaning and help someone using assistive technologies, such as a screen reader, navigate to important areas of your post. Treating headings as a way to visually style text to be "bigger" is something that should be avoided, just like if you were developing a standard HTML document.

Quick post wrap up

Well that was a relatively simple way to post some content. And being markdown, I've been able to save this for cross posting to my own website in the event this service goes away some day. Which is in no way me wishing ill will on dev.to. But, you know. Cycles of popularity n' all.

The unfortunate thing about posting on dev.to is the accessibility errors that were not a result of the content of my post. e.g. the content immediately following the h1 of my post is wrapped in an h3. Why? It doesn't introduce a new topic to the document outline. It skips a heading level.

There's a skip link on dev.to that appears if you navigate, using the Tab key from the web address bar into the document. It doesn't do anything beyond the home page...

sigh...

Posted on Jul 10 '19 by:

scottohara profile

Scott O'Really?

@scottohara

A lapsed designer turned dev turned accessibility engineer / advocate. I care about inclusive user experiences, help others create inclusive user experiences, and point out a11y gaps.

Discussion

markdown guide