Here’s my survey project please take a look and let me know what you think! Also if anyone knows why the project screen shot is wonky? It seems to work fine for me so It’s a bit strange that the screen shot code pen took looks like that…
(Very long) Reflection (sorry)
I really tried to make the survey as accessible as possible. I spent many hours learning how to use windows Narrator with chrome, only to realise it’s only really compatible with edge. I also ran the site through Chromes screen reader (screen vox if you have a chrome laptop). While the site is definitely not perfect in the way it interacts with the screen reader, I don’t think there is much more I can do without Javascript knowledge which I don’t have.
I wanted to include a background picture like the template version, but I found the sun at the top had far to much brightness for the design. In the end I’m not sure if the dark background and text contrast enough. Not really sure the grid was appropriate for this design either. I wanted to think of a good way to use up space and didn’t want the input fields to take up a whole page as the width grew! Definitely room for improvement design wise more generally.
Things I learnt doing this project were.
How to style radio buttons/checkboxes
How to style placeholder and textareas
The importance of labels in accessibility.
How to make a mobile-first design and use media queries.
There is an HTML syntax error you should be aware of and address.
Since copy/paste from codepen you can ignore the first warning and first two errors.
Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
The one for CSS is good. Use it and address the issue(s).
(The one for HTML misses things which is why I recommend W3C)
It’s a bit of a nit but, placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
Hi Roma, thanks for your feedback. Was the syntax error the part where I included to class attributes in seperate class pointers? That’s cleared up now. I’ve also removed the duplicate label selector in the css document. These validators are useful. Do you have any advice on if there are similar tools for vscode? I made this all locally to begin with. Will have to google!
One last thing. I totally get you on the placeholder.
Considerations
My main issues with it were. I’d read that placeholders aren’t very helpful from an accessibility point of view as they’re not read out consistently by different screen readers. I attempted a work around by making the labels more verbose and removing the placeholders… At the end I remembered one of the user stories was to use placeholder text. I didn’t like the grey, because it lacked visual contrast and so I went for black, but now the problem of it not being distinguishable from ordinary text occurs.
If I get a bit more knowledge on js then I can make it more accessible for screen readers without mucking about with usual placeholder syntax, but as this project is just html/css I did my best. The whole project is a bit of a whirlwind of patches as I try to make a site somewhat accessible. It’s far from perfect, but it certainly taught me a lot.
HTML in Codepen is the same HTML in an IDE. Just copy/paste it into the validator. My point about ignoring the first warning and two errors with codepen is because you don’t need those tags with codepen.