Loading

Using Page Layout Editor with a Screen Reader

Julkaisupäivä: May 23, 2023
Kuvaus
The enhanced page layout editor interface presents accessibility challenges for screen readers attempting to modify object pages. Screen reader users should disable the enhanced page layout editor and switch to Salesforce Classic in order to add, remove, and rearrange fields on the page using the original page layout editor interface.
Ratkaisu

Recommended System and Software Settings

For the best experience, we recommend using the NVDA screen reader. JAWS users with a laptop keyboard layout may be unable to complete the drag and drop actions. JAWS users may also find it difficult to orient to the table positioning on the page using the JAWS cursor. These instructions will follow NVDA commands.

The methods described here are highly dependent on screen resolution and browser zoom level. A browser zoom level of 110% is recommended to ensure the mouse pointer is properly sized for the click target areas. If these instructions don’t produce the expected results, you may need to adjust your screen resolution and browser zoom settings, then obtain visual confirmation that the click targets on the page are properly sized for the mouse pointer. Even with the recommended settings, this solution may produce inconsistent results.
 

Disabling the Enhanced Page Layout Editor

  1. From Setup in Lightning Experience, search for User Interface.
  2. On the User Interface screen, deselect the checkbox for Enable Enhanced Page Layout Editor.
  3. Activate the Save button
 

Navigating Salesforce Classic

  1. Activate the View Profile button.
  2. Click the Switch to Salesforce Classic link under the Options heading.
  3. Click the Setup link near the top of the page.
  4. Locate the object to be modified through the Quick Find function or by expanding the Customize link in the Build section.
  5. Open the desired page layout for the object and activate the Edit button.
Note: The words Edit Page Layout should appear in the page title when the page is in editing mode.
 

Understanding the Page Layout Editor Interface

The Page Layout interface begins far down the page at a heading level one. This heading is entitled “Edit Page Layout.” The object name is displayed directly below it if you are in editing mode. Otherwise, the object’s name will be displayed here instead.
Each major area of the page layout canvas is marked by tables. Sections within those areas are nested tables.
For example, the Buttons section is at table level 1, and is the first table in the page layout editor interface. This table allows previously created custom buttons to be added to the page.
The Fields section is located at the next table level 1. This area contains all page sections for fields, and allows for dragging, dropping, and editing of fields on the working page canvas. New field sections added to the page will display here.
The related list section is at table level 1 and can be found below the field sections. This area allows related lists to be added, removed, or rearranged on the page canvas.
The palette, which is also marked by a View dropdown, is a table level 1 located at the bottom of the page.
Using quick navigation to move between tables on the page will move to the previous or next table regardless of its level in the hierarchy.
 

Dragging Fields onto the Page

Read these instructions carefully before proceeding. Switching browser windows or tabs while performing these steps in page layout editor may cause loss of mouse focus.
  1. Locate the View combo box in the palette and ensure it is set to fields.
  2. Move down into the palette table and place the cursor on the first letter in the name of the field you wish to drag.
  3. Perform the NVDA move mouse to current navigator object command.
  4. Perform a left mouse click, then a left mouse button lock to begin dragging.
  5. Navigate up the page to the field section where the field should be located.
  6. Within the field section table, locate the desired table cell where you wish to drop the field. This cell must already contain a pre-existing field.
  7. Place your cursor over the first letter in the existing field name and move the mouse to the current navigator object.
  8. Perform a left mouse button lock to unlock the mouse and complete the drag and drop action. Your new field will be placed in the indicated table cell, pushing the pre-existing field down by one row.
  9. Review the table to ensure the drag and drop completed successfully.
 

Notes

  • Due to the size of the click target area and how NVDA handles mouse focus with this method, it is not possible to drop a field into an empty table cell. The click target area does not fill the entire cell. Table cells pre-populated with fields have a click target area which fills the entire cell, allowing the mouse to properly focus there.
  • You can check whether an item is available for drag and drop from the page layout palette. Navigate to the table following the View dropdown. Move to any cell and use NVDA+f to report font and color information. Gray on gray indicates the item is not available, and is likely already present on the page canvas. Black on yellow indicates the item is available to drag and drop.
 

Adding Fields to Empty Page Sections

While it is possible to add new sections to the page in the original page layout editor using the Create New Section button, it is currently not possible for screen reader users to drag fields into empty sections using the native NVDA mouse movement commands.
Third-party solutions allowing more precise mouse positioning are required.
This is because empty table cells in the original page layout editor have a click target area that only fills the bottom right-hand quadrant of the cell. When you perform NVDA’s “move mouse to current navigator object” command, the focus jumps to the table cell element and places the mouse in the top left corner of the cell.
 

Removing Fields from the Page

Read these instructions carefully before proceeding. Switching browser windows or tabs while performing these steps in page layout editor may cause loss of mouse focus.
  1. Locate the View combo box in the palette and ensure it is set to fields.
  2. Within the field section of the page canvas, locate the field you wish to remove from the page layout.
  3. Place your cursor over the first letter in the fields name, and perform the NVDA move mouse to current navigator object command.
  4. Perform a left mouse click, then a left mouse button lock to begin dragging.
  5. Navigate down to the palette found in the table below the View dropdown at the bottom of the page.
  6. Choose any table cell pre-populated with a field name.
  7. Place your cursor over the first letter in the field name and move the mouse to the current navigator object.
  8. Perform a left mouse button lock to unlock the mouse and complete the drag and drop action.
  9. Review the table where the field was previously located to ensure the drag and drop completed successfully.
 

Rearranging Fields

Moving a field to a new location on the page follows many of the steps previously outlined.
  1. Within the page canvas, locate the table containing the field you wish to move. Navigate to the table cell containing the field, and place your cursor over the first letter in the field name.
  2. Perform the NVDA move mouse to current navigator object command.
  3. Perform a left mouse click, then a left mouse button lock to begin dragging.
  4. Locate the new position for the field on the page canvas. Ensure the new table cell is pre-populated with an existing field.
  5. Place your cursor over the first letter in the field name and move the mouse to the current navigator object.
  6. Perform a left mouse button lock to unlock the mouse and complete the drag and drop action. Your new field will be placed in the indicated table cell, pushing the pre-existing field down by one row.
  7. Review the table to ensure the drag and drop completed successfully.
 

Changing Field Properties

This process does not require the specific use of any screen reader or system setup.
  1. Within a field table, locate the field you wish to edit and press enter on it.
  2. Navigate up the page and click the Edit Properties button.
Note: the Edit link found at the top of each field section is for editing properties of the section such as column width and tab order. The Edit Properties button launches a dialog for making changes to the currently selected field.
  1. Make desired changes to the field properties, then click OK. You are returned to the page layout editor interface.
 

NVDA Keyboard Commands

ActionDesktop LayoutLaptop Layout

Move the mouse to the current navigator object
NVDA+SLASH on the number pad
NVDA+SHIFT+m

Left mouse click
SLASH on the number pad
NVDA+LEFT BRACKET

Left mouse button lock
SHIFT+SLASH on the number pad
NVDA+CONTROL+LEFT BRACKET

Report text formatting		NVDA+fNVDA+f

 

Related Help Resources

Screen Reader Techniques for Adding Related Lists to Page Layouts
Adding Custom Detail Buttons to the Page with a Screen Reader
Knowledge-artikkelin numero

000393649

 
Ladataan
Salesforce Help | Article