"Design for all" – a phrase that truly resonated with most folks at our flagship conference, Breakpoint 2025, especially during the accessibility sessions. Building an accessible product truly begins with an accessibility mindset from the initial design phase.
But what if your product has been around for a while?
Just like most tech problems, let's start with the naive approach: manual effort. The easiest way is to rely on human capability to ensure a product is accessible. Let’s try it out, make sure that you have a notepad and pen to see what you find, or don’t find, works on your site:
Go to a website of your choice and try these tasks:
Keyboard-Only Navigation
Unplug your mouse or don't touch your trackpad. Use Tab, Shift + Tab, Enter, Space, and Arrow Keys to navigate. Try to use the entire site like someone who can only use a keyboard.
Visual Inspection
- Look for contrast issues (is the text too light to read easily?)
- Can you tell what buttons do without clicking them?
- Are any icons or images missing clear labels?
Built-in Browser DevTools
Open your browser's DevTools and go to the tab where you can inspect elements. Hover over different elements and check for:
- Missing alt tags on images.
- Appropriate aria-* attributes for interactive elements.
How long did it take you? And if it didn't take much time, how can you be sure your findings are accurate and you didn't miss any accessibility issues?
For those who thought, "This is too much to do manually!" I am guessing your next thought is to automate it. Some might even want to reinvent the wheel, but as fun as that sounds, it's practically challenging. Fortunately, tools already exist to tackle this problem, like BrowserStack's Website Scanner.
BrowserStack's Website Scanner enables you to scan your website as you develop, or even if it's already deployed, using sitemaps or up to 1,000 URLs for scanning. It intelligently performs a deep analysis of accessibility issues and provides you with a detailed report in a couple of minutes.
Here’s how you can get started:
- Go to the BrowserStack Website Scanner.
- Enter the URL you want to scan.
- Toggle the “Accessibility scan” button on and click on “Add Page”.
Click on “Create Scan”, and there you go! Wait for the scan summary report. The report gives you detailed information about all accessibility issues by category.
You can drill down into each issue to understand it in detail and even report it as a bug in your favourite project management tool as well. If you notice, the issues we were trying to detect manually in the exercise earlier are also highlighted with their severity level.
Beyond Accessibility: Visual Regression
Even with accessibility issues detected and a design-with-accessibility mindset in place, the work doesn't stop there. The issues detected by the scanner will need some reworking. Agile practices mean you are constantly churning out software, and your website will be updated regularly, whether to improve the design or fix issues. While accessibility is being taken care of, it's also crucial to be aware of incoming visual changes to avoid regressions.
This could be done manually by comparing the preview in your CI/CD pipeline for every incoming pull request against the deployed website. But that's tedious and potentially inaccurate, especially if you have a team working in parallel on the site. What if this could be automated, too? What if every visual change is tracked, and as a reviewer, you can easily go through it across different screen sizes and approve it?
BrowserStack's Website Scanner has a visual toggle for precisely this. Enabling it also kicks off a visual scan for your website.
- Go to the BrowserStack Website Scanner.
- You can find your scan and edit it, or create a new one..
- Enter the URL to scan.
- Toggle the “Visual scan” button on and click on “Add Page”.
Start the scan.
The visual scan report will be ready, and you can review it using BrowserStack's Percy. You can tweak various settings to ensure a strict or lenient scan and even pick available desktop widths. You can also configure the diff sensitivity for your project to customise how visual changes appear in builds.
The first scan will establish a baseline, and any subsequent scans will be monitored for changes against this baseline. Your team can then review these changes, request adjustments, or approve them. You can even hook this directly into your GitHub workflow!
Pro Tip: You can schedule the scan to run regularly, syncing up with your release cycles so you're always ready for deployment!
Ultimately, combining accessibility and visual scanning empowers your team to adopt a truly holistic approach to web development. This means less manual effort, faster reviews, and the assurance that your website remains accessible and visually consistent, no matter how rapidly it evolves.
Take the first step towards a more efficient and inclusive development workflow. Visit the BrowserStack Website Scanner to begin your automated checks! To get started, refer to our official Website Scanner documentation.
