Skip to main content

HTML Emojis — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the HTML Emojis lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Add an emoji

    easy10 min

    Show a rocket emoji in a paragraph.

  2. 2

    Label a meaningful emoji

    easy10 min

    Wrap the emoji in a span with an aria-label.

  3. 3

    Hide a decorative emoji

    easy10 min

    Mark a decorative emoji as hidden from screen readers.

  4. 4

    Use an emoji entity

    easy10 min

    Insert an emoji using its numeric entity.

  5. 5

    Label an emoji button

    medium10 min

    Add a button whose emoji carries an accessible label.

Find the bug(5)

  1. 1

    Fix the unlabelled meaningful emoji

    easy8 min

    A meaningful emoji needs an accessible label.

  2. 2

    Fix the decorative emoji announced aloud

    easy8 min

    Purely decorative emoji should be hidden.

  3. 3

    Fix the wrong role

    easy8 min

    An emoji standing in for an image uses role="img".

  4. 4

    Fix the broken numeric entity

    easy8 min

    The entity is missing its # marker.

  5. 5

    Fix the emoji used as an image source

    easy8 min

    An emoji is text, not an image file.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace