@pikapikamart
Posted
Hey, great work on this one. I think this is my first time to see a solution on this challenge, design looks great though. Desktop layout is great, it is responsive and the mobile state looks really great as well.
Some suggestions would be:
- I noticed that the
font-weightof the text are super thin, instead of200maybe go with the normal of400since it makes it hard to read the text since it is thin. - Lose the word
logoin the website-logo, use only the website name's as thealtvalue. - Hero-section's background-image should be hidden. Decorative image must be hidden at all times for screen-reader users by using
alt=""and extraaria-hidden="true"attribute on theimgtag. - Also when using
altattribute, avoid using words that relates to "graphic" such as " illustration" and others. Animgis already an image/graphic so no need to describe it as one. - Those 4 icons are just decoration as well so it is better to hide them using the method above.
- Good choice of article for the pricing!
- Though I wouldn't use a heading tag on the
dip your toeordive rightin because it doesn't really convey any information on what the section would contain. Because if you read it right, it doesn't really connect to anything. Instead I would make thefreeand the25$/monthas a heading tag since they describe what is the section is all about. But maybe adding like aplanword likefree planbut theplanword is using a screen-reader class. Same with the 25$. - Right now, there is no clear indication if the form submitted is a success or has an error. If the
inputsubmitted is wrong, add anaria-invalidon theinput. - The
inputas well needs to have eitheraria-labelor screen-reader onlylabellabeling what does theinputneeds, henceenter emailsomething like that. - Adding an
aria-liveas well that will announce if the form submitted is a success or not. This way, users will be informed right away what happened. Have a look at this simple accessible form snippet of mine though my live-region element only state one phrase, you can alter that to what ever error your user had made.
Aside from those, great job again on this one.
Marked as helpful
@fraserwat
Posted
@pikamart thanks, this is so helpful!! Fixing this (and googling a bunch of stuff) has actually cleared up a lot of things I wasn't too sure about. Have updated my solution, I think I've got it right? As there's only one input in my form I just hardcoded the aria-describedby attribute into the HTML.
What do you usually use to check accessibility on screen readers? Do you use one you'd recommend for making sure all this stuff checks out?
@pikapikamart
Posted
@fraserwat Hey, great that you found it useful.
Well there isn't really that checks all accessibility feature on a site, knowing them as you just go along doing frontend and loots of googling using "accessible" word like "accessible testimonials", something like those.
For screen-reader, on my phone I use the talkback, for every phone there is a built-in one, on mine it is talkback and on my laptop, I use nvda screen-reader. Though I don't really use nvda or talkback to check for every site review, I use them when I am not certain that a section or layout is not properly using something
