URL: event/{id}/editing/paper/list
Criterion: 4.1.2 Name, Role, Value (A)
Table sorting is a non-standard behavior that is used widely on the web. It requires custom code to be implemented, and there is no standard way to represent the state of the table in HTML. Because of this, it is a common accessibility issue for users with reduced visual and/or motor ability.
SC 4.1.2 requires that UI state and any changes thereof must be programmatically determinable. Table sorting is commonly indicated by the aria-sort attribute. However, this does not necessarily tell the user about what happened to the table content. Therefore, we additionally use a live region to emit additional information about the sort order.
First thing first, though, the table should actually be implemented using table elements. This provides additional cues for the screen reader that is either absent or requires a lot of code to indicate when not using table elements.
Secondly, we will wrap the table headings in buttons so that they are (a) focusable by keyboard, (b) let the user know that the control is operable.
As mentioned previously, we will set up a live region that indicates the outcome of the sorting (e.g., “The table is sorted ascending by ID” or “The table is sorted reverse-alphabetically by title”). The degree to which we can make these messages user-friendly depends on the availability of the relevant information, whether columns are static or dynamically generated from user data, etc.
When the column is sorted, we will add an appropriate aria-sort attribute, and otherwise remove it. Adding this property to a non-sorted column generally results in lots of repetitive announcements that hinder navigation, so it is important to clear the attribute when the column is no longer sorted. Even though the specification says that the default value is “none”, the screen readers behave differently depending on whether the attribute is present or not.