# Accessible Medium Style Dividers

After I saw Rafal Chmiel's pen with Medium style dividers on 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 to scan 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 Pickering coined the term Effortless Style in 2014 at 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 the adjacent sibling combinator to select our heading: `hr + h2` .

## Alternative technique

After a comment from ZCKVNS , I decided to try an 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.