TDX Knowledge: Identify the Names of Buttons for Use in an Article

Locating the names of buttons when writing knowledge allows for increased accessibility for readers, particularly those who use screen readers. 

This article covers:

Hovering Over Icons

The simplest way to determine the name of buttons is to hover the cursor over it. 

  1. Move the cursor to the desired button.
  2. Hover the cursor over the button but do not click it. 
    Cursor hovering over a button.
  3. In most cases, the name of the button will pop up near the cursor (this may take a few seconds to appear). 
    Button and text that appears after hovering mouse over it stating "Search by image".
  4. If the name of the button does not appear, try following Using the Inspect Option or Using Accessibility Mode. 

Using the Inspect Option

Inspect is another method for determining the name of a button by showing how it is written in the code. This works on Windows and Mac devices and can be used in the case that Hovering Over Icons does not work. 

Aria Label Attribute

The aria-label attribute is sometimes added by developers. If the original button name was written in a way that makes sense to a computer but not a human, then developers can add the aria-label attribute to give the button a more human-friendly name. 

The following example explains how the Google Apps button name can be identified. 
Google options in upper right corner of new tab. Google Apps button highlighted.

  1. Right click on the desired button to display a menu of options.
  2. Select Inspect from the context menu.
    Right click menu options. Inspect option highlighted.
  3. A set of code will appear, highlighting the line that contains information about the selected button.
    • If there is an aria-label attribute, then that is the name of the button. 
      HTML of the Google Apps button. Aria label highlighted indicating the button's name is Google Apps.
  4. It is indicated that the name of the button in this example is Google Apps. 
  5. If the button name cannot be identified, try Using Accessibility Mode.

Using Accessibility Mode

Accessibility mode can reveal the name of a button by stating it aloud when the cursor is hovered over it. This option can be used in the case that Hovering Over Icons or Using the Inspect Option do not work. 

Mac Device

  1. Navigate to the System Settings app icon. System Settings app.
  2. Select the Accessibility tab in the left hand column. 
    System Settings options. Accessibility tab highlighted.
  3. On the Accessibility page, select the Spoken Content tab.
    Accessibility page. Spoken Content tab highlighted.
  4. On the Spoken Content page, click the toggle next to the Speak item under the pointer option to turn it on.
    Accessibility page. Spoken Content tab highlighted.
  5. Hover over buttons to hear their name read aloud. 

Windows Device

  1. Right click on the Windows Start button. Windows Start button on the bottom of the screen. 
  2. Select Settings in the pop-up menu. 
    Windows Start menu options. Setting option highlighted.
  3. Select the Accessibility tab in the left hand column of Settings. 
    Windows Settings. Accessibility tab highlighted.
  4. On the Accessibility page, select the Narrator tab. 
    Windows Settings. Accessibility Page. Narrator option highlighted.
  5. Click the toggle next to the Narrator option to turn it on.
    Windows Accessibility settings. Narrator page. Toggle next to Narrator option is highlighted and flipped on.
  6. Hover over buttons to hear their name read aloud. 

Last modified

TDX ID

7719