Giter Club home page Giter Club logo

a11ylint-brackets's Introduction

A11YLint Brackets Extension


A11YLint Brackets Extension aims to bring the same kind of in-context, immediate feedback that you get from JSLint/JSHint and other linting tools, but regarding issues in your HTML that would affect how accessible your content is.

Getting Started

Download and install the A11YLint Brackets Extension the same way you would download Other Brackets Extensions

Turn It On

You Enable / Disable A11YLint in the Brackets > View menu, in the same way you turn on/off JSLint

What It Gives You

An output panel at the bottom of the screen, just like JSLint, with line numbers, messages and code snippets if there are issues. Clicking on an error scrolls the editor to that line, so you can change things easily.

Background

I was lucky enough to have some really smart people help me out at work with some accessibility related code. And what I learned in that process was that if you try to bolt it on at the end it's just painful. So I wanted something that I could have in my editor to point out when I was leaving out the important stuff.

What I Meant To Do

What I really wanted to do was create a nicely portable JS library that was modeled after JSLint. I wanted to implement the same interfaces and do things the same way, so that people who already had JSLint integrations could easily integrate A11YLint into the same processes.

What I Actually Did

I went a little mental trying to do that. Someone pointed me to an existing project called arialinter that I hoped I could just drag and drop into a Brackets extension, but the arialinter is really more Grunt-focused, and there was a lot of modification I would have needed to do. So instead I ended up pulling out the JSHint Brackets Extension, mining it for the interface to Brackets that I wanted, and pulling in the rules as defined in the arialier (though I had to heavily modify some of them along the way in order to make things work).

So in the end, there's a bit of JSLint, a bit of JSHint, quite a lot from arialinter all plugged in here. I owe a tremendous debt of gratitude to all of those projects and their authors for cutting a trail.

Known Issues

Security

This extension currently works by loading the HTML from your editor into a hidden div and manipulating it. This means if there is some javascript in your code, that JS could break Brackets (for example, by trying to load in another version of jQuery). The extension is trying to account for that by replacing <script and </script with <noscript and </noscript, but that's not security. Loading this into an iframe or doing something smarter is called for, but I'd rather push this out now than hold off. Be aware and smart.

License

MIT License. I don't think there's enough in here from JSLint or JSHint to require using their modified license, but I'm prepared to be wrong about that.

Credit

a11ylint-brackets's People

Contributors

duaneobrien avatar redmunds avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

a11ylint-brackets's Issues

Extension Error

After I installed the extension, it shows "Extension error" on the Extension Manager. How should I fix it?

HTML Snippets cause problems

I tried opening an HTML Template, which is a partial HTML Page (or snippet).

  1. Install https://github.com/redmunds/brackets-display-shortcuts
  2. Open this HTML Template in Brackets: [extension-folder]/templates/bottom-panel.html
  3. View > Enable A11YLint

Result:
Can't change project tree selection to any other document! Lots of exceptions in console.

Workaround:
Close and restart Brackets!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.