Open thibaudcolas opened 1 year ago
Copying the findings from Scott,
en-latest
is not a valid value for the lang
attribute on the html
element
html lang
could be problematic.aria-labelledby="searchModalLabel"
on <div class="modal fade" id="search-modal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
is invalid (and, I believe, unnecessary)aria-hidden
.<a>
element with no href
main
landmark on the homepage. There is one on content pages, but it's just an extra wrapper. Should replace <div class="app__content" id="main-content">
in both page templates with <main class="app__content" id="main-content">
and remove the extra main
from the content page template.id="Layer_1"
attributes, which creates duplicate id
s when more than one are on a page.--w-color-grey-600
.#main-content
and is the first thing you tab onto after activating the skip link, which feels wrong. I think placing it before or after the search button probably makes the most sense?<nav>
element so that a screen reader will announce that you have entered a navigation area.aria-labels
that prefix the name of the destination page with "Previous page:" or "Next page:", to indicate audibly what the arrow icons indicate visually.<nav class="skip-link" aria-label="Quick links">
– "Quick links" seems a bit of a misnomer, but want to double-check whether wrapping a skip link in a nav
element is good practice in the first place.h2
elements, and probably not headings at all. I suspect a heading with text that is merely "Note" is not particularly useful for navigation or general understanding of document structure. (also mentioned in #150)<g>
elements.I've ticked off the items I believe are addressed by #204, this fixes quite a bit of the items but we still have a fair few to address.
I've ticked off the items I believe are addressed by #204, this fixes the majority of items but we still have a fair few to address.
Awesome, @nicklee! Will try to review that soon.
Not sure if it's already listed (could not see it) but the skip link is cut off on < md breakpoints and not visible at all on < small breakpoints.
Even though small devices are less likely to have a keyboard, I would expect this link to become visible no matter what the viewport width.
Ticked off a couple more items based on recent changes. If you spot broken links please let me know.
@Scotchester from an accessibility standpoint, do you think we should process broken links differently in Wagtail when rendering them on a page?
Here is the logic where we discard URLs and on save page identifiers when storing rich text links in the DB: https://github.com/wagtail/wagtail/blob/1434a93c5418b2dbd4ec22e7ba2761c62f6fcb51/wagtail/admin/rich_text/converters/contentstate.py#L24-L28
And here is where we create <a>
tags with no href if we can’t resolve a page link: https://github.com/wagtail/wagtail/blob/919dab00e5e4e66e936dc93cff52793785cf4080/wagtail/rich_text/pages.py#L24
It would be possible for us to give those links a dummy href
, or store the page’s URL at the point of creation of the link and use that as a fallback (which would still very likely cause a 404 but one that might be easier to track down).
It's a tricky question... I think there are valid reasons to let it render broken links (for example, the text around them could indicate the presence of a link, and getting a broken one might be less confusing than not seeing one at all), but I remember being confused by the way the screen reader handled the <a>
with no href
. I don't remember the specifics of how it did that, though; I should have recorded them. I will test again to refresh my memory.
store the page’s URL at the point of creation of the link and use that as a fallback (which would still very likely cause a 404 but one that might be easier to track down)
I will say, though, speaking for myself as a general user, I would prefer this approach.
Audit by Scott: #76.