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

PHPWeekly March 28th 2024

Thursday, March 28, 2024

Curated news all about PHP. Here's the latest edition Is this email not displaying correctly? View it in your browser. PHP Weekly 28th March 2024 Hi everyone, The long weekend is coming up, and if

Hulu officially joins Disney+

Thursday, March 28, 2024

The Morning After It's Thursday, March 28, 2024. A month after taking full ownership of Hulu last November, Disney started beta testing integration with Disney+. Today, Hulu on Disney+ is

Post from Syncfusion Blogs on 03/28/2024

Thursday, March 28, 2024

New blogs from Syncfusion Chart of the Week: Creating a .NET MAUI Column Chart to Visualize the Corporate Investment in AI By Saiyath Ali Fathima M Let's visualize the data on corporates'

New ZenHammer Attack Bypasses Rowhammer Defenses on AMD CPUs

Thursday, March 28, 2024

THN Daily Updates Newsletter cover Webinar: From Blind Spots to Bulletproof: Secure Your Apps with Shared Responsibility From oversight to overwatch: Discover the art of bulletproof app security with

Top Tech 🏆 Synology BeeStation NAS Review — Testing Anker's EverFrost Dual-Zone Powered Cooler

Thursday, March 28, 2024

Also: We Review the Arlo Essential Indoor Cam 2nd Gen, and More! How-To Geek Logo March 28, 2024 📩 Get the hottest deals, how-to's, breaking news, and more delivered directly to your inbox by

Last Chance

Thursday, March 28, 2024

Hello there, I wanted to follow up on our last email to let you know that our introductory iPhone Life Insider offer will expire tomorrow! Currently, a subscription to iPhone Life Insider costs $9.99/

Edge 381: Google DeepMind's PrompBreeder Self-Improves Prompts

Thursday, March 28, 2024

The method combines chain of thoughts, plan and solve and evolutionary algorithms in a single mthod. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Anthropic beats GPT-4 🤖, Pixel 9 leaks 📱, the fight for AI talent 👨‍💻

Thursday, March 28, 2024

Anthropic's Claude 3 Opus has surpassed OpenAI's GPT-4 for the first time on Chatbot Arena Sign Up|Advertise|View Online TLDR Together With Dollar Flight Club TLDR 2024-03-28 Exclusive offer:

From Request to Response: How APIs Work – Beginners Guide

Thursday, March 28, 2024

In the vast expanse of the digital ecosystem, APIs (Application Programming Interfaces) act as critical conduits, facilitating seamless conversations between different software platforms. From clicking

Elastic 8.13 is here: Amazon Bedrock in the AI Assistant for Observability

Thursday, March 28, 2024

Learn about Amazon Bedrock support within the Elastic AI Assistant for Observability ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ elastic | Search. Observe. Protect