Eliminate the visually hidden spans injected by javascript. #2631
Conversation
drgrice1
force-pushed
the
aria-spans
branch
2 times, most recently
from
65f87fb to
6a5e881
Compare
drgrice1
force-pushed
the
aria-spans
branch
2 times, most recently
from
c28a147 to
f67e50a
Compare
The spans are simply added where needed. No javascript is needed for them to be in the page. The "?" help label is changed to just "Help" in most cases. The "?" is usually not read by screen readers. Note that these all go through the `helpMacro` method and a help file template is rendered. The template can also set the ariaLabel stash value to override the default "Help" text. Most pages shouldn't use the override though (I think). For example, on the "Accounts Manager" page the screen reader says something like "accounts manager heading level 1 link help link" (at least that is what Gnome Orca says for this). I don't think it should be read as "account manager heading level 1 link accounts manager help link". It increases the verbosity unnecessarily. However, on the "Assignments" page the title of the page is the course title. So the default aria label is overridden with "Assignments Help", and the screen reader says something like "course title heading level 1 link assignments help link". Note the help title in the dialog was also changed to "Assigments Help". It still said "Course Home Help". It seems we missed this when the page name was changed. Of course mileage will vary as to what different screen readers say on different systems and with different browsers.
the help content.
setting or variable.
| @@ -26,7 +26,7 @@ | |||
| <%= maketext('Acting as [_1].', $effectiveUserName) %> | |||
| <%= link_to $c->systemLink(url_for, params => { effectiveUser => $userID }), | |||
| class => 'btn btn-light btn-sm ms-2', begin %> | |||
| <%= maketext('Stop Acting') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true" data-alt="signout"></i> | |||
| <%= maketext('Stop Acting') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true"></i> | |||
There was a problem hiding this comment.
Note that the changes in this file completely remove the visually hidden spans, and instead make the icons aria-hidden. These icons are really purely decorative symbols that don't actually add anything for screen reader users. The button text says what is needed. It does not make sense to have the button text say "Log Out" and have the icon say "signout", so that the screen reader will say "Log Out signout". In fact in one case (depending on how you arrive at this point in the page) Gnome Orca says "Log Out visited link signout visited link", making it seem like there are two links where there is only one.
There was a problem hiding this comment.
Also, the "signout" text was incorrect for the "Stop Acting" button.
|
Note that several of the |
The spans are simply added where needed. No javascript is needed for them to be in the page.
The "?" help label is changed to just "Help" in most cases. The "?" is usually not read by screen readers. Note that these all go through thehelpMacromethod and a help file template is rendered. The template can also set the ariaLabel stash value to override the default "Help" text.Most pages shouldn't use the override though (I think). For example, on the "Accounts Manager" page the screen reader says something like "accounts manager heading level 1 link help link" (at least that is what Gnome Orca says for this). I don't think it should be read as "account manager heading level 1 link accounts manager help link". It increases the verbosity unnecessarily.However, on the "Assignments" page the title of the page is the course title. So the default aria label is overridden with "Assignments Help", and the screen reader says something like "course title heading level 1 link assignments help link". Note the help title in the dialog was also changed to "Assigments Help". It still said "Course Home Help". It seems we missed this when the page name was changed.Of course mileage will vary as to what different screen readers say on different systems and with different browsers.I worked on this after the discussion in the meeting this week, not realizing that @somiaj would also work on this. See my comments on #2630.Edit: This now sets the text in the hidden spans for the page help links to be the help dialog title. So on the "Assignments" page the title of the help dialog is "Assignments Help" and that is now also the text for the hidden span that labels the link. (Again, that was changed from "Course Home Help" in this pull request.) On the "Account Settings" page the help dialog title and text for the hidden span is "Account Settings Help". Of course the same goes for all pages. Note that in some cases (notably the two I just specifically mentioned) the help dialog title is not the same as the page title. On the "Assignments" page the page title is the course title, and on the "Account Settings" page the page title is "Account settings for userID".
This also now sets the text in the hidden spans for the course configuration settings/variables to be the return value of a new
ConfigObjectmethodhelp_link_aria_label. For most configuration variables that ismaketext('Variable documentation for [_1]', $self->help_name). For the database settings (courseTitleandlms_context_id) that ismaketext('Setting documentation for [_1]', $self->{var}).