This is my site: https://www.silvestar.codes
I am not an accessibility master, so I need help with finding accessibility issues on my site.
What would you change or improve?
P.S. Please include categories and blog posts in the audit, too.
This is my site: https://www.silvestar.codes
I am not an accessibility master, so I need help with finding accessibility issues on my site.
What would you change or improve?
P.S. Please include categories and blog posts in the audit, too.
For further actions, you may consider blocking this person and/or reporting abuse
Ebraim Sambo -
Eduardo Charapa -
King Triton -
Edwin Gonzalez -
Top comments (9)
Hi :) it seems that there are only small issues with accessibility on your page:
1) Add aria-label for these options:
<button type="button" class="button button--small button--toggle js-toggle"><span>🌗</span><span>🌓</span></button>
2) Add aria-label describing that it is a tag, ex. 'javascript tag':
<a class="button button--small button--inverse" href="/tags/javascript/">javascript</a>
3) Add aria-label 'Read full testimonial from {NAME}' about the source of testimonials:
<a class="button button--small padding" href="/testimonials/rebecca-jacobs/">Read full testimonial ⇢</a>
4) It can be H1:
<h2 class="fz-step-5 no-margin-top margin-bottom">From the Portfolio</h2>
5) It can be H2 (silvestar.codes/testimonials/rebec...
<div class="fz-step-1 copy"><p>Marketing Manager at CodeScan</p>
</div>
6) Add info about the article that is related to it, ex. aria-label="Read more about {TITLE}":
<a class="button df padding" href="/articles/first-year-of-ui-dev-newsletter/">Read more ⇢</a>
7) Too small contrast (mentor.silvestar.codes/) for top links:
<a href="/resources/"><span>Resources</span></a>
Wow, thank you.
So, I think I resolved most of the items on this list. Thank you again!
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-label
or 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-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 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
j
andk
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+ 😋.
Any questions just ask.
It's been a while, but I finally got time to work on these issues. Thank you again!
Thank you for thorough audit. 💯
I'll make some adjustments soon.
consider adding the relevant tag #a11y to summon the masters
When you say summon the masters do you actually mean summon that annoying guy who rips everyone's accessibility articles and work to pieces?
If that is what you meant then:
Thanks for the suggeestion.