Hello
A few quick wins available on this
- logo is the most valuable content on the page, it can't have an empty alt!
- remember to always add the type attribute on buttons. You'll avoid really annoying bugs
- menu toggles require the aria-expanded attribute. It's often a good idea to use aria-controls as well
- aria label on the social links needs to be on the link not image. Consider switching to Sr only text in there instead though - aria label is not reliably translated by browsers, whereas text in the dom is (for other language speakers)
Good job on this, it looks really nice
@fraserwat
Posted
@grace-snow Thanks, this is super helpful!! Have made those changes.
On the aria-expanded attribute, am I right in thinking in this example I'd want to just have aria-expanded="false" on the hamburger menu, then ="true" on the close as it takes up the whole screen, so obscures the original menu. However, on an example where this wouldn't be the case, I'd probably want to use Javascript to update the attribute on the menu button?
As you mention screen reader only text, I have some of this on the form completion (end of form, id #success-message). Is this the correct implementation of it? Set to role="alert", hidden with tiny font size and z-index, but display:none switched to inline when the form validation passes.
@fraserwat aria expanded would usually be the exact same state on both buttons. Usually you would only have one button to toggle a menu / disclosure pattern on/off tbh. Rather than having 2 buttons, one should be fine eg "toggle navigation". Aria- controls can help jaws screenreader users too - that points to the item being expanded so they know there is a direct relationship between button and the panel it controls
By Sr only text I didn't actually mean aria-live (like alert) announcements, that's a different thing. It could work fine but I was actually referring to an extremely widely used css snippet that accessibly hides content visually while leaving it available to screenreaders as they traverse the DOM. Look it up ☺
