Focus Management

Problem: Many applications do not have focus management for accessibility.

Solution: Properly code pages should manage focus properly.

Focus management on Create, Read, Update and Delete (CRUD) Operations

Managing focus while a page undergoes normal user interaction is vital to making a page accessible. Ensuring an accessible user experience while performing workflow actions involves a number of different coding techniques. User intactions such as creating, reading, updating and deleting data can be challenging to get it right and meet the needs of all users.

What makes for a good user experience? Essentially it means that the sequence of events and elements they encounter makes sense. Both sighted and non-sighted users need to have the information available that they need to navigate and perform their duties. This page will demonstrate a number of details that help create a good user experience for all users.

Considerations for Focus Management on CRUD Operations

Focus management is an advanced topic for accessibility and does require some coding to ensure assistive technology users can perform CRUD (Create, Read, Update and Delete) operations on the page.

1. In the example above, we are presenting the user with a table, filled with customer information.
2. In order to prevent exess text wrapping within the cells, which can result in tall rows and a poor viewing experience, the rows only display some of the customer infomation.
   A design consideration is whether or not to add a button which allows read only viewing of the additional fields of data that are not currently displayed.
   In this implementation the decision was made to not have the additional button for viewing the fields that are not displayed. These additional fields can be viewed and edited when a user selects the Edit button.
3. When a modal is present, focus is always trapped inside the modal.
4. The Edit button is available within the table rows. When selected the customer details form becomes editable.
5. While in Edit mode, a Save button is presented on the modal. Selecting the Save button does not close the modal.
• If a typical workflow does not include adding multiple rows at a time, the Save btton does not close the modal.
• If a typical workflow involves entering multiple customers at a time, a Save and Close and a Save and Add New buttons are appropriate.
6. Users may close the modal at any time by selecting the Cancel button, or the Close button in the upper right corner.
7. In this example, the user is not prompted to save any unsaved changes before closing the model. Prompting a user about unsaved changes is something to consider.
8. The Add New button opens a modal in edit mode, and users can make edits and Save or Cancel. Again, Save does not close the modal.
9. When a user selects to Save the row, if all required fields are filled in and the save is successful, a confirmation message is displayed and focus remains on the Save button.
10. If a user selects Save and a required field is not filled in, a message is presented, and focus is placed in the field that was invalid.
11. If the user has selected the Details button, upon closing the modal focus is returned to the Detials button that was selected.
12. If a user has selected the Add New button and closes the modal, focus returns to the Add New button.
13. If a user selects the Delete button, a confirmation modal is presented with focus on the Cancel button.
• If a user Cancels the delete action, focus is returned to the Delete button that was selected.
• If a user selects OK, the modal is closed, a confirmation mssage is displaye and focus is placed on the Add New button.
14. Modals: !Important! When a modal is displayed, the main screen elements become invisible to a screen reeder.
• Activating a modal causes main screen elements to be hidden from screen readers by enclosing the main in a div element that has aria-hidden=true.
• Scren readers use INS-CTRL-B to display all buttons on a page, if main elements are not hidden, all buttons will be shown but not usable.

Coding Practices for Focus Management on CRUD Operations

1. Each buttton has a unique Id attribute, so that focus can be set to the element.
2. The Details and Delete buttons are unique by using the Id of the database row as its identifier.
• The delete button prefixes the Id with a D.
3. Details button: id=cust.Id.ToString()
4. Delete button: id="(SetDeleteButtonId(cust.Id))"
5. The delete Id is set by calling a method and returning the Id with a D concatonated to the end.
private string SetDeleteButtonId(int Id)
{ mySetDeleteId = Id.ToString() + "D";
return mySetDeleteId;
}
6. Modal activation causes main elements to be hidden from screen readers. Use a dynamic variable that is set upon modal activation and close.
div id="mainPage" aria-hidden="variable: true/false" role="main"
...main screen...
div

7. In .Net Blazor pages, focus needs to be set in the lifecycle method OnAfterInitialized.
8. Focus is set by calling a common Javascript function called SetFocus(identifier).
9. Focus is trapped in the modal by calling a common Javascript function called TrapFocus.js.