As always, I just like to share my work
2 Likes
I’m really liking how you are making these your own. Very creative and interesting. I can tell you’ve put a lot of work into it.
On the landing page, I think you need to make the smaller text much brighter. I can barely read the word “survey”, as it is mostly over the light brown land. The others are somewhat more readable but probably not enough.
Semantically, I think the survey button should probably be an <a>. The basic rule is that buttons do something and links go places. This button is really just acting as an in-page anchor link.
Also, you have the CSS outline property set to 0 on the button so I can’t see any keyboard focus indicator when I Tab to it. This is definitely an accessibility issue that needs to be fixed. I understand that you don’t want an ugly focus ring when you click the button with your mouse (or touch it with your finger). Fortunately, there is now a way you can suppress the focus indicator for mouse/touch and only have it show when using the keyboard.
On the survey form there is a problem with Tabbing through the form inputs. I can Tab through the inputs that initially show on the page. But once I get to the last one, when I Tab to the next one (which is currently off screen) it does not appear. In fact, I can Tab through all of the remaining (unseen) inputs and the page will not move. It only scrolls when I get to the iicestudio link at the very bottom of the page. I will recommend that you always test your page with the keyboard only to make sure that all functionality works for someone who only uses the keyboard.
As for the inputs themselves, all of your labels are working properly except you forgot one for the textarea. I would suggest that you use a fieldset/legend for the check box/radio button groupings as it is much more accessible.
The color contrast ratio on the submit button is not quite strong enough. You can use the WebAIM contrast checker to make sure they meet accessibility requirements.
If I do submit the form without filling in the name field the form does not automatically scroll to the name input and the error message is showing up near the very top of my browser window. I’m assuming this is related to the Tabbing issue above and once you fix that this might be fixed as well.
You have hijacked the mouse scroll to implement the scrolling effect, which is fine, but it is also scrolling when I am holding down the Ctrl key and scrolling, which is not so fine. I have my browser set up to zoom the text size when I hold down the Ctrl key and scroll, so you have essentially disabled that when I’m viewing your page. I think you should fix this so that your scrolling handler only does its thing when no buttons are being held down (such as Ctrl, Shift, Alt). And I’m guessing I’m not the only one who has configured their browser to do things when they hold down one of these keys while scrolling, so I think it’s common courtesy to check for this.
1 Like
I love it, superb design, however, I would change the color of heading over the background as it was a bit difficult to read and I’m not big fan of the auto-scroll. It is definetelly cool feature, I just prefer to be more in control what’s happening on the page I guess.
Thank you. It’s how I learn
I have modified the background to make the text more clear
Completed
Alright
On the survey form there is a problem with Tabbing through the form inputs. I can Tab through the inputs that initially show on the page. But once I get to the last one, when I Tab to the next one (which is currently off screen) it does not appear. In fact, I can Tab through all of the remaining (unseen) inputs and the page will not move. It only scrolls when I get to the iicestudio link at the very bottom of the page. I will recommend that you always test your page with the keyboard only to make sure that all functionality works for someone who only uses the keyboard.
Fixed it and thank you for your input, I truly appreciate it
I will certainly check your code as I have a lot to learn from it 
1 Like
its Awesome survey form … but idk this is the longest loading codepen i’ve been encounter
Thank you. It’s the images lol
In that case you could try improve this thing… like using sourceset, lower quality etc :]
Your page looks good @iicestudio. Some things to revisit;
- Keep the test script when forking the pen (
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)- The test script, with all tests passing, should be included when you submit your projects.
- Your page passes 16/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
- Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
- Run your HTML code through the W3C validator.
- There are HTML syntax/coding errors you should be aware of and address.
- Since copy/paste from codepen you can ignore the first warning and first two errors.
Thank you. I will add them back once I completed all of the projects
It passed before, I guess it got deleted during my modifications
Always
Will do
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.