Experience Optimization, Insights

Bootstrap JavaScript Components are your Accessibility Savior

Accessibility-Bootstrap-Header

We recently introduced our readers to the concept of Website Accessibility; a form of user experience development used to make sites and web stores more accessible to disabled visitors. Kanban has been working to bring our clients into compliance with the Web Content Accessibility Guidelines (WCAG) as laid out by the World Wide Web Consortium (W3C). These standards–currently used by organizations around the world and now enforced by the Department of Justice–will not only protect our clients from lawsuits, but will make their websites more accessible to the disabled, the elderly and people with drastically reduced internet speeds.

While it is possible to retrofit your website to conform to accessibility standards, companies planning for a redesign will see efficiency and economies from adding accessibility to the scope of work. For those of you who are interested in accessibility compliance but are not planning a redesign, start with an accessibility audit, mapping your user experience features and functions–and the CMS– directly to WCAG standards.

Why Bootstrap?

With so many brands moving to responsive design and development–our clients included–we have elected to address accessibility by enhancing existing Bootstrap components.

Bootstrap is a popular UI framework that produces standard, compliant HTML, CSS, and JS used to build a responsive website. Bootstrap focuses on the 3 pillars of UI–Content, Presentation and Behavior.

Bootstrap offers a host of common components as starting points for development and customization. These components are built using modern rules and standards, support HTML5/CSS3, offer cross-browser, cross-device compatibility and are completely open-source with a large developer community.

Kanban’s Component Library

Our team has taken Bootstrap a bit further by creating a library of extensible, responsive, accessible components, forming a blueprint for how brands should align accessibility and responsive efforts.

These enhanced Bootstrap components take responsive versions of front-end elements and render them with WCAG-approved features. If the component within the content management system needs a field added–for example, adding alt tags to carousel control arrows–our engineers add that field and map it to the corresponding component. These components allow content professionals to add a variety of accessible functionality to existing features right in their familiar CMS environment.

While this componentized accessibility blueprint will be added into our client’s HP TeamSite environment and integrated with any extensions and plugins they may have, the components are vendor-neutral, meaning we can implement this on any content management system and any technology stack, allowing content teams to keep the system they are used to, with a few added fields and requirements to consider. We can also add them to a non-responsive environment, making them a simple addition to any redesign project.

Our components are mapped directly to Web Content Accessibility Guidelines (WCAG). Here are just a few of the improvements we have added to our library so far:

 

COMPONENT NAME: Popover

  • WCAG Standard Addressed: 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  • What it does: Creates a field within TeamSite where authors can enter a description for a non-text element that will then overlay on top of an element upon hover.

 

COMPONENT NAME: Dropdown

  • WCAG Standard Addressed: 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
  • What it does: Allows dropdown menus and tabbed content to be navigated entirely using the keyboard. Tabs are selected, scanned and scrolled using the arrow keys, as well as Home, End and Ctrl + Up commands.

 

COMPONENT NAME: Carousel

  • WCAG Standard Addressed: 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are and 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
  • What it does: Adds ARIA (specialized rich internet attributes; ex. navigation landmarks, form hints and error messages) tags to let users know they are entering a carousel, removes the screen reader command that reads the whole list of carousel items and allows the carousel to be navigated from the keyboard. It also provides a lightbox, which makes content more distinguishable (another WCAG standard).

 

COMPONENT NAME: Accordion

  • WCAG Standard Addressed: 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
  • What it does: Adds an event listener that allows collapse functionality from the keyboard using Spacebar, Enter and Arrow keys.

 

COMPONENT NAME: Modal Window

  • WCAG Standard Addressed: 3.3 Input Assistance: Help users avoid and correct mistakes and 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
  • What it does: Sets and traps focus inside the modal window so that when tabbing through options, users won’t go outside the modal window. It also restores focus on modal close and restores focus on the element that triggered the modal screen.

Along with these Bootstrap components, we have created a whole host of additional updates to our client sites that address standards across all site content. For example, adding borders on icons to increase contrast, adding support for certain number keys for navigation links (a technique commonly employed by screen reader users) and adding hover and focus styling for all links on new pages. While our component blueprints have allowed us to keep the strong visual elements of our clients sites in tact and accessible, these in-line textual additions help all content, regardless of on-screen element, remain compliant.

Considering an accessibility effort? Let us know what you are planning and we’ll share our direct experience with you and your team.

Back To Posts