Skip to Main Content
Go to Penn Libraries homepage   Go to Guides homepage

Accessible Code for Content Providers

Use the Accessibility Tree to admire your semantic tags - and to read through your headers.

Screenshot

Below: The screenshot shows the Accessibility Tree for the Semantic tags page:

Screenshot of the Accessibility Tree

How to Bring Up the Chrome Accessibility Tree

  1. Open Chrome Developer Tools

    - Press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, ChromeOS).

    - By default, Developer Tools opens in a window below your page display. (Click the 3 vertical dots if you want to mess around with it.)

    Browser display at the top. Devtools panel opens below.

  2. In the left panel, click Elements
  3. In the right panel, click Accessibility

    Devtools. Elements is a tab on the left. Accessibility tab is at far right.

  4. In the right panel, check "Enable full-page accessibility tree."
  5. In the left panel, an accessibility icon appears. Click it.

    Right panel: Enable tree. Left panel: Accessibility icon.

  6. The Accessibility Tree loads in the left panel:

    The Accessibility Tree loads in the left panel of devtools

Penn Libraries Home Franklin Home
(215) 898-7555