Rob Dodson robdodson

Go to chrome://flags/#enable-devtools-experiments and click 'Enable'. This will turn on the experiment in your version of Chrome.
Restart Chrome.
Open your DevTools and click the three vertical dots in the top right to open the context menu.
Click on 'Settings'.
Click on the 'Experiments' tab on the left hand side.
Check the box next to 'Accessibility Inspection'.
Close the DevTools, then reopen them.
You're all set! Go inspect an element in the Elements panel and you should see a new 'Accessibility' tab over near the Style inspector.

	// default role is "slider"
	// set using private accessibleNode by the element author
	<custom-slider id="mySlider">

	// element consumer changes role to "button"
	mySlider.accessibleNode.role = "button"

	// element consumer nulls role
	mySlider.accessibleNode.role = null

	class CustomSlider extends HTMLElement {
	constructor() {
	super();
	this.accessibleNode.role = 'slider';
	this.accessibleNode.valueMin = 0;
	this.accessibleNode.valueMax = 5;
	this.accessibleNode.valueNow = 3;
	this.accessibleNode.valueText = 3;
	}
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<my-element></my-element>

	<!-- src/my-element.html -->

	<link rel="import" href="../bower_components/polymer/polymer-element.html">

	<dom-module id="my-element">
	<template>
	<h1>Hello, World! It's [[today]].</h1>
	</template>
	<script type=”module”>
	// Heyyyy, we're pulling in a Node module!

	/* webpack.config.js */

	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var CopyWebpackPlugin = require('copy-webpack-plugin');
	var path = require('path');

	module.exports = {
	// Tell Webpack which file kicks off our app.
	entry: path.resolve(__dirname, 'src/index.js'),
	// Tell Weback to output our bundle to ./dist/bundle.js

	el.accessibleNode.describedBy =
	new AccessibleNodeList([accessibleNode1, accessibleNode2]);
	el.accessibleNode.activeDescendant = accessibleNode3;

	<custom-listbox role="listbox"
	aria-describedby="generated-id1 generated-id2"
	aria-activedescendant="generated-id3">

	<custom-slider min="0" max="5" value="3" role="slider"
	tabindex="0" aria-valuemin="0" aria-valuemax="5"
	aria-valuenow="3" aria-valuetext="3"></custom-slider>