Building accessible-app.com: Let's start building
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.
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.
This is part 5 of an article series on building "accessible-app.com".
Read the other posts:
- Very first steps
- Further steps together
- A specific app idea
- Project status, side benefits, and Routes
- Let's start building
- Dialogs and Modals
- Hello, Vue implementation
- Menu Buttons
- New menu button for Accessibook's shopping cart
- Accessible Animations
The current state of the VueJS implementation of #accessibleapp
The Brief for v1.0
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.
To do this it is necessary to research:
- 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
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.
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)
- Route Links
- Menu Button
- 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)
- Data table for book products, sortable by table head (author, title, year published, price)
- 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?
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.