No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Accessible App - Central briefing

v1.0, December 01, 2018


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 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


The example app shall be a simple e-commerce app where you can buy books about accessibility. As routing is common place in Single Page Applications the example book store 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.


            Nav (1)
            User Actions
                Account (2)
        MainContent (3)
                ProductTable (4)
                    InfoButton, opens dialog (5)
                    AddToCart button
    ModalPortal (5)


  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.