Scribd
Upload
0 views

html

The document includes a simple calculator interface and a login form requiring a username and password. It also features a table displaying data for multiple days and a structured list of chapters organized into parts. The content is designed with accessibility in mind, using appropriate roles and tooltips.

Uploaded by

agundajoel11
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

html

The document includes a simple calculator interface and a login form requiring a username and password. It also features a table displaying data for multiple days and a structured list of chapters organized into parts. The content is designed with accessibility in mind, using appropriate roles and tooltips.

Uploaded by

agundajoel11
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<div role="application">

<h1>Calculator</h1>

<input id="num1" type="text"> + <input id="num2" type="text"> =

<span id="result"></span>

</div>

<ul role="directory">

<li><a href="/chapter-1">Chapter 1</a></li>

<li><a href="/chapter-2">Chapter 2</a></li>

<li><a href="/chapter-3">Chapter 3</a></li>

</ul>

<form action="">

<fieldset>

<legend>Login form</legend>

<div>

<label for="username">Your username</label>

<input type="text" id="username" aria-describedby="username-tip" required />

<div role="tooltip" id="username-tip">Your username is your email address</div>

</div>

<div>

<label for="password">Your password</label>

<input type="text" id="password" aria-describedby="password-tip" required />

<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>

</div>

</fieldset>
<form action="">

<fieldset>

<legend>Login form</legend>

<div>

<label for="username">Your username</label>

<input type="text" id="username" aria-describedby="username-tip" required />

<div role="tooltip" id="username-tip">Your username is your email address</div>

</div>

<div>

<label for="password">Your password</label>

<input type="text" id="password" aria-describedby="password-tip" required />

<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>

</div>

</fieldset>

</form>

<table role="grid">

<thead>

<!-- etc -->

</thead>

<tbody>

<tr>

<th role="rowheader">Day 1</th>

<td>65</td>

</tr>

<tr>
<th role="rowheader">Day 2</th>

<td>74</td>

</tr>

</tbody>

</table>

<ul role="tree">

<li role="treeitem">

Part 1

<ul>

<li role="treeitem">Chapter 1</li>

<li role="treeitem">Chapter 2</li>

<li role="treeitem">Chapter 3</li>

</ul>

</li>

<li role="treeitem">

Part 2

<ul>

<li role="treeitem">Chapter 4</li>

<li role="treeitem">Chapter 5</li>

<li role="treeitem">Chapter 6</li>

</ul>

</li>

<li role="treeitem">

Part 3
<ul>

<li role="treeitem">Chapter 7</li>

<li role="treeitem">Chapter 8</li>

<li role="treeitem">Chapter 9</li>

</ul>

</li>

</ul>

You might also like