Eliminate the visually hidden spans injected by javascript.

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.
openwebwork · Nov 24, 2024 · 65f87fb · 65f87fb
1 parent 1ea1bb6
commit 65f87fb
Show file tree

Hide file tree

Showing 22 changed files with 73 additions and 76 deletions.
diff --git a/htdocs/js/System/system.js b/htdocs/js/System/system.js
@@ -117,18 +117,4 @@
 			messages.forEach((message) => bootstrap.Alert.getOrCreateInstance(message)?.close())
 		);
 	}
-
-	// Accessibility
-	// Present the contents of the data-alt attribute as alternative content for screen reader users.
-	// The icon should be formatted as <i class="icon fas fa-close" data-alt="close"></i>
-	// FIXME:  Don't add these by javascript.  Just add these in place instead.
-	document.querySelectorAll('i.icon').forEach((icon) => {
-		if (typeof icon.dataset.alt !== 'undefined') {
-			const glyph = document.createElement('span');
-			glyph.classList.add('visually-hidden');
-			glyph.style.fontSize = icon.style.fontSize;
-			glyph.textContent = icon.dataset.alt;
-			icon.after(glyph);
-		}
-	});
 })();
diff --git a/lib/WeBWorK/ContentGenerator.pm b/lib/WeBWorK/ContentGenerator.pm
@@ -967,18 +967,13 @@ if defined.
 sub helpMacro ($c, $name, $args = {}) {
 	my $ce = $c->ce;
 	return '' unless -e "$ce->{webworkDirs}{root}/templates/HelpFiles/$name.html.ep";
-
-	my $label = $args->{label} // $c->tag(
-		'i',
-		class         => 'icon fa-solid fa-circle-question ' . ($args->{label_size} // ''),
-		'aria-hidden' => 'true',
-		data          => { alt => ' ? ' },
-		''
+	return $c->include(
+		"HelpFiles/$name",
+		name      => $name,
+		label     => delete $args->{label}      // '',
+		labelSize => delete $args->{label_size} // '',
+		args      => $args
 	);
-	delete $args->{label};
-	delete $args->{label_size};
-
-	return $c->include("HelpFiles/$name", name => $name, label => $label, args => $args);
 }
 
 =item feedbackMacro(%params)

diff --git a/lib/WeBWorK/ContentGenerator/Instructor/ProblemSetDetail.pm b/lib/WeBWorK/ContentGenerator/Instructor/ProblemSetDetail.pm
@@ -998,12 +998,10 @@ sub fieldHTML ($c, $userID, $setID, $problemID, $globalRecord, $userRecord, $fie
 				bs_placement => 'top',
 				bs_toggle    => 'popover'
 			},
-			$c->tag(
-				'i',
-				class         => 'icon fas fa-question-circle',
-				data          => { alt => $c->maketext('Help Icon') },
-				'aria-hidden' => 'true'
-			)
+			$c->c(
+				$c->tag('i',    class => 'icon fas fa-question-circle', 'aria-hidden' => 'true'),
+				$c->tag('span', class => 'visually-hidden',             $c->maketext('Help'))
+		)->join('')
 		)
 		: '';
 

diff --git a/templates/ContentGenerator/Base/login_status.html.ep b/templates/ContentGenerator/Base/login_status.html.ep
@@ -8,7 +8,7 @@
 	%
 	<%= maketext('Logged in as [_1].', $userName) %>
 	<%= link_to $c->systemLink(url_for 'logout'), class => 'btn btn-light btn-sm ms-2', begin %>
-	<%= maketext('Log Out') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true" data-alt="signout"></i>
+	<%= maketext('Log Out') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true"></i>
 	<% end %>
 	%
 	% if ($effectiveUserID ne $userID) {
@@ -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>
 		<% end %>
 	% }
 % } else {

diff --git a/templates/ContentGenerator/CourseAdmin/add_course_form.html.ep b/templates/ContentGenerator/CourseAdmin/add_course_form.html.ep
@@ -183,8 +183,10 @@
 						. 'the course configuration file. Then if there is something in the course configuration '
 						. 'file that should be carried into the new course, the administrator can copy that manually. '
 						. 'Alternatively, do copy the course configuration file, but then the administrator should '
-						. 'inspect the new course configuration file and make adjustments for the new instructor.') =%>">
-					<i class="icon fas fa-question-circle" data="<%= maketext('Help Icon') =%>" aria-hidden="true"></i>
+						. 'inspect the new course configuration file and make adjustments for the new instructor.') =%>"
+					>
+					<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+					<span class="visually-hidden"><%= maketext('Help') =%></span>
 				</a>
 			</label>
 		</div>

diff --git a/templates/ContentGenerator/Grades/student_stats.html.ep b/templates/ContentGenerator/Grades/student_stats.html.ep
@@ -16,9 +16,8 @@
 						'The top number is the percent score on the problem.  A period (.) indicates a problem '
 						. 'has not been attempted. The bottom number is the number of incorrect attempts.'
 					) =%>">
-					<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') =%>"
-						aria-hidden="true">
-					</i>
+					<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+					<span class="visually-hidden"><%= maketext('Help') %></span>
 				</a>
 			</th>
 		</tr>

diff --git a/templates/ContentGenerator/Instructor/AchievementList/default_table.html.ep b/templates/ContentGenerator/Instructor/AchievementList/default_table.html.ep
@@ -49,7 +49,8 @@
 									params => { editMode => 1, selected_achievements => $achievement_id }
 								),
 								begin %>
-								<i class="icon fas fa-pencil-alt" data-alt="edit" aria-hidden="true"></i>
+								<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
+								<span class="visually-hidden"><%= maketext('Edit') =%></span>
 							<% end %>
 						</div>
 					</td>

diff --git a/templates/ContentGenerator/Instructor/Config/config_help.html.ep b/templates/ContentGenerator/Instructor/Config/config_help.html.ep
@@ -10,7 +10,8 @@
 	</div>
 	<div>
 		<%= link_to '#', data => { bs_toggle => 'modal', bs_target => "#$configObject->{name}_help_modal" }, begin =%>
-			<i class="icon fas fa-question-circle" aria-hidden="true" data-alt="help"></i>
+			<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+			<span class="visually-hidden"><%= maketext('Help') =%></span>
 		<% end =%>
 		<% content_for 'modal-dialog-area', begin =%>
 			<div class="modal fade" id="<%= "$configObject->{name}_help_modal" %>" tabindex="-1"

diff --git a/templates/ContentGenerator/Instructor/PGProblemEditor/hardcopy_form.html.ep b/templates/ContentGenerator/Instructor/PGProblemEditor/hardcopy_form.html.ep
@@ -32,8 +32,8 @@
 				role     => 'button',
 				tabindex => 0,
 				begin =%>
-				<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true">
-				</i>
+				<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+				<span class="visually-hidden"><%= maketext('Help') =%></span>
 			<% end =%>
 		<% end =%>
 		<div class="col-auto">

diff --git a/templates/ContentGenerator/Instructor/ProblemSetDetail.html.ep b/templates/ContentGenerator/Instructor/ProblemSetDetail.html.ep
@@ -256,8 +256,8 @@
 													bs_placement => 'top'
 												},
 												begin =%>
-												<i class="icon fas fa-pencil-alt" data-alt="<%= maketext('Edit') =%>">
-												</i>
+												<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
+												<span class="visually-hidden"><%= maketext('Edit') =%></span>
 											<% end =%>
 											<%= link_to $c->systemLink(url_for(
 													{
@@ -274,7 +274,8 @@
 													bs_title     => maketext('Open in New Window')
 												},
 												begin =%>
-												<i class="icon far fa-eye" data-alt="<%= maketext('View') %>"></i>
+												<i class="icon far fa-eye" aria-hidden="true"></i>
+												<span class="visually-hidden"><%= maketext('View') =%></span>
 											<% end =%>
 										</td>
 									</tr>
@@ -481,9 +482,8 @@
 										data-bs-toggle="tooltip" data-bs-placement="top"
 										data-bs-title="<%= maketext('Render Problem') %>"
 										type="button">
-										<i class="icon far fa-image" data-alt="<%= maketext('Render') %>"
-											aria-hidden="true">
-										</i>
+										<i class="icon far fa-image" aria-hidden="true"></i>
+										<span class="visually-hidden"><%= maketext('Render') %></span>
 									</button>
 									<%= link_to $c->systemLink(url_for(
 											'instructor_problem_editor_withset_withproblem',
@@ -497,7 +497,8 @@
 										   	bs_title     => maketext('Edit Problem')
 										},
 										begin =%>
-										<i class="icon fas fa-pencil-alt" data-alt="<%= maketext('Edit') %>"></i>
+										<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
+										<span class="visually-hidden"><%= maketext('Edit') =%></span>
 									<% end =%>
 									% my $problemLink;
 									% if ($isGatewaySet) {
@@ -546,7 +547,8 @@
 											bs_title     => maketext('Open in New Window')
 										},
 										begin =%>
-										<i class="icon far fa-eye" data-alt="<%= maketext('View') %>"></i>
+										<i class="icon far fa-eye" aria-hidden="true"></i>
+										<span class="visually-hidden"><%= maketext('View') =%></span>
 									<% end =%>
 								% }
 								% if ($authz->hasPermissions(param('user'), 'problem_grader')) {
@@ -562,7 +564,8 @@
 											bs_title     => maketext("Grade Problem")
 										},
 										begin =%>
-										<i class="icon fas fa-edit" data-alt="<%= maketext("Grade") %>"></i>
+										<i class="icon fas fa-edit" aria-hidden="true"></i>
+										<span class="visually-hidden"><%= maketext('Grade') =%></span>
 									<% end =%>
 								% }
 							</div>

diff --git a/...ontentGenerator/Instructor/ProblemSetDetail/restricted_login_proctor_password_row.html.ep b/...ontentGenerator/Instructor/ProblemSetDetail/restricted_login_proctor_password_row.html.ep
@@ -19,7 +19,8 @@
 					. 'Alternatively, leave this blank if you would like to have a proctor level user enter '
 					. 'their username and password on the student\'s screen for authentication.'
 			) =%>">
-			<i class="icon fas fa-question-circle" aria-hidden="true" data-alt="<%= maketext('Help Icon') %>"></i>
+			<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+			<span class="visually-hidden"><%= maketext('Help') =%></span>
 		</a>
 	</td>
 	<td>

diff --git a/templates/ContentGenerator/Instructor/SetMaker/problem_row.html.ep b/templates/ContentGenerator/Instructor/SetMaker/problem_row.html.ep
@@ -221,7 +221,8 @@
 						bs_placement => 'top'
 					},
 					begin =%>
-					<i class="icon fas fa-pencil-alt" data-alt="edit" aria-hidden="true"></i>
+					<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
+					<span class="visually-hidden"><%= maketext('Edit') =%></span>
 				<% end =%>
 				<%= link_to $c->systemLink(
 						url_for($isGatewaySet ? 'gateway_quiz' : 'problem_detail',

diff --git a/templates/ContentGenerator/Instructor/Stats/problem_stats.html.ep b/templates/ContentGenerator/Instructor/Stats/problem_stats.html.ep
@@ -41,8 +41,8 @@
 					data-bs-content="<%= maketext(
 						'Success index is the square of the average score divided by the average number of attempts.'
 					) %>">
-					<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true">
-					</i>
+					<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+					<span class="visually-hidden"><%= maketext('Help') =%></span>
 				</a>
 			</th>
 			<td><%= sprintf('%0.1f', 100 * $successIndex) %></td>
@@ -71,7 +71,8 @@
 	<a class="help-popup ms-2" role="button" tabindex="0" data-bs-placement="top" data-bs-toggle="popover"
 		data-bs-content="<%=
 			maketext('Success index is the square of the score divided by the number of attempts.') =%>">
-		<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true"></i>
+		<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+		<span class="visually-hidden"><%= maketext('Help') =%></span>
 	</a>
 % end
 % push @tableHeaders, $successIndexHeader->();

diff --git a/templates/ContentGenerator/Instructor/Stats/set_stats.html.ep b/templates/ContentGenerator/Instructor/Stats/set_stats.html.ep
@@ -19,8 +19,8 @@
 						'This gives the status and dates of the main set. '
 							. 'Indvidual students may have different settings.'
 					) %>">
-					<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true">
-					</i>
+					<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+					<span class="visually-hidden"><%= maketext('Help') =%></span>
 				</a>
 			</th>
 			<td>
@@ -48,9 +48,8 @@
 							'Answer availability for tests depends on multiple settings.  This only indicates the '
 								. 'template answer date has passed.  See Set Detail page for actual availability.'
 						) =%>">
-						<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') =%>"
-							aria-hidden="true">
-						</i>
+						<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+						<span class="visually-hidden"><%= maketext('Help') =%></span>
 					</a>
 				% }
 			</td>
@@ -103,7 +102,8 @@
 	<a class="help-popup ms-2" role="button" tabindex="0" data-bs-placement="top" data-bs-toggle="popover"
 		data-bs-content="<%= maketext(
 			'Success index is the square of the average score divided by the average number of attempts.') %>">
-		<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true"></i>
+		<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+		<span class="visually-hidden"><%= maketext('Help') =%></span>
 	</a>
 % end
 %

diff --git a/templates/ContentGenerator/Instructor/StudentProgress/set_progress.html.ep b/templates/ContentGenerator/Instructor/StudentProgress/set_progress.html.ep
@@ -196,9 +196,8 @@
 								'The top number is the percent score on the problem.  A period (.) indicates a problem '
 								. 'has not been attempted. The bottom number is the number of incorrect attempts.'
 							) =%>">
-							<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') =%>"
-								aria-hidden="true">
-							</i>
+							<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+							<span class="visually-hidden"><%= maketext('Help') =%></span>
 						</a>
 					</th>
 				% }

diff --git a/templates/ContentGenerator/Instructor/UserList/user_row.html.ep b/templates/ContentGenerator/Instructor/UserList/user_row.html.ep
@@ -26,9 +26,8 @@
 				% if ($editable) {
 					<%= link_to $c->systemLink(url_for, params => { editMode => 1, visible_users => $user->user_id }),
 						begin =%>
-						<i class="icon fas fa-pencil-alt" aria-hidden="true"
-							data-alt="<%= maketext('Link to Edit Page for [_1]', $user->user_id) %>">
-						</i>
+						<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
+						<span class="visually-hidden"><%= maketext('Edit [_1]', $user->user_id) %></span>
 					% end
 				% }
 			</div>

diff --git a/templates/ContentGenerator/ProblemSet/problem_list.html.ep b/templates/ContentGenerator/ProblemSet/problem_list.html.ep
@@ -29,7 +29,8 @@
 									)
 								},
 								begin =%>
-								<i class="icon fas fa-question-circle" aria-hidden="true" data-alt="Help Icon"></i>
+								<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+								<span class="visually-hidden"><%= maketext('Help') =%></span>
 							<% end =%>
 						</th>
 						<th><%= maketext('Counts for Parent') %></th>

diff --git a/templates/ContentGenerator/ProblemSet/version_list.html.ep b/templates/ContentGenerator/ProblemSet/version_list.html.ep
@@ -163,8 +163,8 @@
 						<th scope="col"><%= maketext('End') %></th>
 						<th scope="col" class="hardcopy">
 							<i class="icon far fa-lg fa-arrow-alt-circle-down" aria-hidden="true"
-								title="<%= maketext('Generate Hardcopy') %>"
-								data-alt="<%= maketext('Generate Hardcopy') %>"></i>
+								title="<%= maketext('Generate Hardcopy') %>"></i>
+							<span class="visually-hidden"><%= maketext('Generate Hardcopy') =%></span>
 						</th>
 					</tr>
 				</thead>
@@ -200,8 +200,10 @@
 								class => 'hardcopy-link',
 								begin =%>
 								<i class="icon far fa-arrow-alt-circle-down fa-lg" aria-hidden="true"
-									title="<%= maketext('Download [_1]', $ver->{id} =~ s/_/ /gr) %>"
-									data-alt="<%= maketext('Download [_1]', $ver->{id} =~ s/_/ /gr) %>"></i>
+									title="<%= maketext('Download [_1]', $ver->{id} =~ s/_/ /gr) %>"></i>
+								<span class="visually-hidden">
+									<%= maketext('Download [_1]', $ver->{id} =~ s/_/ /gr) %>
+								</span>
 							<% end =%>
 						% }
 						%

diff --git a/templates/HTML/SingleProblemGrader/grader.html.ep b/templates/HTML/SingleProblemGrader/grader.html.ep
@@ -48,7 +48,8 @@
 								bs_toggle    => 'popover'
 							},
 							begin =%>
-							<i class="icon fas fa-question-circle" aria-hidden="true" data-alt="Help Icon"></i>
+							<i class="icon fas fa-question-circle" aria-hidden="true"></i>
+							<span class="visually-hidden"><%= maketext('Help') =%></span>
 						<% end =%>
 					<% end =%>
 					<div class="col-sm">

diff --git a/templates/HelpFiles/Levels.html.ep b/templates/HelpFiles/Levels.html.ep
@@ -15,6 +15,7 @@
 %
 % layout 'help_macro';
 % title maketext('OPL Problem Levels Help');
+% stash->{ariaLabel} = title;
 %
 <p>
 	<%= maketext('Some OPL problems have been rated for difficulty/educational objective. The levels are loosely '

diff --git a/templates/HelpFiles/ProblemSets.html.ep b/templates/HelpFiles/ProblemSets.html.ep
@@ -14,7 +14,8 @@
 %################################################################################
 %
 % layout 'help_macro';
-% title maketext('Course Home Help');
+% title maketext('Assignments Help');
+% stash->{ariaLabel} = title;
 %
 <p><%= maketext('This is the standard entry point for the course.') %></p>
 <p><%= maketext('It lists the assignments available for the students.') %></p>

diff --git a/templates/layouts/help_macro.html.ep b/templates/layouts/help_macro.html.ep
@@ -1,5 +1,10 @@
 <%= link_to '#', data => { bs_toggle => 'modal', bs_target => "#${name}_help_modal" }, %$args, begin =%>
-	<%== $label =%>
+	% if ($label) {
+		<%== $label =%>
+	% } else {
+		<i class="icon fa-solid fa-circle-question <%= $labelSize %>" aria-hidden="true"></i>
+		<span class="visually-hidden"><%= stash->{ariaLabel} // maketext('Help') %></span>
+	% }
 <% end =%>
 <% content_for 'modal-dialog-area' => begin =%>
 	<div class="modal fade" id="<%= "${name}_help_modal" %>" tabindex="-1"