This repository was archived by the owner on Jul 24, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathaccessibility.html
More file actions
23 lines (23 loc) · 2.97 KB
/
accessibility.html
File metadata and controls
23 lines (23 loc) · 2.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="description" content="Accessibility in web development."><!-- Bing --><meta name="msvalidate.01" content="45CBBE1BD8265A2217DFDA630EB8F84A" /><title>Tiny Brain Fans - Accessibility</title><link rel="stylesheet" href="tinystyle.css"></head><body>
<main id="main"><article id="content"><h1 id="title">Accessibility</h1><h2>Checklist</h2>
<p>Use this <a href="https://www.a11yproject.com/checklist/" target="_blank">checklist</a> to ensure you are doing your best to meet accessibility requirements. Consult best practices[5] for those with low-bandwidth internet.</p>
<h2>Contrast</h2>
<p>There needs to be a contrast of at LEAST 4.5:1 between the background and foreground of colors for readability. </p>
<blockquote>
<p>In WCAG 2, contrast is a measure of the difference in perceived "luminance" or brightness between two colors (the phrase "color contrast" is never used). This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white).</p>
</blockquote>
<h3>Examples</h3>
<h4>Bad</h4>
<ul>
<li><a href="https://webaim.org/resources/contrastchecker/?fcolor=79BE1E&bcolor=CDCDCD" target="_blank">Herbalife Nutrition Nook</a>: <a href="https://herbalifenutritionnook.com/" target="_blank">Website</a></li>
</ul>
<h2>References</h2>
<ol>
<li><a href="https://webaim.org/resources/contrastchecker/" target="_blank">https://webaim.org/resources/contrastchecker/</a></li>
<li><a href="https://webaim.org/articles/contrast/" target="_blank">https://webaim.org/articles/contrast/</a></li>
<li><a href="https://www.a11yproject.com/checklist/" target="_blank">https://www.a11yproject.com/checklist/</a></li>
<li><a href="https://www.w3.org/WAI/test-evaluate/#tools" target="_blank">https://www.w3.org/WAI/test-evaluate/#tools</a></li>
<li><a href="https://seirdy.one/2020/11/23/website-best-practices.html" target="_blank">https://seirdy.one/2020/11/23/website-best-practices.html</a></li>
<li><a href="https://hidde.blog/more-common-a11y-issues/" target="_blank">https://hidde.blog/more-common-a11y-issues/</a></li>
</ol>
<section id="backlinks"><details><summary>Backlinks</summary><ul><li><a href="semantic-html.html">Semantic HTML</a></li></ul></details></section><p class="last-modified">Last modified: 202206101419</p></article></main><footer><nav><a href="index.html">Sitemap</a></nav><div class="social"><p>Built using <a href="http://codeberg.org/milofultz/swiki" target="_blank" rel="noopener noreferrer">{{SWIKI}}</a></p><p><a href="http://codeberg.org/milofultz/" target="_blank" rel="noopener noreferrer">Codeberg</a></p><p><a href="http://milofultz.com/" target="_blank" rel="noopener noreferrer">milofultz.com</a></p><p><a href="https://merveilles.town/@milofultz" target="_blank" rel="me noopener noreferrer">Mastodon</a></p></div></footer></body></html>