Accessibility Examples and Code

Bykwall Reading Time: 2 minutes

      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…

|

Making Accessible Designs

Bykwall Reading Time: 3 minutes

All elements have a contrast ratio of 4.5:1 (7:1 AAA) other than: Large scale text and images can be 3:1 (4.5:1 AAA). Purely decorative, logos, or inactive elements that don’t matter, have no contrast ratio requirements. Designing for color contrast is straightforward in many situations. Contrast checkers take the background color and the foreground color,…

End of content

End of content