Making Bootstrap accessible

Recently I’ve been working on making Screendoor “508 compliant”. Section 508 is a federal law stating that all IT systems must be accessible to users with disabilities – kind of like WCAG, except mandated by the federal government. In it’s most simplified form, it’s basically a checklist of accessibility best-practices that all federal websites need to follow.

Unfortunately, everyone’s favorite Twitter Bootstrap is rife with accessibility issues. Things like using the <i> tag for icon classes, using anchor tags to toggle menus… and some trickier ones, like encouraging users to use non-semantic header nesting. (Is the biggest header on your site an <h1>? no? bzzzzzzz)

That’s why this weekend we’re hosting an informal gathering in Oakland (and virtually) to work on making Bootstrap follow accessibility best-practices. Where we need your help is filing issues – before Sunday, we would love to have a fairly comprehensive list of where Bootstrap fails 508 and WCAG guidelines. I’ve started building the list, and would love any and all help filling it out: