Skip to main content

Building An Accessible B2B Web Application

Screenshot of the Accessible360 HUB

Last week, A360 accessibility engineer Anthony Lawlor and I had the chance to speak at Minnebar, the nation’s largest and longest-running technology “unconference”. We wanted to take a different angle from many of the accessibility events and focus on B2B web applications - and what better example to demonstrate than our own A360 HUB, our fully accessible project and issue management system. Being central to our work every day at Accessible360, we’ve learned many lessons on how to think about making a solution that works for everyone. A 25 minute talk isn’t nearly enough to get into many of these complex topics, but we did want to share some of how we think about our development:

Accessibility is a design process and not a bug list: If you want to build an accessible application, you need to immediately understand that accessibility is not a check-list you follow or a bug list you fix. There is no distinction between designing a great visual interface and an accessible one. You must understand your audience, understand what information is needed when and the tools at your disposal to do so.

Use semantic HTML: Most B2B applications will often have an incredible amount of in-page actions, links, lists, tables and more. You can save yourself a lot of time and maintenance by using the HTML elements meant for each of these types of user-interface elements.

Understand ARIA: Once you start introducing dynamic content such as modals, expandable content, tooltips, auto-completes, and in-place editing, you do need to start using the Accessible Rich Internet Applications Suite or “ARIA”. ARIA defines a way to make web applications more accessible to people with disabilities. ARIA is implemented using specific attributes on HTML elements that include labels, element states, relationship between elements and more. Getting to know when to use ARIA (and when not to) is key for modern web applications.

Think about focus: Focus indicates where your “cursor” is currently at while navigating a website. Often people use a mouse to get from place to place but many people are not able to use a mouse and only use a keyboard or other assistive technology device using a key (often a tab) to jump from one link or button to another. While tabbing through a typical website is fairly straightforward, as soon as you introduce more complex interfaces, this concept also requires additional thought. For instance, when you open a modal your focus should also go to that modal. And once it closes it should return to the spot that opened it. There are often situations where content is changed via an action and deciding the most intuitive place for focus to be placed is an important design consideration.

The talk also discussed the use of color and contrast, charts and graphs, tabs, testing and more while demoing the A360 HUB to illustrate these concepts. Click here to watch the livestream recording.

← Return to the blog