Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
So here we go, might look scary but mostly straight forward fixes:
General
Mobile menu: You need to add aria-expanded="true" when it is open as a bear minimum. You should also add aria-controls="IDofNav" and give the <nav> element the same ID to link the button to the menu.
Ideally you shouldn't nest the <ul> within the <nav> (desktop and mobile) as it suggests hierarchy / relationships if you are doing that for visual reasons, instead you can use something like the following:
Ignore this point if there is indeed meant to be a hierarchy / relationship between these items.
As you have two <nav> elements on the page you should label them with aria-label or a similar technique
Home page
Your "From the Portfolio" the images do not have a focus indicator if we tab to them.
Also they duplicate the link text lower down "see project".
Two suggestions here. The first is to remove the hyperlink from around the image and instead handle clicks with JavaScript. This removes the duplication for screen readers and also removes a tab stop for keyboard users.
Then I would change "see project", either using aria-label or visually hidden text to include the project name "see project codescan".
Also consider whether the tagging actually adds anything valuable to the page as they add a lot of tab stops (it is fine if you think they do, it depends on whether the site is designed for general client work acquisition or for other developers).
Similar with the "Read the full story" button - make sure to give something more meaningful to screen readers with aria-label or visually hidden text. @kamilbugnokrk
has covered the other labelling issues as far as I can tell.
The "email subscribe" opening a new window isn't great as it immediately uses ReCaptcha which is a nightmare from an accessibility perspective, maybe consider a different provider that allows you to handle everything yourself and handle spam bots server side instead.
With the <time> element you should have the attribute datetime="2021-01-18" to help screen readers parse the date correctly.
Contact Page
Just one point here and that is your focus indicator doesn't look to have sufficient contrast on the inputs. It should be 3:1 with the background. Technically for an input the Input caret is enough but it doesn't hurt to over perform!
Enough for now
Most of the points here have similar issues elsewhere that are just slight pattern adjustments (you blog page has duplicate links for each article , "read more" buttons etc. which are same principle as the projects on the home page to fix).
Despite the rather long list, it is actually pretty good. Like I said the only thing that was a real pain was all the tags for the "tab test" as they take forever to get through! Not a fix but you could add j and k to cycle through the posts (and or the arrow keys) just to make it easier!
I give you a B- compared to most of the crap out there, I doubt anyone would actually struggle to use the site except for that subscription bit, replace that with a better alternative and it would be a B+ 😋.
So here we go, might look scary but mostly straight forward fixes:
General
Mobile menu: You need to add
aria-expanded="true"when it is open as a bear minimum. You should also addaria-controls="IDofNav"and give the<nav>element the same ID to link the button to the menu.Ideally you shouldn't nest the
<ul>within the<nav>(desktop and mobile) as it suggests hierarchy / relationships if you are doing that for visual reasons, instead you can use something like the following:Ignore this point if there is indeed meant to be a hierarchy / relationship between these items.
As you have two
<nav>elements on the page you should label them witharia-labelor a similar techniqueHome page
Your "From the Portfolio" the images do not have a focus indicator if we tab to them.
Also they duplicate the link text lower down "see project".
Two suggestions here. The first is to remove the hyperlink from around the image and instead handle clicks with JavaScript. This removes the duplication for screen readers and also removes a tab stop for keyboard users.
Then I would change "see project", either using
aria-labelor visually hidden text to include the project name "see project codescan".Also consider whether the tagging actually adds anything valuable to the page as they add a lot of tab stops (it is fine if you think they do, it depends on whether the site is designed for general client work acquisition or for other developers).
Similar with the "Read the full story" button - make sure to give something more meaningful to screen readers with
aria-labelor visually hidden text. @kamilbugnokrk has covered the other labelling issues as far as I can tell.The "email subscribe" opening a new window isn't great as it immediately uses ReCaptcha which is a nightmare from an accessibility perspective, maybe consider a different provider that allows you to handle everything yourself and handle spam bots server side instead.
With the
<time>element you should have the attributedatetime="2021-01-18"to help screen readers parse the date correctly.Contact Page
Just one point here and that is your focus indicator doesn't look to have sufficient contrast on the inputs. It should be 3:1 with the background. Technically for an input the Input caret is enough but it doesn't hurt to over perform!
Enough for now
Most of the points here have similar issues elsewhere that are just slight pattern adjustments (you blog page has duplicate links for each article , "read more" buttons etc. which are same principle as the projects on the home page to fix).
Despite the rather long list, it is actually pretty good. Like I said the only thing that was a real pain was all the tags for the "tab test" as they take forever to get through! Not a fix but you could add
jandkto cycle through the posts (and or the arrow keys) just to make it easier!I give you a B- compared to most of the crap out there, I doubt anyone would actually struggle to use the site except for that subscription bit, replace that with a better alternative and it would be a B+ 😋.
Any questions just ask.
Thank you for thorough audit. 💯
I'll make some adjustments soon.
It's been a while, but I finally got time to work on these issues. Thank you again!