This page permanently redirects to gemini://m0yng.uk/2024/11/flohmarkt-accessibility-check/.

flohmarkt accessibility check - M0YNG.uk

Created 2024-11-23

=> Tagged

• accessibility

flohmarkt[1] is "A decentral federated small advertisement platform", think classified ads like eBay used to be.

=> 1: https://codeberg.org/flohmarkt/flohmarkt

midzer asked for help[2] checking the accessibility.

=> 2: https://chaos.social/@midzer/113533245847784209

Although I am a professional accessibility consultant, this is not a paid for audit and I am not using all my usual tools (as I'm not at work!) so it's probable that I've missed things. I've also not looked at every facet of the service so the whole thing should be checked for anything I do identify.

I've linked everything I can to the international standard, please refer to WCAG Quick Reference[3] for more specifics.

=> 3: https://www.w3.org/WAI/WCAG22/quickref/

This check was undertaken on https://fleamarket.neilzone.co.uk[4] and https://fedi.markets[5]

=> 4: https://fleamarket.neilzone.co.uk | 5: https://fedi.markets

Findings

2.4.2

The page title on the hompage is "None".

2.4.3

The header has a different visual order to keyboard focus order:

keyboard focus: Home link, sign in button(s), search visual: Home link, search, sign in buttons(s)

The items have a reading order that doesn't match the visual order. However, I'd suggest that's OK - if the order is:

• Item title
• Price
• New/Old/etc.
• Description

The image does not need alt (it should be "null") as it adds no value (unless you allow people to add descriptions!), you also don't need title attribute on the image,

2.1.1

Home, Local, All, tabs cannot be accessed using keyboard

1.4.3

Colour contrast, Colour Contrast.cc[6] is great for checking this.

=> 6: https://colourcontrast.cc/

"New" badge has insufficient contrast, #dc322f on #000610 (dark theme) is 4.39.

"Old" badge has insufficient contrast, #976b00 is 4.28.

"Popular" badge has insufficient contrast, #627600 is 3.98.

"Read more about this instance" has insufficient contrast in dark mode, backgound (acutal) is #182d17 with #4e8429 text is 3.26.

Incorrect use of <aside>

=> Each item is within an <aside> but that's not how that element should be used: MDN: Aside

1.4.11

Search input has insufficient contrast on its border, it's really hard to spot in light theme.

3.3.2

Account input on item page is unlabelled.

1.1.1

User avatar has alt text of the username, which doesn't add any value. Consider "[username] avatar" or null.

-+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+-

🖤 Black Lives Matter

💙🤍💜 Trans Rights are Human Rights

❤️🧡💛💚💙💜 Love is Love

Copyright © 2024 Christopher M0YNG - It is forbidden to use any part of this site for crypto/NFT/AI related projects.

=> Code snippets are licenced under the Hippocratic License 3.0 (or later.)

Page generated 2024-12-13 by Complex 19