Play Front end
Use the platform.
Match each behavior to the native HTML element that already does it.
Going somewhere is a link's job. A real link can be opened in a new tab, bookmarked, and found in a screen reader's list of links.
Question 2 of 8. It sends the sign-up form. Which element should it be?
Doing something is a button's job. A submit button works with Enter, runs the browser's form validation, and needs no extra script.
Question 3 of 8. A frequently asked question that opens to show its answer in place, even if JavaScript fails. Which element should it be?
details and summary give you an open-and-close section with keyboard support and the right state announcements built in, and they work without any JavaScript.
Question 4 of 8. It asks "Delete this project?" and the rest of the page must wait until the visitor answers. Which element should it be?
A modal dialog makes the rest of the page inert, moves focus into the dialog, and closes with Escape. Building that on a div means rebuilding all of it by hand.
Question 5 of 8. A setting that turns email notifications on or off and is saved with the rest of the settings form. Which element should it be?
An on/off value that is submitted with a form is a checkbox. It has a label, a checked state, and a value the form sends, with nothing extra to wire up.
Question 6 of 8. It shows how much of a file upload has finished. Which element should it be?
progress is for a task moving toward completion, and assistive tech announces its value. meter is for a measurement within a range, such as disk space used.
Question 7 of 8. It shows how full a 10 GB storage plan is. Which element should it be?
Storage used is a measurement within a known range, not a task that finishes, so it's a meter. meter can also mark low, high and optimum ranges.
Question 8 of 8. Five shipping address fields need one shared label, "Shipping address". Which element should group them?
A fieldset's legend is announced along with the fields inside it, so a screen reader user hears "Shipping address" with each field, not just "Street".
Native elements carry years of browser and assistive tech work. Reach for them before writing your own.