Make all icon buttons accessible by keyboard and screen readers
Some of our buttons are not actual <button>
tags, which makes them not accessible both by keyboards and screen readers.
For example, the download button in the pipelines view list is not accessible through the keyboard:
We can improve this by:
-
Add
aria-hidden
attribute toi
buttons To make our icon buttons accessible we should addaria-hidden
attribute to ouri
tags inside buttons, by doing this we prevent confusion in the screen readers.<button> <i class="icon" aria-hidden="true"></i> </button>
-
Using
<button>
tag instead of<a>
tag when there is no link to follow like in this situations:
<a
class="dropdown-toggle btn btn-default build-artifacts js-pipeline-dropdown-download"
data-toggle="dropdown"
type="button"
aria-expanded="false"></a>
- Add
aria-label
so that they are available to the screen readers related: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/8469 https://gitlab.com/gitlab-org/gitlab-ce/issues/26238