Assessment wanted for Accessibility troubleshooting

MDN Learn
1

Can I please get an assessment for Accessibility Troubleshooting?

Assessment (CodePen)

Possible additional accessibility improvements:

  • Header font could be changed to something more easily perceived
  • Main header is white on light purple which is not as easy to perceive as it could be

Many thanks :slight_smile:

Kindest regards,

Jeffrey

2

Hi @horusofoz

Congratulations on this massive a11y exercise!
Because it’s rather large I only listed things to improve below. Consider anything I don’t talk about as perfectly solved (Sorry for appearing lazy :smile:)

Here are my comments:

  • When using <header> and <nav> there’s no need for an additional role. It’s good to use role on the site-wide search form, but you don’t have to repeat it on the contained <input>.
  • Small improvement for the table: The two cells with scope="row" should be <th> instead of td.
  • Amazing audio player you have there! That’s so cool. Special “Congrats!” on this one :medal_sports: The only thing you could improve here is adding a link to the audio file(s) into the “not supported” text.
  • Show/hide button: You correctly used a <button>. In this case the tabindex isn’t needed because it works out of the box.

Okey-dokey, I think that’s it. As I said all the other stuff I didn’t mention is correctly solved in my opinion. Very well done!

Cheers,
Michael

1 Like