Accessible Medium Style Dividers

After I saw Rafal Chmiel'spen with Medium style dividerson the CodePen frontpage I thought to myself This should be possible with simpler markup that is accessible.

---

Semantic HTML

Rafal states that the code for his pen is taken directly from Medium; so we shall not fault him for any errors in the markup. Medium uses a simple div with a class of divider. This works very well for the visual effect they are after. A sighted user will clearly see that this is the start of a new section.

However, this information is not communicated to assistive technologies (AT) because it has no meaning; classes don't convey any information other than Hey, you can select me with CSS!

Further more, they use an anchor to markup what clearly should be a header. AT users tend toscan a page by headings; not anchors.

---

Effortless Style

Semantic HTML means that we don't need to depend on meaningless classes to style our content.Heydon Pickeringcoined the term Effortless Style in 2014at CSS Day. In essense it is the separation of concerns; a best practice according to the W3C.

You could think of it as smart CSS. In this pen we know the title of our sections are right after an hr—or horizontal rule. With this knowledge we can utilize theadjacent sibling combinatorto select our heading: hr + h2.

---

Alternative technique

After a comment fromZCKVNS, I decided to tryan alternative technique. The alternative uses a span to center text, instead of a transform: translateX().

If you really want to keep markup to a minimum, there is an alternative border method included in this—the one you're reading—pen. You can find it in the CSS, near the end.