Silvestar Bistrović

Posted on Jun 12, 2021 • Updated on Jun 14, 2021

Audit my site for accessibility

#discuss #a11y

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.

Top comments (9)

Kamil Bugno • Jun 12 '21 • Edited

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>

Silvestar Bistrović • Jun 14 '21

Wow, thank you.

Silvestar Bistrović • Sep 30 '21

So, I think I resolved most of the items on this list. Thank you again!

GrahamTheDev • Jul 1 '21 • Edited

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:

ul {
    -moz-column-count: 3;
    -moz-column-gap: 0.5rem;
    -webkit-column-count: 3;
    -webkit-column-gap:  0.5rem;
    column-count: 3;
    column-gap: 0.5rem;
}

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+ 😋.

Any questions just ask.