css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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...
Loading...