Dev Tips: DevTools: Better accessibility inspection with the Source Order Viewer

Dev Tips

 

DevTools: Better accessibility inspection with the Source Order Viewer  ðŸ”Ž

View this online: umaar.com/dev-tips/245-source-order-viewer / tweet

Introduction

The Source Order Viewer shows you the order of elements as defined in the document source. Using this feature can help improve the experience for people using assistive technology.

To do this, it labels elements numerically - on the page you are inspecting. CSS can easily manipulate the order in which information is presented to the user (imagine a Flexbox child which uses order: 2) and this can have unintended consequences for assistive technologies.
 

How to use this feature

To use the Source Order Viewer, follow these steps:

  1. Inspect an element on a web page.
  2. Open the Accessibility Pane (in the Elements panel).
  3. Enable the Show source order option.

Once you have enabled the Source Order Viewer, the current inspected page presents a visualisation (within the inspected page) which indicates the document source order of page elements.
 

Availability

This feature is in Chrome Stable, just double check that it is enabled in the Experiments Panel. To enable:

  1. From DevTools, enter Cmd + Shift + P > Show Experiments.
  2. Type in source order in the Experiments Filter box.
  3. Enable the Source Order Viewer experiment.


Further Resources

DevTools has a bunch of handy accessibility related features:

Email Marketing Powered by Mailchimp

Copyright © 2021 Umar, All rights reserved.
You are receiving this email because you signed up for Dev Tips.

unsubscribe from this list    update subscription preferences 

Older messages

DevTips: DevTools: Easily control typography with the CSS Font Editor 🖊

Friday, July 23, 2021

Dev Tips DevTools: Easily control typography with the CSS Font Editor 🖊 Introduction The Font Editor within the Styles Pane helps you to quickly change typography on a web page - using a visual tool

Dev Tips: DevTools: Using the CSS Grid & Flexbox Editor

Friday, July 16, 2021

Dev Tips DevTools: Better Debugging with the CSS Grid & Flexbox Editor ✨ Hey friends. I took a break from emailing for a while, but I'm grateful to have you all here, part of this amazing Dev

Dev Tips: Only download JavaScript when it is appropriate

Wednesday, December 16, 2020

Learn a few techniques for selectively downloading web page resources Dev Tips Hey everyone! I have a different sort of tip for you today, hope it's useful. JavaScript: Conditional JavaScript, only

Dev Tips: DevTools: Record tests with the puppeteer recorder

Friday, December 4, 2020

A test generator for puppeteer built into Canary DevTools Dev Tips DevTools: Record tests with the puppeteer recorder 🎥️ Introduction The Puppeteer Recorder feature in Chrome DevTools can monitor your

Dev Tips: DevTools: Refactor your styles with CSS Overview

Wednesday, November 18, 2020

View different metrics on your styles and improve your overall CSS architecture Dev Tips DevTools: Refactor your stylesheets with CSS Overview Introduction The CSS Overview Panel provides interesting

You Might Also Like

Charted | Global Economic Confidence in 2025, by Country 🌎

Wednesday, December 25, 2024

While emerging markets in Asia have the strongest confidence in the global economy looking ahead, European countries are most pessimistic. View Online | Subscribe | Download Our App FEATURED STORY

Top Tech Deals 🎅 Sony Headphones, iPhone Cases, 4K Projector, and More!

Wednesday, December 25, 2024

The season of giving is upon us. How-To Geek Logo December 25, 2024 Top Tech Deals: Sony Headphones, iPhone Cases, 4K Projector, and More! The season of giving is upon us. Happy Holidays! If you're

Why the Race to AGI is Humanitys Defining Moment

Wednesday, December 25, 2024

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? 🪐 What's happening in tech today, December 25, 2024? The

Iran's Charming Kitten Deploys BellaCPP: A New C++ Variant of BellaCiao Malware

Wednesday, December 25, 2024

THN Daily Updates Newsletter cover The Data Science Handbook, 2nd Edition ($60.00 Value) FREE for a Limited Time Practical, accessible guide to becoming a data scientist, updated to include the latest

Software Testing Weekly - Issue 251

Wednesday, December 25, 2024

GitHub Copilot is free! 🤖 View on the Web Archives ISSUE 251 December 25th 2024 COMMENT Welcome to the 251st issue! In case you missed it — GitHub Copilot is free! The free version works with Visual

Daily Coding Problem: Problem #1647 [Medium]

Tuesday, December 24, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Square. In front of you is a row of N coins, with values v 1 , v 1 , ..., v n . You are

Sentiment Analysis, Topological Sort, Web Security, and More

Tuesday, December 24, 2024

Exploring Modern Sentiment Analysis Approaches in Python #661 – DECEMBER 24, 2024 VIEW IN BROWSER The PyCoder's Weekly Logo Exploring Modern Sentiment Analysis Approaches in Python What are the

🤫 Do Not Disturb Mode Is My Secret to Sanity — 8 Gadgets I Want To See Nintendo Make

Tuesday, December 24, 2024

Also: The Best Christmas Movies to Watch on Netflix, and More! How-To Geek Logo December 24, 2024 Did You Know Their association with the Christmas season might make you think poinsettias hail from a

😱 AzureEdge.net DNS Retiring Jan. 2025, 🚀 Microsoft Phi-4 AI Outperforms, 🔒 Microsoft Secure Future Initiative

Tuesday, December 24, 2024

Blog | Advertise | View Online Your trusted source for Cloud, AI and DevOps guidance with industry expert Chris Pietschmann! Phi-4: Microsoft's New Small Language Model Outperforms Giants in AI

Mapped | The Top Health Insurance Companies by State 🏥

Tuesday, December 24, 2024

In 13 US states, a single company dominates the health insurance market, holding at least half of the total market share. View Online | Subscribe | Download Our App Presented by: Global X ETFs Power