Sanna Kramsi - Blog A peek into my life

Accessibility site 2.0 is live and kicking

August 03, 2023 | Tech

The first version of the new renewal project is out. It was a bit touch-and-go with the search but luckily I now have at least a somewhat nicely working search on the site.

The site has a lot of new content

I have already written quite a lot of new content for the site. A lot of it was to support me in studying the International Association of Accessibility Professionals (IAAP) Certified Professional in Accessibility Core Competencies (CPACC) materials. But I've also wanted to extend the content on the site for a while now.

I decided also to test how ChatGPT could support the writing process. It was quite fun to ask ChatGPT to help out with summarising some of the content. Quite a useful tool, especially if you already know the topic you're asking it to provide content for. Because it did write some things that really weren't about directly the topic itself. But all in all, I'd say that tools like these will probably make it a bit easier to gather information on a lot of topics. Hopefully, they will also ensure the tools will be accessible to everyone.

I already have some more plans for content changes on the site. I'll just need to keep writing. But just like the accessibility process is never ready, neither is content creation.

Frontend changes

The look and feel are quite the same as it was before. A few tweaks here and there. I also added some accessibility blog highlights to the front page of the English language version to get the content I write to this blog shown on the site as well. That will help me stay motivated to write more accessibility content for the blog.

I also decided to add a back-to-the-top link to the footer. I didn't want to have it float so that it doesn't cover the texts. But I thought to provide one at the end of the page so people can hop back to the top.

I also redesigned the blockquote element. It's a bit more visible as well as easier to understand. And I added a simple type of info box element that accepts just text. It's basically just some text placed more visually. I'm not sure how useful that element will be in the future. But hopefully, it will bring out some new ideas in me.

Backend changes

The biggest change happened on the backend side. The site is now running Strapi. The CKEditor5 I'm running is custom. I wanted two, and only two, language options for the language tool. Otherwise, it would have been a pain to use in the long run. Unfortunately at the moment, it's not possible to tweak those settings with the Strapi plugin. Hopefully in the future, at least there was some discussion about that already. No surprise that I'm not the only one interested in tweaking the list of languages. Scrolling through and trying to find the correct language is really annoying in the long run.

Strapi supports language versions quite nicely. Setting it up felt more or less painless. Content input also feels quite nice. At least I'm not crying for Drupal UIs yet. Though it might help that I have CKEditor in both Drupal and Strapi. The WYSIWYG (What You See Is What You Get) experience is a huge part of the whole editor experience.

For the menu, I used a plugin called UI Navigation. There were some settings I didn't understand at all. But the functionality seems quite nice and I was able to have both buttons and links in the menu relatively easily. Basically, I have a lot of wrapper element buttons and internal source links. The plugin supports external links out of the box as well.

Site search

The search was a bit of a struggle. First figuring out which search to use. Originally I was planning to use Elasticsearch but then we looked into Meilisearch and it looked quite promising.

Meilisearch doesn't currently have proper language support. But I figured my site can live with getting both languages in the language results for now. I could delete those other languages on the frontend but then I'd have to change how the language menu works on the search pages and I really don't want that. But I'll have to see how usable the search will be.

Hosting

The backend is self-hosted. I'm lucky to have a partner who likes to host my things. Well, honestly I doubt he likes it but at least he does it.

The frontend is hosted on Netlify like my other frontends are. I was originally going to go with Vercel but I just wasn't feeling it for some reason. I really like the UI and user experience in Netlify.

Did the project go smoothly?

For the most part, yes. It did take me some time to get more comfortable with TypeScript on the frontend side. Maybe not the easiest thing to hop from a quick basics course directly into my code. But I did get everything working in the end, and no 'any' definitions in the main code! So it's something at least already at this point. A lot of things to improve, like always. But at least there will be more things to do.

On the backend side we ran into a problem we were not expecting. I use SQLite locally because it was quick to set up. We were excited when we noticed that the database can be exported and imported. So no worries about setting a different setup for the production. Well, almost. While the export and import did work, I soon noticed that every single element in the menu element got scrambled. Languages and page references were all over the place. The one thing that I really, really, really didn't want to do again had to be done manually. Well, luckily it went quite smoothly, I have quite a bit of experience on the content editing side, after all. But it was a bit of a pain, especially because I had to fix the whole language version menu at once. Saving was only possible once all errors were fixed. But luckily I didn't have to fix both languages at once. While I was fixing the menu, my fiancé also found an issue mentioning this behavior in the plugin issue queue. So hopefully at least at some point in the future someone else can avoid this. Because while the menu element works well, it's not the lightest to alter.

What's next?

From the frontend side, I'll need to test and see how I feel about the menu in the long run. And I'll need to see if it supports more sections or if I'll need to change things around. I'll also need to think if I want to make the site more static.

Hopefully, the backend side doesn't need too many changes. I'd like to be able to concentrate more on the content updates for a while.

I will also need to follow up on the Meilisearch feature progress. I really hope language support will arrive sooner or later. When that comes, I'll probably look into adding a search bar with search suggestions. I'd like to look into the accessibility of those features.

Content-wise there will be some smaller and some bigger changes. I'm also planning to add more content in general. If you have any requests for content, please let me know and I'll do my best to have that content available for you!