HTML Tips for Better Web Documents

Examples from the wild, tips for your sites

If you want a new tip in your inbox, subscribe for tips. If you need a full page audit, request for audit.

  1. Don't fake buttons.

    It may look, receive focus, and perform an action like a button; still, it won't be called a button. Users using screen readers won't know they can perform an action. It becomes useless.

    Beside other errors: when the Fake Button recieved focus, it wasn't called a button.

    One other error: After pronuncing "For" as a word, it pronunced "SAAS LEADERS" by characters.

    One poor solution is to name it a button. It begs the question, why re-engineer an element?

    The true solution is to simply use a button element if it should really be a button.

  2. Avoid blank links.

    Users with sight see the platform's icon, but users without sight hears the link path and some mumbo-jumbo parameters – not the platform's name.

    Absence of anchor text at mazerance.com made NVDA read out the URL path and parameters; 2 issues:

    • It doesn't complete the parameters because there's a character limit.

    • When a brand has the same username across social media, as it should be, NVDA reads the username without distinguishing the platforms.

    Remember: every non-text media that is not a decoration should have an alternative text.

    2 solutions: add a visually-hidden text; or use an ARIA label.