baseof.html starter

This commit is contained in:
Heydon Pickering 2017-06-12 19:05:48 +08:00
parent db12ddad58
commit 9c6be0cf25
8 changed files with 1424 additions and 1667 deletions

View File

@ -8,3 +8,5 @@ wcag = ["1-1-1"]
{{% principles include="add value" %}} {{% 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> <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" %}}

View File

@ -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", "ref_id": "1.1.1",
"title": "Non-text Content", "title": "Non-text Content",
@ -66,21 +48,7 @@
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html" "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", "ref_id": "1.2.1",
"title": "Audio-only and Video-only (Prerecorded", "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" "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", "ref_id": "1.3.1",
"title": "Info and Relationships", "title": "Info and Relationships",
@ -337,21 +291,7 @@
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html" "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", "ref_id": "1.4.1",
"title": "Use of Color", "title": "Use of Color",
@ -621,29 +561,7 @@
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-images.html" "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", "ref_id": "2.1.1",
"title": "Keyboard", "title": "Keyboard",
@ -711,21 +629,7 @@
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-all-funcs.html" "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", "ref_id": "2.2.1",
"title": "Timing Adjustable", "title": "Timing Adjustable",
@ -879,21 +783,7 @@
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-server-timeout.html" "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", "ref_id": "2.3.1",
"title": "Three Flashes or Below Threshold", "title": "Three Flashes or Below Threshold",
@ -935,21 +825,7 @@
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-three-times.html" "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", "ref_id": "2.4.1",
"title": "Bypass Blocks", "title": "Bypass Blocks",
@ -1146,29 +1022,7 @@
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html" "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", "ref_id": "3.1.1",
"title": "Language of Page", "title": "Language of Page",
@ -1282,21 +1136,7 @@
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-pronunciation.html" "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", "ref_id": "3.2.1",
"title": "On Focus", "title": "On Focus",
@ -1391,21 +1231,7 @@
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html" "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", "ref_id": "3.3.1",
"title": "Error Identification", "title": "Error Identification",
@ -1551,29 +1377,7 @@
"url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-reversible-all.html" "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", "ref_id": "4.1.1",
"title": "Parsing", "title": "Parsing",
@ -1621,7 +1425,3 @@
] ]
} }
] ]
}
]
}
]

View File

@ -1,15 +1,10 @@
{{ partial "header.html" . }} {{ define "title" }}
{{ .Title }}
{{ end }}
{{ define "main" }}
<main id="main"> <main id="main">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ .Content }} {{ .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> </main>
{{ partial "footer.html" . }} {{ end }}

View File

@ -1,3 +1,6 @@
<footer role="contentinfo">By Heydon Pickering</footer>
</div>
</div>
<script src="/js/prism.js"></script> <script src="/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="/js/dom-scripts.js"></script>
</body> </body>

View File

@ -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>

View File

@ -1 +0,0 @@
<strong>1.1.1</strong> This is the description of 1.1.1

View File

@ -1,9 +1,8 @@
{{ $JSON := $.Site.Data.principles }} {{ $JSON := $.Site.Data.principles }}
{{ $included := split (.Get "include") ", " }} {{ $included := split (.Get "include") ", " }}
<ul> <ul class="principles">
{{ range $JSON.principles }} {{ range $JSON.principles }}
{{ $title := lower .title }} {{ if in $included (lower .title) }}
{{ if in $included $title }}
<li> <li>
<strong><a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">{{ .title }}</a>:</strong> {{ .strapline }} <strong><a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">{{ .title }}</a>:</strong> {{ .strapline }}
</li> </li>

View File

@ -73,7 +73,7 @@ h1, h2, h3, h4 {
} }
h1 { h1 {
font-size: 2.25rem; font-size: 2rem;
} }
h2 { h2 {
@ -103,6 +103,20 @@ code {
font-size: 0.85rem; 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 */ /* Buttons */
button { button {