├── source ├── assets │ ├── grunticon │ │ ├── dev │ │ │ ├── .gitkeep │ │ │ ├── search.svg │ │ │ ├── menu.svg │ │ │ └── expand.svg │ │ └── production │ │ │ ├── png │ │ │ ├── menu.png │ │ │ ├── expand.png │ │ │ └── search.png │ │ │ ├── icons.fallback.css │ │ │ ├── icons.data.png.css │ │ │ ├── grunticon.loader.js │ │ │ ├── icons.data.svg.css │ │ │ └── preview.html │ ├── javascripts │ │ ├── vendor │ │ │ └── .gitkeep │ │ ├── responders.js │ │ ├── all.js │ │ ├── forms.js │ │ ├── accordion.js │ │ ├── modal.js │ │ ├── tabs.js │ │ └── navigation.js │ ├── images │ │ ├── web-guide.png │ │ ├── Logo-Header-Retina.png │ │ ├── innovation-studio-text.svg │ │ └── frequent-flyer.svg │ └── stylesheets │ │ ├── modules │ │ ├── _color-grid.scss │ │ ├── _accordion.scss │ │ ├── _tabs.scss │ │ ├── _aside-nav.scss │ │ ├── _modal.scss │ │ └── _navigation.scss │ │ ├── library │ │ ├── _icons.scss │ │ ├── _variables.scss │ │ ├── _mediaqueries.scss │ │ ├── _reset.scss │ │ ├── _typographic-mixins.scss │ │ ├── _general-mixins.scss │ │ └── _grid.scss │ │ ├── contexts │ │ ├── _primary-content.scss │ │ ├── _site-header.scss │ │ └── _site-footer.scss │ │ ├── main.scss │ │ ├── syntax-highlighting.css.erb │ │ └── globals │ │ ├── _forms.scss │ │ └── _general.scss ├── content │ ├── overview.mkd │ ├── copywriting.mkd │ ├── index.mkd │ ├── audio-video.mkd │ ├── cognitive.mkd │ ├── buttons.mkd │ ├── pdfs.mkd │ ├── maps.mkd │ ├── images.mkd │ └── third-party.mkd ├── design │ ├── index.mkd │ ├── animations.mkd │ ├── font.mkd │ └── color.mkd ├── code │ ├── index.mkd │ ├── flash.mkd │ ├── buttons.mkd │ ├── tables.mkd │ ├── calendars.mkd │ ├── search.mkd │ ├── alerts.mkd │ ├── carousels.mkd │ ├── skip-link.mkd │ ├── svg.mkd │ ├── accordions.mkd │ ├── navigation.mkd │ └── dialogs.mkd ├── foundations │ ├── index.mkd │ ├── keyboard.mkd │ ├── semantic.mkd │ └── js.mkd ├── partials │ ├── _site-header.haml │ ├── _site-footer.haml │ ├── _aside-nav.haml │ └── _primary-navigation.haml ├── resources │ ├── resources.mkd │ ├── screenreaders.mkd │ └── index.mkd ├── index.mkd └── layouts │ └── layout.haml ├── Procfile ├── .bowerrc ├── nodemon.json ├── Rakefile ├── bower.json ├── tasks ├── icons.js └── build-modernizr.js ├── .gitignore ├── modernizr.config.json ├── package.json ├── Gemfile ├── LICENSE ├── config.ru ├── config.rb ├── README.md └── Gemfile.lock /source/assets/grunticon/dev/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: bundle exec puma -p $PORT 2 | -------------------------------------------------------------------------------- /source/assets/javascripts/vendor/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "execMap": { 3 | "js": "babel-node" 4 | }, 5 | "ext": "js" 6 | } 7 | -------------------------------------------------------------------------------- /source/content/overview.mkd: -------------------------------------------------------------------------------- 1 | --- 2 | title: Overview | Accessibility Guidelines 3 | --- 4 | ## Overview -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | namespace :assets do 2 | task :precompile do 3 | sh 'middleman build' 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /source/assets/images/web-guide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CMP-Studio/inclusion-guidelines/HEAD/source/assets/images/web-guide.png -------------------------------------------------------------------------------- /source/assets/images/Logo-Header-Retina.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CMP-Studio/inclusion-guidelines/HEAD/source/assets/images/Logo-Header-Retina.png -------------------------------------------------------------------------------- /source/assets/grunticon/production/png/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CMP-Studio/inclusion-guidelines/HEAD/source/assets/grunticon/production/png/menu.png -------------------------------------------------------------------------------- /source/assets/grunticon/production/png/expand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CMP-Studio/inclusion-guidelines/HEAD/source/assets/grunticon/production/png/expand.png -------------------------------------------------------------------------------- /source/assets/grunticon/production/png/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CMP-Studio/inclusion-guidelines/HEAD/source/assets/grunticon/production/png/search.png -------------------------------------------------------------------------------- /source/assets/javascripts/responders.js: -------------------------------------------------------------------------------- 1 | // call jRespond and add breakpoints 2 | var jRes = jRespond([ 3 | { 4 | label: 'nav', 5 | enter: 0, 6 | exit: 700 7 | } 8 | ]); 9 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "a11y-guidelines", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "jquery": "~2.2.3", 6 | "breakpoint-sass": "~2.6.1", 7 | "jrespond": "*" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /source/assets/javascripts/all.js: -------------------------------------------------------------------------------- 1 | //= require jquery/dist/jquery 2 | //= require jrespond/jRespond 3 | //= require responders 4 | //= require navigation 5 | //= require modal 6 | //= require accordion 7 | //= require forms 8 | //= require tabs 9 | -------------------------------------------------------------------------------- /source/assets/grunticon/production/icons.fallback.css: -------------------------------------------------------------------------------- 1 | .icon-expand { background-image: url('png/expand.png'); background-repeat: no-repeat; } 2 | 3 | .icon-menu { background-image: url('png/menu.png'); background-repeat: no-repeat; } 4 | 5 | .icon-search { background-image: url('png/search.png'); background-repeat: no-repeat; } 6 | 7 | -------------------------------------------------------------------------------- /tasks/icons.js: -------------------------------------------------------------------------------- 1 | var icons = require("grunticon-lib"), 2 | globby = require("globby"), 3 | iconSrc = 'source/assets/grunticon/dev/*', 4 | iconDist = 'source/assets/grunticon/production'; 5 | 6 | var files = globby.sync(iconSrc); 7 | var options = { 8 | enhanceSVG: true 9 | }; 10 | 11 | var icon = new icons(files, iconDist, options); 12 | icon.process(); 13 | -------------------------------------------------------------------------------- /source/assets/stylesheets/modules/_color-grid.scss: -------------------------------------------------------------------------------- 1 | .usa-grid-full { 2 | margin-top: 1.5em; 3 | @include pie-clearfix; 4 | div { 5 | border: 1px solid $border-color; 6 | margin: 0.25em 0em; 7 | padding: 1em; 8 | font-weight: bold; 9 | @include breakpoint($bp-s) { 10 | @include column(6); 11 | @include last-col2; 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /tasks/build-modernizr.js: -------------------------------------------------------------------------------- 1 | var modernizr = require("modernizr"), 2 | fs = require("fs-extra"), 3 | config = JSON.parse(fs.readFileSync('modernizr.config.json', 'utf8')), 4 | outputDir = 'source/assets/javascripts/vendor/modernizr.js'; 5 | 6 | modernizr.build(config, function(result) { 7 | fs.outputFileSync(outputDir, result); 8 | console.log("Modernizr built to: ", outputDir); 9 | }); 10 | -------------------------------------------------------------------------------- /source/design/index.mkd: -------------------------------------------------------------------------------- 1 | --- 2 | title: Design Overview | Accessibility Guidelines 3 | --- 4 | ## Overview 5 | 6 | When designing an accessible website, it's important to be mindful of typographic choices, contrast & color choices, and animations & parallax scrolling effects. 7 | 8 | In this section, we discuss best practices for each of these topics, and we provide links to tools and resources to help designers make their sites more accessible to their audiences. 9 | -------------------------------------------------------------------------------- /source/assets/stylesheets/library/_icons.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-base { 2 | background-size: contain; 3 | display: inline-block; 4 | height: 20px; 5 | width: 20px; 6 | vertical-align: middle; 7 | margin-right: 0.25em; 8 | 9 | .no-object-fit & { 10 | background-size: 100% 100%; 11 | } 12 | } 13 | 14 | %icon-base { 15 | @include icon-base; 16 | } 17 | 18 | $icons: 19 | expand, 20 | menu; 21 | 22 | @each $icon in $icons { 23 | .icon-#{$icon} { 24 | @extend %icon-base; 25 | } 26 | } -------------------------------------------------------------------------------- /source/code/index.mkd: -------------------------------------------------------------------------------- 1 | --- 2 | title: Overview | Accessibility Guidelines 3 | --- 4 | ## Overview 5 | 6 | Many users of assistive technologies only interact with the semantic HTML and aria attributes of your DOM. For this reason, you must ensure that your HTML and JavaScript is well written and accessible. 7 | 8 | This section details how to create accessible code for many common DOM elements, and JavaScript behaviors, and also includes numerous other resources where you can see more live examples and information on a certain topic. -------------------------------------------------------------------------------- /source/assets/stylesheets/library/_variables.scss: -------------------------------------------------------------------------------- 1 | $text-color: #444; 2 | $heading-color: $text-color; 3 | $text-color-subtle: lighten($text-color, 30%); 4 | 5 | $link-color: #555; 6 | $link-color-hover: darken($link-color, 15%); 7 | 8 | $highlight-color: #333; 9 | $highlight-color-hover: darken($highlight-color, 15%); 10 | $accent-color: #DE492F; 11 | 12 | $border-color: #ccc; 13 | 14 | $background-color: #fff; 15 | $background-color-subtle: #F8F8F8; 16 | $background-color-dark: #777; 17 | $background-color-light: #d4d4d4; 18 | 19 | $footer-color: #3D3D3D; 20 | $secondary-nav-color: $background-color-subtle; -------------------------------------------------------------------------------- /source/foundations/index.mkd: -------------------------------------------------------------------------------- 1 | --- 2 | title: Usability | Accessibility Guidelines 3 | --- 4 | ## Usability 5 | 6 | Web usability, accessibility, and inclusive design go hand in hand. Practices that support accessibility support a good user experience, and vice versa. 7 | 8 | This accessibility guide targets best practices not only for connecting with users with disabilities, including people with age-related impairments, but also extend to providing everyone with effective, efficient, and satisfying web experiences. 9 | 10 | The way we see it, basic accessibility is a prerequisite for usability. 11 | 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile ~/.gitignore_global 6 | 7 | # Ignore bundler config 8 | /.bundle 9 | 10 | # Ignore the build directory 11 | /build 12 | 13 | # Ignore cache 14 | /.sass-cache 15 | /.cache 16 | 17 | # Ignore .DS_store file 18 | .DS_Store 19 | 20 | # Ignore node_modules directory 21 | /node_modules 22 | 23 | # Ignore bower_components directory 24 | /bower_components 25 | -------------------------------------------------------------------------------- /modernizr.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "minify": false, 3 | "options": [ 4 | "html5shiv", 5 | "setClasses" 6 | ], 7 | "feature-detects": [ 8 | "test/svg", 9 | "test/css/rgba", 10 | "test/css/animations", 11 | "test/css/backgroundsize", 12 | "test/css/calc", 13 | "test/css/checked", 14 | "test/css/flexbox", 15 | "test/css/flexboxlegacy", 16 | "test/css/flexboxtweener", 17 | "test/css/flexwrap", 18 | "test/css/transforms", 19 | "test/css/transforms3d", 20 | "test/css/transitions", 21 | "test/css/vhunit", 22 | "test/css/vmaxunit", 23 | "test/css/vminunit", 24 | "test/forms/placeholder" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "a11y-guidelines", 3 | "version": "1.0.0", 4 | "description": "", 5 | "author": "Bearded ", 6 | "scripts": { 7 | "icons": "rimraf source/assets/grunticon/production/* && babel-node tasks/icons.js", 8 | "modernizr": "rimraf source/javascripts/vendor/modernizr.js && babel-node tasks/build-modernizr.js" 9 | }, 10 | "dependencies": { 11 | "babel-cli": "^6.5.1", 12 | "babel-core": "^6.5.2", 13 | "bower": "^1.7.7", 14 | "fs-extra": "^0.26.5", 15 | "globby": "^4.0.0", 16 | "grunticon-lib": "^1.0.4", 17 | "modernizr": "^3.3.1", 18 | "nodemon": "^1.8.1", 19 | "rimraf": "^2.5.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # If you do not have OpenSSL installed, update 2 | # the following line to use "http://" instead 3 | source 'https://rubygems.org' 4 | ruby '2.3.0' 5 | 6 | gem "middleman", "~>3.3.12" 7 | gem "middleman-livereload", "~> 3.4.6" 8 | gem "middleman-autoprefixer", "~> 2.4.4" 9 | gem "middleman-syntax", "~> 2.1.0" 10 | gem "redcarpet", "~> 3.3.4" 11 | gem "haml", "~> 4.0.6" 12 | gem "puma", "~> 2.11.3" 13 | gem "rake", "~> 10.0.4" 14 | 15 | group :development do 16 | gem 'heroku', '~> 3.41.5' 17 | end 18 | 19 | # For faster file watcher updates on Windows: 20 | # gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw] 21 | 22 | # Windows does not come with time zone data 23 | # gem "tzinfo-data", platforms: [:mswin, :mingw, :jruby] 24 | -------------------------------------------------------------------------------- /source/assets/grunticon/dev/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /source/assets/stylesheets/contexts/_primary-content.scss: -------------------------------------------------------------------------------- 1 | .primary-content { 2 | a { 3 | text-decoration: underline; 4 | &:hover, 5 | &:focus { 6 | text-decoration: none; 7 | } 8 | } 9 | h3 { 10 | margin: 1em 0em 0.25em 0em; 11 | } 12 | ul li { 13 | list-style-type: disc; 14 | margin-left: 1em; 15 | } 16 | 17 | .image-grid { 18 | .image-item { 19 | @include divider-top; 20 | padding-top: 1.4em; 21 | img { 22 | margin: 0.5em 0em; 23 | } 24 | } 25 | } 26 | } 27 | 28 | .constrained-form { 29 | margin: 1.5em 0; 30 | } 31 | 32 | .map-embed { 33 | max-width: 100%; 34 | margin-bottom: 2.0em; 35 | iframe { 36 | max-width: 100%; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /source/assets/stylesheets/main.scss: -------------------------------------------------------------------------------- 1 | // from bower_components 2 | @import "breakpoint-sass/stylesheets/breakpoint"; 3 | 4 | @import "library/reset"; 5 | @import "library/grid"; 6 | @import "library/variables"; 7 | @import "library/mediaqueries"; 8 | @import "library/typographic-mixins"; 9 | @import "library/general-mixins"; 10 | @import "library/icons"; 11 | 12 | @import "globals/forms.scss"; 13 | @import "globals/general.scss"; 14 | 15 | @import "contexts/site-header"; 16 | @import "contexts/site-footer"; 17 | @import "contexts/primary-content"; 18 | 19 | @import "modules/navigation"; 20 | @import "modules/aside-nav"; 21 | @import "modules/modal"; 22 | @import "modules/accordion"; 23 | @import "modules/tabs"; 24 | @import "modules/color-grid"; -------------------------------------------------------------------------------- /source/partials/_site-header.haml: -------------------------------------------------------------------------------- 1 | %header.site-header 2 | .container 3 | = link_to 'Skip to Content', '#content', :id => 'skip-nav', :class => 'screenreader-text' 4 | 5 | = link_to image_tag('/assets/images/innovation-studio-text.svg', alt: 'Innovation Studio Logo', class: 'innovation-logo-head'), 'http://studio.carnegiemuseums.org' 6 | 7 | %h1.site-name 8 | = link_to '/index.html' do 9 | Web Accessibility Guidelines v1.0 10 | %span.screenreader-text 11 | Foundations - Overview 12 | 13 | %section.mobile-navigation 14 | %button.side-nav-trigger{ :"aria-expanded" => "false"} 15 | %span.icon-menu 16 | %span.trigger-status.screenreader-text.closed Open 17 | Menu 18 | 19 | = partial 'partials/primary-navigation' 20 | -------------------------------------------------------------------------------- /source/assets/stylesheets/library/_mediaqueries.scss: -------------------------------------------------------------------------------- 1 | @include breakpoint-set('to ems',true); 2 | 3 | // override if you want to provide a fixed-width stylesheet 4 | $legacy-support-for-ie8: false; 5 | 6 | //it's ok to put px values in here if you've set "to ems" to "true"! 7 | 8 | $bp-xxs: 280px; 9 | $bp-xs: 400px; 10 | $bp-s: 500px; 11 | $bp-m: 600px; 12 | 13 | //use when you are not changing the styles based on navigation or sidebar 14 | $bp-l: 700px; 15 | 16 | //only use contextually with navigation switches from desktop to mobile 17 | $bp-nav: $bp-l; 18 | 19 | //only use contextually with sidebar switches 20 | $bp-sidebar: $bp-l; 21 | $bp-xl: 960px; 22 | $bp-xxl: 1100px; 23 | $bp-full: 1400px; 24 | 25 | // media query for hi-resolution displays 26 | $breakpoint-hi-res: 2 device-pixel-ratio; 27 | -------------------------------------------------------------------------------- /source/assets/grunticon/dev/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | menu 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /source/partials/_site-footer.haml: -------------------------------------------------------------------------------- 1 | %footer.site-footer 2 | .container 3 | .information 4 | = image_tag('/assets/images/innovation-studio-text.svg', alt: 'Innovation Studio Logo', class: 'innovation-logo') 5 | %address 6 | %p Carnegie Museums of Pittsburgh 7 | %p Innovation Studio 8 | %p 4400 Forbes Avenue 9 | %p Pittsburgh, PA 15213 10 | %p 11 | = link_to 'accessibility@carnegiemuseums.org', "mailto:accessibility@carnegiemuseums.org", :title => 'Email Innovation Studio' 12 | 13 | %p 14 | = link_to 'Privacy Policy', 'http://www.carnegiemuseums.org/interior.php?pageID=100' 15 | 16 | %p 17 | = link_to 'Fork these guidelines on Github', 'https://github.com/CMP-Studio/inclusion-guidelines' 18 | 19 | = image_tag('/assets/images/built-by-bearded.svg', alt: 'Built by Bearded logo', class: 'bearded-built') 20 | -------------------------------------------------------------------------------- /source/assets/stylesheets/modules/_accordion.scss: -------------------------------------------------------------------------------- 1 | .accordion-example { 2 | .accordion-controls { 3 | li { 4 | list-style-type: none; 5 | } 6 | button { 7 | background-color: lighten($text-color, 10%); 8 | max-width: 500px; 9 | width: 100%; 10 | border: none; 11 | border-radius: 3px; 12 | font-size: 2em; 13 | margin: 0.5em 0em; 14 | transition: background-color 0.7s ease-in; 15 | &:focus, &:hover { 16 | background-color: $text-color; 17 | cursor: pointer; 18 | } 19 | } 20 | @for $i from 1 through 3 { 21 | #content-#{$i} { 22 | max-width: 500px; 23 | width: 100%; 24 | display: none; 25 | } 26 | } 27 | 28 | #accordion-control-1 { 29 | background-color: #EF1610; 30 | } 31 | #accordion-control-2 { 32 | background-color: #EFE847; 33 | } 34 | #accordion-control-3 { 35 | background-color: #0BEF56; 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /source/code/flash.mkd: -------------------------------------------------------------------------------- 1 | --- 2 | title: Flash | Accessibility Guidelines 3 | --- 4 | 5 | ## Flash 6 | 7 | ### Best Practices 8 | 9 | We highly recommend moving away from Flash. In addition to many mobile and touch devices no longer supporting flash, it also has significant accessibility challenges, and as [Web AIM](http://webaim.org/techniques/flash/) writes: 10 | 11 | > "[N]early all Flash content on the web poses notable accessibility issues for many users with disabilities." 12 | 13 | > -Sep 24, 2013 14 | 15 | While it is possible to create accessible Flash content, moving to HTML5 might ensure that your content will be available to wider audience, and more maintainable with future technologies. 16 | 17 | ### Tools & Resources 18 | 19 | * [Flash Techniques for WCAG 2.0 (W3C)](https://www.w3.org/TR/WCAG20-TECHS/flash) 20 | 21 | * [Creating Accessible Flash Content](http://webaim.org/techniques/flash/) 22 | 23 | * [Accessibility: Adobe Flash](http://www.adobe.com/accessibility/products/flash.html) 24 | 25 | -------------------------------------------------------------------------------- /source/code/buttons.mkd: -------------------------------------------------------------------------------- 1 | --- 2 | title: Buttons | Accessibility Guidelines 3 | --- 4 | ## Buttons 5 | 6 | In most cases, for the greatest clarity, use `