Please rate usability of my password generator

I made a random password generator https://randompasswordgenerator.org/. Please rate usability. What do I need to change to make the site as clear as possible? Do I need to add more functionality to the service?

 

You need to learn English or hire a native English writer to fix the garbled mess on your site.

is just ONE example of you putting an English lexicon in a blender, then randomly removing words to put on your page.

 

Yeah, the "Engrish moist goodry me love you long time" is a serious problem.

The thin-glyph font used for your checkbox labels are also problematic as they border upon illegible, with multiple sections of colour contrasts being far below accessibility norms. Likewise the use of pixel metrics in the design -- particularly for fonts -- flips the bird at users with accessibility needs.

There is far too much wasted space before you get to the actual functionality, I would seriously consider axing that stupid pointless space-wasting image above the form entirely.

Code-wise it's a mess. Fieldset is for multiple like fields, you don't blindly wrap it around each and every blasted input/label pair! Likewise the H3 inside LI is complete gibberish, is that a set of sections or a list of bullet points -- pick one not both! Basically as they have perfectly good H3, there is no reason to be treating those as a list of grammatical bullet points or selections making that UL/LI utter nonsense.

The use of button tags and scripting for functionality that no longer warrants scripting or button tags isn't helping matters either. Using the :target attribute in your CSS with anchors a good deal of your markup and scripting could be pitched in the trash.

See my article here for more about that:

http://www.cutcodedown.com/tutorial/modalDialogs

Graceful degradation for old browsers being as simple as just showing the forms at the bottom and the page scrolling to them via the same hash mechanism that lets modern browsers show/hide them.

Blocking scripts in the head, JS for nothing, presentational images in the markup, improperly stuffed keywords and title, endless pointless META not one legitimate UA gives a flying purple fish about, endless pointless DIV for nothing, the pointless HTML 5 redundancies (not a fan), endless pointless classes for nothing due to a lack of attempting to leverage your semantics, improper / broken semantics... hardly a shock it is wasting 18k of markup on 6k of plaintext, ZERO content images, and not even a dozen form elements, possibly as little as 10k's job. Even less code overall since I don't see a whole lot of anything to warrant the PRESENCE of JavaScript other than the generator functionality...

Which I'd have written with a proper form submit and server-side generation FIRST before enhancing it with client-side scripting, opening the door to a wider audience given how script blocking continues to grow in popularity.

 

Thanks for the feedback.
deathshadow, I did not expect such a detailed advice!

 

My current freelance work has me going into places in legal trouble for accessibility shortcomings, or having major hosting issues due to unnecessary server load related to front-end failings. As such I've got a workflow in place for creating these types of breakdowns as part of contract negotiations.

As such it only takes me a minute or two to put together such laundry lists these days.

 

What I don´t like about that site is that "Add to home screen" lightbox that pops up when srolling down. When scrolling down I want to read the site and not to make an exta click for that light box to disappear - I hate such suddenly appearing lightbox ("like us on facebook", "join our mailing list"...). ;-)

Just my opinion, but all in all I guess it´s an useful website.