Accessible Code Patterns and Libraries

Pattern libraries for developers

• Cauldron – Deque design pattern
• ARIA Authoring Practices Guide (APG)
• Bootstrap Accessibility
• W3C Developing for Web Accessibility

Deque University ARIA widgets code library (Beta)

This code library provides examples of using ARIA and JavaScript effectively for custom widgets like dialogs, alerts, tooltips, date pickers, carousels, expand/collapse regions, aria-live regions, autocomplete, application menus, tab panels, tree views, etc.

Accessible tables

There are several techniques for creating accessible tables on websites, most of which involve CSS and sometimes a bit of JavaScript. The best approach depends on the data, the complexity of the table, the site design, etc. There isn’t a one size fits all technique.

• CSS-Tricks – Responsive Data Tables
• CSS-Tricks – Accessible Simple Responsive Tables
• Adrian Roselli – A Responsive Accessible Table

If you’re using a framework, there may be responsive table classes already available. For example, Bootstrap’s .table-responsive class triggers horizontal scrolling on small screens. That doesn’t address all potential accessibility issues, so you would also want to make sure your table is well-constructed.

There are also interesting solutions on CodePen. This Simple Responsive Table in CSS example switches table rows into a card view on small screens.