user profile image

Adjust body > font-size and the margins on p:nth-child(2) and p:nth-child(3) to fit your own favorite text. If you change the background image, update the text in the < span > as well.

Comments

  1. This is great...but in order to make it pass WCAG 2.0 AA (Criteria 1.1.1), you would need to expose what the image is to non-sighted users.

    aria-description="background image of Willy Wonka smiling at Charlie"
    

    Source: WCAG Guidelines

  2. @MrGrigri If you look in the HTML you will see there is a <span> with the alternative text. I use CSS to clip it so it will be invisible but still announced to screen readers (you can test this with your favorite screen reader). There is no aria-description attribute, but if you meant aria-label then that would not work without also adding a role attribute to the <div> (Source: Short note on aria-label, aria-labelledby, and aria-describedby ). In other words, this passes 1.1.1.

  3. YOU DID A HORRIBLE MISTAKE

    font-family: "Impact", sans-serif; font-weight: normal;

  4. @Raybe OMG YOU ARE RIGHT

    (it was intentional, though; I wanted it to be consistent across platforms, though maybe I should have looked for a web version of Impact first)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...