a11y

  •        12

Pronounced Alix. Because it’s simpler. The whole presentation lives in the wiki. Please note that a substantial work has been accomplished to document the whole project, from the Sass layer to each test explanations through CSS selectors and tricks. I suggest you make a tour on a11y.css documentation website.

https://ffoodd.github.io/a11y.css
https://github.com/ffoodd/a11y.css

Tags
Implementation
License
Platform

   




Related Projects

eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements.

  •    Javascript

Static AST checker for accessibility rules on JSX elements. Ryan Florence built out this awesome runtime-analysis tool called react-a11y. It is super useful. However, since you're probably already using linting in your project, this plugin comes for free and closer to the actual development process. Pairing this plugin with an editor lint plugin, you can bake accessibility standards into your application in real-time.

axe-core - Accessibility engine for automated Web UI testing

  •    Javascript

Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It's fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing. Sign up for axe news to get the latest on axe features, future releases, and events.

TheA11yMachine - The A11y Machine is an automated accessibility testing tool which crawls and tests pages of any web application to produce detailed reports

  •    Javascript

Accessibility is not only a concern for disabled people. Bots can be considered as such, like DuckDuckGo, Google or Bing. By respecting these standards, you're likely to have a better ranking. Also it helps to clean your code. Accessibility issues are often left unaddressed for budget reasons. In fact most of the cost is spent looking for errors on your website. The A11y Machine greatly help with this task, you can thus focus on fixing your code and reap the benefits. If you would like to validate your pages against the HTML5 recommendation, then you need to install Java.

a11y - Accessibility audit tooling for the web (beta)

  •    Javascript

PhantomJS, which is used for generating the screenshots, is installed automagically, but in some rare cases it might fail to and you'll get an Error: spawn EACCES error. Download PhantomJS manually and reinstall a11y if that happens.

a11y-toggle - A tiny script for accessible content toggles.

  •    HTML

A tiny script (less than 0.6Kb gzipped) to build accessible content toggles. You can try the live demo which also acts as a documentation. a11y-toggle uses relatively modern JavaScript API (namely reduce, addEventListener, etc.) therefore will not work in Internet Explorer 8 and below. All the other browsers, including mobile ones should work fine.


react-axe - Accessibility auditing for React.js applications

  •    Javascript

Test your React application with the axe-core accessibility testing library. Results will show in the Chrome DevTools console. Call the exported function passing in the React and ReactDOM objects as well as a timing delay in milliseconds that will be observed between each component change and the time the analysis starts.

a11y-tools - JS Accessibility Tool List

  •    

My purpose in making such a list is that I want to be aware of what things are being evaluated so that I can get an idea of what things aren't being evaluated. Accessibility is hard, and since many commercial sites don't produce high quality HTML accessibility is much harder than it should be. Making accessibility easier to implement and understand is absolutely important. Good tools help with this. Sometimes the biggest problem with accessibility is that we know what to check for (most of the time), but we don't always know what grading aspects we are missing. Examples include color contrast problems over gradient backgrounds and improper use of the title attribute. Sometimes we also don't realize how the dynamic interactions we introduce with JavaScript alienate segments of our audience.

react-a11y - Identifies accessibility issues in your React.js elements

  •    Javascript

Warns about potential accessibility issues with your React elements.In your main application file, require the module and call it, you'll start getting warnings in the console as your app renders. Note that by default all rules are turned off s oyou need to turn them on first (by setting them to "warn" or "error").

axe-cli - A command-line interface for the aXe accessibility testing engine

  •    Javascript

Provides a command line interface for aXe to run quick accessibility tests. Install Node.js if you haven't already. This project requires Node 6+. By default, axe-cli runs Chrome in headless mode, which requires Chrome 59 or up.

mini.css - A minimal, responsive, style-agnostic CSS framework!

  •    CSS

mini.css is a lightweight CSS framework (under 7KB gzipped) designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customization are some of the main features of the framework, while accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox. For instructions on how to use, best practices, templates and other usage information, please visit the framework's documentation.

Responsive - :iphone: A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites

  •    HTML

Other frameworks are too design opinionated and heavy. They're great for prototyping but every time you start a real, front-facing, project with them you have to overwrite lots of designer styles that do nothing to add to the functionality of the website. That costs developers time and money. Responsive BP has been built with that in mind. It is the result of thousands of hours of real, client driven web development and testing; specifically developed to be as lightweight as possible to prevent the need to undo styles set by the framework itself and allow developers to write efficient code and lower costs.

ally.js - JavaScript library to help modern web applications with accessibility concerns

  •    Javascript

ally.js is a JavaScript library simplifying certain accessibility features, functions and behaviors. Its goal is to be A JavaScript library to help web applications with accessibility concerns. The intention is to separate these generic components from actual applications and other libraries.ally.js is published under the MIT License.

Crumpet - Crumpet is a deliciously simple SASS/SCSS responsive framework that keeps your HTML clean & stays out of your way

  •    CSS

Crumpet is a deliciously simple SASS/SCSS responsive framework that keeps your HTML clean & stays out of your way. Tidy HTML - Uses placeholder selectors to reduce the size of your HTML. No one likes messy.

vanilla-framework - From community websites to web applications, this CSS framework will help you achieve a consistent look and feel

  •    CSS

Vanilla Framework is a simple extensible CSS framework, built using Sass and is designed to be used either directly or by using themes to extend or supplement its patterns. You can link to the latest build to add directly into your markup like so, by replacing the x values with the version number you wish to link.

react-a11y - Identifies accessibility issues in your React.js elements

  •    Javascript

Identifies accessibility issues in your React.js elements

Linux Desktop Testing Project

  •    C

Linux Desktop Testing Project is aimed at producing high quality test automation framework (using GNOME / Python) and cutting-edge tools that can be used to test Linux Desktop and improve it. It uses the Accessibility libraries to poke through the application's user interface. We strive to help in building a quality desktop.

accessibility-developer-tools - This is a library of accessibility-related testing and utility code.

  •    Javascript

This is a library of accessibility-related testing and utility code. Its main component is the accessibility audit: a collection of audit rules checking for common accessibility problems, and an API for running these rules in an HTML page.

css - Believe in Better CSS

  •    Javascript

Before diving into the details of CSS coding style, you can find a Sky-conformant .scss template over at git.io/template. It's important we keep code transparent and self-documented when it comes to naming our selectors.

accessible-html5-video-player - Accessible HTML5 Video Player

  •    Javascript

A lightweight HTML5 video player which includes support for captions and screen reader accessibility. For details, read the blog post Introducing an Accessible HTML5 Video Player on the PayPal Engineering blog. Also see 7 Lessons from Developing an Accessible HTML 5 Video Player.Insert the CSS in the Head of your HTML document. You'll also need to upload the sprite image (or use your own) and adjust the path in the CSS file.