Building accessible-app.com: Hello, Vue implementation

Caution! This article was published over a year ago, and hasn't been updated since. Situation, software and support of the topic below could have changed in the meantime.

This is going to be a rather short blog but link heavy post. Finally leaving the phase of mere writing about inclusivity of web apps (and maybe supplying a code example here and there), now entering the time where I finally put things together in the browser and build the example app, now dubbed "Accessibooks".

As stated in the last article, I started with Vue and you can find the unspectacular beginnings here: vuejs.accessible-app.com. The source code is available on GitHub.

What's currently implemented

At it's core, this first implementation is a basic HTML structure, including:

At the styling front the design is very simple and has sufficient color contrasts. Beyond that you can find explicit focus styles on every interactive element (and, as part of showcasing the accessible routing solution you can even turn on a stronger focus indicator that works on non-interactive elements).

Lastly, I implemented modal windows, which currently work as a demonstration how to implement them accessibly (see: Modal and non-modal dialogs - and Vue) and to harbour error messages when you interact with yet unfinished components.

Learnings

While building I stumbled upon a few things:

Next steps

I plan to target the menu buttons next (see the assigned GitHub issue in Accessible App's backlog). But I am, in parallel, always open for feedback on the current state of vuejs.accessible-app.com. And if anyone wants to start with the React or Angular implementation - go for it!