Key Takeaways
- Implement alt text for all images and ensure it accurately describes the visual content for screen reader users.
- Use headings (H1-H6) in a logical order to create a clear document structure, making it easier for users to navigate with assistive technologies.
- Verify sufficient color contrast between text and background colors, aiming for a contrast ratio of at least 4.5:1 as recommended by WCAG guidelines.
Is your accessible marketing strategy truly reaching everyone? Many businesses overlook the needs of people with disabilities, missing a huge potential customer base and creating unintentional barriers. We’re going to explore how to use Accessibility Insights for Web, a powerful (and free!) tool from Microsoft, to identify and fix common accessibility issues on your website. This isn’t just about compliance; it’s about building a more inclusive and successful business.
Step 1: Installing and Launching Accessibility Insights
Downloading the Extension
First, you’ll need to download and install the Accessibility Insights for Web browser extension. It’s available for both Chrome and Edge. Simply search for “Accessibility Insights for Web” in the Chrome Web Store or the Edge Add-ons store, and click “Add to Chrome” or “Get.”
Launching the Tool
Once installed, you’ll see an Accessibility Insights icon in your browser’s toolbar (it looks like a little person icon). To start using the tool, navigate to the webpage you want to test and click the icon. A panel will open on the left side of your screen.
Pro Tip: Pin the extension to your toolbar for easy access. Right-click the icon and select “Pin to Toolbar.”
Understanding the Interface
The Accessibility Insights panel has several key sections:
- Assessment: This is where you’ll run automated checks and manual tests.
- Tabbing: This tool helps you visualize and test the tab order of elements on your page.
- Landmarks: This section highlights the ARIA landmarks used on your page, helping you understand its structure.
- Settings: Here, you can configure the tool’s behavior and choose which accessibility rules to check.
Step 2: Running Automated Checks
Selecting “Assessment”
In the Accessibility Insights panel, click on the “Assessment” tab. This will take you to the main testing area.
Initiating the Scan
Click the “Run automated checks” button. The tool will then scan your page for common accessibility issues based on established rules, such as WCAG (Web Content Accessibility Guidelines).
Expected Outcome: The tool will highlight elements on your page that have potential accessibility problems. It will also provide a list of issues in the panel, categorized by severity.
Interpreting the Results
The results are categorized into:
- Needs review: These issues require manual inspection to determine if they are real problems.
- Passed: These checks passed the automated tests.
- Failed: These checks failed, indicating a definite accessibility issue.
Click on each issue to see more details, including a description of the problem, the affected element(s), and recommendations for fixing it.
Common Mistake: Ignoring “Needs review” issues. These often point to less obvious but still important accessibility problems.
Step 3: Addressing Contrast Issues
Identifying Contrast Failures
In the automated check results, look for failures related to “Contrast.” These indicate that the color contrast between text and background is insufficient, making it difficult for people with low vision to read the content.
Using the Color Picker
Click on the failed “Contrast” issue. The tool will highlight the affected text on your page. Below the highlighted text in the panel, you’ll see details about the contrast ratio and the minimum required ratio.
Click the “Pick colors from page” button. This will activate a color picker tool. Use it to select the text color and the background color of the affected element. The tool will then display the actual contrast ratio.
Adjusting Colors
If the contrast ratio is too low (generally, below 4.5:1 for normal text and 3:1 for large text), you’ll need to adjust the colors. You can either:
- Change the text color to be darker or lighter.
- Change the background color to be lighter or darker.
Keep adjusting the colors until the contrast ratio meets the minimum requirement. The Accessibility Insights tool will update the contrast ratio in real-time as you pick different colors.
Pro Tip: Use a dedicated color contrast checker tool (there are many free ones online) to experiment with different color combinations before making changes to your website’s CSS. A WCAG compliant site is a necessity.
Step 4: Adding Alt Text to Images
Finding Missing Alt Text
Look for failures related to “Image alt text” in the automated check results. These indicate that images are missing alternative text (alt text), which is essential for screen reader users.
Inspecting Images
Click on the failed “Image alt text” issue. The tool will highlight the affected image on your page.
Adding Alt Text in Your CMS
You’ll need to add alt text to the image in your website’s content management system (CMS). The process varies depending on the CMS you’re using, but it generally involves:
- Locating the image in the CMS’s media library or content editor.
- Finding the “Alt Text” field (it might also be labeled “Alternative Text” or “Description”).
- Writing a concise and descriptive alt text that accurately represents the image’s content and purpose.
Example: If the image is a photo of the Fulton County Courthouse, the alt text might be: “Fulton County Courthouse, Atlanta, Georgia.”
Common Mistake: Using generic alt text like “image” or “photo.” This provides no value to screen reader users. You could be making accessible marketing mistakes without even realizing it.
Step 5: Verifying Keyboard Accessibility
Using the “Tabbing” Tool
In the Accessibility Insights panel, click on the “Tabbing” tab. This tool helps you visualize and test the tab order of elements on your page.
Starting the Tabbing Test
Click the “Show tab stops” button. The tool will then highlight the focus order with numbered outlines as you tab through the page.
Navigating with the Tab Key
Use the Tab key to navigate through the interactive elements on your page (links, buttons, form fields, etc.). Observe the following:
- Tab Order: Does the tab order follow a logical sequence (e.g., from left to right, top to bottom)?
- Focus Indication: Is there a clear visual indication of which element currently has focus?
- Keyboard Traps: Are you able to navigate to and away from all elements using only the keyboard?
Expected Outcome: You should be able to access all interactive elements on your page using only the keyboard, and the tab order should make sense.
Fixing Keyboard Accessibility Issues
If you find any keyboard accessibility problems, you’ll need to address them in your website’s code. Common fixes include:
- Ensuring Proper Tab Order: Use CSS to control the order in which elements receive focus.
- Adding Focus Styles: Use CSS to style the `:focus` state of interactive elements, making it clear when they have focus.
- Avoiding Keyboard Traps: Ensure that users can always tab out of elements like modal dialogs and embedded videos.
Step 6: Checking ARIA Landmarks
Understanding ARIA Landmarks
ARIA (Accessible Rich Internet Applications) landmarks are HTML attributes that define the structure of a webpage, making it easier for screen reader users to navigate. Common landmarks include “, `
