How do you find a page element’s accessible name?

Question

When looking at elements on my page, how do I find out what each elements' accessible name is?

Answer

In Chrome, right-click on the element you are interested it and select "Inspect". Under the "Elements" tab in Chrome Developer Tools, click the "Accessibility" tab. Scroll down to the "Computed Properties" section and view the "Name" property.

In Firefox, right-click anywhere on the page and select “Inspect Element” to open Firefox Developer Tools. Click on the “Accessibility” tab. Turn On the accessibility features option. Once the accessibility features have been turned on, right-click on the element you're interested in and select "Inspect Accessibility Properties".

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.