Users may expect to be able to tab to the left and right arrows that are shown on the screen:
Without being able to tab to the left and right arrows, you don’t get to see the rollover text, and some understanding of the order of the timeline might be less apparent. Unfortunately, now the area of the arrows is not accessible from the keyboard.
Solution: Use a button role, through the
Moreover, the previous and next buttons are labeled only by their detailed text and don't have labels that tell the purpose of the controls and without a role.
Solution: Begin the label with something like “Previous, ” or “Next, ”, and also include the details text inside the label. This can be done through aria-label or as content text. Using a comma after Previous or Next can create a nice pause. Some users will press without waiting for the screen reader to finish reading the control label.
Users may expect to be able to tab to the left and right arrows that are shown on the screen: Without being able to tab to the left and right arrows, you don’t get to see the rollover text, and some understanding of the order of the timeline might be less apparent. Unfortunately, now the area of the arrows is not accessible from the keyboard.
Solution: Use a button role, through the
Moreover, the previous and next buttons are labeled only by their detailed text and don't have labels that tell the purpose of the controls and without a role. Solution: Begin the label with something like “Previous, ” or “Next, ”, and also include the details text inside the label. This can be done through aria-label or as content text. Using a comma after Previous or Next can create a nice pause. Some users will press without waiting for the screen reader to finish reading the control label.