Improve accessibility for welcome/home page and dashboard #3159
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mjgiarlo
commented
Jun 28, 2023
| @@ -2,7 +2,7 @@ | |||
| <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg"> | |||
| <div class="modal-content"> | |||
| <div class="modal-header"> | |||
| <h5 class="modal-title" id="citationModalHeader"></h5> | |||
| <h5 class="modal-title" id="citationModalHeader">Copy citation</h5> | |||
mjgiarlo
commented
Jun 28, 2023
| <% end %> | ||
| <% else %> | ||
| <tr> | ||
| <td colspan="7" class="text-center">No visible deposits</td> |
There was a problem hiding this comment.
Empty table bodies bad.
mjgiarlo
commented
Jun 28, 2023
| @@ -1,8 +1,8 @@ | |||
| <tr> | |||
| <td> | |||
| <%= work_link %> | |||
| <%= helpers.turbo_frame_tag dom_id(work, :edit), src: edit_button_work_path(work), target: "_top" %> | |||
| <%= helpers.turbo_frame_tag dom_id(work, :delete), src: delete_button_work_path(work) %> | |||
| <%= helpers.turbo_frame_tag dom_id(work, :edit_in_progress), src: edit_button_work_path(work, tag: "in_progress"), target: "_top" %> | |||
mjgiarlo
commented
Jun 28, 2023
| @@ -1,8 +1,8 @@ | |||
| <div class="modal fade" id="purlReservationModal" tabindex="-1" aria-labelledby="content-type-prompt" aria-hidden="true"> | |||
| <div class="modal fade" id="purlReservationModal" tabindex="-1" aria-labelledby="deposit-title-prompt" aria-hidden="true"> | |||
There was a problem hiding this comment.
Non-unique IDs (due to copypasta) bad.
mjgiarlo
commented
Jun 28, 2023
| @@ -1,5 +1,5 @@ | |||
| <%= turbo_frame_tag dom_id(collection, :summary) do %> | |||
| <li class="mb-5"><!-- from _dashboard.html --> | |||
| <div class="mb-5"><!-- from _dashboard.html --> | |||
There was a problem hiding this comment.
Having tags between a list container element (ul) and a list item element (li)---the turbo frame---bad. And, AFAICT, there is no need to have a ul/li structure here.
mjgiarlo
commented
Jun 28, 2023
| @@ -3,6 +3,7 @@ | |||
| <% end %> | |||
| <main class="mb-3 mb-md-5" id="content"> | |||
| <div class="container px-4 px-md-3" id="dashboard" data-controller="work-type work-type-modal"> | |||
| <h1 class="mb-3">Dashboard</h1> | |||
There was a problem hiding this comment.
Lack of top-level headings bad.
mjgiarlo
commented
Jun 28, 2023
| @@ -28,11 +28,11 @@ | |||
| </head> | |||
|
|
|||
| <body data-controller="help-how"> | |||
| <div class="overflow-hidden"> | |||
| <nav class="overflow-hidden" aria-label="Skip to main content"> | |||
There was a problem hiding this comment.
Lack of aria bad. Prefer semantic tags.
mjgiarlo
commented
Jun 28, 2023
| @@ -83,14 +83,14 @@ | |||
| </div> | |||
| </nav> | |||
| <% if controller_name != 'welcome' %> | |||
| <div class="background-holder"> | |||
| <header class="background-holder"> | |||
mjgiarlo
commented
Jun 28, 2023
|
|
||
| <div id="global-footer" role="contentinfo"> |
There was a problem hiding this comment.
Multiple role="contentinfo" elements bad. Move the SU footer into the HTML footer.
mjgiarlo
commented
Jun 28, 2023
| @@ -1,9 +1,9 @@ | |||
| <div class="modal" id="termsOfDepositModal" tabindex="-1" aria-labelledby="content-type-prompt" aria-hidden="true"> | |||
| <div class="modal" id="termsOfDepositModal" tabindex="-1" aria-labelledby="terms-of-deposit-prompt" aria-hidden="true"> | |||
There was a problem hiding this comment.
Non-unique IDs (due to copypasta) bad.
mjgiarlo
commented
Jun 28, 2023
| @@ -1,9 +1,9 @@ | |||
| <div class="row justify-content-center"> | |||
| <main class="row justify-content-center" id="content"> | |||
There was a problem hiding this comment.
Prefer semantic elements. And provide an anchor for the skip link.
mjgiarlo
commented
Jun 28, 2023
| <div class="card col-md-10 col-lg-8 col-xl-7 col-xxl-6 mt-5 mb-5"> | ||
| <div class="card-body"> | ||
| <h5 class="card-title">Welcome!</h5> | ||
| <h1 class="card-title">Welcome!</h1> |
There was a problem hiding this comment.
Select a heading based on semantics, not display (which can be controlled by CSS).
mjgiarlo
commented
Jun 28, 2023
| @@ -18,7 +18,8 @@ | |||
| <a href="#photo-credit" class="credit">Photo credit<sup>*</sup></a> | |||
| </div> | |||
| </main> | |||
| <div class="benefits"> | |||
|
|
|||
| <section class="benefits" aria-label="Benefits"> | |||
There was a problem hiding this comment.
Prefer semantic elements.
mjgiarlo
commented
Jun 28, 2023
|
|
||
| <div class="whys"> | ||
| <section class="whys" aria-label="Frequently Asked Questions"> |
There was a problem hiding this comment.
Prefer semantic elements.
mjgiarlo
commented
Jun 28, 2023
| <div class="container p-4"> | ||
| <div class="row"> | ||
| <div class="col-md-3"> | ||
| <%= image_tag "home_who.jpg", height: 80, width: 80, aria: {hidden: true} %> | ||
| <%= image_tag "home_who.jpg", height: 80, width: 80, aria: {hidden: true}, alt: "Who" %> |
There was a problem hiding this comment.
Use alt attrs consistently.
ndushay
approved these changes
Jun 28, 2023
Fixes #3150 This deals with a11y violations of the A/AA/aria variety as identified by the Siteimprove Accessibility Checker extension and the WAVE extension.
mjgiarlo
force-pushed
the
accessibility#3148
branch
from
fc4415e to
1c0f90d
Compare
2 tasks
mjgiarlo
changed the title
This was referenced Jun 30, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why was this change made? 🤔
Fixes #3148
Fixes #3150
How was this change tested? 🤨
Does your change introduce accessibility violations? 🩺
No.