Accessibility Demonstration in WebXR
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Around 4.4 percent of germans with severe disabilities are legally blind (source: Statistisches Bundesamt, 2019). Most WebXR Applications are built without accessibility in mind. This project serves to demonstrate how to transform a WebXR Application according to WCAG 2.1, A11Y and other resources not disclosed here.
This project is forked from MozillaReality/hello-webxr. It will be used as a base for the transformation.
To run this project please follow the steps described below. For best compatibility please use the versions of node.js and firefox as described.
To run this project you need a WebXR capable device and browser. Firefox and Chrome are preferred. Using a virtual reality device with controllers is preferred, as it will be tested on one. To run this project locally, you need to have node.js and npm (node package manager) installed on your system.
-
WebXR capable browser
Desktop Browsers
Mobile Browsers -
node 16.13.2
please download from nodejs.org/de/blog/release/v16.13.2/ or use nvm
nvm use 16
-
npm 8.3.1
npm install npm@latest -g
-
Clone the repo
git clone https://github.com/timondev/webxr-a11y.git
-
Install NPM packages
cd webxr-a11y && npm install
-
Run the software, it may take some time to build
npm start
The following is only needed if shaders were changed. Needs to have python installed, no extra modules for installation needed
python packshaders.pyStart by installing and running the project locally or launch the latest version by visiting meta-a11y.tmn.dev. Click on ENTER VR on the bottom edge of the screen or press space on your keyboard. You can change the dominant hand left or right (which will be used mainly for navigation) on the top right of the screen. this will currently refresh the page, which could change in the future.
To exit, click on EXIT VR on the bottom edge of the screen inside your browser window.
You will find yourself in a room with different stations and portals. It is called the hall. From the starting point across the room, slightly to the right, is a logo with the inscription Hello WebXR! and an alternate version of the firefox logo with googles behind the exclamation point.
Between you and the logo are 360 degree image orbs floating above two pylons and a xylophone which you are able to play on using your controllers. To the right of the starting point are paintings where you can use a magnifying glass to zoom in and out while near. To the left of the logo is a portal which leads to the room called vertigo. To the left of the starting point is a news feed from twitter, followed by another portal which leads to a room called photogrammetry-object. behind the starting point is a big drawing canvas and the last portal which leads to a room called sound.
To interact with a portal, use your dominant controller to select the portal and hit your main trigger to enter it.
The room vertigo consists of different sized tall boxes and a small path leading into the void. The room has no solid floor. To go back, you need to turn around and find your way through a small passage where you can exit via the portal to the left.
The room has a detailed version of an angle statue and a tablet with information about history. The portal is behind your back from the starting point. You will hear classical music while you are in this room.
The room will play different sounds around you. To go back, exit via the portal to the right of the starting point.
- Add Hello WebXR example to project
- Add metadata to assets
- Information about textures, dexteritity and size
- Compound Information about larger assets
- Add screen reader capabilities
- Enable screen reader using an action button
- Identify objects in viewpoint
- Mark position of objects of interest on screen
- Use metadata to read information and position about objects aloud
- Add navigation features
- Identify objects in viewpoint (and or inside room)
- List objects in viewpoint to user using screen reader
- Selection of an object inside viewpoint
- Interaction or teleportation to object using action button
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m ':sparkles: Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the Apache-2.0 License. See LICENSE for more information.