• Platform
    • Overview
      • Risk Cloud Overview
      • Features
      • Services & Support
      • Pricing
    • Capabilities
      • Reporting & Analytics
      • Risk Quantificaton
      • Integrations & API
      • Risk Cloud Exchange
      • Platform Security
    • img
      See why Risk Cloud was rated the #1 GRC platform on the G2 Grid for Winter 2023.
      Learn more
  • Solutions
    • _separator
      • Cyber Risk & Controls Compliance
      • Enterprise Risk Management
      • Third-Party Risk Management
      • Controls Compliance
      • Policy Management
    • _separator
      • Regulatory Compliance
      • Data Privacy
      • Operational Resiliency
      • Environmental, Social & Governance
      • Internal Audit
    • 10 Purpose-Built GRC Solutions. One Connected Platform.
      View All Solutions
  • Industries
    • _separator
      • Industries Overview
      • Software
      • FinTech
      • Telecom
      • Banking
    • _separator
      • Insurance
      • Investment Services
      • Hospitals & Health Systems
      • Pharmaceuticals
      • Medical Devices
    • _separator
      • Oil & Gas
      • Utilities
      • Alternative Energy
  • Company
    • _separator
      • Our Company
      • Careers
      • Executive Team
      • Partners
    • _separator
      • LogicGate News
      • LogicGate Trust Center
      • Contact Us
    • img
      The Root of the Compliance vs Security Paradox
      Upcoming Webinar
      Register Now
  • Resources
    • Risk Cloud Help
      • Help Center
      • Developer Portal
    • Learn + Connect
      • Blog
      • Customer Stories
      • LogicGate Resources
      • LogicGate Events
      • GRC & Me Podcast
    • img
      Five Board Questions That Security and Risk Leaders Must Be Prepared to Answer
      View Report
Request A Demo
img
See why Risk Cloud was rated the #1 GRC platform on the G2 Grid for Winter 2023.
Learn more

Documentation

Menu

  • Quick Start Guides
    • Risk Cloud API: Getting Started
    • Risk Cloud PowerBI Connection
    • Risk Cloud Webhooks
  • API Usage Guides
    • Risk Cloud API: Pagination
    • Risk Cloud API: Record Search
    • Risk Cloud API: Authentication
    • Risk Cloud API: Create Records
    • Risk Cloud API: Export Record Data
    • Risk Cloud API: Update Records
    • Risk Cloud API: Upload Attachments
    • Risk Cloud API: View User Access Audits
    • Risk Cloud API: View Applications, Workflows, and Steps
    • Risk Cloud API: Viewing Fields
    • Risk Cloud API: Viewing Users
    • Risk Cloud API: Create Users
  • Release Notes
    • v2021.4.0 Release Notes
    • v2021.3.0 Release Notes
    • v2021.2.0 Release Notes
    • v2021.1.0 Release Notes
  • Developer Blogs
    • Tidying Up Existing REST APIs
    • Accessibility Improvements at LogicGate
    • What Do We Look for in Developers?
    • 2 Quick Tips I’ve learned for FE Testing as a LogicGate Dev
    • Kotlin at LogicGate
    • Spring Boot with Neo4j & MySQL
  • Case Studies
  • Integrations
    • Vital4 Risk Cloud Connector
    • Ascent Risk Cloud Connector
    • SecurityScorecard Risk Cloud Connector
    • Tenable Risk Cloud Connector
    • Black Kite Risk Cloud Connector
  • Home
  • Developer Resources
  • Developer Blogs

Accessibility Improvements at LogicGate

By: Will Granger | Updated on: July 28, 2021

At LogicGate, we are always striving to be better. As we continue introducing new features, we also seek to make our app accessible for all users. Can people complete records using only a keyboard? Are images and button contexts read aloud to screen readers? As a team, we recently began asking similar questions and saw room for improvement. If we test across a range of browsers, we should also cater to a range of users. This year, we began a new accessibility initiative and have learned tremendously in the process.

Where to Begin?

With forms, notifications, reporting, and more, it’s tricky to know what to tackle first when auditing the platform. That said, we identified a couple things to help us get started with an audit.

1. Start Small

Let’s start with the most trafficked page. Our records page has the most users completing fields and assigning tasks. Instead of spreading efforts across the entire site, we can learn more efficiently if we improve one part of the app then expand our scope as we triage.

2. What tools should we use?

There are countless accessibility tools, but a few we used throughout our efforts. From the Lighthouse tool built directly into Chrome’s DevTools, to the “Tab Stops” feature of Microsoft Accessibility Insights, each tool has interesting yet distinct features.

Screenshot of the LogicGate application’s record page with circles denoting which items have tab focus.
The Tab Stops feature in Microsoft Accessibility Insights visually shows the focus path of each tab press across a page.

We adopted WebAIM’s WAVE tool as our standard for accessibility audits. WAVE has a Chrome and Firefox extension to scan a page immediately. The tool also works without initiating a refresh, providing feedback for modals or other visuals that must be triggered with a button click.

3. Tools won’t tell us everything

Accessibility tools are amazing, but they aren’t a catch-all. An aria-label can sometimes be more descriptive or succinct, and it’s easy to overlook notifications or expanding sections that may go unannounced when a page changes states.

What do we Attack First?

After the first few audits, we began seeing three easy-to-fix errors that frequently surfaced.

1. Using aria-label

Screenshot of the top toolbar of a record page in the LogicGate application with readout from a screen reader.
Without an aria-label, buttons and other elements are not given context when announced through screen readers. We were able to address these issues by adding “aria-label” to each button, with short text describing what each button does. Ex: In the above, aria-label=”Add to your favorites”

2. Fixing orphan labels

In the above image (left), a label, “What is the Weather Like Today,” is present, but it is not associated with the accompanying radio buttons, which loses context for screen readers (middle). The above was fixed (right) by changing the label to a legend, which provides text for screen readers in radio groups.

3. Color contrast

Having sufficient foreground and background color contrast helps text and labels stand out to users. WAVE has a built-in color contrast checker where you can quickly lighten and darken colors until they pass WCAG guidelines.

We recently decided to remove placeholder text from text inputs as they are often the source of color contrast warnings. Instead, we began placing descriptive labels above inputs to guide visitors.

Keeping dependencies up-to-date can also result in accessibility improvements. On the frontend, we use Ng Bootstrap to provide Angular widgets. With each version bump, Ng Bootstrap often introduces accessibility improvements and fixes. Keeping these dependencies up-to-date is a good idea to stay on top of third-party patches.

How do we Know We’re Helping?

As developers, we must ask questions when reviewing new features.

Is the feature keyboard accessible?

  • Can we focus on interactive elements using the “tab” key?
  • Is there a visual indicator making it clear which item has focus?
  • Can we interact with elements using common keys (enter, space, arrow keys, etc.)?
Screenshot of toolbar from LogicGate application with active focus on the notifications icon.
We use an outline on many items to more easily show when an element has focus.

Does the feature account for screen readers?

  • Does the element take advantage of aria attributes?
  • Are state changes announced when an element is toggled or changes states?

Ex: Consider using aria-live="polite" for notifications that appear on screen and are important to announce to a user.

These are just a couple questions to ask in addition to running a tool like WAVE to check for regressions. However, for all of our planning and auditing, we learn most by asking questions and engaging the wider accessibility community.

We’ve found a wealth of knowledge from podcasts such as A11y Rules by Nicolas Steenhout and Mosen at Large by Jonathan Mosen . We follow Deque Systems, who frequently host A11y workshops and conferences. The Deque community is incredibly robust, tremendously helpful, and constantly evolving. We also chat with our stakeholders and clients who help determine ways to improve our app. We do not have all the answers but continue to learn through constant conversation.

What’s Next?

As we expand the scope of our audit, we continue to evolve. We remain reflective in finding creative solutions that benefit everyone taking part in the Risk Cloud. We found that a recent feature we added to improve accessibility provided unnecessary tab stops for visitors, so we questioned our process, readdressed the problem, and found a solution that improves accessibility while removing needless tabs.

Left: our first iteration involved an extra focus on an SVG asterisk to show when fields are required. Right: our current iteration denotes required fields with a text asterisk, while still conveying information to a screen reader. Text denoting asterisks are for required fields, not pictured.

We hope to apply the skills we’ve learned through an initial audit to further refine the rest of the app and new tools we introduce. As a team, we share ideas between developers, designers, and the larger LogicGate community to keep a critical eye on our process and continually improve the platform.

Read Previous Developer Blogs
Read Next Developer Blogs
  • 320 W Ohio St
    Floor 5E
    Chicago, IL 60654
  • 312-279-2775
    • LinkedIn
    • Twitter
    • Youtube
    • Facebook
  • Looking for something specific?
  • Request A Demo
  • Platform
    • Risk Cloud Overview
    • Features
    • Reporting & Analytics
    • Risk Quantification
    • Integrations & API
    • Risk Cloud Exchange
    • Services & Support
    • Pricing
  • Company
    • Careers We're hiring!
    • Executive Team
    • Partners
    • LogicGate News
    • LogicGate Trust Center
    • Contact Us
  • Resources
    • Blog
    • Email Newsletter
    • Resource Center
    • Help Center
    • Developer
  • Solutions
    • Cyber Risk & Controls Compliance
    • Enterprise Risk Management
    • Third-Party Risk Management
    • Controls Compliance
    • Regulatory Compliance
    • Data Privacy Management
    • Operational Resiliency
    • Policy Management
    • Environmental, Social & Governance
    • Internal Audit Management
    • View All Solutions
  • Industries
    • Software
    • FinTech
    • Telecom
    • Banking
    • Insurance
    • Investment Services
    • Healthcare
    • Pharmaceuticals
    • Medical Devices
    • Oil & Gas
    • Utilities
    • Alternative Energy
Also of Interest
  • Connect, Optimize, and Scale Your Cyber Risk...
  • Data Privacy Software Solution
  • Grow Your Relationships Not Your Risks.
  • LinkedIn TwitterYoutubeFacebook

Copyright © 2023. LogicGate, Inc. All rights reserved.

  • Privacy Policy
  • Information Security Overview
  • Site Map

Copyright © 2023. LogicGate, Inc. All rights reserved.