A web page tab switcher with accessibility.
Preview(We suggest Google Chrome): Github Pages
HTML Tabs Frame is a web page tab switcher with accessibility. It allows you to create multiple tabs in a web page, each of which can contain any content, including images, videos, audios, tables, forms, etc.
The intent of this project is to provide an accessible in-page multi-tab switcher for desktop applications such as QT, as QT's QWebEngineView does not support accessibility very well, so it can only be implemented via the web. However, this project can be used in any other scenario where an accessible in-page multi-tab switcher is needed.
HTML Tabs Frame can create a multi-tab switcher in a web page, allowing users to switch between different tabs within the web page without leaving the current web page.
We provide two types of tabs:
- inner: internal tab, whose content is inside the web page, that is, its content is in the HTML code of the web page;
- iframe: external tab, whose content is outside the web page, that is, its content is outside the HTML code of the web page.
Use index.html to start.
```
├── index.html
├── assets
│ ├── css // the folder of stylesheets, where the file names match the HTML file names.
│ │ ├── high-contrast.css // high contrast mode style, currently used for newTab.html night mode.
│ │ ├── tabnav.css // stylesheet for the tab navigation bar.
│ │ ├── tabnav-night.css // stylesheet for the night mode of the tab navigation bar.
│ │ ├── theme.css // theme style, responsible for loading the light theme.
│ │ ├── theme-night.css // theme style, responsible for loading the night theme.
│ │ └── ...
│ │
│ ├── data // the folder of data files that store page information and settings.
│ │ ├── pages.json // page information, which will be loaded when the page is loaded.
│ │ └── settings.json // settings, which will be loaded when the page is loaded.
│ │
│ ├── images // the folder of image files.
│ │ └── ...
│ │
│ ├── js // the folder of scripts, where the file names match the HTML file names.
│ │ ├── accessibility.js // accessibility script, also responsible for keyboard shortcuts.
│ │ ├── autoload.js // responsible for loading all other files.
│ │ ├── cookies.js // responsible for reading and writing cookies.
│ │ ├── languages.js // responsible for loading language packs.
│ │ ├── load-settings.js // responsible for loading settings and resources.
│ │ ├── nav.js // script for the tab navigation bar.
│ │ ├── reload-settings.js // Reload the settings item when changing settings or adding new content div or iframe in the settings page.
│ │ ├── theme.js // script for loading themes (light/night).
│ │ └── ...
│ │
│ ├── lang // the folder of language pack files.
│ │ ├── languages.json // stores global language pack information.
│ │ └── ...
│ │
│ ├── lib // the folder of some library files.
│ │
│ ├── scss // the folder of SCSS files, where the file names match the HTML file names. These files will be compiled into CSS files, and can be deleted if not used.
│ │
│ └── ...
│
├── LICENSE // license
├── LICENSE_CN // license
├── index.html // homepage
├── newTab.html // new tab page
└── README.md // documentation
```
We follow the Anti-996 License to open source this project.
