Log inSign upAdd Service
Visit

Service information

Plans

free

Platforms

website

Description

Fix My Code by UserWay is a free online service that allows you to chat with AI and generate code for accessible login forms and popups. Improve your code and make it more inclusive, usable, and conformant with WCAG 2.1 AA criteria.

🤖💬
chat with ai
🔣💻
generate code for accessible popup
🔧💻
improve code
🔐💻
generate code for accessible login form

Examples

💬🤖

Chat With Ai

#1
inputs

Create an accessible popup

outputs
  • role="dialog" - This role is used to inform assistive technologies that this div is serving as a dialog or popup.
  • aria-labelledby and aria-describedby - These attributes are used to provide accessible names and descriptions to the dialog.
  • aria-hidden - This attribute is used to inform assistive technologies to ignore the contents of the div when it is hidden.
  • aria-label - This attribute is used to give the closing button an accessible name.
  • tabindex="-1" - This attribute is used to make the backdrop unfocusable, which stops keyboard users from being able to interact with it.

On the JavaScript end, we manage the modal's visibility by toggling the aria-hidden attribute.

<div class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDesc" role="dialog" id="popup">

<div class="modal-backdrop" role="presentation" tabindex="-1">

<div class="modal-content">

<header class="modal-header">

<h2 id="modalTitle">Modal Title</h2>

<button class="close-modal" aria-label="Close dialog">X</button>

</header>

<div class="modal-body" id="modalDesc">

<p>Modal Content Here...</p>

</div>

</div>

</div>

</div>

#2
inputs

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Accessible Popup</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<button id="openModalBtn">Open Popup</button>

<div id="popup" class="hidden" role="dialog" aria-labelledby="popupTitle" aria-modal="true">

<div class="popup-content">

<h2 id="popupTitle">Popup Title</h2>

<p>This is some content inside the popup.</p>

<button id="closeModalBtn">Close</button>

</div>

</div>

<script src="scripts.js"></script>

</body>

</html>

outputs

Your updated HTML would look like this:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Accessible Popup</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<button id="openModalBtn" aria-label="Open the popup window" tabindex="0">Open Popup</button>

<div id="popup" class="hidden" role="dialog" aria-labelledby="popupTitle" aria-modal="true" tabindex="-1">

<div class="popup-content">

<h2 id="popupTitle">Popup Title</h2>

<p>This is some content inside the popup.</p>

<button id="closeModalBtn" aria-label="Close the popup window" tabindex="0">Close</button>

</div>

</div>

<script src="scripts.js"></script>

</body>

</html>

#3
inputs

Create an accessible login form

outputs

<!DOCTYPE html>

<html lang="en">

<head>

<title>Accessible Login Form</title>

</head>

<body>

<main>

<h1>Login</h1>

<form>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required />

<label for="password">Password:</label>

<input type="password" id="password" name="password" required />

<input type="submit" value="Log in" />

</form>

</main>

</body>

</html>

Setting the lang attribute in the <html> tag to "en" allows assistive technology to correctly read the page content in English.

The <label> elements are associated with the respective <input> elements using the for attribute. This makes it easier for screen reader users to understand what input the label is describing.

The required attribute has been added to both input fields to ensure that users understand they must fill out these fields before submitting the form.

Similar services

AI Tools Like ChatGPT preview
Learn & Explore the logo
Nemo AI preview
Express Your Feeling logo
GPTs2D preview
GPTS-2D logo
Google
AI Cooking Assistant preview
ChatGPT logo
Share this page: