Accessibility Review

[samikeijonen]

Broken is a promise! Here we go.

Keyboard Navigation

• In main nav Avaa chat focus is hard to see. I'd add one more pixel of box-shadow. Also note that color change on focus need to meet 4.5 contrast rule. On header background image that might be a problem.
• When I open the chat, focus moves to "text field" as it should. But I can't sent the form via keyboard or close the chat.
• Tab throws the focus out of the chat box in some random place. Focus should stay inside the chat unless I close it.
• Esc should close it and bring focus back to Avaa chat menu item.
• Chat close icon should be a button, it's now <span> which doesn't have any a11y tools like keyboard focus build in.
• I leave a chat alone for now, it's something chat authors should work on :)
• On narrow screens hamburger menu (for opening the menu) focus is hard to see. I also didn't see it first because visually order of elements (hamburger - Dude - Soita) is not the same as they are in markup.
• Focus should not move into menu items before I open the menu. This can be done using display: none or visibility: hidden CSS.
• I'm also not sure where to focus goes when I open the menu by pressing Enter. I'd like to press Enter again and it would close the menu.
• Alaspäinkin pääsee doesn't have focus styles.
• Also blog list header image have subtle focus styles.

Controls

• Pass.

Skip Links

• Pass.

Forms

• Labels are missing from the Yhteystiedot form. They can be visually hidden.

Headings

• In front page Verkkosivut and Verkkokaupat should be h3 so that heading levels won't skip.
• In front page blog post date is h5 and author name is h4. At least h5 should be h4 (skipping one heading level). I'd personally not use heading at all in those fields. It doesn't feel semantically correct.
• In Verkkosivut and Verkkokaupat pages in Palautetta asiakkailta section there is also skipping heading levels (name and title).
• Also in Dude page for for names under Boys of summer should be h3.
• In Työt page By Emmi, Jylkkäri etc should be h2.
• Also in Yhteystiedot page there are skipping heading levels.

ARIA Landmark Roles

• Pass.

Link Text

• There are empty links in different sections where is background image and text. For example in front page Jylkkäri, By Emmi etc. Empty links mean this kind of markup without text inside links: <a href="https://www.dude.fi/tyot/jylkkari" class="permalink"></a>. Depending on AT it announces something, for example Voiceover reads the end of the slug.
• In empty link there could at least be aria-label="Title of the post" but I try to avoid empty links because it's not semantically correct. Therefore I use screen-reader-text class inside link in these cases.
• In footer links Koodia suomesta etc. same issue. title should be avoided because some AT software doesn't announce that all.

Contrasts

• There are color contrast issues for example in the footer and in comment fields.

Images

• In decorative SVG images I'd use aria-hidden="true" just in case that AT software doesn't try to announce something.

Screen Reader Text

• Pass.

[ronilaukkarinen]

Thanks Sami! Will fix those things as soon as I get some spare time. I was sure there was some little things left to do. :)

[ronilaukkarinen]

These are now fixed, and more. Tested with WAVE by webaim, Alix and tota11y. Contacted Crisp chat about their service, that code I cannot touch myself.

Thanks a lot Sami for your effort! Nowadays I'm concentrating a11y way more than at the time when doing this website. Better and better daily tools help a lot.