jscholes.github.io/contenteditable-with-nested-elements.html at master · jscholes/jscholes.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Content Editable Example 3</title>
	</head>
	<body>
		<header>
			This is a content editable example prepared for screen reader testing.
		</header>
		<main>
			<div contenteditable="true">
				<h1>Document Title</h1>
				<p>Date: September 9th, 2020</p>
				<p>This is an introductory paragraph.</p>
				<a href="https://example.com">Company Website</a>
				<h2>Overview</h2>
				<p>This is an overview section.</p>
				<div role="heading" aria-level="3">Notes</div>
				<ul>
					<li>Note 1</li>
					<li>Note 2</li>
				</ul>
				<h2>Useful Links</h2>
				<div>
					<ul style="list-style: none;">
						<li><a href="https://example.com">Privacy Policy</a></li>
						<li><a href="https://example.com">Terms of Use</a></li>
					</ul>
				</div>
				<div>
					<button aria-expanded="false">More Legal Links</button>
				</div>
				<div>
					<details>
						<summary>Social Media Links</summary>
						<p>This would be a menu of social media links.</p>
					</details>
				</div>
			</div>
		</main>
	</body>
</html>