Skip to content

Target size testing #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
faidootdoot merged 15 commits into from
Apr 14, 2025
Merged

Target size testing #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
975fa06
Create TargetSizeExp.html
STWoo2022 Mar 18, 2025
de09373
Update README.md
faidootdoot Mar 18, 2025
605c80c
Update TargetSizeExp.html
faidootdoot Mar 18, 2025
64f6278
Update TargetSizeExp.html
faidootdoot Mar 18, 2025
7089c9c
Update TargetSizeExp.html
faidootdoot Mar 18, 2025
665856c
Update TargetSizeExp.html
faidootdoot Mar 20, 2025
64e7b15
Update TargetSizeExp.html
faidootdoot Mar 20, 2025
9f1cd63
Update TargetSizeExp.html
faidootdoot Mar 20, 2025
2560556
Update TargetSizeExp.html
faidootdoot Mar 20, 2025
97535d9
Update TargetSizeExp.html
faidootdoot Mar 20, 2025
a26cfd1
Update TargetSizeExp.html
faidootdoot Mar 20, 2025
f673392
Update TargetSizeExp.html
faidootdoot Mar 20, 2025
231f71f
Update TargetSizeExp.html
faidootdoot Mar 20, 2025
3d8f6c1
Update TargetSizeExp.html
faidootdoot Mar 20, 2025
488d26c
Update TargetSizeExp.html
faidootdoot Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions CodeSnippets/TargetSizeExp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Target size test</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.row {
display: flex;
gap: 1px;
}
.column {
display: flex;
flex-direction: column;
gap: 1px;
}
.circle {
width: 100px;
height: 100px;
border: 2px solid black;
border-radius: 50%;
position: absolute;
}
.circle1 {
top: 50px;
left: 50px;
}
.circle2 {
top: 100px;
left: 100px;
}
.circle3 {
top: 150px;
left: 150px;
}
.button {
width: 20px;
height: 10px;
border: 2px solid black;
background-color: transparent;
position: absolute;
cursor: pointer;
}
.button1 {
top: 5px;
left: 5px;
}
.button2 {
top: 15px;
left: 15px;
}
.button3 {
top: 25px;
left: 25px;
}
</style>
</head>
<body>
<button class="button button1">Button 1</button>
<button class="button button2">Button 2</button>
<button class="button button3">Button 3</button>

<p>Circles</p>
<button class="circle circle1" tabindex="0"></button>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<hr/>
<p>Buttons</p>
<div class="container">
<div class="row">
<button>A</button>
<button>B</button>
</div>
<div class="column">
<button>C</button>
<button>D</button>
</div>
</div>
</body>
</html>
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# Accessibility
This repository is to document my hands on learning of Accessibility

Need to [Tool Tip Test](/CodeSnippets/ToolTipTest.html)
[Tool Tip Test](/CodeSnippets/ToolTipTest.html)

[Target Size Test](/CodeSnippets/TargetSizeExp.html)