Work on article

basham · Sep 16, 2024 · 5eb59c4 · 5eb59c4
1 parent 47693e9
commit 5eb59c4
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 22 deletions.
diff --git a/src/components/Aside.astro b/src/components/Aside.astro
@@ -6,7 +6,7 @@
 
 <style>
 	aside {
-		border: var(--2px) solid var(--color-link);
+		border: var(--border);
 		border-radius: var(--4px);
 		margin-top: var(--16px);
 		padding: 0 var(--16px) var(--16px);

diff --git a/src/components/CodeFigure.astro b/src/components/CodeFigure.astro
@@ -9,14 +9,13 @@ const { label } = Astro.props;
 
 <style>
 	figure {
-		border: var(--2px) solid var(--color-link);
+		border: var(--border);
 		border-radius: var(--4px);
+		padding: var(--2px);
 	}
 
 	figcaption {
-		background-color: var(--color-link);
-		border-bottom: var(--2px) solid var(--color-link);
-		color: var(--color-base);
+		background-color: var(--color-border);
 		padding: 0.5em 1em;
 	}
 

diff --git a/src/components/Figure.astro b/src/components/Figure.astro
@@ -11,14 +11,13 @@ const { label } = Astro.props;
 
 <style>
 	figure {
-		border: var(--2px) solid var(--color-link);
+		border: var(--border);
 		border-radius: var(--4px);
+		padding: var(--2px);
 	}
 
 	figcaption {
-		background-color: var(--color-link);
-		border-bottom: var(--2px) solid var(--color-link);
-		color: var(--color-base);
+		background-color: var(--color-border);
 		padding: 0.5em 1em;
 	}
 

diff --git a/src/components/ImpactMapFigure.astro b/src/components/ImpactMapFigure.astro
@@ -11,14 +11,13 @@ const { label } = Astro.props;
 
 <style>
 	figure {
-		border: var(--2px) solid var(--color-link);
+		border: var(--border);
 		border-radius: var(--4px);
+		padding: var(--2px);
 	}
 
 	figcaption {
-		background-color: var(--color-link);
-		border-bottom: var(--2px) solid var(--color-link);
-		color: var(--color-base);
+		background-color: var(--color-border);
 		padding: 0.5em 1em;
 	}
 
@@ -38,6 +37,7 @@ const { label } = Astro.props;
 
 	.im li {
 		list-style-type: none;
+		margin-top: 0.5em;
 	}
 
 	.im li strong:first-child {

diff --git a/src/content/writings/2024-08-22-usable.mdx b/src/content/writings/2024-08-22-usable.mdx
@@ -30,7 +30,7 @@ Writing is accessible if readers have the ability to distinguish the content in
 
 Images and visualizations that convey information should have a text description. Audio and video should have captions, descriptions, and transcripts.
 
-For example, the alternative text for the image `tomatoes.jpg` could describe the quantity ("cluster"), quality ("ripe"), type ("cherry"), and location ("community garden") of the subject ("tomatoes"). It is rich in meaning, much more than if the alternative text was merely a statement of the subject ("Tomatoes").
+For example, the alternative text for the image `tomatoes.jpg` could describe the quantity ("cluster"), quality ("ripe"), type ("cherry"), and location ("community garden") of the subject ("tomatoes"). It more rich in meaning than if the alternative text was merely a statement of the subject ("Tomatoes").
 
 ```html
 <!-- Rich description -->
@@ -44,19 +44,19 @@ For example, the alternative text for the image `tomatoes.jpg` could describe th
 <img src="tomatoes.jpg">
 ```
 
-These text alternatives also help those who do not use assistive technology (like a screen reader or braille display). For example, those who are not hard of hearing can still benefit from captions when in a noisy room or in a situation in which they are trying to be quiet.
+These text alternatives also help those who do not use assistive technology, such as a screen reader or braille display. For example, those who are not hard of hearing can still benefit from captions when in a noisy room or in a situation in which they are trying to be quiet.
 
 See: [WCAG Success Criteria 1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) (Level A)
 
 ### Not only color
 
 Don't just use color as the only way to distinguish content.
 
-For example, someone who is colorblind may need more than just red text coloring to understand what fields in a form is required.
+For example, someone who is colorblind may need more than just text colored red to understand what fields in a form is required.
 
 > Required fields are displayed in red
 
-Complement color with some visual redundancy like a symbol or unique pattern.
+Complement color with some visual redundancy like a symbol or unique background pattern.
 
 > Required fields are displayed in red and marked with an asterisks (*)
 
@@ -150,6 +150,43 @@ The Rivet visibility utilities allows you to control the visibility of content.
 
 ## Usable writing is navigable
 
+When landing on a webpage, you need to get oriented, move around, and navigate to other pages. This can be done with titles, headings, landmarks, and links.
+
+### Page title
+
+Parts of title should be ordered from more specific to less specific. Use a consistent delimiter between parts of the title (`-`, `|`, `·`).
+
+Example: `Employee Center | All IU Campuses | One.IU`
+
+See: [SC 2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled)
+
+<ul>
+	<li>
+		<p>**Page title:** Parts of title should be ordered from more specific to less specific. Use a consistent delimiter between parts of the title (`-`, `|`, `·`).</p>
+		<p>Example: `Employee Center | All IU Campuses | One.IU`</p>
+		<p>See: [SC 2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled)</p>
+	</li>
+	<li>
+		<p>**Headings:** Headings should be used, starting with the h1 element ("heading level 1"). The heading levels should stay consistent, in the right order and not skipped. They should proceed the content it describes. Its description should be relevant for its content. It should be succinct.</p>
+		<p>See: [SC 2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels), [SC 2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings)</p>
+	</li>
+</ul>
+
+
+- **Page title:** Parts of title should be ordered from more specific to less specific. Use a consistent delimiter between parts of the title (`-`, `|`, `·`).
+- **Headings:** Headings should be used, starting with the h1 element, which stands for "heading level 1". The heading levels should stay consistent, in the right order and not skipped. They should proceed the content it describes. Its description should be relevant for its content. It should be succinct.  
+See: [SC 2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels), [SC 2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings)
+
+<dl>
+	<dt>Page title</dt>
+	<dd>Parts of title should be ordered from more specific to less specific. Use a consistent delimiter between parts of the title (`-`, `|`, `·`).</dd>
+	<dd>Example: `Employee Center | All IU Campuses | One.IU`</dd>
+	<dd>See: [SC 2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled)</dd>
+	<dt>Headings</dt>
+	<dd>Headings should be used, starting with the `h1` element ("heading level 1"). The heading levels should stay consistent, in the right order and not skipped. They should proceed the content it describes. Its description should be relevant for its content. It should be succinct.</dd>
+	<dd>See: [SC 2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels), [SC 2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings)</dd>
+</dl>
+
 ## Usable writing is clear
 
 ## Usable writing is concise
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -7,6 +7,8 @@
 	--color-150-75: #7fc08c;
 	/* https://oklch.com/#15,0.2,255,100 */
 	--color-255-15: #000b1f;
+	/* https://oklch.com/#40,0.05,255,100 */
+	--color-255-40: oklch(40% 0.05 255);
 	/* https://oklch.com/#75,0.2,255,100 */
 	--color-255-75: #73b1ff;
 	/* https://oklch.com/#75,0.05,255,100 */
@@ -17,6 +19,7 @@
 	--color-285-75: #a6a1ff;
 
 	--color-base: var(--color-255-15);
+	--color-border: var(--color-255-40);
 	--color-code: var(--color-150-75);
 	--color-link: var(--color-255-75);
 	--color-mark: var(--color-80-75);
@@ -54,6 +57,8 @@
 
 	--font-main: "Libre Franklin Variable", sans-serif;
 	--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+	--border: var(--2px) solid var(--color-border);
 }
 
 *, *::before, *::after {
@@ -94,7 +99,7 @@ a:visited {
 }
 
 blockquote {
-	border-left: var(--2px) solid var(--color-link);
+	border-left: var(--border);
 	margin: 0;
 	padding: 0 0 0 1em;
 }
@@ -159,6 +164,12 @@ h2 {
 	font-size: var(--fs-3);
 }
 
+h2 {
+	border-top: var(--border);
+	margin-top: 2em;
+	padding-top: 2em;
+}
+
 h3 {
 	font-size: var(--fs-2);
 }
@@ -234,20 +245,21 @@ pre > code {
 }
 
 table {
-	border: var(--2px) solid var(--color-link);
+	border: var(--border);
 	border-radius: var(--4px);
 	border-spacing: 0;
-	padding: var(--8px);
+	padding: var(--2px);
 	width: 100%;
 }
 
 td,
 th {
-	padding: var(--8px);
+	padding: 0.5em 1em;
 }
 
 th {
-	color: var(--color-link);
+	background-color: var(--color-border);
+	font-size: var(--fs-0);
 }
 
 .list-inline {