Topics

Lightning-fast 100 score! Web accessibility in a high-speed environment. Lighthouse fireworks!

  • column

Mastering Web Accessibility!

"Our frontend and markup experts are top-tier, and we already handle UI for MA tools, so accessibility should be a piece of cake!" That was our naive starting point for Liberogic's web accessibility project... In reality, it marked the beginning of a grueling battle. Having set our sights on full WCAG 2.2 compliance, we found ourselves in an endless cycle of study sessions and never-ending discussions. Honestly, we came to realize how much we had underestimated the challenge.

Looking back, it all started at an accessibility study session during the early days of the project a few years ago.
"What's the difference between WCAG and JIS X 8341-3:2016?"
"WCAG 2.0 and JIS X 8341-3:2016 are the same!"
Such basic exchanges marked the start of a very long journey.
"Is this success criterion understood correctly this way?"
"No, that's the criterion from the other standard."
After countless discussions and revisions, we finally reached a point where we could aim for WCAG 2.2 Level AA conformance.

Let's Rebuild Our Own Website!

"Doesn't our website feel out of sync with our business?"
That simple remark kicked off the redesign of our own website.
"If we're doing it, let's go all in on accessibility and SEO!"
Needless to say, our busy and talented staff (probably) embraced this ambition with enthusiasm.

"This color fails the contrast ratio!"
"But it looks good from a design standpoint..."
"Can't we adjust it within the rules?"
And so on. We went through plenty of trial and error between design and accessibility.
On the markup side, we steadily worked through a daunting checklist of test items.

Finally complete!
Although it was significantly behind the original schedule, we felt a solid sense of accomplishment in the technical progress we had made.

Group photo of the accessibility and website creation team, styled with a Studio Ghibli-inspired filter
Accessibility + Website Creation Team: Launch Celebration Scene, by ChatGPT-4o

Scored 100 on Lighthouse! And strong results on PageSpeed Insights too!

Our site, built with Astro + microCMS + Cloudflare, was always going to score highly on Lighthouse. Accessibility was a given! Lighthouse's accessibility audit relies on the highly reliable axe-core engine, so our efforts toward WCAG compliance are evaluated pretty directly.

Performance was a slow climb at first, since the site has many images and a lot of moving parts. But after plenty of unglamorous tuning, such as optimizing how web fonts load, revisiting image compression and formats, and adjusting resource loading priorities, that moment finally arrived!

\ 100 points! /

Every category on the desktop Lighthouse report scored a perfect 100! And the rumor turned out to be true. "Wow! So if you hit 100 across the board on Lighthouse, Google celebrates with fireworks!"

"No way! Our previous site barely reached the 80s and 90s. Astro probably helped, but this is amazing!"

Show video transcript (Japanese)

00:00 (lighthouseでスコア100点を記録した時の花火の様子)

PageSpeed Insights, another performance measurement tool from Google, also naturally returned a score of 100.

However, PageSpeed Insights gets no special fireworks display. We've had a run of 99 on one and 100 on the other, so we'd kindly request that Google add some celebratory flair for this one too. 🎇

Screenshot capturing a 100 score on PageSpeed Insights

By the way, Lighthouse and PageSpeed Insights scores fluctuate depending on the network conditions, server state, and browser environment at the moment of testing, so even though we hit 100, it's not always possible to maintain that score.

Screenshot of the Lighthouse score on mobile
Screenshot of the PageSpeed Insights score on mobile

Getting a perfect 100 on mobile performance seems like an impossible game, huh... Here's how it looked. (↑I didn't take a screenshot at the time, so this one was captured fairly recently.)

The true goal lies beyond the score.

"Well, wait, isn't this the natural result if you think about it from the user's perspective...?"

Rather than chasing a score, we believe our top ratings are the result of thoroughly designing for everyone who actually uses a website. A "score of 100" is just a waypoint. The real goal is building websites that are comfortable and easy to use for everyone!!

We are currently implementing a range of experimental features to verify feasibility for our projects, and our Lighthouse scores have dipped below what they were at the time. I keep innocently shouting, "Why, why...?" but it goes without saying that, for everyone else, verifying project feasibility matters far more than my selfish wishes.

And so our relentless pursuit goes on.

About the author

Though I'm the president, I'm always a hands-on counterpart. I take joy in understanding new technologies and in those moments when something becomes more convenient, and I love being completely absorbed in the work on the ground. I get excited about future technologies and want to keep enjoying new experiences no matter how old I get.

Tadanori Morimoto

Project Manager / Director / Founded 2007

View this staff member's articles

Case Studies