P
@GeraASM
What are you most proud of, and what would you do differently next time?
The next time I'll start with the menu
Latest solutions
Responsive News Page using CSS Grid
PSubmitted 10 days agoI would like someone to check my website for accessibility and tell me if I missed something. I think the hamburger menu should be good (followed a video for that) but the rest of the website might need a little work.
Contact Form with ARIA Labels
PSubmitted about 2 months agoI would like someone to check the accessibility of my form. Since this is my first time learning about accessibility I would like to get some feedback on what I should change/improve on.
Latest comments
- P@a-d14
You have issues with accessiobility in your hamburger menu.
- you should label your nav and the hamburger icon button like so :
<span id="nav-label" hidden>Navigation</span> // For the open button <button id="btnOpen" class="nav__open" aria-expanded="false" aria-labelledby="nav-label">... // for the nav manu <nav class="nav__menu" role="dialog" aria-labelledby="nav-label">...-
if you noticed, I labelled the open button with aria-expanded
falseand the addedrole='dialog'to the nav. This is to make an accessible dialog. A dialog is an element that contains extra information that comes into view when a control, in this case a button, is pressed. -
when the menu is opened, you want to make the rest of the website inaccessible to keyboard and screen readers. To do that, use the HTML's inert property.
-
similarly when the hamburger menu is closed, you want the items in the menu to be inaccessible as well. This must only happen on mobile devices. You can do this used JS. You can detect if a user is on a mobile device using the
matchmediamethod on the window object.
Marked as helpful - @vedantagrawal524P@a-d14
Looks good
- P@KoxoneP@a-d14
nice job! However, your images should be inside a button element as it is better for accessibility and would be more semantic HTML. This would also satisfy the criteria given in the problem statement - user should be able to navigate using keyboard.
- P@KoxoneP@a-d14
There is a small issue with your project. When you select a rating, the box of the corresponding rating should turn orange. You can implement this by adding a class to the element using JS and in CSS, you can add a declaration under the class selector that turns the background color to orange.
- @guardianprimeWhat are you most proud of, and what would you do differently next time?
Building with react was good. i even did the darkmode toggle thing that looked hard at first but a little reasearch and i did it.
what would i do differently? well i would use context api and even the usereducer hook and simplify state handling.
What specific areas of your project would you like help with?allowing the user to use keyboard as navigation in the app and also the option logic. like how the user sees if the option selected is correct or not instead of just seeing everything that is not correct.
P@a-d14You need to fix your progress bar, it does not work properly.
- P@gkilasoniaP@a-d14
looks good!
