-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (109 loc) · 8.3 KB
/
index.html
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Introducing Web Acessibility for Javascript Developers</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/main-menu.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<a href="#main-content" class="skip-link visuallyhidden focusable">Skip to main content</a>
<nav role="navigation" id="main-menu">
<button id="main-menu-button"><i class="fa fa-bars"></i><span class="visuallyhidden">Main Menu</span></button>
<ul id="main-menu-list">
<li><a href="http://www.bbc.co.uk/news/disability">Disability</a></li>
<li><a href="http://www.bbc.co.uk/news/technology">Technology</a></li>
<li><a href="http://www.bbc.co.uk/news/science_and_environment">Science and Environment</a></li>
<li><a href="http://www.bbc.co.uk/news/health">Health</a></li>
<li><a href="http://www.bbc.co.uk/news/education">Education</a></li>
<li><a href="http://www.bbc.co.uk/news/entertainment_and_arts">Entertainment and Arts</a></li>
<li><a href="http://www.bbc.co.uk/news/special_reports">Special Reports</a></li>
</ul>
</nav>
<div role="banner" class="header">
<h1>Introducing Web Acessibility for Javascript Developers</h1>
</div>
<div role="complementary" class="sidebar">
<h2>W3C Accessibility Documents</h2>
<ul>
<li><a href="https://www.w3.org/TR/html5/">HTML5</a></li>
<li><a href="https://www.w3.org/WAI/">Web Accessibility Initiative (WAI)</a></li>
<li><a href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a></li>
<li><a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA) 1.0</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a></li>
<li><a href="https://www.w3.org/TR/aria-in-html/">Notes on Using ARIA in HTML</a></li>
</ul>
<h2>News Links</h2>
<ul>
<li><a href="http://www.bbc.co.uk/news/uk">BBC News UK</a></li>
<li><a href="http://www.bbc.co.uk/news/england/leeds_and_west_yorkshire">BBC News Leeds & West Yorkshire</a></li>
<li><a href="http://www.bbc.co.uk/weather/">BBC Weather</a></li>
<li><a href="http://www.bbc.co.uk/accessibility/">BBC Accessibility Help</a></li>
</ul>
</div>
<div id="main-content" role="main" class="main" tabindex=-1>
<h2>Introduction</h2>
<p>Hello world! This was started with the <a href="https://html5boilerplate.com/">HTML5 Boilerplate</a>. Like most unimaginative web designers, I naturally stuck a huge chunk of <a href="https://en.wikipedia.org/wiki/Lorem_ipsum">Lorem Ipsum</a> text in here to pad it out. If we're lucky, I might get around to adding a sidebar or footer to make it look like a real website.</p>
<h2>An interesting fact (or two)</h2>
<p>Lorem ipsum dolor sit amet, diceret utroque gubergren vim ut, mei at sanctus adversarium. Mucius periculis interpretaris mea et, duis natum ut ius. Ad pri soluta oporteat senserit, falli euripidis incorrupte vel ut, ex vivendo appetere voluptatibus vis. In audire invidunt vix, eius aeque omittantur usu te. Inani dicam atomorum id has, ea qui vitae nonumes. Duo novum tempor gloriatur ex.
</p>
<p>
Vidisse noluisse ut quo. Decore inermis consequat duo ea, at autem vituperata vel. Pro id doming discere. Mea te aperiri philosophia. Ad sed viris facilisis.
</p>
<h2>Why this matters</h2>
<p>
Sit te dolores ancillae consetetur. Ei eos hinc aliquam equidem, ut ceteros nostrum qualisque duo, vel eu doctus hendrerit. Sale essent eleifend eum cu, cu magna inimicus eum. Admodum liberavisse vix no, per audiam prodesset reformidans in, in stet veri ubique duo. At vero malorum quo, ne per ipsum albucius appareat. Ex vix veri meis, cum fugit moderatius ea.
</p>
<h3>Labouring the point with a 3rd-level heading</h3>
<p>
Per ut quando delectus luptatum, eius accumsan similique te est, clita erroribus maiestatis sea ad. Ex errem postulant liberavisse pri, tempor persecuti reprehendunt mei no, nam possim equidem dolorem in. Eu eum omittam iracundia. Pri at semper scripta voluptaria. Ut cum soleat imperdiet adversarium. Omnium expetenda vulputate te vix, mea ex postea philosophia.
</p>
<h3>Would you like to know more?</h3>
<p>
Iudico nullam commodo ea vix, ad has case viderer epicuri. Semper vidisse mnesarchum pri in. Est ei eleifend prodesset consetetur, ad velit apeirian duo, ne nec suscipit deterruisset. Case eros audiam duo ea, in his dicit hendrerit instructior. Cum eu laudem suscipit, malis persecuti at eum, fierent definitionem an ius. Graecis salutatus dissentiet pri in, vitae meliore at vel.
</p>
<h2>Only 48 hours to save the world!</h2>
<p>
Ut intellegat expetendis voluptatum sed, ne accusata suavitate philosophia quo. Nec soluta reprimique cu, in duo unum simul legimus. Graeci aperiri eos ei. Nam offendit iracundia ne.
</p>
<h3>Gordon's Alive!</h3>
<p>(Well, it is the best line from any movie, ever.)</p>
<p>
Ius ne elit veniam tritani, quo ad nihil democritum concludaturque. Ex pri suas regione vituperata, ei offendit ullamcorper eum. Perpetua signiferumque sed id, fabulas molestiae constituam sed eu. Noluisse erroribus aliquando no duo. Tibique evertitur ius id, has wisi elitr ut, usu no adolescens elaboraret suscipiantur.
</p>
<p>
Malis nihil iisque an pri, id ceteros verterem eum. Te mei tation phaedrum. Pri dicat tollit aliquid eu. Ne mea modo dicunt, nusquam senserit intellegat ea quo, cum voluptaria vituperatoribus in. Ex dico accusata incorrupte mel, essent dolorum in pro.
</p>
<p>
Sit idque ridens torquatos ex, dicat repudiare no per, ut velit insolens periculis est. Eu sed graeco utroque omittantur, quas vivendo legendos in sed. Te dolore dicunt eruditi eos, nam ea rebum interpretaris, his denique propriae albucius ad. Ea suas nobis audire pri, eos agam labitur offendit ut. Duo ad magna suscipit. Tantas dictas nominati ad mei, clita nominati ne eam.
</p>
<h2>Wrapping Up</h2>
<p>
Sed delicata cotidieque id, hinc ancillae liberavisse in mel, quo ad doming causae delicatissimi. Cum veri error perpetua an. Duo ea illum graece aliquip, dicam verear ex per, ex sed impetus mnesarchum. Ponderum accommodare eu qui, ei decore conceptam vituperatoribus sea. Quodsi labores consulatu cum te, dictas fierent honestatis pro te, ad cum rebum legendos.
</p>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/main-menu.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>