How to Audit Accessibility in Safari Web Inspector

This article provides a step-by-step guide on how developers can identify and resolve common webpage accessibility violations using the built-in Audit tab within the Safari Web Inspector. By leveraging these native developer tools, you can quickly test your DOM elements for compliance issues, inspect problematic nodes, and ensure your web applications are inclusive for all users without needing third-party browser extensions.

1. Enable the Safari Develop Menu

Before you can access the Web Inspector, you must enable Safari's developer tools.

  1. Open the Safari browser.
  2. In the top menu bar, click Safari and select Settings (or Preferences on older macOS versions).
  3. Navigate to the Advanced tab.
  4. At the bottom of the window, check the box next to Show features for web developers (or Show Develop menu in menu bar).
  5. Close the Settings window.

2. Open the Audit Tab

Once the developer tools are active, you can access the Audit environment.

  1. Navigate to the webpage you want to test.
  2. Right-click anywhere on the page and select Inspect Element, or press Command + Option + I on your keyboard.
  3. In the Web Inspector panel that appears, click on the Audit tab located in the top navigation bar. (If you do not see it, click the + icon at the end of the tab bar to enable it).

3. Run the Accessibility Audit

Safari includes a predefined set of accessibility tests that check for common WCAG and ARIA violations.

  1. Look at the left sidebar under the Audits section.
  2. Locate the Accessibility group. By default, all accessibility tests are selected. You can expand this folder to check or uncheck specific tests, such as checking for alt attributes on images or valid ARIA roles.
  3. Click the Start button (the play icon) at the top of the left sidebar, or click the Start button in the center of the main viewport.

4. Analyze the Audit Results

Safari will scan the current state of the DOM and instantly generate a report in the left sidebar.

  • Passed Tests: Marked with a green checkmark. No action is needed.
  • Warnings: Marked with a yellow triangle. These indicate potential accessibility issues that require manual verification.
  • Errors: Marked with a red exclamation point. These are confirmed accessibility violations.
  • Unsupported/Unevaluated: Grayed-out items mean the specific elements required for that test were not found on the page.

5. Locate and Fix Violations

To resolve the errors and warnings found during the audit:

  1. Click on any failed test in the left sidebar to open the detailed report in the main Audit panel.
  2. The main panel will display an explanation of the rule and a list of the exact DOM Nodes that failed the test.
  3. Hover over a listed DOM node to highlight the offending element directly on the webpage.
  4. Click on the DOM node text or the arrow icon next to it. This will automatically take you to that exact line of code inside the Elements tab.
  5. In the Elements tab, modify the HTML or ARIA attributes to fix the issue.
  6. Navigate back to the Audit tab and click the Start button (play icon) again to re-run the test and confirm the violation is resolved.

6. Export Your Results (Optional)

If you need to share the accessibility report with your team or save it for documentation, click the Export button at the top of the Audit results sidebar. This saves the audit data as a .json file, which can be imported into another developer's Safari Web Inspector for review.