Falls Sie aus der Schweiz bestellen, beachten Sie bitte, dass wir ausschließlich per regulärem Postversand liefern können.

Sollten Sie versehentlich eine Express-Versandmethode auswählen, erstatten wir Ihnen Ihr Geld zurück.

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.

Produkte vergleichen
Sie haben keine Artikel in Ihrer Vergleichsliste
Mein Wunschzettel
Zuletzt hinzugefügte Artikel
  1. Diskret bestellen
Sie haben keine Artikel auf Ihrem Wunschzettel.