├── README.md ├── _config.yml ├── autosuggest └── index.html ├── breadcrumb └── index.html ├── chips └── index.html ├── expand-collapse ├── index.html └── index2.html ├── grid ├── include │ ├── dropdownMenuAlt.js │ ├── jquery-ui-1.8.22.core.min.js │ ├── menuButton.css │ └── style.css └── index.html ├── hamburger └── index.html ├── iconfonts ├── fonts │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── icon-fonts.css ├── images │ ├── question-circle.png │ ├── question-circle2.png │ └── question-circle3.png └── index.html ├── menu-button ├── CSUN 2013 Preso - ARIA widget.pptx ├── css │ ├── base.css │ ├── dropdownMenuAlt.css │ └── reset.css ├── index.html ├── js │ ├── _notes │ │ └── dwsync.xml │ ├── dropdownMenuAlt.js │ ├── dropdownMenuAlt_no_aria.js │ ├── jquery-ui-1.8.22.core.min.js │ └── modernizr-2.0.6.js ├── no_aria.html └── with_aria.html ├── modal ├── CSUN14-Modal-Dialog.pptx ├── modal_demo.html ├── modal_demo2.html └── modal_demo_a.html ├── pagination └── index.html ├── password-mask-toggle └── index.html ├── svg ├── checkmark.svg └── index.html ├── tab-panel ├── index.html └── tab-panel.js ├── tables └── data-table-form.html ├── tile ├── images │ └── placeholder.png └── index.html ├── toggle_switch └── index.html └── transition ├── animation.html └── transition.html /README.md: -------------------------------------------------------------------------------- 1 | # Demos 2 | 3 | Examples of web development/web design patterns with accessibility in mind. 4 | 5 | By Dennis Lembree @dennisl 6 | 7 | - [Autosuggest select dropdown](https://weboverhauls.github.io/demos/autosuggest/) 8 | 9 | - [Breadcrumbs](https://weboverhauls.github.io/demos/breadcrumb/) 10 | 11 | - [Chips (with autosuggest)](https://weboverhauls.github.io/demos/chips/) 12 | 13 | - [Interactive elements within grid layout](https://weboverhauls.github.io/demos/grid/) 14 | 15 | - Expand-Collapse 16 | - Classic expand-collapse [Version 1](https://weboverhauls.github.io/demos/expand-collapse/) - [Version 2](https://weboverhauls.github.io/demos/expand-collapse/index2.html) 17 | - [show/hide using CSS transition](https://weboverhauls.github.io/demos/transition/transition.html) 18 | - [show/hide using CSS animation](https://weboverhauls.github.io/demos/transition/animation.html) 19 | 20 | - Dropdown Menu Button: [No ARIA](https://weboverhauls.github.io/demos/menu-button/no_aria.html) - [with ARIA](https://weboverhauls.github.io/demos/menu-button/with_aria.html) 21 | 22 | - [Hamburger/slide out menu](https://weboverhauls.github.io/demos/hamburger/) 23 | 24 | - [Modal Dialog](https://weboverhauls.github.io/demos/modal/modal_demo2.html) 25 | 26 | - [Pagination](https://weboverhauls.github.io/demos/pagination/) 27 | 28 | - [SVG Test Page](https://weboverhauls.github.io/demos/svg/) 29 | 30 | - [Tab Panel](https://weboverhauls.github.io/demos/tab-panel/) 31 | 32 | - [Table with form element](https://weboverhauls.github.io/demos/tables/data-table-form.html) 33 | 34 | - [Tile/Card](https://weboverhauls.github.io/demos/tile/) 35 | 36 | - [Toggle Switch](https://weboverhauls.github.io/demos/toggle_switch/) 37 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate -------------------------------------------------------------------------------- /autosuggest/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Accessible Autosuggest Dropdown 6 | 7 | 8 | 9 | 10 | 98 | 99 | 100 | 101 | 102 |

Accessible Autosuggest Dropdown

103 | 104 |
105 | 106 | 107 |
108 |
109 |
110 | 111 | 112 |
113 |
114 | 115 |
116 |
117 |
118 | 119 |
120 |

Keyboard Interaction

121 | 127 |

Screen-reader Interaction

128 | 132 |

Modified from Intopia

133 |

This is a heavily modified version of an accessible autosuggest from Intopia's autosuggest article and code example by Adem Cifcioglu. Changes include:

134 | 148 |
149 | 150 | 153 | 340 | 341 | -------------------------------------------------------------------------------- /breadcrumb/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Breadcrumb - accessible design pattern 6 | 7 | 8 | 9 | 10 | 41 | 42 | 43 | 44 | 45 |
46 | 47 |

Accessible Breadcrumb Example

48 | 49 | 63 | 64 |
65 |

Notes

66 | 74 |
75 | 76 |
77 | 78 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /chips/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Accessible Chips 6 | 7 | 8 | 9 | 10 | 112 | 113 | 114 | 115 | 116 |

Accessible "Chips" Pattern

117 | 118 |
119 | 120 | 121 |
122 |
123 | 124 | 125 |
126 | 127 |
128 |
129 | 130 |
131 |

Selected cities:

132 | 135 |
136 |
137 | 138 |
139 |

Basic Interaction

140 |
    141 |
  1. Enter a U.S. city name via typing, or select via autosuggest (for keyboard use the up/down arrows and Enter).
    2. 142 |
  2. Select the Add City button.
    3. 143 |
  3. City appears in list below; select remove/X to remove selection.
    4. 144 |
  4. Focus management is optimized for ideal usability and accessibility.
    5. 145 |
146 |

Notes

147 |
    148 |
  1. This pattern was created as an alternative design to the Angular Material Chips Autocomplete pattern.
    2. 149 |
  2. This pattern is based on the autosuggest demo (in the same repo).
    3. 150 |
  3. As an experiment, here's a fork of this project implementing the HTML5 datalist element for the dropdown. Check datalist accessibility support on A11ySupport.io. Both resources by Michael Fairchild (@mfairchild365).
    4. 151 |
  4. Related: Datalist over ARIA combobox via Web Axe.
    5. 152 |
  5. This pattern was created June 2019.
    6. 153 |
154 |
155 | 156 | 159 | 160 | 161 | 387 | 388 | 389 | 390 | -------------------------------------------------------------------------------- /expand-collapse/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Expand-Collapse Example 7 | 8 | 9 | 10 | 11 | 40 | 41 | 42 | 43 | 44 |

Expand-Collapse Code Example

45 | 46 |

Example of an expand-collapse widget with progressive enhancement.

47 | 48 |

Filler text. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

49 | 50 |
51 | Toggle 52 |
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
53 |
54 | 55 |

More filler text. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

56 | 57 | 58 | 59 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /expand-collapse/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Expand-Collapse Example 2 6 | 7 | 8 | 9 | 10 | 13 | 14 | 50 | 51 | 52 | 53 | 54 |

Expand-Collapse Code Example 2

55 | 56 |

Example of an expand-collapse widget with progressive enhancement.

57 | 58 |

Cupcake ipsum dolor sit. Amet chupa chups toffee marzipan muffin marshmallow. Fruitcake candy tiramisu toffee tootsie roll bonbon biscuit jujubes. Fruitcake pie jelly bonbon cake sweet tiramisu donut.

59 | 60 |
61 | More Yummy 62 |
Gummies jelly beans bonbon tootsie roll dessert pastry. apple pie Oat cake tart danish chocolate apple pie candy halvah jelly lemon drops. Sweet pastry gingerbread ice cream croissant cookie jujubes. Donut cake lemon drops marzipan jujubes pie ice cream wafer dragée jelly. Dessert caramels chupa chups jelly. Amet chupa chups toffee marzipan muffin marshmallow.
63 |
64 | 65 |

Chupa chups jelly-o dragée bear claw. Brownie bonbon pudding lollipop. Gingerbread oat cake topping topping. Wafer bonbon chocolate cake. The donuts jujubes toffee marzipan muffin marshmallow.

66 | 67 | 70 | 71 | 72 | 73 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /grid/include/dropdownMenuAlt.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview Dropdown menu button widget 3 | * @name PayPal Dropdown Menu Alt 4 | * @author swesthafer, dlembree 5 | */ 6 | 7 | (function() { 8 | "use strict"; 9 | 10 | $.widget("widget.dropdownMenuAlt", { 11 | options: { 12 | showOn: "click" //default show on click. Mouseenter another valid option 13 | }, 14 | _create: function() { 15 | this._getElements(); 16 | this._updateElements(); 17 | this._addListeners(); 18 | }, 19 | // get elements to manipulate and base calculations off of 20 | _getElements: function() { 21 | this.elements = {}; 22 | 23 | // the menu container (div role=menu) 24 | this.elements.container = this.element.find("div:first"); 25 | }, 26 | // add listeners for show/hide the menu 27 | _addListeners: function() { 28 | 29 | // close menu when you click off the dropdownMenu 30 | $("html").bind("click", $.proxy(this.closeMenu, this)); 31 | this.element.bind("click", function (event) { event.stopPropagation(); }); 32 | 33 | // close menu when someone clicks on a link 34 | this.element.find("ul a").on("click", $.proxy(this.closeMenu, this)); 35 | 36 | // toggle the menu open/closed when you click on the link 37 | this.element.find(".menuButton").on(this.options.showOn,$.proxy(function(event) { 38 | event.preventDefault(); 39 | this._toggleMenu(); 40 | }, this)); 41 | 42 | // toggle menu by keyboard when hitting Enter or Space 43 | this.element.find(".menuButton").on("keydown", $.proxy(function(event) { 44 | if (event.keyCode === $.ui.keyCode.ENTER || event.keyCode === $.ui.keyCode.SPACE) { 45 | event.preventDefault(); 46 | this._toggleMenu(); 47 | } 48 | }, this)); 49 | 50 | // bind keyboard events 51 | this.element.bind("keydown", $.proxy(function(event) { 52 | 53 | // close menu by keyboard when hitting Escape or Tab 54 | if (event.keyCode === $.ui.keyCode.TAB || event.keyCode === $.ui.keyCode.ESCAPE) { 55 | this.closeMenu(); 56 | } 57 | 58 | // navigate down 59 | if (event.keyCode === $.ui.keyCode.DOWN) { 60 | event.preventDefault(); 61 | 62 | // navigate if menu is open, otherwise open the menu if it's closed 63 | if (this.elements.container.is(':visible')) { 64 | this.focus('+1'); 65 | } else { 66 | this.openMenu(); 67 | } 68 | } 69 | 70 | // navigate up 71 | if (event.keyCode === $.ui.keyCode.UP) { 72 | event.preventDefault(); 73 | 74 | // navigate if menu is open, otherwise open the menu if it's closed 75 | if (this.elements.container.is(':visible')) { 76 | this.focus('-1'); 77 | } else { 78 | this.openMenu(); 79 | } 80 | } 81 | }, this)); 82 | 83 | // close when another menu opens 84 | $('html').bind('openMenu.dropdownMenu', $.proxy(this.closeMenu, this)); 85 | }, 86 | 87 | // gets a menu item from a given index 88 | getItem: function(index) { 89 | return $(this.element.find('ul li a').parent('li')[index]); 90 | }, 91 | 92 | // gets the index of the focused item 93 | getFocusedIndex: function() { 94 | var focusedIndex; 95 | this.element.find('ul li a').parent('li').each(function(index, item) { 96 | if ($(item).find('a:focus').length) { 97 | focusedIndex = index; 98 | } 99 | if (focusedIndex===undefined) { 100 | focusedIndex = -1; 101 | } 102 | }); 103 | return focusedIndex; 104 | }, 105 | 106 | // focuses on an item (can be an index number or the strings '+1' or '-1') 107 | focus: function(index) { 108 | var item; 109 | var len = this.element.find('ul a').length; 110 | 111 | // get the next available index 112 | if (index === '+1') { 113 | // increment index until we find an enabled item 114 | index = this.getFocusedIndex(); 115 | do { index++; } while (this.getItem(index).hasClass('disabled')); 116 | if (index > len-1 ) { 117 | index = 0; 118 | } 119 | } 120 | else if (index === '-1') { 121 | // decrement index until we find an enabled item 122 | index = this.getFocusedIndex(); 123 | do { index--; } while (this.getItem(index).hasClass('disabled')); 124 | if (index < 0 ) { 125 | index = len-1; 126 | } 127 | } 128 | 129 | // get item using index 130 | item = this.getItem(index); 131 | 132 | // return if no item to select 133 | if (!item.length) { 134 | return; 135 | } 136 | 137 | // set focus 138 | $(item.find('a')[0]).focus(); 139 | 140 | // control tabindex for Firefox and Opera issues 141 | this.element.find('ul:first li a').attr("tabindex", "-1"); 142 | $(item.find('a')[0]).attr("tabindex", "0"); 143 | }, 144 | 145 | // toggles the menu 146 | _toggleMenu: function() { 147 | if (this.element.hasClass('showMenu')) { 148 | this.closeMenu(); 149 | } else { 150 | this.openMenu(); 151 | } 152 | }, 153 | 154 | // add parameters to elements 155 | _updateElements: function() { 156 | this.element.find('a:first').attr("aria-haspopup", "true") 157 | .attr("role", "button"); 158 | this.elements.container.attr("role", "menu") 159 | .attr("aria-hidden", "true"); 160 | this.element.find('div div').attr("role", "presentation"); 161 | this.element.find('ul:first').attr("role", "presentation"); 162 | this.element.find('ul:first li').attr("role", "presentation"); 163 | this.element.find('ul:first li a').attr("role", "menuitem") 164 | .attr("tabindex", "-1"); 165 | }, 166 | 167 | // shows button 168 | showButton: function() { 169 | this.element.addClass('showButton'); 170 | }, 171 | 172 | // hides button 173 | hideButton: function() { 174 | this.element.removeClass('showButton'); 175 | this.closeMenu(); 176 | }, 177 | 178 | // opens the menu 179 | openMenu: function() { 180 | if (this.element.hasClass('showMenu')) { 181 | return; 182 | } 183 | this.element.trigger('openMenu.dropdownMenu', this); 184 | this.element.addClass('showButton showMenu'); 185 | this.element.find('div:first').attr("aria-hidden", "false"); 186 | this.element.find('a:first').attr("aria-expanded", "true"); 187 | this.focus('+1'); 188 | }, 189 | 190 | // closes the menu 191 | closeMenu: function() { 192 | if (!this.element.hasClass("showMenu")) { 193 | return; 194 | } 195 | this.element.removeClass("showMenu"); 196 | this.element.find("div:first").attr("aria-hidden", "true"); 197 | this.element.find(".menuButton").attr("aria-expanded", "false"); 198 | this.element.find(".menuButton").focus(); 199 | } 200 | }); 201 | 202 | 203 | }()); -------------------------------------------------------------------------------- /grid/include/jquery-ui-1.8.22.core.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery UI - v1.8.22 - 2012-07-24 2 | * https://github.com/jquery/jquery-ui 3 | * Includes: jquery.ui.core.js 4 | * Copyright (c) 2012 AUTHORS.txt; Licensed MIT, GPL */ 5 | (function(a,b){function c(b,c){var e=b.nodeName.toLowerCase();if("area"===e){var f=b.parentNode,g=f.name,h;return!b.href||!g||f.nodeName.toLowerCase()!=="map"?!1:(h=a("img[usemap=#"+g+"]")[0],!!h&&d(h))}return(/input|select|textarea|button|object/.test(e)?!b.disabled:"a"==e?b.href||c:c)&&d(b)}function d(b){return!a(b).parents().andSelf().filter(function(){return a.curCSS(this,"visibility")==="hidden"||a.expr.filters.hidden(this)}).length}a.ui=a.ui||{};if(a.ui.version)return;a.extend(a.ui,{version:"1.8.22",keyCode:{ALT:18,BACKSPACE:8,CAPS_LOCK:20,COMMA:188,COMMAND:91,COMMAND_LEFT:91,COMMAND_RIGHT:93,CONTROL:17,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,INSERT:45,LEFT:37,MENU:93,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38,WINDOWS:91}}),a.fn.extend({propAttr:a.fn.prop||a.fn.attr,_focus:a.fn.focus,focus:function(b,c){return typeof b=="number"?this.each(function(){var d=this;setTimeout(function(){a(d).focus(),c&&c.call(d)},b)}):this._focus.apply(this,arguments)},scrollParent:function(){var b;return a.browser.msie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?b=this.parents().filter(function(){return/(relative|absolute|fixed)/.test(a.curCSS(this,"position",1))&&/(auto|scroll)/.test(a.curCSS(this,"overflow",1)+a.curCSS(this,"overflow-y",1)+a.curCSS(this,"overflow-x",1))}).eq(0):b=this.parents().filter(function(){return/(auto|scroll)/.test(a.curCSS(this,"overflow",1)+a.curCSS(this,"overflow-y",1)+a.curCSS(this,"overflow-x",1))}).eq(0),/fixed/.test(this.css("position"))||!b.length?a(document):b},zIndex:function(c){if(c!==b)return this.css("zIndex",c);if(this.length){var d=a(this[0]),e,f;while(d.length&&d[0]!==document){e=d.css("position");if(e==="absolute"||e==="relative"||e==="fixed"){f=parseInt(d.css("zIndex"),10);if(!isNaN(f)&&f!==0)return f}d=d.parent()}}return 0},disableSelection:function(){return this.bind((a.support.selectstart?"selectstart":"mousedown")+".ui-disableSelection",function(a){a.preventDefault()})},enableSelection:function(){return this.unbind(".ui-disableSelection")}}),a("").outerWidth(1).jquery||a.each(["Width","Height"],function(c,d){function h(b,c,d,f){return a.each(e,function(){c-=parseFloat(a.curCSS(b,"padding"+this,!0))||0,d&&(c-=parseFloat(a.curCSS(b,"border"+this+"Width",!0))||0),f&&(c-=parseFloat(a.curCSS(b,"margin"+this,!0))||0)}),c}var e=d==="Width"?["Left","Right"]:["Top","Bottom"],f=d.toLowerCase(),g={innerWidth:a.fn.innerWidth,innerHeight:a.fn.innerHeight,outerWidth:a.fn.outerWidth,outerHeight:a.fn.outerHeight};a.fn["inner"+d]=function(c){return c===b?g["inner"+d].call(this):this.each(function(){a(this).css(f,h(this,c)+"px")})},a.fn["outer"+d]=function(b,c){return typeof b!="number"?g["outer"+d].call(this,b):this.each(function(){a(this).css(f,h(this,b,!0,c)+"px")})}}),a.extend(a.expr[":"],{data:a.expr.createPseudo?a.expr.createPseudo(function(b){return function(c){return!!a.data(c,b)}}):function(b,c,d){return!!a.data(b,d[3])},focusable:function(b){return c(b,!isNaN(a.attr(b,"tabindex")))},tabbable:function(b){var d=a.attr(b,"tabindex"),e=isNaN(d);return(e||d>=0)&&c(b,!e)}}),a(function(){var b=document.body,c=b.appendChild(c=document.createElement("div"));c.offsetHeight,a.extend(c.style,{minHeight:"100px",height:"auto",padding:0,borderWidth:0}),a.support.minHeight=c.offsetHeight===100,a.support.selectstart="onselectstart"in c,b.removeChild(c).style.display="none"}),a.curCSS||(a.curCSS=a.css),a.extend(a.ui,{plugin:{add:function(b,c,d){var e=a.ui[b].prototype;for(var f in d)e.plugins[f]=e.plugins[f]||[],e.plugins[f].push([c,d[f]])},call:function(a,b,c){var d=a.plugins[b];if(!d||!a.element[0].parentNode)return;for(var e=0;e0?!0:(b[d]=1,e=b[d]>0,b[d]=0,e)},isOverAxis:function(a,b,c){return a>b&&a=9||!!b.button?this._mouseStarted?(this._mouseDrag(b),b.preventDefault()):(this._mouseDistanceMet(b)&&this._mouseDelayMet(b)&&(this._mouseStarted=this._mouseStart(this._mouseDownEvent,b)!==!1,this._mouseStarted?this._mouseDrag(b):this._mouseUp(b)),!this._mouseStarted):this._mouseUp(b)},_mouseUp:function(b){return a(document).unbind("mousemove."+this.widgetName,this._mouseMoveDelegate).unbind("mouseup."+this.widgetName,this._mouseUpDelegate),this._mouseStarted&&(this._mouseStarted=!1,b.target==this._mouseDownEvent.target&&a.data(b.target,this.widgetName+".preventClickEvent",!0),this._mouseStop(b)),!1},_mouseDistanceMet:function(a){return Math.max(Math.abs(this._mouseDownEvent.pageX-a.pageX),Math.abs(this._mouseDownEvent.pageY-a.pageY))>=this.options.distance},_mouseDelayMet:function(a){return this.mouseDelayMet},_mouseStart:function(a){},_mouseDrag:function(a){},_mouseStop:function(a){},_mouseCapture:function(a){return!0}})})(jQuery);;/*! jQuery UI - v1.8.22 - 2012-07-24 14 | * https://github.com/jquery/jquery-ui 15 | * Includes: jquery.ui.position.js 16 | * Copyright (c) 2012 AUTHORS.txt; Licensed MIT, GPL */ 17 | (function(a,b){a.ui=a.ui||{};var c=/left|center|right/,d=/top|center|bottom/,e="center",f={},g=a.fn.position,h=a.fn.offset;a.fn.position=function(b){if(!b||!b.of)return g.apply(this,arguments);b=a.extend({},b);var h=a(b.of),i=h[0],j=(b.collision||"flip").split(" "),k=b.offset?b.offset.split(" "):[0,0],l,m,n;return i.nodeType===9?(l=h.width(),m=h.height(),n={top:0,left:0}):i.setTimeout?(l=h.width(),m=h.height(),n={top:h.scrollTop(),left:h.scrollLeft()}):i.preventDefault?(b.at="left top",l=m=0,n={top:b.of.pageY,left:b.of.pageX}):(l=h.outerWidth(),m=h.outerHeight(),n=h.offset()),a.each(["my","at"],function(){var a=(b[this]||"").split(" ");a.length===1&&(a=c.test(a[0])?a.concat([e]):d.test(a[0])?[e].concat(a):[e,e]),a[0]=c.test(a[0])?a[0]:e,a[1]=d.test(a[1])?a[1]:e,b[this]=a}),j.length===1&&(j[1]=j[0]),k[0]=parseInt(k[0],10)||0,k.length===1&&(k[1]=k[0]),k[1]=parseInt(k[1],10)||0,b.at[0]==="right"?n.left+=l:b.at[0]===e&&(n.left+=l/2),b.at[1]==="bottom"?n.top+=m:b.at[1]===e&&(n.top+=m/2),n.left+=k[0],n.top+=k[1],this.each(function(){var c=a(this),d=c.outerWidth(),g=c.outerHeight(),h=parseInt(a.curCSS(this,"marginLeft",!0))||0,i=parseInt(a.curCSS(this,"marginTop",!0))||0,o=d+h+(parseInt(a.curCSS(this,"marginRight",!0))||0),p=g+i+(parseInt(a.curCSS(this,"marginBottom",!0))||0),q=a.extend({},n),r;b.my[0]==="right"?q.left-=d:b.my[0]===e&&(q.left-=d/2),b.my[1]==="bottom"?q.top-=g:b.my[1]===e&&(q.top-=g/2),f.fractions||(q.left=Math.round(q.left),q.top=Math.round(q.top)),r={left:q.left-h,top:q.top-i},a.each(["left","top"],function(c,e){a.ui.position[j[c]]&&a.ui.position[j[c]][e](q,{targetWidth:l,targetHeight:m,elemWidth:d,elemHeight:g,collisionPosition:r,collisionWidth:o,collisionHeight:p,offset:k,my:b.my,at:b.at})}),a.fn.bgiframe&&c.bgiframe(),c.offset(a.extend(q,{using:b.using}))})},a.ui.position={fit:{left:function(b,c){var d=a(window),e=c.collisionPosition.left+c.collisionWidth-d.width()-d.scrollLeft();b.left=e>0?b.left-e:Math.max(b.left-c.collisionPosition.left,b.left)},top:function(b,c){var d=a(window),e=c.collisionPosition.top+c.collisionHeight-d.height()-d.scrollTop();b.top=e>0?b.top-e:Math.max(b.top-c.collisionPosition.top,b.top)}},flip:{left:function(b,c){if(c.at[0]===e)return;var d=a(window),f=c.collisionPosition.left+c.collisionWidth-d.width()-d.scrollLeft(),g=c.my[0]==="left"?-c.elemWidth:c.my[0]==="right"?c.elemWidth:0,h=c.at[0]==="left"?c.targetWidth:-c.targetWidth,i=-2*c.offset[0];b.left+=c.collisionPosition.left<0?g+h+i:f>0?g+h+i:0},top:function(b,c){if(c.at[1]===e)return;var d=a(window),f=c.collisionPosition.top+c.collisionHeight-d.height()-d.scrollTop(),g=c.my[1]==="top"?-c.elemHeight:c.my[1]==="bottom"?c.elemHeight:0,h=c.at[1]==="top"?c.targetHeight:-c.targetHeight,i=-2*c.offset[1];b.top+=c.collisionPosition.top<0?g+h+i:f>0?g+h+i:0}}},a.offset.setOffset||(a.offset.setOffset=function(b,c){/static/.test(a.curCSS(b,"position"))&&(b.style.position="relative");var d=a(b),e=d.offset(),f=parseInt(a.curCSS(b,"top",!0),10)||0,g=parseInt(a.curCSS(b,"left",!0),10)||0,h={top:c.top-e.top+f,left:c.left-e.left+g};"using"in c?c.using.call(b,h):d.css(h)},a.fn.offset=function(b){var c=this[0];return!c||!c.ownerDocument?null:b?a.isFunction(b)?this.each(function(c){a(this).offset(b.call(this,c,a(this).offset()))}):this.each(function(){a.offset.setOffset(this,b)}):h.call(this)}),function(){var b=document.getElementsByTagName("body")[0],c=document.createElement("div"),d,e,g,h,i;d=document.createElement(b?"div":"body"),g={visibility:"hidden",width:0,height:0,border:0,margin:0,background:"none"},b&&a.extend(g,{position:"absolute",left:"-1000px",top:"-1000px"});for(var j in g)d.style[j]=g[j];d.appendChild(c),e=b||document.documentElement,e.insertBefore(d,e.firstChild),c.style.cssText="position: absolute; left: 10.7432222px; top: 10.432325px; height: 30px; width: 201px;",h=a(c).offset(function(a,b){return b}).offset(),d.innerHTML="",e.removeChild(d),i=h.top+h.left+(b?2e3:0),f.fractions=i>21&&i<22}()})(jQuery);; -------------------------------------------------------------------------------- /grid/include/menuButton.css: -------------------------------------------------------------------------------- 1 | .js .dropdownMenuAlt { 2 | position: relative; 3 | } 4 | .js .dropdownMenuAlt a.menuButton { 5 | overflow: hidden; 6 | display: inline-block; 7 | width: 23px; 8 | height: 23px; 9 | margin-left: 4px; 10 | z-index: 5; 11 | top: -3px; 12 | text-indent:-999px; 13 | 14 | -moz-border-radius:3px; 15 | -webkit-border-radius:3px; 16 | border-radius:3px; 17 | } 18 | .js .dropdownMenuAlt a.menuButton { 19 | position: relative; 20 | border: 1px solid #928b8b; 21 | font-size: 15px; /* need this to set the positioning identical in webkit and FF */ 22 | background: #f5f6f7; 23 | 24 | -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3); 25 | -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3); 26 | box-shadow: 0 1px 1px rgba(0,0,0,0.3); 27 | } 28 | .js .dropdownMenuAlt.showMenu a.menuButton, 29 | .js .dropdownMenuAlt a.menuButton:focus, 30 | .js .dropdownMenuAlt a.menuButton:hover { 31 | background: -moz-linear-gradient(bottom, #0079c1 0%, #38b2fa 100%);/* FF3.6+ */ 32 | background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#0079c1), color-stop(100%,#38b2fa)); /* Chrome,Safari4+ */ 33 | background: -webkit-linear-gradient(bottom , #0079c1 0%, #38b2fa 100%);/* Chrome10+,Safari5.1+ */ 34 | background: -ms-linear-gradient(bottom , #0079c1 0%, #38b2fa 100%);/* IE10+ */ 35 | background: -o-linear-gradient(bottom , #0079c1 0%, #38b2fa 100%);/* Opera 11.10+ */ 36 | background: linear-gradient(bottom , #0079c1 0%, #38b2fa 100%);/* W3C */ 37 | background-color:#0079c1; 38 | } 39 | .js .dropdownMenuAlt a.menuButton:after { 40 | content: ""; 41 | position: absolute; 42 | height: 0; 43 | width: 0; 44 | right: 50%; 45 | top: 50%; 46 | margin-right: -4px; 47 | margin-top: -1px; 48 | border-color: #928b8b transparent transparent; 49 | border-style: solid solid solid dashed; 50 | border-width: 5px 4px; 51 | } 52 | .js .dropdownMenuAlt.showMenu a.menuButton:after, 53 | .js .dropdownMenuAlt a.menuButton:focus:after, 54 | .js .dropdownMenuAlt a.menuButton:hover:after { 55 | border-color: #fff transparent transparent; 56 | } 57 | .js .dropdownMenuAlt ul { 58 | min-width: 11em; 59 | } 60 | .js .dropdownMenuAlt ul a { 61 | color: #292929; 62 | text-decoration: none; 63 | } 64 | .js .dropdownMenuAlt > div > div > ul { 65 | z-index: 100; 66 | position: absolute; 67 | left: 0; 68 | display: none; 69 | 70 | border: 1px solid #ccc; 71 | 72 | -moz-border-radius:3px; 73 | -webkit-border-radius: 3px; 74 | border-radius: 3px; 75 | 76 | -moz-box-shadow: 0 1px rgba(0,0,0,0.2); 77 | -webkit-box-shadow: 0 1px rgba(0,0,0,0.2); 78 | box-shadow: 0 1px rgba(0,0,0,0.2); 79 | 80 | background: #fff; /* fallback */ 81 | background:-moz-linear-gradient(center bottom, #f2f2f2, #fff);/* FF3.6+ */ 82 | background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#f2f2f2), color-stop(100%,#fff)); /* Chrome,Safari4+ */ 83 | background: -webkit-linear-gradient(bottom , #f2f2f2 0%, #fff 100%);/* Chrome10+,Safari5.1+ */ 84 | background: -ms-linear-gradient(bottom , #f2f2f2 0%, #fff 100%);/* IE10+ */ 85 | background: -o-linear-gradient(bottom , #f2f2f2 0%, #fff 100%);/* Opera 11.10+ */ 86 | background: linear-gradient(bottom , #f2f2f2 0%, #fff 100%);/* W3C */ 87 | } 88 | 89 | .js .dropdownMenuAlt.showMenu > div > div > ul { 90 | margin-top: 0; 91 | } 92 | .js .dropdownMenuAlt ul li { 93 | display: block; 94 | padding: 0; 95 | margin: 0; 96 | } 97 | .js .dropdownMenuAlt.showMenu ul { 98 | display: block; 99 | margin: 0; 100 | } 101 | .dropdownMenu ul a { 102 | color: #292929; 103 | } 104 | .js .dropdownMenuAlt ul a:hover, 105 | .js .dropdownMenuAlt ul a:focus { 106 | background-color: #ebf7ff; 107 | text-decoration: none; 108 | 109 | background:-moz-linear-gradient(center bottom, #e1f1fb, #f7fafd);/* FF3.6+ */ 110 | background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#e1f1fb), color-stop(100%,#f7fafd)); /* Chrome,Safari4+ */ 111 | background: -webkit-linear-gradient(bottom , #e1f1fb 0%, #f7fafd 100%);/* Chrome10+,Safari5.1+ */ 112 | background: -ms-linear-gradient(bottom , #e1f1fb 0%, #f7fafd 100%);/* IE10+ */ 113 | background: -o-linear-gradient(bottom , #e1f1fb 0%, #f7fafd 100%);/* Opera 11.10+ */ 114 | background: linear-gradient(bottom , #e1f1fb 0%, #f7fafd 100%);/* W3C */ 115 | } 116 | .js .dropdownMenuAlt > div > div > ul > li:first-child > * { 117 | border-top: none; 118 | } 119 | .js .dropdownMenuAlt > div > div > ul > li:last-child > * { 120 | border-bottom: none; 121 | } 122 | .js .dropdownMenuAlt > div > div > ul li > * { 123 | display: block; 124 | margin: 0; 125 | padding: 7px; 126 | font-weight: normal; 127 | border-top: 1px #fff solid; 128 | border-bottom:1px #eee solid; 129 | } 130 | .js .dropdownMenuAlt > div > div > ul ul li { 131 | padding: 0; 132 | } 133 | .js .dropdownMenuAlt > div > div > ul ul li * { 134 | padding-left: 27px; 135 | } 136 | .js .dropdownMenuAlt > div > div > ul ul { 137 | padding: 0; 138 | } 139 | 140 | /* demo presentation */ 141 | #wrapper { 142 | width: 66%; 143 | margin: 0 auto; 144 | } 145 | 146 | .dropdownMenuAlt { 147 | margin: 0.5em 0; 148 | } 149 | -------------------------------------------------------------------------------- /grid/include/style.css: -------------------------------------------------------------------------------- 1 | /* reset lists */ 2 | ol, ul { 3 | list-style:none; 4 | } 5 | ol, ul, li { 6 | margin:0; 7 | padding:0; 8 | } 9 | 10 | /* table/grid title */ 11 | .gridCaption { 12 | text-align: center; 13 | margin-bottom: .2rem; 14 | font-size: 1.25rem; 15 | } 16 | 17 | /* row link */ 18 | .tableRowInner a { 19 | border-bottom: 1px solid #ddd; 20 | } 21 | .tableRow:first-child a { 22 | border-top: 1px solid #ddd; 23 | } 24 | .tableRow a:focus, 25 | .tableRow a:hover { 26 | background-color: #eee; 27 | } 28 | 29 | /* table/grid layout */ 30 | .tableRow .tableColumn { 31 | display: block; 32 | float: left; 33 | color: #333; 34 | } 35 | .tableRow .tableRowInner > a { 36 | display: block; 37 | float: left; 38 | padding: .75rem 0; 39 | text-decoration: none; 40 | width: 117%; 41 | } 42 | .tableRowInner { 43 | float: left; 44 | width: 85%; 45 | } 46 | .tableRow:last-child .tableRowInner { 47 | padding-bottom: 1.5em; 48 | } 49 | .tableRow .tableColumn.date { 50 | width: 25%; 51 | } 52 | .tableRow .tableColumn.desc { 53 | width: 40%; 54 | } 55 | .tableRow .tableColumn.price { 56 | text-align: right; 57 | width: 25%; 58 | } 59 | 60 | /* hide content with clipping */ 61 | .accessAid { 62 | position: absolute !important; 63 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 64 | clip: rect(1px, 1px, 1px, 1px); 65 | padding: 0 !important; 66 | border: 0 !important; 67 | height: 1px !important; 68 | width: 1px !important; 69 | overflow: hidden; 70 | } 71 | 72 | 73 | /* OVERWRITING COMPONENT */ 74 | .js .dropdownMenuAlt { 75 | float: left; 76 | left: 10%; 77 | top: 0.2rem; 78 | } 79 | .js .dropdownMenuAlt > div > div > ul { 80 | left: -9.5rem; 81 | width: 11rem; 82 | } 83 | 84 | /* NON-JS adjustments */ 85 | .no-js .dropdownMenuAlt { 86 | text-align: right; 87 | } 88 | .no-js .menuButton { 89 | display: none; 90 | } 91 | .no-js .tableRowInner > a { 92 | padding-bottom: 2rem; 93 | } 94 | -------------------------------------------------------------------------------- /grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Grid Example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 |

Grid Example

19 | 20 |

Accessible grid layout with dropdown buttons and linked rows. Implemented with progressive enhancement.

21 | 22 |

My Transactions

23 | 24 |
25 |
26 |

Record 1

27 |
28 | 29 | May 6, 2013 30 | Payment from Joe Schmoe & Co. 31 | $73.02 USD 32 | 33 |
34 |
35 | Options 1 36 |
37 |
38 | 43 |
44 |
45 |
46 |
47 | 48 |
49 |

Record 2

50 |
51 | 52 | May 4, 2013 53 | Payment from Mike Johnson Enterprises, Inc. 54 | $10.00 USD 55 | 56 |
57 |
58 | Options 2 59 |
60 |
61 | 66 |
67 |
68 |
69 |
70 | 71 |
72 |

Record 3

73 |
74 | 75 | May 3, 2013 76 | Payment from Jane Doe 77 | $23.00 USD 78 | 79 |
80 |
81 | Options 3 82 |
83 |
84 | 89 |
90 |
91 |
92 |
93 | 94 |
95 | 96 |

From the article Interactive elements within a grid layout by Dennis Lembree, PayPal Engineering.

97 | 98 | 99 | 100 | 101 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /hamburger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hamburger - slide out menu - accessible design pattern 6 | 7 | 8 | 9 | 10 | 167 | 168 | 169 | 170 | 171 |
172 |
173 |
174 |
175 |

176 | Accessible Slide Menu 177 |

178 | 184 |
185 |
186 | 194 |
195 |
196 |

Accessible Hamburger (slide-out) Menu Example

197 |

Heavily modified from this Codepen by Marcy Sutton.

198 |
199 |
200 | 201 | 204 | 205 | 206 | 254 | 255 | 256 | 257 | -------------------------------------------------------------------------------- /iconfonts/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weboverhauls/demos/213c568a2038741a6288ef95c358cf3d444e45e4/iconfonts/fonts/icomoon.eot -------------------------------------------------------------------------------- /iconfonts/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /iconfonts/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weboverhauls/demos/213c568a2038741a6288ef95c358cf3d444e45e4/iconfonts/fonts/icomoon.ttf -------------------------------------------------------------------------------- /iconfonts/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weboverhauls/demos/213c568a2038741a6288ef95c358cf3d444e45e4/iconfonts/fonts/icomoon.woff -------------------------------------------------------------------------------- /iconfonts/icon-fonts.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face { 3 | font-family: 'icomoon'; 4 | src: url('fonts/icomoon.eot?lnz60j'); 5 | src: url('fonts/icomoon.eot?lnz60j#iefix') format('embedded-opentype'), 6 | url('fonts/icomoon.ttf?lnz60j') format('truetype'), 7 | url('fonts/icomoon.woff?lnz60j') format('woff'), 8 | url('fonts/icomoon.svg?lnz60j#icomoon') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | [class^="icon-"], [class*=" icon-"] { 14 | /* use !important to prevent issues with browser extensions that change fonts */ 15 | font-family: 'icomoon' !important; 16 | speak: none; 17 | font-style: normal; 18 | font-weight: normal; 19 | font-variant: normal; 20 | text-transform: none; 21 | line-height: 1; 22 | 23 | /* Better Font Rendering =========== */ 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | .icon-home2:before { 29 | content: "\e901"; 30 | } 31 | .icon-phone:before { 32 | content: "\e942"; 33 | } 34 | .icon-search:before { 35 | content: "\e986"; 36 | } 37 | .icon-gift:before { 38 | content: "\e99f"; 39 | } 40 | .icon-question:before { 41 | content: "\ea09"; 42 | } 43 | .icon-info:before { 44 | content: "\ea0c"; 45 | } 46 | .icon-facebook2:before { 47 | content: "\ea91"; 48 | } 49 | .icon-twitter:before { 50 | content: "\ea96"; 51 | } 52 | .icon-html-five:before { 53 | content: "\eae4"; 54 | } -------------------------------------------------------------------------------- /iconfonts/images/question-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weboverhauls/demos/213c568a2038741a6288ef95c358cf3d444e45e4/iconfonts/images/question-circle.png -------------------------------------------------------------------------------- /iconfonts/images/question-circle2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weboverhauls/demos/213c568a2038741a6288ef95c358cf3d444e45e4/iconfonts/images/question-circle2.png -------------------------------------------------------------------------------- /iconfonts/images/question-circle3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weboverhauls/demos/213c568a2038741a6288ef95c358cf3d444e45e4/iconfonts/images/question-circle3.png -------------------------------------------------------------------------------- /iconfonts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Icon Fonts test page 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 |
38 | 39 |
40 | Help 41 |
42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 |
50 | 51 |
52 | 53 |
54 | 55 |
56 | Help 57 |
58 | 59 |
60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /menu-button/CSUN 2013 Preso - ARIA widget.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weboverhauls/demos/213c568a2038741a6288ef95c358cf3d444e45e4/menu-button/CSUN 2013 Preso - ARIA widget.pptx -------------------------------------------------------------------------------- /menu-button/css/base.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | margin:1em; 4 | font-size:1.1em; 5 | } 6 | footer { 7 | margin:2em 0; 8 | } 9 | 10 | /* TYPOGRAPHY */ 11 | h1{ 12 | font-size:1.5em; 13 | padding:.75em 0; 14 | } 15 | h2{ 16 | font-size:1.35em; 17 | padding:.75em 0; 18 | } 19 | h3{ 20 | font-size:1.15em; 21 | margin:1em 0 0; 22 | } 23 | p, li{ 24 | margin:1em 0; 25 | line-height: 1.35; 26 | } 27 | li{ 28 | margin-left:1em; 29 | } 30 | fieldset{ 31 | margin:1em .75em; 32 | } 33 | -------------------------------------------------------------------------------- /menu-button/css/dropdownMenuAlt.css: -------------------------------------------------------------------------------- 1 | .js .dropdownMenuAlt { 2 | position: relative; 3 | display: inline-block; 4 | } 5 | .js .dropdownMenuAlt a.menuButton { 6 | overflow: hidden; 7 | display: inline-block; 8 | width: 25px; 9 | height: 25px; 10 | margin-left: 4px; 11 | z-index: 5; 12 | top: 2px; 13 | text-indent:-999px; 14 | 15 | -moz-border-radius:3px; 16 | -webkit-border-radius:3px; 17 | border-radius:3px; 18 | } 19 | .js .dropdownMenuAlt a.menuButton { 20 | position: relative; 21 | border: 1px solid #928b8b; 22 | font-size: 15px; /* need this to set the positioning identical in webkit and FF */ 23 | background: #f5f6f7; 24 | 25 | -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3); 26 | -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3); 27 | box-shadow: 0 1px 1px rgba(0,0,0,0.3); 28 | } 29 | .js .dropdownMenuAlt.showMenu a.menuButton, 30 | .js .dropdownMenuAlt a.menuButton:focus, 31 | .js .dropdownMenuAlt a.menuButton:hover { 32 | background: -moz-linear-gradient(bottom, #0079c1 0%, #38b2fa 100%);/* FF3.6+ */ 33 | background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#0079c1), color-stop(100%,#38b2fa)); /* Chrome,Safari4+ */ 34 | background: -webkit-linear-gradient(bottom , #0079c1 0%, #38b2fa 100%);/* Chrome10+,Safari5.1+ */ 35 | background: -ms-linear-gradient(bottom , #0079c1 0%, #38b2fa 100%);/* IE10+ */ 36 | background: -o-linear-gradient(bottom , #0079c1 0%, #38b2fa 100%);/* Opera 11.10+ */ 37 | background: linear-gradient(bottom , #0079c1 0%, #38b2fa 100%);/* W3C */ 38 | background-color:#0079c1; 39 | } 40 | .js .dropdownMenuAlt a.menuButton:after { 41 | content: ""; 42 | position: absolute; 43 | height: 0; 44 | width: 0; 45 | right: 50%; 46 | top: 50%; 47 | margin-right: -4px; 48 | margin-top: -1px; 49 | border-color: #928b8b transparent transparent; 50 | border-style: solid solid solid dashed; 51 | border-width: 5px 4px; 52 | } 53 | .js .dropdownMenuAlt.showMenu a.menuButton:after, 54 | .js .dropdownMenuAlt a.menuButton:focus:after, 55 | .js .dropdownMenuAlt a.menuButton:hover:after { 56 | border-color: #fff transparent transparent; 57 | } 58 | .js .dropdownMenuAlt ul { 59 | min-width: 11em; 60 | } 61 | .js .dropdownMenuAlt ul a { 62 | color: #292929; 63 | } 64 | .js .dropdownMenuAlt > div > div > ul { 65 | z-index: 100; 66 | position: absolute; 67 | left: 0; 68 | display: none; 69 | 70 | border: 1px solid #ccc; 71 | 72 | -moz-border-radius:3px; 73 | -webkit-border-radius: 3px; 74 | border-radius: 3px; 75 | 76 | -moz-box-shadow: 0 1px rgba(0,0,0,0.2); 77 | -webkit-box-shadow: 0 1px rgba(0,0,0,0.2); 78 | box-shadow: 0 1px rgba(0,0,0,0.2); 79 | 80 | background: #fff; /* fallback */ 81 | background:-moz-linear-gradient(center bottom, #f2f2f2, #fff);/* FF3.6+ */ 82 | background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#f2f2f2), color-stop(100%,#fff)); /* Chrome,Safari4+ */ 83 | background: -webkit-linear-gradient(bottom , #f2f2f2 0%, #fff 100%);/* Chrome10+,Safari5.1+ */ 84 | background: -ms-linear-gradient(bottom , #f2f2f2 0%, #fff 100%);/* IE10+ */ 85 | background: -o-linear-gradient(bottom , #f2f2f2 0%, #fff 100%);/* Opera 11.10+ */ 86 | background: linear-gradient(bottom , #f2f2f2 0%, #fff 100%);/* W3C */ 87 | } 88 | 89 | .js .dropdownMenuAlt.showMenu > div > div > ul { 90 | margin-top: 0; 91 | } 92 | .js .dropdownMenuAlt ul li { 93 | display: block; 94 | padding: 0; 95 | margin: 0; 96 | } 97 | .js .dropdownMenuAlt.showMenu ul { 98 | display: block; 99 | margin: 0; 100 | } 101 | .dropdownMenu ul a { 102 | color: #292929; 103 | } 104 | .js .dropdownMenuAlt ul a:hover, 105 | .js .dropdownMenuAlt ul a:focus { 106 | background-color: #ebf7ff; 107 | text-decoration: none; 108 | 109 | background:-moz-linear-gradient(center bottom, #e1f1fb, #f7fafd);/* FF3.6+ */ 110 | background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#e1f1fb), color-stop(100%,#f7fafd)); /* Chrome,Safari4+ */ 111 | background: -webkit-linear-gradient(bottom , #e1f1fb 0%, #f7fafd 100%);/* Chrome10+,Safari5.1+ */ 112 | background: -ms-linear-gradient(bottom , #e1f1fb 0%, #f7fafd 100%);/* IE10+ */ 113 | background: -o-linear-gradient(bottom , #e1f1fb 0%, #f7fafd 100%);/* Opera 11.10+ */ 114 | background: linear-gradient(bottom , #e1f1fb 0%, #f7fafd 100%);/* W3C */ 115 | } 116 | .js .dropdownMenuAlt > div > div > ul > li:first-child > * { 117 | border-top: none; 118 | } 119 | .js .dropdownMenuAlt > div > div > ul > li:last-child > * { 120 | border-bottom: none; 121 | } 122 | .js .dropdownMenuAlt > div > div > ul li > * { 123 | display: block; 124 | margin: 0; 125 | padding: 7px; 126 | font-weight: normal; 127 | border-top: 1px #fff solid; 128 | border-bottom:1px #eee solid; 129 | } 130 | .js .dropdownMenuAlt > div > div > ul ul li { 131 | padding: 0; 132 | } 133 | .js .dropdownMenuAlt > div > div > ul ul li * { 134 | padding-left: 27px; 135 | } 136 | .js .dropdownMenuAlt > div > div > ul ul { 137 | padding: 0; 138 | } 139 | 140 | /* demo presentation */ 141 | #wrapper { 142 | width: 66%; 143 | margin: 0 auto; 144 | } 145 | 146 | .dropdownMenuAlt { 147 | margin: 0.5em 0; 148 | } 149 | -------------------------------------------------------------------------------- /menu-button/css/reset.css: -------------------------------------------------------------------------------- 1 | /* 2 | html5doctor.com Reset Stylesheet 3 | v1.6.1 4 | Last Updated: 2010-09-17 5 | Author: Richard Clark - http://richclarkdesign.com 6 | Twitter: @rich_clark 7 | */ 8 | 9 | html, body, div, span, object, iframe, 10 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11 | abbr, address, cite, code, 12 | del, dfn, em, img, ins, kbd, q, samp, 13 | small, strong, sub, sup, var, 14 | b, i, 15 | dl, dt, dd, ol, ul, li, 16 | fieldset, form, label, legend, 17 | table, caption, tbody, tfoot, thead, tr, th, td, 18 | article, aside, canvas, details, figcaption, figure, 19 | footer, header, hgroup, menu, nav, section, summary, 20 | time, mark, audio, video { 21 | margin:0; 22 | padding:0; 23 | border:0; 24 | outline:0; 25 | font-size:100%; 26 | vertical-align:baseline; 27 | background:transparent; 28 | } 29 | 30 | body { 31 | line-height:1; 32 | } 33 | 34 | article,aside,details,figcaption,figure, 35 | footer,header,hgroup,menu,nav,section { 36 | display:block; 37 | } 38 | 39 | nav ul { 40 | list-style:none; 41 | } 42 | 43 | blockquote, q { 44 | quotes:none; 45 | } 46 | 47 | blockquote:before, blockquote:after, 48 | q:before, q:after { 49 | content:''; 50 | content:none; 51 | } 52 | 53 | a { 54 | margin:0; 55 | padding:0; 56 | font-size:100%; 57 | vertical-align:baseline; 58 | background:transparent; 59 | } 60 | 61 | /* change colours to suit your needs */ 62 | ins { 63 | background-color:#ff9; 64 | color:#000; 65 | text-decoration:none; 66 | } 67 | 68 | /* change colours to suit your needs */ 69 | mark { 70 | background-color:#ff9; 71 | color:#000; 72 | font-style:italic; 73 | font-weight:bold; 74 | } 75 | 76 | del { 77 | text-decoration: line-through; 78 | } 79 | 80 | abbr[title], dfn[title] { 81 | border-bottom:1px dotted; 82 | cursor:help; 83 | } 84 | 85 | table { 86 | border-collapse:collapse; 87 | border-spacing:0; 88 | } 89 | 90 | /* change border colour to suit your needs */ 91 | hr { 92 | display:block; 93 | height:1px; 94 | border:0; 95 | border-top:1px solid #ccc; 96 | margin:1em 0; 97 | padding:0; 98 | } 99 | 100 | input, select { 101 | vertical-align:middle; 102 | } -------------------------------------------------------------------------------- /menu-button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dropdown Menu Button 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 |

Dropdown Menu Button

20 |
21 | 22 |
23 | 24 | 28 | 29 |
30 | 31 | 35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /menu-button/js/_notes/dwsync.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /menu-button/js/dropdownMenuAlt.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview Dropdown menu button widget 3 | * @name PayPal Dropdown Menu Alt 4 | * @author swesthafer, dlembree 5 | */ 6 | 7 | (function() { 8 | "use strict"; 9 | 10 | $.widget("widget.dropdownMenuAlt", { 11 | options: { 12 | showOn: "click" //default show on click. Mouseenter another valid option 13 | }, 14 | _create: function() { 15 | this._getElements(); 16 | this._updateElements(); 17 | this._addListeners(); 18 | }, 19 | // get elements to manipulate and base calculations off of 20 | _getElements: function() { 21 | this.elements = {}; 22 | 23 | // the menu container (div role=menu) 24 | this.elements.container = this.element.find("div:first"); 25 | }, 26 | // add listeners for show/hide the menu 27 | _addListeners: function() { 28 | 29 | // close menu when you click off the dropdownMenu 30 | $("html").bind("click", $.proxy(this.closeMenu, this)); 31 | this.element.bind("click", function (event) { event.stopPropagation(); }); 32 | 33 | // close menu when someone clicks on a link 34 | this.element.find("ul a").on("click", $.proxy(this.closeMenu, this)); 35 | 36 | // toggle the menu open/closed when you click on the link 37 | this.element.find(".menuButton").on(this.options.showOn,$.proxy(function(event) { 38 | event.preventDefault(); 39 | this._toggleMenu(); 40 | }, this)); 41 | 42 | // toggle menu by keyboard when hitting Enter or Space 43 | this.element.find(".menuButton").on("keydown", $.proxy(function(event) { 44 | if (event.keyCode === $.ui.keyCode.ENTER || event.keyCode === $.ui.keyCode.SPACE) { 45 | event.preventDefault(); 46 | this._toggleMenu(); 47 | } 48 | }, this)); 49 | 50 | // bind keyboard events 51 | this.element.bind("keydown", $.proxy(function(event) { 52 | 53 | // close menu by keyboard when hitting Escape or Tab 54 | if (event.keyCode === $.ui.keyCode.TAB || event.keyCode === $.ui.keyCode.ESCAPE) { 55 | this.closeMenu(); 56 | } 57 | 58 | // navigate down 59 | if (event.keyCode === $.ui.keyCode.DOWN) { 60 | event.preventDefault(); 61 | 62 | // navigate if menu is open, otherwise open the menu if it's closed 63 | if (this.elements.container.is(':visible')) { 64 | this.focus('+1'); 65 | } else { 66 | this.openMenu(); 67 | } 68 | } 69 | 70 | // navigate up 71 | if (event.keyCode === $.ui.keyCode.UP) { 72 | event.preventDefault(); 73 | 74 | // navigate if menu is open, otherwise open the menu if it's closed 75 | if (this.elements.container.is(':visible')) { 76 | this.focus('-1'); 77 | } else { 78 | this.openMenu(); 79 | } 80 | } 81 | }, this)); 82 | 83 | // close when another menu opens 84 | $('html').bind('openMenu.dropdownMenu', $.proxy(this.closeMenu, this)); 85 | }, 86 | 87 | // gets a menu item from a given index 88 | getItem: function(index) { 89 | return $(this.element.find('ul li a').parent('li')[index]); 90 | }, 91 | 92 | // gets the index of the focused item 93 | getFocusedIndex: function() { 94 | var focusedIndex; 95 | this.element.find('ul li a').parent('li').each(function(index, item) { 96 | if ($(item).find('a:focus').length) { 97 | focusedIndex = index; 98 | } 99 | if (focusedIndex===undefined) { 100 | focusedIndex = -1; 101 | } 102 | }); 103 | return focusedIndex; 104 | }, 105 | 106 | // focuses on an item (can be an index number or the strings '+1' or '-1') 107 | focus: function(index) { 108 | var item; 109 | var len = this.element.find('ul a').length; 110 | 111 | // get the next available index 112 | if (index === '+1') { 113 | // increment index until we find an enabled item 114 | index = this.getFocusedIndex(); 115 | do { index++; } while (this.getItem(index).hasClass('disabled')); 116 | if (index > len-1 ) { 117 | index = 0; 118 | } 119 | } 120 | else if (index === '-1') { 121 | // decrement index until we find an enabled item 122 | index = this.getFocusedIndex(); 123 | do { index--; } while (this.getItem(index).hasClass('disabled')); 124 | if (index < 0 ) { 125 | index = len-1; 126 | } 127 | } 128 | 129 | // get item using index 130 | item = this.getItem(index); 131 | 132 | // return if no item to select 133 | if (!item.length) { 134 | return; 135 | } 136 | 137 | // set focus 138 | $(item.find('a')[0]).focus(); 139 | 140 | // control tabindex for Firefox and Opera issues 141 | this.element.find('ul:first li a').attr("tabindex", "-1"); 142 | $(item.find('a')[0]).attr("tabindex", "0"); 143 | }, 144 | 145 | // toggles the menu 146 | _toggleMenu: function() { 147 | if (this.element.hasClass('showMenu')) { 148 | this.closeMenu(); 149 | } else { 150 | this.openMenu(); 151 | } 152 | }, 153 | 154 | // add parameters to elements 155 | _updateElements: function() { 156 | this.element.find('a:first').attr("aria-haspopup", "true") 157 | .attr("role", "button"); 158 | this.elements.container.attr("role", "menu") 159 | .attr("aria-hidden", "true"); 160 | this.element.find('div div').attr("role", "presentation"); 161 | this.element.find('ul:first').attr("role", "presentation"); 162 | this.element.find('ul:first li').attr("role", "presentation"); 163 | this.element.find('ul:first li a').attr("role", "menuitem") 164 | .attr("tabindex", "-1"); 165 | }, 166 | 167 | // shows button 168 | showButton: function() { 169 | this.element.addClass('showButton'); 170 | }, 171 | 172 | // hides button 173 | hideButton: function() { 174 | this.element.removeClass('showButton'); 175 | this.closeMenu(); 176 | }, 177 | 178 | // opens the menu 179 | openMenu: function() { 180 | if (this.element.hasClass('showMenu')) { 181 | return; 182 | } 183 | this.element.trigger('openMenu.dropdownMenu', this); 184 | this.element.addClass('showButton showMenu'); 185 | this.element.find('div:first').attr("aria-hidden", "false"); 186 | this.element.find('a:first').attr("aria-expanded", "true"); 187 | this.focus('+1'); 188 | }, 189 | 190 | // closes the menu 191 | closeMenu: function() { 192 | if (!this.element.hasClass("showMenu")) { 193 | return; 194 | } 195 | this.element.removeClass("showMenu"); 196 | this.element.find("div:first").attr("aria-hidden", "true"); 197 | this.element.find(".menuButton").attr("aria-expanded", "false"); 198 | this.element.find(".menuButton").focus(); 199 | } 200 | }); 201 | 202 | 203 | }()); -------------------------------------------------------------------------------- /menu-button/js/dropdownMenuAlt_no_aria.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview Dropdown menu button widget 3 | * @name PayPal Dropdown Menu Alt 4 | * @author swesthafer, dlembree 5 | */ 6 | 7 | (function() { 8 | "use strict"; 9 | 10 | $.widget("widget.dropdownMenuAlt", { 11 | options: { 12 | showOn: "click" //default show on click. Mouseenter another valid option 13 | }, 14 | _create: function() { 15 | this._getElements(); 16 | this._updateElements(); 17 | this._addListeners(); 18 | }, 19 | // get elements to manipulate and base calculations off of 20 | _getElements: function() { 21 | this.elements = {}; 22 | 23 | // the menu container (div role=menu) 24 | this.elements.container = this.element.find("div:first"); 25 | }, 26 | // add listeners for show/hide the menu 27 | _addListeners: function() { 28 | 29 | // close menu when you click off the dropdownMenu 30 | $("html").bind("click", $.proxy(this.closeMenu, this)); 31 | this.element.bind("click", function (event) { event.stopPropagation(); }); 32 | 33 | // close menu when someone clicks on a link 34 | this.element.find("ul a").on("click", $.proxy(this.closeMenu, this)); 35 | 36 | // toggle the menu open/closed when you click on the link 37 | this.element.find(".menuButton").on(this.options.showOn,$.proxy(function(event) { 38 | event.preventDefault(); 39 | this._toggleMenu(); 40 | }, this)); 41 | 42 | // toggle menu by keyboard when hitting Enter or Space 43 | this.element.find(".menuButton").on("keydown", $.proxy(function(event) { 44 | if (event.keyCode === $.ui.keyCode.ENTER || event.keyCode === $.ui.keyCode.SPACE) { 45 | event.preventDefault(); 46 | this._toggleMenu(); 47 | } 48 | }, this)); 49 | 50 | // bind keyboard events 51 | this.element.bind("keydown", $.proxy(function(event) { 52 | 53 | // close menu by keyboard when hitting Escape or Tab 54 | if (event.keyCode === $.ui.keyCode.TAB || event.keyCode === $.ui.keyCode.ESCAPE) { 55 | this.closeMenu(); 56 | } 57 | 58 | // navigate down 59 | if (event.keyCode === $.ui.keyCode.DOWN) { 60 | event.preventDefault(); 61 | 62 | // navigate if menu is open, otherwise open the menu if it's closed 63 | if (this.elements.container.is(':visible')) { 64 | this.focus('+1'); 65 | } else { 66 | this.openMenu(); 67 | } 68 | } 69 | 70 | // navigate up 71 | if (event.keyCode === $.ui.keyCode.UP) { 72 | event.preventDefault(); 73 | 74 | // navigate if menu is open, otherwise open the menu if it's closed 75 | if (this.elements.container.is(':visible')) { 76 | this.focus('-1'); 77 | } else { 78 | this.openMenu(); 79 | } 80 | } 81 | }, this)); 82 | 83 | // close when another menu opens 84 | $('html').bind('openMenu.dropdownMenu', $.proxy(this.closeMenu, this)); 85 | }, 86 | 87 | // gets a menu item from a given index 88 | getItem: function(index) { 89 | return $(this.element.find('ul li a').parent('li')[index]); 90 | }, 91 | 92 | // gets the index of the focused item 93 | getFocusedIndex: function() { 94 | var focusedIndex; 95 | this.element.find('ul li a').parent('li').each(function(index, item) { 96 | if ($(item).find('a:focus').length) { 97 | focusedIndex = index; 98 | } 99 | if (focusedIndex===undefined) { 100 | focusedIndex = -1; 101 | } 102 | }); 103 | return focusedIndex; 104 | }, 105 | 106 | // focuses on an item (can be an index number or the strings '+1' or '-1') 107 | focus: function(index) { 108 | var item; 109 | var len = this.element.find('ul a').length; 110 | 111 | // get the next available index 112 | if (index === '+1') { 113 | // increment index until we find an enabled item 114 | index = this.getFocusedIndex(); 115 | do { index++; } while (this.getItem(index).hasClass('disabled')); 116 | if (index > len-1 ) { 117 | index = 0; 118 | } 119 | } 120 | else if (index === '-1') { 121 | // decrement index until we find an enabled item 122 | index = this.getFocusedIndex(); 123 | do { index--; } while (this.getItem(index).hasClass('disabled')); 124 | if (index < 0 ) { 125 | index = len-1; 126 | } 127 | } 128 | 129 | // get item using index 130 | item = this.getItem(index); 131 | 132 | // return if no item to select 133 | if (!item.length) { 134 | return; 135 | } 136 | 137 | // set focus 138 | $(item.find('a')[0]).focus(); 139 | 140 | // control tabindex for Firefox and Opera issues 141 | this.element.find('ul:first li a').attr("tabindex", "-1"); 142 | $(item.find('a')[0]).attr("tabindex", "0"); 143 | }, 144 | 145 | // toggles the menu 146 | _toggleMenu: function() { 147 | if (this.element.hasClass('showMenu')) { 148 | this.closeMenu(); 149 | } else { 150 | this.openMenu(); 151 | } 152 | }, 153 | 154 | // add parameters to elements 155 | _updateElements: function() { 156 | /*this.element.find('a:first').attr("aria-haspopup", "true") 157 | .attr("role", "button"); 158 | this.elements.container.attr("role", "menu") 159 | .attr("aria-hidden", "true"); 160 | this.element.find('div div').attr("role", "presentation"); 161 | this.element.find('ul:first').attr("role", "presentation"); 162 | this.element.find('ul:first li').attr("role", "presentation"); 163 | this.element.find('ul:first li a').attr("role", "menuitem") 164 | .attr("tabindex", "-1");*/ 165 | this.element.find('ul:first li a').attr("tabindex", "-1"); 166 | }, 167 | 168 | // shows button 169 | showButton: function() { 170 | this.element.addClass('showButton'); 171 | }, 172 | 173 | // hides button 174 | hideButton: function() { 175 | this.element.removeClass('showButton'); 176 | this.closeMenu(); 177 | }, 178 | 179 | // opens the menu 180 | openMenu: function() { 181 | if (this.element.hasClass('showMenu')) { 182 | return; 183 | } 184 | this.element.trigger('openMenu.dropdownMenu', this); 185 | this.element.addClass('showButton showMenu'); 186 | //this.element.find('div:first').attr("aria-hidden", "false"); 187 | //this.element.find('a:first').attr("aria-expanded", "true"); 188 | this.focus('+1'); 189 | }, 190 | 191 | // closes the menu 192 | closeMenu: function() { 193 | if (!this.element.hasClass("showMenu")) { 194 | return; 195 | } 196 | this.element.removeClass("showMenu"); 197 | //this.element.find("div:first").attr("aria-hidden", "true"); 198 | //this.element.find(".menuButton").attr("aria-expanded", "false"); 199 | this.element.find(".menuButton").focus(); 200 | } 201 | }); 202 | 203 | 204 | }()); -------------------------------------------------------------------------------- /menu-button/js/jquery-ui-1.8.22.core.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery UI - v1.8.22 - 2012-07-24 2 | * https://github.com/jquery/jquery-ui 3 | * Includes: jquery.ui.core.js 4 | * Copyright (c) 2012 AUTHORS.txt; Licensed MIT, GPL */ 5 | (function(a,b){function c(b,c){var e=b.nodeName.toLowerCase();if("area"===e){var f=b.parentNode,g=f.name,h;return!b.href||!g||f.nodeName.toLowerCase()!=="map"?!1:(h=a("img[usemap=#"+g+"]")[0],!!h&&d(h))}return(/input|select|textarea|button|object/.test(e)?!b.disabled:"a"==e?b.href||c:c)&&d(b)}function d(b){return!a(b).parents().andSelf().filter(function(){return a.curCSS(this,"visibility")==="hidden"||a.expr.filters.hidden(this)}).length}a.ui=a.ui||{};if(a.ui.version)return;a.extend(a.ui,{version:"1.8.22",keyCode:{ALT:18,BACKSPACE:8,CAPS_LOCK:20,COMMA:188,COMMAND:91,COMMAND_LEFT:91,COMMAND_RIGHT:93,CONTROL:17,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,INSERT:45,LEFT:37,MENU:93,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38,WINDOWS:91}}),a.fn.extend({propAttr:a.fn.prop||a.fn.attr,_focus:a.fn.focus,focus:function(b,c){return typeof b=="number"?this.each(function(){var d=this;setTimeout(function(){a(d).focus(),c&&c.call(d)},b)}):this._focus.apply(this,arguments)},scrollParent:function(){var b;return a.browser.msie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?b=this.parents().filter(function(){return/(relative|absolute|fixed)/.test(a.curCSS(this,"position",1))&&/(auto|scroll)/.test(a.curCSS(this,"overflow",1)+a.curCSS(this,"overflow-y",1)+a.curCSS(this,"overflow-x",1))}).eq(0):b=this.parents().filter(function(){return/(auto|scroll)/.test(a.curCSS(this,"overflow",1)+a.curCSS(this,"overflow-y",1)+a.curCSS(this,"overflow-x",1))}).eq(0),/fixed/.test(this.css("position"))||!b.length?a(document):b},zIndex:function(c){if(c!==b)return this.css("zIndex",c);if(this.length){var d=a(this[0]),e,f;while(d.length&&d[0]!==document){e=d.css("position");if(e==="absolute"||e==="relative"||e==="fixed"){f=parseInt(d.css("zIndex"),10);if(!isNaN(f)&&f!==0)return f}d=d.parent()}}return 0},disableSelection:function(){return this.bind((a.support.selectstart?"selectstart":"mousedown")+".ui-disableSelection",function(a){a.preventDefault()})},enableSelection:function(){return this.unbind(".ui-disableSelection")}}),a("").outerWidth(1).jquery||a.each(["Width","Height"],function(c,d){function h(b,c,d,f){return a.each(e,function(){c-=parseFloat(a.curCSS(b,"padding"+this,!0))||0,d&&(c-=parseFloat(a.curCSS(b,"border"+this+"Width",!0))||0),f&&(c-=parseFloat(a.curCSS(b,"margin"+this,!0))||0)}),c}var e=d==="Width"?["Left","Right"]:["Top","Bottom"],f=d.toLowerCase(),g={innerWidth:a.fn.innerWidth,innerHeight:a.fn.innerHeight,outerWidth:a.fn.outerWidth,outerHeight:a.fn.outerHeight};a.fn["inner"+d]=function(c){return c===b?g["inner"+d].call(this):this.each(function(){a(this).css(f,h(this,c)+"px")})},a.fn["outer"+d]=function(b,c){return typeof b!="number"?g["outer"+d].call(this,b):this.each(function(){a(this).css(f,h(this,b,!0,c)+"px")})}}),a.extend(a.expr[":"],{data:a.expr.createPseudo?a.expr.createPseudo(function(b){return function(c){return!!a.data(c,b)}}):function(b,c,d){return!!a.data(b,d[3])},focusable:function(b){return c(b,!isNaN(a.attr(b,"tabindex")))},tabbable:function(b){var d=a.attr(b,"tabindex"),e=isNaN(d);return(e||d>=0)&&c(b,!e)}}),a(function(){var b=document.body,c=b.appendChild(c=document.createElement("div"));c.offsetHeight,a.extend(c.style,{minHeight:"100px",height:"auto",padding:0,borderWidth:0}),a.support.minHeight=c.offsetHeight===100,a.support.selectstart="onselectstart"in c,b.removeChild(c).style.display="none"}),a.curCSS||(a.curCSS=a.css),a.extend(a.ui,{plugin:{add:function(b,c,d){var e=a.ui[b].prototype;for(var f in d)e.plugins[f]=e.plugins[f]||[],e.plugins[f].push([c,d[f]])},call:function(a,b,c){var d=a.plugins[b];if(!d||!a.element[0].parentNode)return;for(var e=0;e0?!0:(b[d]=1,e=b[d]>0,b[d]=0,e)},isOverAxis:function(a,b,c){return a>b&&a=9||!!b.button?this._mouseStarted?(this._mouseDrag(b),b.preventDefault()):(this._mouseDistanceMet(b)&&this._mouseDelayMet(b)&&(this._mouseStarted=this._mouseStart(this._mouseDownEvent,b)!==!1,this._mouseStarted?this._mouseDrag(b):this._mouseUp(b)),!this._mouseStarted):this._mouseUp(b)},_mouseUp:function(b){return a(document).unbind("mousemove."+this.widgetName,this._mouseMoveDelegate).unbind("mouseup."+this.widgetName,this._mouseUpDelegate),this._mouseStarted&&(this._mouseStarted=!1,b.target==this._mouseDownEvent.target&&a.data(b.target,this.widgetName+".preventClickEvent",!0),this._mouseStop(b)),!1},_mouseDistanceMet:function(a){return Math.max(Math.abs(this._mouseDownEvent.pageX-a.pageX),Math.abs(this._mouseDownEvent.pageY-a.pageY))>=this.options.distance},_mouseDelayMet:function(a){return this.mouseDelayMet},_mouseStart:function(a){},_mouseDrag:function(a){},_mouseStop:function(a){},_mouseCapture:function(a){return!0}})})(jQuery);;/*! jQuery UI - v1.8.22 - 2012-07-24 14 | * https://github.com/jquery/jquery-ui 15 | * Includes: jquery.ui.position.js 16 | * Copyright (c) 2012 AUTHORS.txt; Licensed MIT, GPL */ 17 | (function(a,b){a.ui=a.ui||{};var c=/left|center|right/,d=/top|center|bottom/,e="center",f={},g=a.fn.position,h=a.fn.offset;a.fn.position=function(b){if(!b||!b.of)return g.apply(this,arguments);b=a.extend({},b);var h=a(b.of),i=h[0],j=(b.collision||"flip").split(" "),k=b.offset?b.offset.split(" "):[0,0],l,m,n;return i.nodeType===9?(l=h.width(),m=h.height(),n={top:0,left:0}):i.setTimeout?(l=h.width(),m=h.height(),n={top:h.scrollTop(),left:h.scrollLeft()}):i.preventDefault?(b.at="left top",l=m=0,n={top:b.of.pageY,left:b.of.pageX}):(l=h.outerWidth(),m=h.outerHeight(),n=h.offset()),a.each(["my","at"],function(){var a=(b[this]||"").split(" ");a.length===1&&(a=c.test(a[0])?a.concat([e]):d.test(a[0])?[e].concat(a):[e,e]),a[0]=c.test(a[0])?a[0]:e,a[1]=d.test(a[1])?a[1]:e,b[this]=a}),j.length===1&&(j[1]=j[0]),k[0]=parseInt(k[0],10)||0,k.length===1&&(k[1]=k[0]),k[1]=parseInt(k[1],10)||0,b.at[0]==="right"?n.left+=l:b.at[0]===e&&(n.left+=l/2),b.at[1]==="bottom"?n.top+=m:b.at[1]===e&&(n.top+=m/2),n.left+=k[0],n.top+=k[1],this.each(function(){var c=a(this),d=c.outerWidth(),g=c.outerHeight(),h=parseInt(a.curCSS(this,"marginLeft",!0))||0,i=parseInt(a.curCSS(this,"marginTop",!0))||0,o=d+h+(parseInt(a.curCSS(this,"marginRight",!0))||0),p=g+i+(parseInt(a.curCSS(this,"marginBottom",!0))||0),q=a.extend({},n),r;b.my[0]==="right"?q.left-=d:b.my[0]===e&&(q.left-=d/2),b.my[1]==="bottom"?q.top-=g:b.my[1]===e&&(q.top-=g/2),f.fractions||(q.left=Math.round(q.left),q.top=Math.round(q.top)),r={left:q.left-h,top:q.top-i},a.each(["left","top"],function(c,e){a.ui.position[j[c]]&&a.ui.position[j[c]][e](q,{targetWidth:l,targetHeight:m,elemWidth:d,elemHeight:g,collisionPosition:r,collisionWidth:o,collisionHeight:p,offset:k,my:b.my,at:b.at})}),a.fn.bgiframe&&c.bgiframe(),c.offset(a.extend(q,{using:b.using}))})},a.ui.position={fit:{left:function(b,c){var d=a(window),e=c.collisionPosition.left+c.collisionWidth-d.width()-d.scrollLeft();b.left=e>0?b.left-e:Math.max(b.left-c.collisionPosition.left,b.left)},top:function(b,c){var d=a(window),e=c.collisionPosition.top+c.collisionHeight-d.height()-d.scrollTop();b.top=e>0?b.top-e:Math.max(b.top-c.collisionPosition.top,b.top)}},flip:{left:function(b,c){if(c.at[0]===e)return;var d=a(window),f=c.collisionPosition.left+c.collisionWidth-d.width()-d.scrollLeft(),g=c.my[0]==="left"?-c.elemWidth:c.my[0]==="right"?c.elemWidth:0,h=c.at[0]==="left"?c.targetWidth:-c.targetWidth,i=-2*c.offset[0];b.left+=c.collisionPosition.left<0?g+h+i:f>0?g+h+i:0},top:function(b,c){if(c.at[1]===e)return;var d=a(window),f=c.collisionPosition.top+c.collisionHeight-d.height()-d.scrollTop(),g=c.my[1]==="top"?-c.elemHeight:c.my[1]==="bottom"?c.elemHeight:0,h=c.at[1]==="top"?c.targetHeight:-c.targetHeight,i=-2*c.offset[1];b.top+=c.collisionPosition.top<0?g+h+i:f>0?g+h+i:0}}},a.offset.setOffset||(a.offset.setOffset=function(b,c){/static/.test(a.curCSS(b,"position"))&&(b.style.position="relative");var d=a(b),e=d.offset(),f=parseInt(a.curCSS(b,"top",!0),10)||0,g=parseInt(a.curCSS(b,"left",!0),10)||0,h={top:c.top-e.top+f,left:c.left-e.left+g};"using"in c?c.using.call(b,h):d.css(h)},a.fn.offset=function(b){var c=this[0];return!c||!c.ownerDocument?null:b?a.isFunction(b)?this.each(function(c){a(this).offset(b.call(this,c,a(this).offset()))}):this.each(function(){a.offset.setOffset(this,b)}):h.call(this)}),function(){var b=document.getElementsByTagName("body")[0],c=document.createElement("div"),d,e,g,h,i;d=document.createElement(b?"div":"body"),g={visibility:"hidden",width:0,height:0,border:0,margin:0,background:"none"},b&&a.extend(g,{position:"absolute",left:"-1000px",top:"-1000px"});for(var j in g)d.style[j]=g[j];d.appendChild(c),e=b||document.documentElement,e.insertBefore(d,e.firstChild),c.style.cssText="position: absolute; left: 10.7432222px; top: 10.432325px; height: 30px; width: 201px;",h=a(c).offset(function(a,b){return b}).offset(),d.innerHTML="",e.removeChild(d),i=h.top+h.left+(b?2e3:0),f.fractions=i>21&&i<22}()})(jQuery);; -------------------------------------------------------------------------------- /menu-button/no_aria.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dropdown Menu Button 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Dropdown Menu Button: No ARIA

21 |
22 | 23 |
24 | 25 |

She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You're all clear, kid. Let's blow this thing and go home! I need your help, Luke. She needs your help. I'm getting too old for this sort of thing. Escape is not his plan. I must face him, alone.

26 | 27 |
28 | 29 | Share Options 30 | 31 |
32 |
33 | 39 |
40 |
41 |
42 | 43 |

I find your lack of faith disturbing. No! Alderaan is peaceful. We have no weapons. You can't possibly…

44 | 45 |
46 | 47 | 50 | 51 |
52 | 53 | 54 | 55 | 56 | 57 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /menu-button/with_aria.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dropdown Menu Button 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Dropdown Menu Button: With ARIA

21 |
22 | 23 |
24 | 25 |

She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You're all clear, kid. Let's blow this thing and go home! I need your help, Luke. She needs your help. I'm getting too old for this sort of thing. Escape is not his plan. I must face him, alone.

26 | 27 |
28 | 29 | Share Options 30 | 31 |
32 |
33 | 39 |
40 |
41 |
42 | 43 |

I find your lack of faith disturbing. No! Alderaan is peaceful. We have no weapons. You can't possibly…

44 | 45 |
46 | 47 | 50 | 51 |
52 | 53 | 54 | 55 | 56 | 57 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /modal/CSUN14-Modal-Dialog.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weboverhauls/demos/213c568a2038741a6288ef95c358cf3d444e45e4/modal/CSUN14-Modal-Dialog.pptx -------------------------------------------------------------------------------- /modal/modal_demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modal Dialog Example 6 | 7 | 8 | 9 | 10 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |

Modal Dialog Example

41 | 42 |

Open Modal

43 | 44 | 52 |
53 | 54 |

More

55 | 60 | 61 |
62 | 63 | 64 | 65 | 66 | 192 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /modal/modal_demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modal Dialog Example 2 6 | 7 | 8 | 9 | 10 | 40 | 41 | 42 | 43 | 44 |
45 | 46 |

Modal Dialog Example 2

47 | 48 |

Example of an accessible modal with resizing and progressive enhancement.

49 | 50 |

Go To Search

51 | 52 |

Improvements/differences from original version:

53 | 62 | 63 | 71 |
72 | 73 |

More

74 | 78 | 79 |
80 | 81 | 82 | 83 | 84 | 213 | 214 | 215 | 216 | -------------------------------------------------------------------------------- /modal/modal_demo_a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modal Dialog Example 6 | 7 | 8 | 9 | 10 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |

Modal Dialog Example

41 | 42 |

Open Modal

43 | 44 |

Ipsum test lorem.

45 | 46 | 54 |
55 | 56 |

More

57 | 58 |

modal demo 2

59 | 60 |
61 | 62 | 63 | 64 | 65 | 201 | 202 | 203 | 204 | -------------------------------------------------------------------------------- /pagination/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pagination - accessible design pattern 6 | 7 | 8 | 9 | 10 | 42 | 43 | 44 | 45 | 46 |
47 | 48 |

Accessible Pagination Example

49 | 50 | 69 | 70 |
71 |

Notes

72 | 79 |
80 | 81 |
82 | 83 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /password-mask-toggle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Password input mask toggle - accessible design pattern 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |

Accessible Password Input Masking Toggle

25 | 26 |

Example of a semantic and accessible design pattern for toggling the masking of a password input form field.

27 | 28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 |
39 | 40 | 43 | 44 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /svg/checkmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tab-panel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab Panel Example 6 | 7 | 8 | 9 | 10 | 107 | 108 | 109 | 110 | 111 |
112 | 113 |

Tab Panel Example

114 | 115 |

This is an example of an accessible tab panel widget with ARIA and progressive enhancement. It follows the tabs pattern in the WAI-ARIA Authoring Practices. The second example adds instructions and an experimental tooltip (to help with keyboard discoverability) and ability for panels to focus to ensure all content can be accessed via keyboard only (of my favorite music groups, test the Marilyn Manson tabpanel with keyboard). Note: it appears that Firefox is now natively providing focusable panels.

116 | 117 |

Default

118 |
119 | 130 | 131 |
132 |
133 |

The Cure

134 |

The Cure are an English rock band formed in Crawley, West Sussex, in 1976. The band has experienced several line-up changes, with vocalist, guitarist and principal songwriter Robert Smith being the only constant member. The Cure first began releasing music in the late 1970s with their debut album Three Imaginary Boys; this, along with several early singles, placed the band as part of the post-punk and new wave movements that had sprung up in the wake of the punk rock revolution in the United Kingdom. During the early 1980s, the band's increasingly dark and tormented music was a staple of the emerging gothic rock genre.

135 |

After the release of 1982's Pornography, the band's future was uncertain and Smith was keen to move past the gloomy reputation his band had acquired. With the single "Let's Go to Bed" released the same year, Smith began to place a pop sensibility into the band's music and their popularity increased as the decade wore on, with songs like "Just Like Heaven", "Lovesong" and "Friday I'm in Love". The band is estimated to have sold 27 million albums as of 2004 and have released thirteen studio albums, ten EPs and over thirty singles during their career.

136 |
137 |
138 |

Beastie Boys

139 |

The Beastie Boys were an American hip hop/rock band from New York City, formed in 1981. For the majority of its career, the group consisted of Michael "Mike D" Diamond (vocals, drums), Adam "MCA" Yauch (vocals, bass) and Adam "Ad-Rock" Horovitz (vocals, guitar).

140 |

With seven platinum or better albums from 1986–2004, the Beastie Boys were one of the longest-lived hip hop acts worldwide. In 2009, the group released digitally remastered deluxe editions of their albums Paul's Boutique, Check Your Head, Ill Communication and Hello Nasty. They were inducted into the Rock and Roll Hall of Fame in April 2012, "just the third rap group to enter the Hall, after Run–D.M.C. (2009) and Grandmaster Flash and the Furious Five (2007)." The following month, MCA died of cancer of the parotid salivary gland.

141 |
142 |
143 |

Marilyn Manson

144 |

Brian Hugh Warner (born January 5, 1969), known professionally as Marilyn Manson, is an American musician, songwriter, actor, painter, multimedia artist, and former music journalist. He is known for his controversial stage personality and image as the lead singer of the band Marilyn Manson, which he co-founded with Daisy Berkowitz and of which he remains the only constant member. His stage name was formed by juxtaposing the names of two American cultural icons, actress Marilyn Monroe and murderer Charles Manson.

145 |

He is best known for his band's records released in the 1990s, most notably Antichrist Superstar and Mechanical Animals, which along with his public image earned him a reputation in the mainstream media as a controversial figure and an allegedly negative influence on young people.[6][7] In the U.S. alone, three of the band's albums have been awarded platinum and three more went gold, and the band has had eight releases debut in the top ten, including two number-one albums. Manson has been ranked number 44 in the Top 100 Heavy Metal Vocalists by Hit Parader, and has been nominated for four Grammy Awards.

146 |
147 |
148 |
149 | 150 |

With instructions/tooltip and focusable panels

151 | 152 |
153 | 164 | 165 |
166 |
167 |

The Cure

168 |

The Cure are an English rock band formed in Crawley, West Sussex, in 1976. The band has experienced several line-up changes, with vocalist, guitarist and principal songwriter Robert Smith being the only constant member. The Cure first began releasing music in the late 1970s with their debut album Three Imaginary Boys; this, along with several early singles, placed the band as part of the post-punk and new wave movements that had sprung up in the wake of the punk rock revolution in the United Kingdom. During the early 1980s, the band's increasingly dark and tormented music was a staple of the emerging gothic rock genre.

169 |

After the release of 1982's Pornography, the band's future was uncertain and Smith was keen to move past the gloomy reputation his band had acquired. With the single "Let's Go to Bed" released the same year, Smith began to place a pop sensibility into the band's music and their popularity increased as the decade wore on, with songs like "Just Like Heaven", "Lovesong" and "Friday I'm in Love". The band is estimated to have sold 27 million albums as of 2004 and have released thirteen studio albums, ten EPs and over thirty singles during their career.

170 |
171 |
172 |

Beastie Boys

173 |

The Beastie Boys were an American hip hop/rock band from New York City, formed in 1981. For the majority of its career, the group consisted of Michael "Mike D" Diamond (vocals, drums), Adam "MCA" Yauch (vocals, bass) and Adam "Ad-Rock" Horovitz (vocals, guitar).

174 |

With seven platinum or better albums from 1986–2004, the Beastie Boys were one of the longest-lived hip hop acts worldwide. In 2009, the group released digitally remastered deluxe editions of their albums Paul's Boutique, Check Your Head, Ill Communication and Hello Nasty. They were inducted into the Rock and Roll Hall of Fame in April 2012, "just the third rap group to enter the Hall, after Run–D.M.C. (2009) and Grandmaster Flash and the Furious Five (2007)." The following month, MCA died of cancer of the parotid salivary gland.

175 |
176 |
177 |

Marilyn Manson

178 |

Brian Hugh Warner (born January 5, 1969), known professionally as Marilyn Manson, is an American musician, songwriter, actor, painter, multimedia artist, and former music journalist. He is known for his controversial stage personality and image as the lead singer of the band Marilyn Manson, which he co-founded with Daisy Berkowitz and of which he remains the only constant member. His stage name was formed by juxtaposing the names of two American cultural icons, actress Marilyn Monroe and murderer Charles Manson.

179 |

He is best known for his band's records released in the 1990s, most notably Antichrist Superstar and Mechanical Animals, which along with his public image earned him a reputation in the mainstream media as a controversial figure and an allegedly negative influence on young people.[6][7] In the U.S. alone, three of the band's albums have been awarded platinum and three more went gold, and the band has had eight releases debut in the top ten, including two number-one albums. Manson has been ranked number 44 in the Top 100 Heavy Metal Vocalists by Hit Parader, and has been nominated for four Grammy Awards.

180 |
181 |
182 |
183 | 184 |
185 | 186 | 189 | 190 | 191 | 192 | 195 | 196 | 197 | 198 | 203 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /tab-panel/tab-panel.js: -------------------------------------------------------------------------------- 1 | (function ( $ ) { 2 | 3 | $.fn.tabs = function tabs (options) { 4 | 5 | return this.each(function onEach() { 6 | 7 | // set variables 8 | var $tabsWidget = $(this), 9 | $tablist = $tabsWidget.find('> ul'), 10 | $tabs = $tablist.find('> li'), 11 | $links = $tabs.find('> a'), 12 | $panels = $tabsWidget.find('> div div'), 13 | activeTab, 14 | prevItem, 15 | lastItem, 16 | nextItem, 17 | firstItem; 18 | 19 | // init - Add ARIA role and state 20 | $tablist.attr('role', 'tablist') 21 | .attr('aria-labelledby','tablistName'); 22 | 23 | $tabs.attr('role', 'presentation'); 24 | 25 | $links 26 | .attr('role', 'tab') 27 | .attr('aria-selected', 'false') 28 | .attr("tabindex", "-1") 29 | .first() 30 | .attr('aria-selected', 'true') 31 | .attr("tabindex", "0"); 32 | 33 | $panels 34 | .attr('role', 'tabpanel') 35 | .attr('aria-hidden', 'true') 36 | .first() 37 | .attr('aria-hidden', 'false'); 38 | 39 | // init - Add aria labelledby and controls 40 | $links.each(function onEachTab(idx, el) { 41 | var $tab = $(el), 42 | tabId = $tabsWidget.attr('id') + '_t_' + idx, 43 | panelId = $tabsWidget.attr('id') + '_p_' + idx; 44 | 45 | $tab 46 | .attr('id', tabId) 47 | .attr('aria-controls', panelId); 48 | 49 | $panels.eq(idx) 50 | .attr('id', panelId) 51 | .attr('aria-labelledby', tabId); 52 | }); 53 | 54 | // Unselect active tab, select the new tab, show panel 55 | var focusTab = function(newTab) { 56 | // Unselect active tab 57 | activeTab = $($tabsWidget).find('a[aria-selected=true]'); 58 | 59 | activeTab 60 | .attr("aria-selected", "false") 61 | .attr("tabindex", "-1"); 62 | 63 | // Hide active panel 64 | $("#" + activeTab.attr("aria-controls")).attr("aria-hidden", "true"); 65 | 66 | // Select the new tab 67 | newTab 68 | .attr("aria-selected", "true") 69 | .attr("tabindex", "0"); 70 | 71 | // Show the controlled panel 72 | $("#" + newTab.attr("aria-controls")).attr("aria-hidden", "false"); 73 | newTab.focus(); 74 | } 75 | 76 | // Capture key events on tabs 77 | $($tabsWidget).find("a[role='tab']").keydown(function(event) { 78 | if (event.which === 37) { // left arrow key 79 | prevItem = $(event.currentTarget).parent().prev().find("a"); 80 | // Go to previous, if exists 81 | if (prevItem.length > 0) { 82 | focusTab(prevItem); 83 | event.preventDefault(); 84 | } 85 | else { 86 | // Go to last 87 | lastItem = $(event.currentTarget).parent().siblings().last().find("a"); 88 | focusTab(lastItem); 89 | event.preventDefault(); 90 | } 91 | } 92 | else if (event.which === 39) { // right arrow key 93 | nextItem = $(event.currentTarget).parent().next().find("a"); 94 | // Go to next, if exists 95 | if (nextItem.length > 0) { 96 | focusTab(nextItem); 97 | event.preventDefault(); 98 | } 99 | else { 100 | // Go to first 101 | firstItem = $(event.currentTarget).parent().siblings().first().find("a"); 102 | focusTab(firstItem); 103 | event.preventDefault(); 104 | } 105 | } 106 | else if (event.which === 36) { // home key 107 | firstItem = $(event.currentTarget).parent().siblings().first().find("a"); 108 | focusTab(firstItem); 109 | event.preventDefault(); 110 | } 111 | else if (event.which === 35) { // end key 112 | lastItem = $(event.currentTarget).parent().siblings().last().find("a"); 113 | focusTab(lastItem); 114 | event.preventDefault(); 115 | } 116 | }); 117 | 118 | // Support mouse click on tabs 119 | $links.click(function(event) { 120 | focusTab($(event.currentTarget)); 121 | event.preventDefault(); 122 | }); 123 | 124 | }); 125 | }; 126 | }( jQuery )); 127 | -------------------------------------------------------------------------------- /tables/data-table-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Accessible data table with form elements 5 | 6 | 7 | 16 | 17 | 18 | 19 |

Accessible data table with form elements

20 |

Below is an example of an accessible data table containing form elements (two select dropdowns).

21 |

Notes:

22 | 27 | 28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 65 | 66 | 67 |
Set Store Hours
MondayTuesdayWednesdayThursdayFriday
9-11amClosed 43 | 48 | OpenClosedClosed
1-5pmOpenOpenClosed 59 | 64 | Closed
68 | 69 |
70 | 71 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /tile/images/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weboverhauls/demos/213c568a2038741a6288ef95c358cf3d444e45e4/tile/images/placeholder.png -------------------------------------------------------------------------------- /tile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tile/Card - accessible web design patterns 6 | 7 | 8 | 9 | 10 | 66 | 67 | 68 | 69 | 70 |

Accessible Tile (Card) Examples

71 | 72 |
73 |

Notes/goals

74 | 80 |
81 | 82 |
83 |

Minimal Tile

84 | 98 |
99 | 100 |
101 |

Light Tile

102 | 125 |
126 | 127 |
128 |

Heavy Tile

129 | 146 |
147 | 148 |
149 |

Bio Tile

150 | 170 |
171 | 172 |
173 |

Resources

174 | 179 |
180 | 181 | 184 | 185 | 186 | 187 | -------------------------------------------------------------------------------- /toggle_switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Toggle Switch 6 | 7 | 8 | 9 | 10 | 74 | 75 | 76 | 77 | 78 |

Toggle Switch Example

79 |
80 |

Choose a type of account (keyboard users, please use arrow keys to select):

81 |
82 | 83 | 84 | 85 | 86 | 87 |
88 |
89 | 90 |
91 | 92 |

From the article A sweet toggle switch by PayPal Engineering

93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /transition/animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Accessibility test for CSS3 Animation to Show/Hide 6 | 7 | 8 | 128 | 129 | 130 | 131 | 132 |

Example of accessible show/hide using CSS Animation (and progressive enhancement)

133 | 134 |
Toggle
135 |
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
136 | 137 | 138 | 139 | 140 | 183 | 184 | 187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /transition/transition.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3 Show-Hide with Transition 6 | 7 | 8 | 9 | 38 | 39 | 40 | 41 | 42 |

Example of accessible show/hide using CSS Transition (and progressive enhancement)

43 | 44 |
Star Wars ipsum
45 |
Boba yoda wicket gamorrean ponda sebulba. Secura kit skywalker ackbar hutt darth owen. Boba leia antilles kenobi antilles amidala luuke biggs qui-gon. Darth calrissian lando moff mustafar ewok sidious. Obi-wan amidala darth yoda qui-gon solo boba jade antilles. Kenobi hutt grievous coruscant boba. Dagobah dantooine skywalker dooku mothma yoda.
46 | 47 | 48 | 49 | 50 | 85 | 86 | 89 | 90 | 91 | 92 | --------------------------------------------------------------------------------