consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a caption to headings table in budgets admin

Browse Source 
Captions benefit blind screen reader users who navigate through tables,
particularly in this case because we potentially have several tables
with headings (one table per group), so when navigating through tables
it might be hard to know which group the headings belong to.

In this case they also benefit sighted users. Usability tests have shown
the "Groups and headings" section is a bit confusing, so adding a
caption like "Headings in Districts" helps clarifying Districts is a
group and the table refers to headings in that group.

The very same table is rendered in the "headings" step of the budget
creation wizard. However, in that case the information of the caption is
redundant because the page is specific for headings belonging to a
certain group. We're making the element invisible but still keeping it
for screen reader users in order to ease their navigation through
tables.
This commit is contained in:
Javi Martín
2021-09-10 01:09:05 +02:00
parent 7c7cf2b043
commit d702fbbfc7
8 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/stylesheets/admin.scss
View File

@@ -179,7 +179,10 @@ $table-header: #ecf1f6;
table {
caption {
@include element-invisible;
font-style: italic;
font-weight: normal;
padding: 0;
text-align: $global-left;
}
thead {