Accessibility

Accessibility Examples and Code

 
 
 

Here are a few notable web components that can be helpful in providing functionality that is accessible in our experience: 

Accordions & Tabs:

http://webcloud.se/jQuery-Collapse/ https://codepen.io/mpiotrowicz/pen/gocmu https://github.com/anvk/a11yAccordion https://drupal.org/project/quicktabs http://lamovo.com/tabs+accordion http://webcloud.se/jQuery-Collapse/

Autocomplete:

http://www.bu.edu/webteam/clrux/accessibility/autocomplete/autocomplete.html

Alerts:

http://joshnh.com/weblog/how-to-make-an-alert-bar/ https://paulund.co.uk/twitter-bootstrap-alert-boxes

Carousels:

http://kenwheeler.github.io/slick/

Captcha:

http://simplyaccessible.com/article/googles-no-captcha/

Charts:

http://paypal.github.io/amcharts-accessibility-plugin/

Comments:

https://help.disqus.com/what-is-disqus/common-questions-about-disqus

Date Pickers:

https://www.deque.com/blog/accessible-jquery-ui-datepicker/ http://www.oaa-accessibility.org/examplep/datepicker1/

Grids:

http://adamkaplan.me/grid/ https://www.drupal.org/project/packery https://github.com/brunjo/rowGrid.js https://isotope.metafizzy.co/ https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties https://www.drupal.org/project/views_elastic_grid https://github.com/henriquea/minigrid https://www.drupal.org/project/savvior https://www.jqueryscript.net/gallery/Accessible-Off-canvas-Grid-Gallery-with-jQuery-CSS3.html

Popups:

http://dimsemenov.com/plugins/magnific-popup/ http://dev.vast.com/jquery-popup-overlay/ http://websemantics.co.uk/archived/accessible_css3_modal_pop-ups/ (CSS Only)

Select Lists:

https://github.com/select2/select2

 
Skip to link:

http://paypal.github.io/skipto/ https://www.drupal.org/project/skipto http://hanshillen.github.io/jqtest/#goto_tabs

Slideshows:
Slideshows should play/pause with space and have left/right navigation

http://kenwheeler.github.io/slick/

Tooltips:

http://accessibility.athena-ict.com/aria/examples/tooltip.shtml

Social Sharing:

http://www.addthis.com/social-buttons/sharing-tools

Sortable Lists:

https://codepen.io/barrytsmith/pen/kfiqj https://github.com/johnny/jquery-sortable http://dbushell.com/Nestable/

Tables:

https://www.drupal.org/project/responsive_tables_filter http://www.jquery-bootgrid.com/ https://github.com/filamentgroup/tablesaw https://github.com/dylanb/a11yfy https://codepen.io/pixelchar/pen/rfuqK

Menu:

http://users.tpg.com.au/j_birch/plugins/superfish/ https://github.com/adobe-accessibility/Accessible-Mega-Menu/ http://staff.washington.edu/tft/tests/menus/simplyaccessible/index.html https://www.sitepoint.com/pure-css-off-screen-navigation-menu/

Bootstrap:

http://getbootstrap.com/ http://paypal.github.io/bootstrap-accessibility-plugin/

 
Video Players:

https://github.com/paypal/accessible-html5-video-player https://github.com/ableplayer/ableplayer

WYSIWYG Editors:

https://docs-old.ckeditor.com/CKEditor_3.x/Accessibility

CSS:
CSS only image transitions and color change where possible with filter support
CSS only image captions based on image title and CSS content placing http://captionss.com figcaption

https://github.com/mrmrs/colors http://fontawesome.io/ https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

Author


Avatar

KWALL Company

KWALL is a global team of open source experts with a passion for creating incredible and accessible experiences.