inclusivetechnu / bri11iant

A VSCode extension for building accessible websites

Bri11iant

Bri11iant is currently in Alpha! Feel free to download the extension and leave us feedback, but know that the application will receive many updates before the Open Beta.

Are you an educator interested in using Bri11iant? Contact us at [email protected].

Made with 💜 in Evanston, IL at the Northwestern Inclusive Technology Lab and Delta Lab

Authors: Cooper F. Barth, Thomas B. McHugh

Advisors: Anne Marie Piper (UCI), Eleanor O'Rourke (NU)

Bri11iant is a VSCode language extension for supporting web developers improve the accessibility of their websites. Bri11iant fits right into your text editor, suggesting improvements to your HTML, CSS, and Javascript code in order to improve the accessibility of your websites.

We love the web. The goal of Bri11iant is to help make the internet a more inclusive place by providing developers with in-editor support for vital accessibility standards and inclusive design principles. It's often hard to tell what is and isn't an accessibility problem just from looking at your code, and it's even harder sometimes to understand why these issues may be harmful. Moreover, there are many ways to make the design of a website more inclusive past simply following WCAG standards. That's where Bri11iant comes in. As you're writing HTML (more languages coming soon!), Bri11iant can diagnose and report parts of your website that could be modified in order to provide your users a more inclusive experience.

Bri11iant is smart. Instead of just parsing the HTML file you're working on, Bri11iant can use the links to your CSS and Javascript files to construct a virtual render tree of your website and provide a more complex analysis without you ever needing to launch your browser. This lets Bri11iant give suggestions about inclusive design principles like color contrast, dynamic content handling, and multi-modal content presentation. We want this website to be able to act as a comprehensive resource for learning about accessibility and inclusive design. Alongside the Bri11iant extension, we provide extensive documentation, articles, and blog posts about accessibility, inclusive design, and the A11y community.

Compatibility

Text Editors

• Visual Studio Code
• More on the way!

Languages

• HTML / CSS
• React.js (Coming Soon)
• React Native (Coming Soon)
• Vue.js (Coming Soon)

Run

Visual Studio Code

1. Download the Bri11iant extension.
2. Install and enable the application.

Local (VSCode)

First, clone the repository:

git clone https://github.com/InclusiveTechNU/Bri11iant.git
cd Bri11iant

Then, run these commands to install dependencies and compile the project:

npm install
npm start

Open Visual Studio Code. Press ⌘ + Shift + B to build the project. Then, press F5 to run the project in debug mode. A new VSCode window should pop up with the language client and server running.

This project is built and maintained by the Northwestern University Inclusive Technology Lab and is funded by NSF Grant 1901456.

bri11iant's Issues

Add support for other document types

Vue.js + React, among others, should be supported.

Trace back to source error

Errors at least in CSS should have a link to trace them in HTML. I'll play around with this.

Webpack & Server

Webpack is breaking when trying to include JSDOM while bundling the server. Fix this.

alt text generation is blocking

Generating alt text for <img> tags blocks other tags. Desired behavior should be:

• Default alt text is shown and all other tags are calculated
• Another message is sent once image classification finishes to update the description

Support online CSS

Current DOM configuration only loads in external CSS files and should break on online ones. Add support.

Test JS support

JSDOM supports running external scripts linked through <script src=""> if { runScripts: "dangerously" } is passed in the JSDOM parameters. Please write tests for this in server/src/test`.

Handle boolean tag attributes

JSDOM replaces tags like <audio controls src=""> with <audio controls="" src="", which can't be found by the parser for obvious reasons.

/> tags break the system

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img src="apple.jpg" />
    </body>
</html>

Versus

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img src="apple.jpg">
    </body>
</html>

The first one seems to not be able to figure out where the img source is in the file and results in alerting the alt text warning at the tag.

Handle predefined color formatting

Need to support predefined color declaration types for contrast checking:

• Predefined

Ignore certain rules

Hi
I'm trying to use this extension with angular. I know it's not officially supported but the hints are really helpful.
I just wish I could disable the header warnings that pop up in every file.
Could you offer a way to ignore certain rules?
Thanks :)

aria-live

This could be cool to implement: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

i.e. "JS modifies this part of the DOM - if this is an important change, consider adding an aria-live tag"

Support for inline scripts

Parse and run code within <script></script> tags that would manipulate the DOM

Handle duplicate errored tags

Currently, a document with the following will produce 2 errors for each identical img tag.

<img src="">
<img src="">

Navigation

https://usability.yale.edu/web-accessibility/articles/navigation