Hi Ben. Ideally, all forms should have visible labels to be accessible to the widest range of people. Unfortunately, many designs exclude them. In those cases, we can add a visually hidden label so that at least people using screen readers can access them.
Skip links, on the other hand, are helpful for sighted keyboard users AND screen reader users. It doesn't usually matter to a screen reader user if these remain invisible, but for sighted keyboard users, they need the element to become visible when focused to know where they are on the page and read the text.
I've been a professional C, Perl, PHP and Python developer.
I'm an ex-sysadmin from the late 20th century.
These days I do more Javascript and CSS and whatnot, and promote UX and accessibility.
I know what you're saying, but I think in the first example, if we as developers can push back and add hidden content, we should be in a position to push back against bad designs (I know this isn't always the case).
I'm still not sure I get the point of the second one, though. Do you have an example of any site that does this so I can see what you mean?
I agree we should all be having conversations about making designs more accessible and that should be the goal!
dta.gov.au/ is an example of a skip-link. If you tab from your browser address bar, a "skip to main content" link appears top left. If you keep tabbing, it will dissapear and your keyboard focus will tab through all the header navigation items.
If you activate the skip-link (by pressing enter) your keyboard focus will be moved to the main content (skipping the navigation). The skip-link is positioned offscreen (making it invisible) until you tab to it, when it becomes visible. If we didn't have css to bring it on screen when focused, a sighted keyboard user would still be tabbing to that link, but they wouldn't be aware of it because they couldn't see it.
I've been a professional C, Perl, PHP and Python developer.
I'm an ex-sysadmin from the late 20th century.
These days I do more Javascript and CSS and whatnot, and promote UX and accessibility.
Hi Ben. Ideally, all forms should have visible labels to be accessible to the widest range of people. Unfortunately, many designs exclude them. In those cases, we can add a visually hidden label so that at least people using screen readers can access them.
Skip links, on the other hand, are helpful for sighted keyboard users AND screen reader users. It doesn't usually matter to a screen reader user if these remain invisible, but for sighted keyboard users, they need the element to become visible when focused to know where they are on the page and read the text.
Does that explanation help?
I know what you're saying, but I think in the first example, if we as developers can push back and add hidden content, we should be in a position to push back against bad designs (I know this isn't always the case).
I'm still not sure I get the point of the second one, though. Do you have an example of any site that does this so I can see what you mean?
I agree we should all be having conversations about making designs more accessible and that should be the goal!
dta.gov.au/ is an example of a skip-link. If you tab from your browser address bar, a "skip to main content" link appears top left. If you keep tabbing, it will dissapear and your keyboard focus will tab through all the header navigation items.
If you activate the skip-link (by pressing enter) your keyboard focus will be moved to the main content (skipping the navigation). The skip-link is positioned offscreen (making it invisible) until you tab to it, when it becomes visible. If we didn't have css to bring it on screen when focused, a sighted keyboard user would still be tabbing to that link, but they wouldn't be aware of it because they couldn't see it.
That's actually really neat! Thank you.