Debug Computed Accessibility Properties with Chrome Dev Tools

Instructor: [0:00] Many semantic elements already have accessibility data associated with them. To demonstrate this, let's create an input type range, we'll give it a value of 5, a min of , and a max of 10. We also want to give this an accessible name.

[0:18] Let's create a label. We'll call that rank. We want to make sure that we associate this label with this input. On the input, we'll create an ID and we'll make that ID slider-1. Then on the label element, we'll add a for attribute and match that to that slider-1.

[0:36] When we go to the browser and inspect this element, we can go over to where the styles computed layout and event listeners are, click on those double arrows to expose more tabs. Then we can click on the accessibility tab.

[0:48] If we scroll down to the computed properties, we can see all this accessibility data that's associated with it. We can see that the input range has a name of rank, its value is five as a role of slider. Then there's a bunch of different types of data.

[1:01] All this data is stuff that a screen reader can use to announce to its users information about the element. Note that not all screen readers will say everything that's not mentioned here. It really depends on the screen reader.