Building accessible-app.com: Let's start building

I have to be honest - when planning Accessible App it was always more fun to focus on specific implementation details than to stay on a conceptual level. That's why I wrote about an accessible routing of using Vue Router ahead of the normal schedule, supplying an explanation why I did it in the first paragraph.

Up until now, the only planning/briefing document was the blog post A specific app idea, and the corresponding wireframe image. But I feel like a have to pool these rather meandering ideas into a short - JavaScript framework agnostic - briefing document:

The Brief for v1.0

Introduction

The goal is to build a Single Page Application in React, Vue, and Angular respectively. This SPA will have typical features and Accessible App's goal is to showcase how these features can be built in an accessible way.

Requirements

To do this it is necessary to research:

• If the JavaScript framework supplies accessible components by default
• If the JavaScript framework's documentation promotes inclusive design strategies
• If there are ready-made, accessible components available from third parties
• Strategies to use the frameworks abilities to reach an accessible result anyways, if none of the above is provided

Scope

The example app shall be a simple e-commerce app where you can buy books about accessibility. As routing is commonplace in Single Page Applications the example bookstore will consist of several page states that can be accessed by their own URI. With the aid of typical e-commerce features like a shopping cart, the app aims to showcase, for example, the use of notifications, focus management and buttons in a web app. Furthermore, the app will include typical widgets that you often find outside Single Page Applications, such as Off Canvas navigation, (modal) dialog windows, menu buttons and data-tables.

Schema

App
    Wrapper
        Header
            Logo
            Nav (1)
            User Actions
                Account (2)
                ShoppingCart
        MainContent (3)
            ProductListing
                ProductTable (4)
                    InfoButton, opens dialog (5)
                    AddToCart button
            AboutPage
    ModalPortal (5)

Legend

1. Route Links
2. Menu Button
3. Where focus will be sent to after route transition (either via Reach Router in the React version of the sample app, a Vue routing strategy, see blog post, or via I-don't-know-yet in Angular)
4. Data table for book products, sortable by table head (author, title, year published, price)
5. This is the part of the DOM where dialogs will be placed. I'll explain in the next blog post (by means of the Vue implementation) why this is necessary if you want to use modal dialogs.

If you want to supply feedback on this document, please feel free to. I put it on GitHub.

Let's go (Vue)

Now that this is being taken care of, I feel better to jump into the implementation phase. As I mentioned before I'll start with Vue, because:

• from all of the selected frameworks, my brain just functions the Vue way.
• I already started in Vue anyway. 😇
• Lastly, I somehow find exciting that Vue in contrast to React has to catch up in terms of accessibility. That gives us the opportunity to build inclusive features right into the core components and to learn from, let's say, React's treasure of experience in this regard.

So, all in all, my next steps will be:

• Firing up the amazing Vue CLI
• Installing vue-router, vue-portal
• Setting up the baseline component architecture mentioned in the brief
• Setting up at least two routes, ProductListing and About
• Implement my route transition focus technique

After that, the next big topic will be (modal) dialog windows. You can expect a separate blog post on accessible Vue dialog strategies before Christmas.

Why not use Bootstrap Vue?

One last note before starting: I am aware that the project Bootstrap Vue exists, and that it comes with many ready-made and accessible solutions (inherited from the matured Bootstrap project). I actively decided against using it for the Vue implementation of Accessible App because it would mean a buy-in into another framework (on top of Vue). Now Bootstrap is defacto standard for some developers and companies, but other CSS and JavaScript frameworks, architectural methodologies for small- and large-scale projects do exist and I want to live up to that. Nevertheless, I'm sure I will now and then take a peek into their code - the same way I looked into React's code and documentation in the past 🙃.

On the other hand: If you or your companies decide to use Vue in interaction with Bootstrap, this library will be a great relief. Just stop by at Accessible App when it comes to parts of your SPA that is not a "classic widget", but still need some inclusive strategies, like routing for example.