-
Notifications
You must be signed in to change notification settings - Fork 91
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use landmark roles to improve navigation for screen reader users #138
Conversation
c2ca612
to
fe1f5fe
Compare
Can you please link to a published version of the blog with these changes so that I can check them visually? |
https://ithake.github.io/blog-slogic/ It should be visually indistinguisable ;) the difference I'm hoping to make is that by exposing landmark roles, it will be easier for screen reader users to navigate through each page. I'm pressing |
@jcarstairs-scottlogic - some thoughts to consider for style and content: For example - #124 - I have screen shots before and after a functional change and a reference to doing (admittedly inconclusive!) non-functional testing for a non-functional change. "It should be visually indistinguisable ;)" in itself, this is light-hearted, but when you follow up with "the difference I'm hoping .. " the cumulative effect is that the reader wonders just how much uncertainty is involved here? |
fc551dc
to
85ae097
Compare
This all belongs in the introduction/description of the change.
Bonus points for:
Finally, your links to external documents in the PR description are really helpful, well done. If they're already detailed in a separate "Issues" document, then you don't need to repeat it all, instead, add a link to the document on sharepoint, and either ensure that it's publicly available or explicitly given the reviewer access to it as well. |
+1 for the semantic structure! Is it worth adding a |
f7afb46
to
308b2c7
Compare
308b2c7
to
5c74cbf
Compare
Regarding the failing pipeline: I think we're good to go. I've looked through all the failures picked up by the pipeline on this PR. Almost all of them are colour contrast. The only other one is a It is unexpected that it picks up colour contrast issues: these should be ignored. I can't figure out why they're not being ignored on this PR. But it looks like when you make a new branch from |
Some screen reader users use landmark roles to quickly navigate around webpages. We can use landmarks in our blog to make navigation easier for these users.
In particular, this PR:
<main>
, which has an implicit landmark role ofmain
<aside>
, which has an implicit landmark role ofcomplementary
aria-label
andaria-labelledby
to explain to screen reader users what each landmark is for, when there's more than one landmark of the same type on the same page (see MDN on labelling landmarks)<article>
tag around blog posts. Doesn't have an associated landmark role and doesn't seem to affect screen reader behaviour for me, but it can't hurt. See MDN, or have a look at how the BBC use it.