Assessment wanted for HTML accessibility skill test

MDN Learn
#1

Hi there,

These are my finished tests. Could you please give me some feedback?
I am not sure if I did right about the third test…
And the fourth one I am not clear how to take the header image further using CSS…

Test1
Test2
Test3
Test4

Thank you for your help.

Kind regards,
Linnea

#2

Hi @Linnea and welcome to the community :wave:

Great work on this task! Congratulations :medal_sports:

Here are my comments:

  • Task 1: :white_check_mark: Correct. Maybe use an unordered list, because the items don’t really follow an order.
  • Task 2: :warning: Partly correct. The <label>s with for attribute are fine. To group multiple elements you should use a <fieldset> and name it with a <legend>.
  • Task 3: :white_check_mark: Correct.
  • Task 4: :warning: Partly correct. The alt attributes on the big images are fine. For the small star image the easy way would be to just set the alt attribute to alt="". This would stop screenreaders from announcing it.
    The better possibility would be using a CSS background image. You remove
    <img src="https://bit.ly/3xWyDNk" alt="A star that I use to decorate my page">
    from HTML and add the following rule to CSS:
    h1 {
  background: url(https://bit.ly/3xWyDNk) no-repeat left;
  padding-left: 50px;
}

I hope that helps. :slightly_smiling_face:

Have a nice day,
Michael

#3

Thank you so much Michael, it’s really helpful! :blush:

Best wishes,
Linnea

1 Like