Accessibility Guidelines Web Content Accessibility Guidelines (WCAG) Overview

Accessibility Principles WCAG Accessibility Principles

Accessibility for Content Creators

Accessibility for Web Developers

Our Tools for Assessment:

Wave
Web Accessibility Evaluation Tool

WebAIM Color Contrast Checker

W3C HTML Validator

W3C CSS Validator

Development Tools:

PostCSS
WCAG Contrast checks CSS for color contrast compliance with Web Content Accessibility Guidelines (WCAG) 2.0.

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable WCAG Contrast within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
    return gulp.src('./src/*.css').pipe(
        postcss([
            require('postcss-wcag-contrast')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('.')
    );
});

Accordion background color: #FAFAFB Remove active from class for panels to remain closed upon load. *Use class="accordionInner" on the ul if using a list with links.

Mark up headings in a logical order from H1 (usually the page title) to H2 to H3, and so on. Don't skip levels to avoid confusion. Use CSS to change the visual display as needed.

Accessibility: Users of adaptive technologies, including screen readers and others, navigate pages via headings. You should mark up headings (H1) and subheadings (H2 - H6) using heading tags.

We use Font Awesome for all of our icon needs. You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements.

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

Accessibility:

1. Use the Font Awesome CDN to automatic accessibility support. All updates will then be applied automatically.

2. To improve web accessibility, FA recommends using aria-hidden="true" to hide icons used purely for decoration.

3. Modern versions of assistive technology, like screen readers, will read CSS generated content (how Font Awesome icons are rendered), as well as specific Unicode characters. Assisistive technology may have the following problems: The assistive technology may not find any content to read out to a user. The assistive technology may read the unicode equivalent, which could not match up to what the icon means in context, or worse is just plain confusing

More info on Accessibility and Font Awesome at http://fontawesome.io/accessibility/