Back end block checks: helping you to help your website

If you clicked on the headline for this post and expected an article on a player who stops the quarterback from scoring a touchdown then congratulations – you know less about American football than I do (and that is quite the achievement). Instead, today we are talking about a new feature that you will see in the new cuTheme template when it is launched.

What is a back end block check?

In the new template we are employing WordPress’ latest administration interface. This uses blocks – components which house each individual piece of content that can be edited separately and which together compose the page. (You can read more about our adoption of WordPress’ Gutenberg interface.)

That’s the back end block. The check aspect is a small function we use to ensure that any block created on a page goes out into the world as its creator intended.

What does the check do?

The function works to make sure an element is not added to the page which makes the page less accessible. As with all aspects of accessibility, making the page better for those with disabilities makes it better for everyone else.

That is what the check does – makes sure a component, for example, isn’t published with no text in it, or if it is supposed to have a hyperlink attached, that this is present.

An example: the button block

As with every component on a page in cuTheme, to add a button you now employ a block to do so. Handily, our developers named this the Button block. On the front end of the site it looks like this:

And here is how it appears when you are editing the page in the back end:

(Let’s just take a hot second to admire the neat thing about Gutenberg: the back end as you edit it looks so much like the front end, you have a much clearer idea of how your page or post will look before you hit the Update button!)

Anyway, that is how the button is supposed to look in the back end. What happens, though, if you fail to add text or a URL to the attributes of the button? You get back end check blocked, that’s what happens!:

If I remove the URL:

Alert when a button has no URL. Error reads: Accessibility Error: Buttons must have text and URL

Meanwhile, in the top right hand corner of the admin screen you will notice something else going on when there is no URL or text. I this example I have added neither:

The Publish slash update button is greyed out

That’s right: the Publish/Update button remains greyed out until there is entries for text and a URL are inserted.

What’s another example?

If you use the video embed block you can place a video player, cued to display your chosen video when the page loads. The stipulation is however that the video link you embed must be from one of the providers the University wants us to accommodate: YouTube, Vimeo, Kaltura, or TED.

So, if we add something that is not a valid URL, first of all, we will see the checker block the page from being saved:

An error message is displayed, telling the user to please enter a valid embed URL

And the same is true if we include a URL which is technically valid, but which doesn’t point to a YouTube, Vimeo, Kaltura or TED address. For instance, from the rogue video website, TheyTube instead of YouTube:

Error message on the block pus the publish button is greyed out.

Again, that error message appears, but check out what also happens with back end checks: you notice the Update button in the top right is greyed out. Tht’s right – you can’t save the page while that error exists.

Table manners

Here is one more example of something we have programmed in to check that blocks and their content are valid. Tables, which are there to display tabular data and not to lay out a page, must have properly defined column headings. This is for accessibility’s sake – users employing screen readers hear potentially misleading information about tables without column headers.

Therefore placeholder text is in the column header cells to remind you to add text to label the headers (with the imaginative text of Header label).

We hope you share our understanding that these checks will enable our community to create even more accessible and usable content as we move all our sites into cuTheme.

You can still leave these blank but you will find the button to update or publish the page is greyed out. This is a measure to protect accessibility of the page, of course, so we know you will understand why this measure has been implemented.

These are some of the blocks you will encounter in cuTheme and some of the ways we ensure they are released into the wild in good working order, insuring more usable and accessible content. The other portion of that insurance is all the amazing website content editors on campus continuing to create great, usable, and accessible content!