A Nineteenth Day Check In

Just a check-in today. I have been roughing out content and playing with layouts – some issues with getting Bootstrap plugins to play nice with Twenty Seventeen – I have layout working but at the cost of some font weirdness.

Also, some further thoughts on making things disappear with CSS. My friend and colleague Max Guglielmino points out that it is not best practice to use display: none alone if you want to hide a page feature consistently. The reason? Screen readers. display: none will hide the element from display, but will not prevent screen readers from including it. Max tells me that if I want equivalent behaviour for both screenreaders and sighted users I should use both display:none and visibility:hidden:

Take bootstrap as example. They have a screenreader-only class which has display:none. That means that whatever is wrapped by that class won’t be shown on monitors but screenreaders will still “see” it. In fact, it’s used for things like “Jump to the content” in navigation. You won’t see it on the screen, but a screenreader will read it to the user, so s/he can “enter” it and skip the reading of navigation items.

So display:none is not good for you. Well, not alone. It’s good for hiding titles on monitors but if you use just that, screenreaders will still read the text. You need both display and visibility.

.panel-content .entry-title {
    display: none;
    visibility: hidden
}

One of the good things about this process is getting input from people who know what they’re talking about in areas where I’m just OK!