diff options
Diffstat (limited to '')
| -rw-r--r-- | doc/accessibility/ifont-mute.html | 21 | ||||
| -rw-r--r-- | doc/accessibility/ifont.html | 18 | ||||
| -rw-r--r-- | doc/accessibility/link-labels.html | 15 | ||||
| -rw-r--r-- | doc/accessibility/required-form-elements.html | 19 | ||||
| -rw-r--r-- | doc/accessibility/skip-content.html | 179 | ||||
| -rw-r--r-- | doc/accessibility/svg.html | 19 | ||||
| -rw-r--r-- | doc/accessibility/text-cue-for-required-form-control-labels.html | 36 |
7 files changed, 307 insertions, 0 deletions
diff --git a/doc/accessibility/ifont-mute.html b/doc/accessibility/ifont-mute.html new file mode 100644 index 0000000..f8252e3 --- /dev/null +++ b/doc/accessibility/ifont-mute.html @@ -0,0 +1,21 @@ +<!doctype html> +<html class="no-js" lang="en"> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Accessibility: Muted Icon Fonts</title> + <meta name="description" content="Accessible icon fonts"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style type="text/css"> + .icon-star:before { + content: "★"; + } + </style> +</head> +<body> +<a href="#"> + <i aria-hidden="true" class="icon-star"></i> + Visit top rated article +</a> +</body> +</html> diff --git a/doc/accessibility/ifont.html b/doc/accessibility/ifont.html new file mode 100644 index 0000000..32f1221 --- /dev/null +++ b/doc/accessibility/ifont.html @@ -0,0 +1,18 @@ +<!doctype html> +<html class="no-js" lang="en"> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Accessibility: Icon Fonts</title> + <meta name="description" content="Accessible icon fonts"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style type="text/css"> + .icon-star:before { + content: "★"; + } + </style> +</head> +<body> + <i role="img" class="icon-star" aria-label="Top rated article" title="Top rated article"></i> +</body> +</html>
\ No newline at end of file diff --git a/doc/accessibility/link-labels.html b/doc/accessibility/link-labels.html new file mode 100644 index 0000000..439adb8 --- /dev/null +++ b/doc/accessibility/link-labels.html @@ -0,0 +1,15 @@ +<!doctype html> +<html class="no-js" lang="en"> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Accessibility: Link Labels</title> + <meta name="description" content="Accessible links"> + <meta name="viewport" content="width=device-width, initial-scale=1"> +</head> +<body> + <a href="/monitoring/host/show?host=localhost" + title="Show detailed information about the host localhost" + aria-label="Show detailed information about the host localhost">localhost</a> +</body> +</html>
\ No newline at end of file diff --git a/doc/accessibility/required-form-elements.html b/doc/accessibility/required-form-elements.html new file mode 100644 index 0000000..86fc937 --- /dev/null +++ b/doc/accessibility/required-form-elements.html @@ -0,0 +1,19 @@ +<!doctype html> +<html class="no-js" lang="en"> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Accessibility: Required form elements</title> + <meta name="description" content="Required form elements"> + <meta name="viewport" content="width=device-width, initial-scale=1"> +</head> +<body> + <form> + <label> + Enter some text: + <input type="text" name="some_text" value="" aria-required="true" required> + </label> + <input type="submit" name="btn_submit" value="Submit"> + </form> +</body> +</html>
\ No newline at end of file diff --git a/doc/accessibility/skip-content.html b/doc/accessibility/skip-content.html new file mode 100644 index 0000000..3c1b2b4 --- /dev/null +++ b/doc/accessibility/skip-content.html @@ -0,0 +1,179 @@ +<!doctype html> +<html class="no-js" lang="en"> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Accessibility: Skip Links</title> + <meta name="description" content="Accessible skip links"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style type="text/css"> + .sr-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + .clearfix { + *zoom: 1; + } + .clearfix:before, + .clearfix:after { + display: table; + content: ""; + line-height: 0; + } + .clearfix:after { + clear: both; + } + body { + margin: 0; + padding: 0; + } + .head { + background-color: #049baf; + padding: 5px; + } + .nav { + width: 200px; + float: left; + margin: 0 20px 20px 0; + padding: 0 20px 20px 0; + } + .container { + margin: 10px 0 0 0; + } + .content { + overflow: auto; + } + .skip-links { + position: absolute; + opacity: 1; + } + .skip-links-inline { + margin-top: -3.5em; + } + .skip-links ul { + list-style-type: none; + margin: 0; + padding: 0; + } + .skip-links ul li { + display: inline; + margin: 0; + padding: 0; + } + .skip-links ul li a { + position: absolute; + display: block; + left: -999em; + width: 200px; + padding: 0.6em; + background-color: white; + } + .skip-links ul li a:focus { + left: 0; + } + </style> +</head> +<body> + <div class="head"> + <div class="skip-links"> + <nav> + <h1 class="sr-only">Skip Links</h1> + <ul> + <li><a tabindex="0" href="#content">Skip to Content</a></li> + <li><a tabindex="0" href="#searchField">Skip to Search</a></li> + <li><a tabindex="0" href="#navigation">Skip to Navigation</a></li> + </ul> + </nav> + </div> + <div id="logo"> + <a href="skip-content.html"> + <img width="92" height="32" title="" alt="" src="data:image/png;base64,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" /> + </a> + </div> + </div> + <div class="container clearfix"> + <div class="nav"> + <h1 class="sr-only">Navigation</h1> + + <div id="search"> + <h2 class="sr-only">Search</h2> + <form> + <fieldset> + <label for="searchField">Search</label> + <input type="text" name="searchField" id="searchField" /> + </fieldset> + </form> + </div> + <nav> + <h2 id="navigation" tabindex="0" class="sr-only">Site Links</h2> + <ul> + <li><a href="#">Link1</a></li> + <li><a href="#">Link2</a></li> + <li><a href="#">Link3</a></li> + </ul> + </nav> + </div> + <div class="content"> + <h1 tabindex="0" id="content">Content</h1> + <div class="skip-links skip-links-inline"> + <nav> + <ul> + <li><a tabindex="0" href="#content2">Skip content</a></li> + </ul> + </nav> + </div> + <p> + Organised prehistoric cultures began developing on Bulgarian lands + during the Neolithic period. Its ancient history saw the presence + of the Thracians and later the Greeks and Romans. The emergence of + a unified Bulgarian state dates back to the establishment of the + <a href="#">First Bulgarian Empire</a> + in 681 CE, which dominated most of the + Balkans and functioned as a cultural hub for Slavs during the + Middle Ages. + </p> + <p> + With the downfall of the Second Bulgarian Empire in 1396, its + <a href="#">territories came under Ottoman</a> + rule for nearly five centuries. + The Russo-Turkish War (1877–78) led to the formation of the Third + Bulgarian State. The following years saw several conflicts with its + neighbours, which prompted Bulgaria to align with Germany in both + world wars. + </p> + <p> + In 1946 it became a single-party socialist state as part of the + Soviet-led Eastern Bloc. In December 1989 the ruling Communist + Party allowed multi-party elections, which subsequently led to + Bulgaria's transition into a democracy and a market-based economy. + </p> + + <h1 tabindex="0" id="content2">Content2</h1> + <p> + The development of Final Fantasy VIII began in 1997, during the + English localization process of Final Fantasy VII. It was produced + <a href="#">by Shinji Hashimoto</a>, + and directed by Yoshinori Kitase. The music + was scored by regular series composer Nobuo Uematsu, and in a + series first a vocal piece was written as the game's theme, "Eyes + on Me", performed by Faye Wong. + </p> + <p> + The game was positively received by + critics, + <a href="#">who praised the originality </a> + and scope of the game. It was + voted the 22nd-best game of all time in 2006 by readers of the + Japanese magazine Famitsu. The game was a commercial success; + thirteen weeks after its release, + </p> + </div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/doc/accessibility/svg.html b/doc/accessibility/svg.html new file mode 100644 index 0000000..8ee548f --- /dev/null +++ b/doc/accessibility/svg.html @@ -0,0 +1,19 @@ +<!doctype html> +<html class="no-js" lang="en"> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Accessibility: SVGs</title> + <meta name="description" content="Accessible icon fonts"> + <meta name="viewport" content="width=device-width, initial-scale=1"> +</head> +<body> +<svg version="1.2" role="img" aria-labelledby="title desc" tabindex="0"> + <title id="title">A Circle</title> + <desc id="desc">A red circle with a black border.</desc> + <circle cy="50" cx="50" r="50" stroke="black" stroke-width="1" fill="red" /> +</svg> +</body> +</html> + + diff --git a/doc/accessibility/text-cue-for-required-form-control-labels.html b/doc/accessibility/text-cue-for-required-form-control-labels.html new file mode 100644 index 0000000..1dd38eb --- /dev/null +++ b/doc/accessibility/text-cue-for-required-form-control-labels.html @@ -0,0 +1,36 @@ +<!doctype html> +<html class="no-js" lang="en"> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Accessibility: Text cue for required form control labels</title> + <meta name="description" content="Text cue for required form control labels"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style type="text/css"> + label.required span.required-indicator:after { + content: " *"; + } + .sr-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + </style> +</head> +<body> + <form> + <label class="required"> + Enter some text + <span class="required-indicator" aria-hidden="true"></span> + <span class="sr-only"> (required)</span> + <input type="text" name="some_text" value="" aria-required="true" required> + </label> + <input type="submit" name="btn_submit" value="Submit"> + </form> +</body> +</html>
\ No newline at end of file |