I’ve been starting to work with Normalize.css, and while I love the idea
and all the work done, I have a point of contention with it.
The problem is this: associating heading levels with a particular style
doesn’t scale. This lack of scaling can result in accessibility
issues,particularlyheading levels that don’t match contenthierarchy.
As over 80% of screen reader users find headings useful for
navigation,
it’s important to ensure that we have a properhierarchyon our pages.
This importance is lost when you have default heading styles.
The reason is this: people stop associating headings withhierarchyand
instead associate them with visual style.Take the following content:
Normalize.css
This is my main content
Ooh, a sub-heading
And some sub-content
Okay, so text-formatting in Tumblr isn’t as full of features as I had
hoped. Plus my theme doesn’t play well with content.
But the idea is that we have two headings: a main heading and a
sub-heading. Simple logic should induce that from and HTML stand-point,
those headings would be an H1 and an H2 (or H2 and an H3). For
argument’s sake, we’ll stick with the former.
Well, “In theory, there is no difference between theory and practice.
But, in practice, there
is”.
So what’s the problem? Well, the problem is that, in our scenario world,
the standard headings were originally styled like this:
Heading Level One
Heading Level Two
Heading Level Three
So as you can see, in order to get the look we wanted, the HTML has to
be and H1 and an H3; which skips right over the H2. You can argue that
people should be sticking with a consistent style across the site, but
in practice that doesn’t happen.
The solution is this: Associate heading styles with classes. By
default, all six levels of headings should look exactly like normal
text.
If you want a particular style on your heading, add a class to it. You
could start with a simple set of classes: “headingOne”, “headingTwo”,
etc. You could also do something smarter if you wanted to.
There is a chance that people will just use classes and forego use of
headings all together. That would be bad. But, that possibility is
always there, so you’re not really taking on any new challenges here.
Here’s what I recommend for the normalize.css heading section:
h1,h2,h3, h4, h5, h6 {
font-size: 1em;
font-weight: normal;
margin: 0; /* or ‘0 0 1em’ if you’re so inclined */
}
The great thing about normalize.css is that it’s just a suggestion for
the default styles. We can go in an customize it as much as we want. So
making this change is a simple update, so long as you agree with the
reasoning mentioned above.