vuejs typescript tailwindcss css

Community feedback

• 

  P

  lai yiu leung•400

  @jasper2virtualPosted 3 months ago

  wow, i like your comment. you help me a lot.

  0
• 

  

  Gwenaël Magnenat•1,500

  @gmagnenatPosted 3 months ago

  Hi, congrats for completing this project !

  I noticed a few things in your solutions that could improve the user experience. There are a couple of details missing from the design that have their importance in my opinion.

  • The first focusable element is the theme switcher. When using a screen reader the theme isn't announced and we cannot guess what is the option to check. As by the design it's a toggle between light and dark you could use radio buttons for this. It will also improve the accessibility as the user can use the native keyboard behaviour for radio buttons. You'll need to add proper labels and aria-describedby to the inputs.
  • Your media switch to desktop is at a quite large screen size. under 1440px wide it is the mobile view displayed. I would adjust that to something more natural at smaller breakpoint.
  • On the question validation, if a wrong answer is selected on the design a small check indicators shows the correct answer.
  • If not answer is selected you have a small layout shifts caused by the display of the error under the button. You can use a grid layout instead for your page so you don't have this little switch. You could also hide the error when an answer is selected.

  That's just a few things I noticed when checking your solution. I hope you find something useful in this list to improve it. Let me know if you have any questions.

  Happy coding !

  0