How to make a WordPress website accessible in Gutenberg

How do you make a WordPress website accessible in Gutenberg? (And win an award for it!)

The website for was the winner of the first edition of the Automattic Design Award 2018 for the category ‘Best Site’. I interviewed Luc Princen, the developer for this project. The transcript is below the video.

Transcript of the interview

Oh sorry, there’s a phone going off here, ehm, yeah…
Ok, so recording. So, we’re live, woohoo!
Let me see if we, ah, this looks nicer probably. I now have both screens next to each other. It looks more professional.

Welcome Luc, thank you for having this interview with me. About the site you built for – the Royal Tropical Institute. And together with Peter and Stephan, you won the Automattic Design Award for ‘Best Site’. YEAHHHHH! Congrats on that! – Thank you. The awards were handed over in Nashville, last Saturday, you weren’t there. No, couldn’t make it. I bet you had your own celebration probably. Luc: Yeah!

Monique: The purpose of this interview is to sort of hear you out on how you got involved in this project. You chose to work with Gutenberg in a very early stage. When Gutenberg wasn’t even ready for itself, I think. Maybe you can start by telling us about how this all came together.

Luc: Ok, sure. Well, it was really Stephan, the designer, who was doing a lot of work for Kit already. He had made the new corporate identity. When they finally looked at their website they asked Stephan if he knew people that could also build and design websites. Oh sorry, there’s a phone going off there. Sorry. Monique: No problem. Chuckles

Luc: So Stephan was doing the corporate identity and got the question if he knew people for the website. He happened to share his office with Peter van Grieken. Peter is an accessibility expert, project manager, a frontend developer. I knew Peter from Fronteers, some kind of guild for frontend developers. We had previously talked about frontend and WordPress, which was more my area of expertise. Once he found out that the website Kit was trying to build was in WordPress, he gave me a call. He asked: Do you want to pitch with us on this project? So we did and we wrote a proposal. The initial question from Kit was shoehorning a WordPress multisite with 7 different sites into one. At first, my expertise was asked on how can we do this with WordPress. And if we get this pitch, are you willing to come and do the backend? That’s how I got involved.

Monique: Apparently, you won the pitch with the team! How did this start? How was the co-operation with the other people in the team? How were the roles during the process? Could you tell us a bit about that? Luc: Yeah, sure. Once we had done the pitch and got the assignment, we first had a big kick-off meeting. That was really refreshing for me, coming from an agency background. I once had my own agency. In this case, there were just three freelancers, basically. But it didn’t feel weird at all. It didn’t feel forced. The kick-off meeting really was mostly about the timetable, what were the project goals. A big thing was, having everyone write down possible problems with the project and things that could come up during the process. That really helped the group focus, I think. Because we started these talks in May 2018, I believe. The idea was, to have the site live in September 2018. That was quite quick. Especially since all the content needed to be either rewritten or edited to the new website and there needed to be a backend before people could do that. So we were on a very tight schedule. We didn’t make the deadline completely, we had a working version at the end of September 2018 that we hadn’t tested. We needed some time for testing and fixing a lot of bugs before we could finally release it a month later. Monique: Ok, so, that was not too bad, I think, in my opinion. Luc:No, certainly not!

Monique: How did moving or changing of the content work? Did you do a migration from the old sites? Or was it done manually? Luc: It was a combination of both, actually. There was a custom-made plugin to accommodate a lot of publications. Kit does a lot of scientific publications. I wrote a script to pull those 500 publications into a custom post type on the new site. I did the same for all of the news articles across those seven sites and added them to the new single install. Monique: Was there already thinking about structure or categories before that? Or did you pull that in from the old sites as well? Luc: Well, for the publications there was a very extensive keyword hierarchy available already. I did pull all of that in and we manually cleaned it up. Or I should say, the team at Kit, because they did amazing work on that. And then news, we purposefully left out categories and stuff like that. Because by that time, we had decided not to have a regular news page like an archive. The only news that’s visible in navigation and in any way on the website, is on the front page. Those are always the last 6 to 9 articles, I believe. All the other news is old news. So who would want to read that? Therefore, we left it out. We had the task of boiling seven websites down to one. So we needed to get rid of a lot of clutter. News was one of those things. Monique: People are really afraid of throwing things away, obviously. Luc: Well, we didn’t throw them away, it’s still available. If you search on specific topics, you can still find them. But not through navigation. Monique: I see. Probably, those news articles are found and indexed by Google. That’s probably why you don’t want to throw them away because they’re findable. And maybe of value for people looking for certain topics, I think.

Have you been involved with the navigation from such an article to other places? Luc: That was really more Peter’s work. He and Stephan made the wireframes early on. We then discussed these. I think the only meaningful contribution I made to the navigation was on mobile. I said, shouldn’t there be a ‘close’-button, to close down the menu? And then Peter said, well, that’s a good one! Monique: So you all had your part in the site and collaborated on other parts where you could. Luc: yeah.

Monique: I’m very curious to hear how you decided on using Gutenberg in such an early stage. Because one of the main things I learned from Peter is that the site had to be accessible or inclusively designed. Because KIT follows the UN Sustainable Development Goals. Not having that was out of the question. And one of the big controversial things about Gutenberg was that it’s not very accessible. Can you tell us a bit about that process and the decisions made there? Luc: When we started talking about the pitch and what we were going to propose, they asked the question: should we build this in Gutenberg, or should we still build it in the old fashioned sense? Then I said: well, you’re planning on releasing the site in September, that will be one month after Gutenberg will be out. Monique: Should have been out! Luc: Well, I was still optimistic by then. So, I would be kind of a bummer to release something that’s already outdated. That was one of the main reasons. Another one was, that the platform was still on the move, but the basics of Gutenberg were stable enough to build your own blocks and to customise already. I had some experience on smaller websites. So I said, this is a challenge, but we should try and do it anyway. Because otherwise, we’re delivering an old fashioned product. As for the accessibility concerns, they were already present at the time. I said, first things first. All the blocks we make, we can make them accessible. That was our promise to Kit. And then we made a very clear distinction about Gutenberg on the frontend and on the backend. On the backend, it is managed by a small team of very capable content pro’s. Right now, there isn’t a disabled person on that team. Sure, we would love to make core Gutenberg as accessible as possible. But during the kick-off meeting, we said that’s the responsibility of the core Gutenberg team, not ours. We’re going to do our part and make blocks that are accessible. For the moment, this isn’t important for the target audience, which is 5-6 content team members from Kit. On the frontend, well, it really depends on how you apply it, but it can be totally accessible. There’s no problem there. It’s just a question of how you position blocks and how much html you send across the wire.

Monique: So you didn’t see problems there. You’ve been talking about custom blocks. Have you got something to show us? Or can you tell us something about that? Luc: I can show you some stuff, I think. Wait a second. Ok, so this is my local copy of the website. First, let me show you all the custom blocks we built. It’s quite a list. A banner, a checklist, a collection, an action filter, a content block, a container, a call to action, experts, stuff like that. Apart from the custom blocks, we also did a lot custom block parsing. There’s a parser here, that uses the Gutenberg parser. It takes all of the HTML inside a page and breaks it down to smaller chunks. We could say, we want our first block here, the second block over there. It’s not just all in one downward line, like in the editor. We can mix and match. Monique: But that is done by the parsing, where they do the content management, it’s Gutenberg as we know it? Luc: Yes, the interface is the same. Monique: Is the parsing good for performance as well? Does it make the site load faster? Luc: It’s not a huge stress test. It’s going around the default of WordPress. It’s to make sure our HTML is as robust and accessible as possible.
So one of the biggest blocks we build was a collection block. Ah, there we go – this block has encountered an error. I’m going to show this on the live website, because my local copy is not up to snuff. So, a post collection. You can say which post type you would like to see. And it will just update. We can filter on certain taxonomies, we can display it as a grid or as a list. And we can alter the number of posts shown. What you see now, that this collection isn’t exactly updating real time. That’s all of the stuff we haven’t embedded yet. So the editing experience still is pretty, well… Monique: It can be better!. Luc: Yeah, totally. It’s more tuned for a professional content team than for someone clicking together their own site. Monique: So you did this in agreement with the content team. Did they prefer having the function over having it, like, being really nice to look at? Luc: Exactly. That’s something we compromised on. There’s so much we had to build, let’s please make it work and then get it to work nicely. This is something we’re still working on.

Monique: How easy was it for you to build a custom block on Gutenberg? The first block I built, was an intro block. That’s super simple. This is just a text file with slightly larger text. One thing we wanted to do was, take away any possibilities for a person to alter colour or change the general flow of the HTML layout. We nailed a lot of stuff down. That’s why we built an intro block. You could easily do this with a paragraph block and then just amp up the type. But, having to explain that to everyone, and having everyone abide by a style guide is a lot tougher than baking it into the code itself. So that was our first block and it was easy to write. One of the things we wanted to do early was the project sites. Because projects are what everything else revolves around on the Kit website. So this was the first template and the first collection of blocks we actually built. This nice image up here is a media block. If you add more images, or if you add a Youtube video, you can actually click through them. One of the things we went into early was sorting. There wasn’t really a sorting mechanism available in Gutenberg, so I created one. And now it’s open source. So that’s a nice extra thing. Other stuff we did with custom blocks was storing metadata like the experts. They are available in expert blocks. And once you save such a block, it also saves the post metadata and it gets added over here. So that was fun stuff to write. The first block was very easy and then it became harder a lot faster. Monique: But more interesting at the same time I think, to work on? Luc: Exactly. I wasn’t really a React person and having to navigate that was more challenging than navigating WordPress and Gutenberg in that sense.

Monique: This all looks very cool and interesting. I can now see even more why you won that first prize, because besides on what we’ve seen on the frontend, making it very usable and accessible for people in the frontend, you’ve also given thought about how to make a clean editing experience for the content people. Also taking away challenges, like people fiddling around with their own types and fonts and stuff like that. But it’s also quicker to draft your post together if you’ve got all these custom blocks that do what they have to do. Instead of ‘Oh you have this, but then you have to make it bold’. Luc: ‘You need to add this CSS-class’.

Monique: Do you think this is, in the end, more sustainable or maybe more economically interesting for people as well? Because sometimes you choose these sort of ‘oh you have to type this there to make it work’ as a low profile cheap solution. You know, that’s because you don’t want to spend money on developing custom things? Luc: I think that for smaller websites it can be a godsend that Gutenberg more configurable, but for larger websites that rely more on a consistent layout and consistent colour use, and consistent typography, it’s going to be more important than ever to restrict content managers in what they can or cannot do and therefore create more custom blocks. I’m very interested to see what Advanced Custom Fields is doing with creating custom blocks. I hope it will make coding blocks a lot easier. It looks very simple, but on the other hand, it looks a lot more interfacy. You can add fields and you can add input fields and drop downs or whatever. And the entire idea behind Gutenberg itself is, to make the interface disappear as much as possible. So, that’s one of the things I still wonder about. What’s going to happen in the future. Are we going to actually let go of this interface? Or are we going to keep producing blocks, but now with a lot of fields in them? What I tried to do, and in this case, it was to keep as much to the default Gutenberg stuff as possible. And leave a lot of UI out of it. Monique: Did you also make a custom post type in a sense of that, when people make a project page, that they only see the blocks that are related? Or was that really hard to build in? Or did they get to see all the blocks all the time? Luc: No, there are certain blocks that are tied to certain post types. Certain blocks are only tied to a single post. So we have an intro, specifically for the homepage, for instance. We have a hero block that’s also only available on the homepage. Monique: so people don’t have to dig through all collections of blocks all the time. Luc: Yeah. On a personal note, I think that UI still could use a lot of work, but, Monique: some TLC! Luc: Yeah, exactly! But it’s possible. Monique: Ok, work in progress! Software or websites are never finished, are they?

So maybe to conclude: what part of this project are you most proud of? Luc: I think I’m most proud of how we took a single line of Gutenberg blocks and distributed them across semantic HTML. And in that process, we created a more accessible site. That to me was a real victory. Saying yeah, you can use Gutenberg for accessible sites. But we really have to make a difference on the backend and the frontend in this case. Monique: Cool! Well, I think, well, I’ve got so many more questions I want to ask you about this, but I think we’ll leave it with this. So if people want to contact you or find out more about the project, are you open to that? Luc: Yeah sure, that’s no problem. I have a website: where they can contact me. I’m planning on writing a lot of blog posts about this project too. Still haven’t gotten around to that. Monique: We’ll go and sit under the Christmas Tree for a bit now. the next few weeks and rest. Luc: Good idea. Monique: Thank you so much for showing me this and explaining. And I’ll put this video online within – I don’t know, as soon as possible! Have a good weekend, thank you! And speak to you soon! Luc: Byeeee!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.