baseof.html starter
This commit is contained in:
Heydon Pickering
parent
db12ddad58
commit
9c6be0cf25
|
|
@ -8,3 +8,5 @@ wcag = ["1-1-1"]
|
|||
{{% principles include="add value" %}}
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
|
||||
|
||||
{{% wcag include="1.1.1" %}}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,4 @@
|
|||
[
|
||||
{
|
||||
"ref_id": "1",
|
||||
"title": "Perceivable",
|
||||
"description": "Information and user interface components must be presentable to users in ways they can perceive.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#perceivable",
|
||||
"guidelines": [
|
||||
{
|
||||
"ref_id": "1.1",
|
||||
"title": "Text Alternatives",
|
||||
"description": "Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#text-equiv",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 1.1",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "1.1.1",
|
||||
"title": "Non-text Content",
|
||||
|
|
@ -66,21 +48,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "1.2",
|
||||
"title": "Time-based Media",
|
||||
"description": "Provide alternatives for time-based media.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#media-equiv",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 1.2",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "1.2.1",
|
||||
"title": "Audio-only and Video-only (Prerecorded",
|
||||
|
|
@ -262,21 +230,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-live-audio-only.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "1.3",
|
||||
"title": "Adaptable",
|
||||
"description": "Create content that can be presented in different ways (for example simpler layout) without losing information or structure.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#content-structure-separation",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 1.3",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "1.3.1",
|
||||
"title": "Info and Relationships",
|
||||
|
|
@ -337,21 +291,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "1.4",
|
||||
"title": "Distinguishable",
|
||||
"description": "Make it easier for users to see and hear content including separating foreground from background.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#visual-audio-contrast",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 1.4",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "1.4.1",
|
||||
"title": "Use of Color",
|
||||
|
|
@ -621,29 +561,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-images.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "2",
|
||||
"title": "Operable",
|
||||
"description": "User interface components and navigation must be operable.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#operable",
|
||||
"guidelines": [
|
||||
{
|
||||
"ref_id": "2.1",
|
||||
"title": "Keyboard Accessible",
|
||||
"description": "Make all functionality available from a keyboard.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#keyboard-operation",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 2.1",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "2.1.1",
|
||||
"title": "Keyboard",
|
||||
|
|
@ -711,21 +629,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-all-funcs.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "2.2",
|
||||
"title": "Enough Time",
|
||||
"description": "Provide users enough time to read and use content.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#time-limits",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 2.2",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "2.2.1",
|
||||
"title": "Timing Adjustable",
|
||||
|
|
@ -879,21 +783,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-server-timeout.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "2.3",
|
||||
"title": "Seizures",
|
||||
"description": "Do not design content in a way that is known to cause seizures.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#seizure",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 2.3",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "2.3.1",
|
||||
"title": "Three Flashes or Below Threshold",
|
||||
|
|
@ -935,21 +825,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-three-times.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "2.4",
|
||||
"title": "Navigable",
|
||||
"description": "Provide ways to help users navigate, find content, and determine where they are.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#navigation-mechanisms",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 2.4",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "2.4.1",
|
||||
"title": "Bypass Blocks",
|
||||
|
|
@ -1146,29 +1022,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "3",
|
||||
"title": "Understandable",
|
||||
"description": "Information and the operation of user interface must be understandable.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#understandable",
|
||||
"guidelines": [
|
||||
{
|
||||
"ref_id": "3.1",
|
||||
"title": "Readable",
|
||||
"description": "Make text content readable and understandable.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#meaning",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 3.1",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "3.1.1",
|
||||
"title": "Language of Page",
|
||||
|
|
@ -1282,21 +1136,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-pronunciation.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "3.2",
|
||||
"title": "Predictable",
|
||||
"description": "Make Web pages appear and operate in predictable ways.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#consistent-behavior",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 3.2",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "3.2.1",
|
||||
"title": "On Focus",
|
||||
|
|
@ -1391,21 +1231,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "3.3",
|
||||
"title": "Input Assistance",
|
||||
"description": "Help users avoid and correct mistakes.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#minimize-error",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 3.3",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "3.3.1",
|
||||
"title": "Error Identification",
|
||||
|
|
@ -1551,29 +1377,7 @@
|
|||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-reversible-all.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"ref_id": "4",
|
||||
"title": "Robust",
|
||||
"description": "Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#robust",
|
||||
"guidelines": [
|
||||
{
|
||||
"ref_id": "4.1",
|
||||
"title": "Compatible",
|
||||
"description": "Maximize compatibility with current and future user agents, including assistive technologies.",
|
||||
"url": "https://www.w3.org/TR/WCAG20/#ensure-compat",
|
||||
"references": [
|
||||
{
|
||||
"title": "Understanding Guideline 4.1",
|
||||
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat.html"
|
||||
}
|
||||
],
|
||||
"success_criteria": [
|
||||
{
|
||||
"ref_id": "4.1.1",
|
||||
"title": "Parsing",
|
||||
|
|
@ -1620,8 +1424,4 @@
|
|||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
{{ partial "header.html" . }}
|
||||
<main id="main">
|
||||
{{ define "title" }}
|
||||
{{ .Title }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<main id="main">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
|
||||
{{ if .Params.wcag }}
|
||||
<h2>Relevant WCAG References</h2>
|
||||
<ul class="wcag">
|
||||
{{ range .Params.wcag }}
|
||||
<li>{{ partial (printf "wcag/%s.html" .) }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<footer role="contentinfo">By Heydon Pickering</footer>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="{{ .Permalink }}">
|
||||
{{ if .RSSLink }}
|
||||
<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Title }}" />
|
||||
{{ end }}
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>{{ .Title }} | {{ .Site.Title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav aria-label="library">
|
||||
<div id="sidebar" class="nav-collapse">
|
||||
<!-- sidebar menu start-->
|
||||
<ul class="sidebar-menu">
|
||||
{{ $currentNode := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ if .HasChildren }}
|
||||
|
||||
<li class="sub-menu{{if $currentNode.HasMenuCurrent "main" . }} active{{end}}">
|
||||
<a href="javascript:;" class="">
|
||||
{{ .Pre }}
|
||||
<!--<i class="icon_desktop"></i>-->
|
||||
<span>{{ .Name }}</span>
|
||||
<span class="menu-arrow fa {{if $currentNode.HasMenuCurrent "main" . }}fa-angle-down{{else}}fa-angle-right{{end}}"></span>
|
||||
</a>
|
||||
<ul class="sub{{if $currentNode.HasMenuCurrent "main" . }} open{{end}}">
|
||||
{{ range .Children }}
|
||||
<li{{if $currentNode.IsMenuCurrent "main" . }} class="active"{{end}}><a href="{{.URL}}">{{ .Name }}</a> </li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{else}}
|
||||
<li>
|
||||
<a class="" href="{{.URL}}">
|
||||
{{ .Pre }}
|
||||
<!--<i class="icon_house_alt"></i>-->
|
||||
<span>{{ .Name }}</span>
|
||||
</a>
|
||||
{{end}}
|
||||
</li>
|
||||
{{end}}
|
||||
<li> <a href="https://github.com/spf13/hugo/issues" target="blank"><i class='fa fa-life-ring'></i> <span>Issues & Help</span></a> </li>
|
||||
{{ if .IsPage }}
|
||||
{{ $File := .File }} {{with $File.Path }}<li><a href="https://github.com/spf13/hugo/edit/master/docs/content/{{ $File.Dir }}{{ $File.LogicalName }}" target="blank"><i class='fa fa-edit'></i> Refine this Page</a> </li>{{end}}
|
||||
{{ end }}
|
||||
</ul>
|
||||
<!-- sidebar menu end-->
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<strong>1.1.1</strong> This is the description of 1.1.1
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
{{ $JSON := $.Site.Data.principles }}
|
||||
{{ $included := split (.Get "include") ", " }}
|
||||
<ul>
|
||||
<ul class="principles">
|
||||
{{ range $JSON.principles }}
|
||||
{{ $title := lower .title }}
|
||||
{{ if in $included $title }}
|
||||
{{ if in $included (lower .title) }}
|
||||
<li>
|
||||
<strong><a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">{{ .title }}</a>:</strong> {{ .strapline }}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ h1, h2, h3, h4 {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -103,6 +103,20 @@ code {
|
|||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* List */
|
||||
|
||||
main ul {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
main ul ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wcag ul li {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
button {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user