Accessible Medium Style Dividers

accessible-medium-style-dividers.markdown

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.

Updated in June 2015: Markdown no longer renders if placed inside HTML on CodePen.

A Pen by Zoë on CodePen.

License.

index.pug

article
  h1 Accessible Medium Style Dividers
  p
     | After I saw Rafal Chmiel's 
     a(href="https://codepen.io/rafalchmiel/details/Cjacq/")
       | pen with Medium style dividers 
     | on the CodePen frontpage I thought to myself <q>This should be possible with simpler markup that is accessible</q>.
  hr
  h2 Semantic HTML
  p 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 <code>div</code> with a <code>class</code> of <code>divider</code>. 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. 

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

  p
    | Further more, they use an anchor to markup what clearly should be a header. AT users tend to 
    a(href="http://webaim.org/projects/screenreadersurvey4/#finding") scan a page by headings
    | ; not anchors.

  hr
  
  h2 Effortless Style
  p
    | Semantic HTML means that we don't need to depend on meaningless classes to style our content. 
    a(href="https://twitter.com/heydonworks") Heydon Pickering
    | coined the term Effortless Style in 2014 
    a(href="https://vimeo.com/101718785") at CSS Day
    | . In essense it is the separation of concerns; a best practice according to the W3C.

  p
    | You could think of it as smart CSS. In this pen we know the title of our sections are right after an <code>hr</code>—or horizontal rule. With this knowledge we can utilize the 
    a(href="http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators") adjacent sibling combinator
    | to select our heading: <code>hr + h2</code>.
    
  hr
  
  h2 Alternative technique
  p
    | After a comment from 
    a(href="https://codepen.io/ZCKVNS") ZCKVNS
    | , I decided to try 
    a(href="https://codepen.io/Michiel/details/yyyOep/") an alternative technique
    | . The alternative uses a span to center text, instead of a <code>transform: translateX()</code>.

  p 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.

style.scss

// Some vars
$link-color: #f52e62;
$text-color: #3f517e;
$hr-color:   rgba(0,0,0,0.35);
$hr-text-color: #453986;

$letter-spacing: .32em;

$background-color: #fff;

hr {
  display: block;
  margin: 50px 0 -15px;
  width: 100%;
  height: 1px;
  border: 0;
  background-color: $hr-color;
  
  + h2 {
    display: inline-block;
    position: relative;
    left: 50%;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid $hr-text-color;
    //box-shadow: inset 0 0 0 1px $hr-text-color;
    transform: translateX(-50%);
    color: $hr-text-color;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: $letter-spacing;
    text-align: center;
    text-transform: uppercase;
    background-color: $background-color;
    
    // Cancel out offset created by letterspacing
    &::first-letter {
      margin-left: $letter-spacing;
    }
  }
}

/* Alternative transform: translate */
hr + h2 {
  border-width: 1px 0;
  
  &::before,
  &::after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: $hr-text-color;
    content: '';
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }
}
/**/

// Unimportant bits
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  color: $text-color;
  font-family: Helvetica Neue, Helvetica, Arial sans-serif;
  background-color: $background-color;
}

article {
  margin: 20px 10px;
  
  @media (min-width: 30em) {
    margin: 40px 0;
    padding: 0 10px;
    width: 30em;
  }
}

a {
  color: $link-color;
  text-decoration: none;
  
  &:focus,
  &:hover {
    text-decoration: underline;
  }
}

code {
  font-size: 1.1em;
}

h1 {
  margin: 0 0 1em;
  color: #44388b;
}

p {
  padding: 0 10px;
  
  // This is just to get rid of the needles p's CodePen drops in.
  &:empty {
    display: none;
  }
}