There was some discussion a couple of years ago in which it was considered that screen readers did not necessarily recognize a <br> tag as a space or break between words… ie. the words would run together (I think that was the gist of it). I don’t know what became of that screen reader behavior. Guess they became smarter?
I’ve not heard of that one. But now you mention it, the example doesn’t have a space between the words. Ignoring the css, that html spells out “CHRISPERRY” one word.
Another note about screen readers. It was mentioned in another thread that some screen readers read words in capitals as initials, like an acronym. So you should type “Chris Perry” and capitalise using css:-
Only because from what I can make out, the ‘vcard’ microformat works in conjunction with the ‘fn’, and to get the ‘fn’ to apply to both firstname and surname, that was what I came up with.
At this point I’m expanding the discussion out a little from the original question, but it seems very much related.
I guess you could equally put a span with a vcard class on it, around the H1 , then add the fn class to the H1 itself. I can’t see it would make any great difference to the meaning - either seems to achieve the same end (whatever that is at this point)
Not so fast. Whilst the page without the microformat works fine on IE11, adding it blows the layout completely to the point where the ‘main’ content area no longer honours the max-width 960px. It works fine in Chrome and Firefox. Anyway, time for tea here…
Fixed it. The proper version uses both a normalize.css and a base main.css (from the HTML5boilerplate) file, which weren’t available in the Codepen. One of them has the effect of making the <main> tag usable in IE11, which doesn’t otherwise work in the Codepen.
For the purposes of the Codepen, I’ve swapped out the <main> tag for <div class="main">