I always thought that it is not so difficult to find resources about these basics, the recurrence of that question prompted me to finally write my own take on this topic. So here it is, my list of absolute web accessibility basics every web developer should know about.

A very solid overview of basic web accessibility techniques by Marco Zehe.

.

Three (example) headings: One centered with horizontal lines on either side, One left aligned with only a line on the right and the final one right-aligned with the line on the left. There is some space between the lines and the text.

I read the Webkrauts advent calendar article by Jens Grochtdreis earlier today, it is about headers with lines on the side, quite like in the article image above. Actually exactly like the example above. (There is a similar article by Chris Coyier on CSS-Tricks for English-speaking people out there.)

He presents a solution with one or two pseudo elements and an extra <span> in both cases and has a pretty simple code for it, as well. I wondered if there is an even simpler solution and I believe I have found one that doesn’t need the other <span> and just uses the pseudo elements. One caveat: the solution depends on flexbox, so older browsers are out of look and you might need some prefixes. But yeah, progressive enhancement!

<h2>Heading – oh look, no span!</h2>
h2 {
  display: flex;
  align-items: center;
  color: rebeccapurple;
}

h2::before, h2::after {
  flex: 1;
  height: 3px;
  content: '';
  background-color: currentColor;
}

h2::before { margin-right: 10px; }
h2::after  { margin-left:  10px; }

We define the heading as a flex container, align-items centers the pseudo elements. The ::before and ::after pseudo elements are set to the height that defines the width of the line. Using flex: 1 distributes the pseudo elements evenly, ans as they are before and after the text, they push it to the center. Margins help to have a gap between the text and the lines. To add the left and right variants, these two “modifier classes” (also known as layout classes) can be defined:

.left-aligned::before {
  flex: 0;
  margin-right: 0;
}

.right-aligned::after {
  flex: 0;
  margin-left: 0;
}

Voilà! The effect works perfectly, is scalable and works when you don’t have tight control over the HTML, such as when you get output from a CMS WYSIWYG editor.

You can play with the code in the following codepen:

See the Pen Line-On-Sides Headers with Flexbox by Eric Eggert (@yatil) on CodePen.14519

Addendum

Of course, while writing this article, Gunnar Bittersman had already posted the flexbox approach to the article comments. He knows everything.

But while reading the comments, the topic of more words per line came up and how the solution looks when there are more lines involved. Turns out: Not too good. The lines shrink to 0 and the only thing you see is the margin. Flexbox to the rescue. Again!

The flex shorthand can take the values of three other properties: flex-grow, flex-shrink, and flex-basis. If we set flex-basis to 20%, this is the default width of the element. flex-shrink is set to 0 to avoid shrinking below those 20% but the flex-grow is set to 1 to allow growing larger than 20%:

h2:before, h2:after {
  flex: 1 0 20%;
  height: 3px;
  content: '';
  background-color: currentColor;
}

And a codepen for you to play around with this solution:

See the Pen Line-On-Sides Headers with Flexbox and minimal lines by Eric Eggert (@yatil) on CodePen.14519

And here is another example. This time we use border-image and an SVG to have an ornament around the heading:

See the Pen Line-On-Sides Headers with Flexbox and border images by Eric Eggert (@yatil) on CodePen.14519

WOFF is an acronym for “Web Open Font Format 1.0”, a web standard that was introduced in December 2012. There is a version 2.0 of the same format in the works, currently published as a working draft.

In comparison with traditional font formats like TTF or OTF, they provide better compression while keeping a lot of features of those formats, like ligatures, small caps, or alternative styles. Those feature can be used in CSS by leveraging the font-feature-settings property. WOFF2 provides even better compression and faster decompression, which is especially important on mobile devices.

WOFF is available in all modern browsers. The only notable exceptions for support are IE8 (and previous versions, obviously), Opera 12 & Mini, and Android Browser up to 4.3. The enhanced WOFF2 is available in Firefox 39+, Chrome 36+, modern Opera, current Android Browser and current Chrome for Android. (See CanIUse.com)

By using the modern file formats and providing a good fallback font for browsers not supporting WOFF/2, websites render more quickly, the build process is quicker and more easily to maintain, and users with older hardware don’t get the additional burden of downloading and decompressing a font file.

In addition the font should always be loaded using JavaScript, allowing the user to start reading instead of staring at invisible text while the web fonts load. An even more advanced technique by the Filament Group uses cookies to provide the user with the (then cached font) on page load immediately on the second request.

On Monday, my wait for the Apple Watch was over and a shiny “space black” Apple Watch Sport arrived at my doorstep. It is an incredibly interesting device with a lot of limitations – but those are expected from a 1st generation device.

One factor limits my use of the watch greatly: The inability to resolve links. The watch works great with the internet, the connection to my phone works out very nicely as well. But the watch is not a great citizen of the web (yet).

Take the email I received above. The sender didn’t care too much about the content of the text version of the HTML email they sent me, so apart from information about this (“This message contains elements Apple Watch can’t display. You can read a text version below.”), the text version reads “You have received the alternative text version of an HTML message. Please click below to access the web version of the message: View an HTML version of this message: http://”.

The Apple Watch makes the case for HTML emails. But even if I wanted to follow the link at the end of the message, I can’t. It is not tapable. There is no handoff to Safari on my iPhone (which was what I expected). The same thing happens when I receive tweets on the watch and there is no way to take a glimpse at the related website.

Apple has not added basic HTML viewing functionality to the watch, which is a shame. A lightweight HTML parser with main content extraction – à la the iPhone Reader mode – would probably be totally okay for basic information. In addition, a handoff feature can help with websites where the content can’t be extracted or doesn’t make sense.

Thinking about it, the whole rendering and reformatting of the website could be done on the iPhone. That would mean that Safari can display the cached rendered web page immediately on handoff.

I hope watchOS 2 will bring such a basic functionality, it would improve my use of the Apple Watch.