Cognitive-A11Y-Prototype Svelte Themes

Cognitive A11y Prototype

This frontend prototype constitutes the practical component of my master's thesis on cognitve a11y.

#a11y#cognitive#front-end#front-end-web-development#web-development#master-thesis#javascript#svelte
Demo Download

šŸŽ“ Cognitive A11Y Prototype

šŸ“Œ Table of Contents

  1. Description
  2. Tech Stack
  3. Installation
  4. Project Structure
  5. Development Features
  6. FAQ

ā„¹ļø Description

This frontend prototype constitutes the practical component of my master's thesis in the Computing in the Humanities program at the Otto-Friedrich-University of Bamberg. The thesis aimed to facilitate the implementation of cognitive accessibility for web developers through a structured guideline. This prototype applies that guideline by extending selected components of an application called BAULA.

Some features were built with the help of GitHub Copilot (AI). Search for "Remark" to get an overview over these code snippets.

The application language is German. The code language is English.

The deployed application is available here.

šŸ›  Tech Stack

  • JavaScript (ES 6+, mostly) + TypeScript (special cases)
  • Svelte 5 + Vite 7
  • svelte-spa-router for client-side routing
  • Svelte Material UI (SMUI) + Bootstrap / Bootstrap Icons for user interface design
  • ESLint for code quality

šŸ’¾ Installation

Requirements

  • Node.js (v25.2.1 or higher)
  • npm (installed with Node.js)

Installation steps

  1. Clone the repository:

    git clone https://github.com/ElenaLaubinger/Cognitive-A11Y-Prototype.git

  2. Install dependencies:

    npm install
npm run prepare

    npm run prepare compiles the SMUI theme to src/styles/smui.css and should be run after the first installation and after changes to the SMUI theme.

šŸ“‚ Project Structure

The following are the most relevant parts of the project:

šŸ“‚ src/
ā”£ šŸ“œ app.css                # global CSS coordinator
ā”£ šŸ“œ App.svelte                
ā”£ šŸ“œ dummy_data.json        
ā”£ šŸ“‚ lib/
   ā”£ šŸ“‚ helper_modules/            # accessibility-supporting modules                    
   ā”£ šŸ“‚ management/                # global states, data processing, persistence
   ā”£ šŸ“‚ module_catalog/            # filters, module cards, modal dialogs
   ā”£ šŸ“‚ navbar/                    # navigation
   ā”— šŸ“‚ search/                    # module and app-wide search
ā”£ šŸ“‚ routes/                # page layouts
ā”— šŸ“‚ styles/                # SMUI theme + global styles

šŸ§° Development Features

In-depth information on source files and features for development

Available Scripts

  • Development server 

    npm run dev

  • Development server with network access

    npm run expose

    The network-accessible development server runs on port 5173.

  • Build & Preview

    npm run build
npm run preview

Global Management

  • src/lib/management/StateManager.svelte.js ā€“ state variables used across the application
  • src/lib/management/SharedFunctions.svelte.js ā€“ functions used across the application

Module Catalog

Data Management

  • Module data is stored in src/module_data.json
  • Data processing and flattening are handled in src/lib/management/DataProcessor.svelte.js.
  • Visibility of basic modules is handled in src/lib/routes/SettingsLayout.svelte
    • Based on the chosen profile, the global state variable profileSetting is updated
    • This defines the active dataset by updating the following global state variables
      • profileModules - stores basic modules
      • profileSection - stores module sections
      • profileChair - stores chairs

Search & Filter Functionality

  • Filters are managed by src/lib/module_catalog/module_filter/Filter.svelte.js (functionality) and the .svelte components in src/lib/module_catalog/module_filter/ (UI)
  • Module search is handled by src/lib/search/module_search/ModuleSearch.svelte.js (functionality) and src/lib/search/module_search/SearchFull.svelte (UI)
    • Search history and suggestions include up to five terms for each search
    • Suggestions include moduleName and moduleAlias (module acronym)
  • Global state variable filteredModules stores modules based on active search and filter terms
    • Search and filtering can be applied simultaneously; execution follows the user's input order
    • If one feature is reset, the status of the other feature (i.e., searchActive/filterActive) is checked so that only one feature is reset
  • Managed by src/lib/search/app_search/ApplicationSearch.svelte.js (functionality) and src/lib/search/app_search/SearchIcon.svelte (UI)
  • Uses shared functions of src/lib/search/SearchShared.svelte.js
  • Possible search terms are route names and all <h1> headings
  • Results are links to matching parts of the application

Persistence

  • Persistence is managed via src/lib/management/Persistence.svelte.js
  • Data is stored in sessionStorage under the key baula-session
  • Persisted data include
    • selected degree program and profile
    • visibility and confirmation status of information boxes
    • search histories for module and application searches

Routing

Defined in src/App.svelte:

  • / or /dashboard ā€“ Dashboard
  • /modulkatalog ā€“ Module Catalog
  • /einstellungen ā€“ Profile Settings
  • /links ā€“ Quick Links
  • * ā€“ Not Found

The application uses hash-based routing (#/...).

ā“ FAQ

  • Styles are missing or appear inconsistent
    Run npm run prepare again.
  • How to reset the persisted data
    Use one of these options:
    • Close the browser tab
    • Close the browser window
    • Delete session storage in the browser (key: baula-session)

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes