Current Page Test Case
How do I make an current page test case?
Testing aria-describedby as a combined styling hook / accessible name for "current page" links in navigation schema.. What is a current page test case? How do you make a current page test case? This script and codes were developed by Heydon on 27 August 2022, Saturday.
Current Page Test Case - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Current Page Test Case</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Test case for <code>aria-describedby</code> as a "current page" solution</h1>
<div id="current">current page</div>
<nav role="navigation"> <ul> <li><a href="/" aria-describedby="current">home</a></li> <li><a href="/about">about</a></li> <li><a href="/contact">contact</a></li> </ul>
</nav>
</body>
</html>
Current Page Test Case - Script Codes CSS Codes
body { font-family: arial, sans-serif;
}
h1 { text-align: center;
}
nav li { list-style: none; display: inline-block;
}
[role="navigation"] ul { display: table; border-collapse: collapse; width: 100%; padding: 0;
}
[role="navigation"] li { display: table-cell; width: 1%; border: 1px solid #999999; background: #efefef; vertical-align: middle; text-align: center;
}
[role="navigation"] a { display: block; padding: 0.7em; color: #2630a6; text-decoration: none; border: 0;
}
[role="navigation"] a:hover, [role="navigation"] a:focus, [role="navigation"] [aria-describedby="current"] { background: #2630a6; color: #efefef; outline: none;
}
[role="navigation"] a:active { background: #1d2149;
}
#current { display: none;
}
Developer | Heydon |
Username | heydon |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 1,827 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Accessible, pretty radio controls | 2,112 Kb |
Hash change logging | 2,134 Kb |
Ransom Note With Google Font Subsets | 2,217 Kb |
Content Aware Navigation | 1,950 Kb |
FUN TIMES Competition | 3,473 Kb |
Fukol | 2,461 Kb |
4 columns, no single remainder | 1,563 Kb |
Pixelated Brain Animation | 7,866 Kb |
Theme color inverter with filter | 0 Kb |
Vue.js TODO List | 4,218 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Tree growth tests | Orchard | 3,818 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Tab panels | Accessibility | 0 Kb |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Getting Started | Viblast | 1,500 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Animated Donut Chart | Jplhomer | 3,808 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!