Fix 404s

Created by: thebencourt

#965 (closed)

Signed-off-by: Ben Court git@bencourt.co.uk

src/_data/checklists.json

@@ -210,7 +210,7 @@
 			"title": "Provide a skip link and make sure that it is visible when focused.",
 			"wcag": "2.4.1 Bypass Blocks",
 			"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html",
-			"description": "A <a href='/posts/skip-nav-links/'>skip link</a> can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget."
+			"description": "A <a href='/posts/2013-05-11-skip-nav-links/'>skip link</a> can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget."
 		},
 		{
 			"title": "Identify links that open in a new tab or window.",

src/_data/checklists.json

@@ -210,7 +210,7 @@
 			"title": "Provide a skip link and make sure that it is visible when focused.",
 			"wcag": "2.4.1 Bypass Blocks",
 			"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html",
-			"description": "A <a href='/posts/skip-nav-links/'>skip link</a> can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget."
+			"description": "A <a href='/posts/2013-05-11-skip-nav-links/'>skip link</a> can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget."
 		},
 		{
 			"title": "Identify links that open in a new tab or window.",

src/_includes/layouts/base.njk

@@ -10,7 +10,7 @@
 		<link rel="stylesheet" as="style" href="{{ '/css/screen.min.css?v=20200715a' | url }}" />
 		<link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}" />
 		<link rel="sitemap" type="application/xml" title="{{ metadata.title }}" href="{{ '/sitemap.xml' | url }}" />
-		<link rel="author" href="humans.txt" />
+		<link rel="author" href="/humans.txt" />
 		{% include "meta/service-worker.njk" %}
 
 	</head>

src/announcements/2020-07-15-2020-redesign.md

@@ -62,7 +62,7 @@ Our current team members are predominately white, male, and abled. This is unacc
 
 If you are interested in joining our team, know that part of our InVison Design Forward Fund was committed to commissioning a [Code of Conduct](/code-of-conduct/), as well as an internal incident response guide. It is our hope that these documents helps to reinforce our safe, welcoming, and inclusive environment, as well as help facilitate a harassment-free experience both internally and externally.
 
-If you are interested in joining our team, please <a data-email href="hello@a11yproject.com">contact us</a>
+If you are interested in joining our team, please <a data-email href="mailto:hello@a11yproject.com">contact us</a>
 
 ### Sustainability
 

src/css/utilities/_hide.scss

 // Hide
 //
 // These classes are used to remove content from a page using various
-// techniques. Each hiding technique has [a different implementation](https://a11yproject.com/posts/how-to-hide-content/)
+// techniques. Each hiding technique has [a different implementation](https://a11yproject.com/posts/2013-01-11-how-to-hide-content/)
 // based on different use cases.
 //
 // Styleguide Utilities.Hide

src/posts/2013-01-11-navigate-using-just-your-keyboard.md

@@ -44,6 +44,6 @@ Additional keyboard shortcuts are described here: [WebAIM - Keyboard Accessibili
 It is not enough to simply tab through a webpage from start to end. While navigating the site, keep these things in mind:
 
 - Interactive elements should be functional using only keyboard input.
-- The focused element should be visible and have an obvious focus style. See article: ["Quick Tip: Never remove CSS outlines"](/posts/never-remove-css-outlines/).
+- The focused element should be visible and have an obvious focus style. See article: ["Quick Tip: Never remove CSS outlines"](/posts/2013-01-25-never-remove-css-outlines/).
 - Focus should move between elements as they appear on the page and not jump back and forth.
-- There should be a way to skip past lengthy spans of content, like global navigation menus. See article: ["How–to: Use Skip Navigation links"](/posts/skip-nav-links/).
+- There should be a way to skip past lengthy spans of content, like global navigation menus. See article: ["How–to: Use Skip Navigation links"](/posts/2013-05-11-skip-nav-links/).

src/posts/2013-05-11-skip-nav-links.md

@@ -12,11 +12,11 @@ tags:
   - howto
 ---
 
-Use skip nav links in conjunction with a coherent heading outline and [ARIA landmarks](/posts/aria-landmark-roles/). You may need to also implement a JavaScript polyfill for Webkit-based browsers.
+Use skip nav links in conjunction with a coherent heading outline and [ARIA landmarks](/posts/2013-01-14-aria-landmark-roles/). You may need to also implement a JavaScript polyfill for Webkit-based browsers.
 
 It can be frustrating and fatiguing for folks with limited mobility to have to have to repeatedly tab through navigation links to get to the main content of a page. People who use screen readers face similar frustration when the page outline is not well defined. In order to address this issue, WCAG 2.0 has specified a [guideline for bypassing repetitive blocks of content](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html). One technique [recommended by the W3C](https://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G1) is to include a skip navigation link at the beginning of the page, that changes focus to the first element after the repeated content.
 
-Skip nav links are useful for users who use keyboard navigation only, but screen readers now support more sophisticated ways of navigating regions. Specifically, they support [heading navigation](https://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H69) and [ARIA landmarks](https://www.w3.org/WAI/intro/aria). You should take advantage of these features by using a clear heading outline and defining page regions, as illustrated in [Quick Tip: ARIA Landmark Roles](https://a11yproject.com/posts/aria-landmark-roles/).
+Skip nav links are useful for users who use keyboard navigation only, but screen readers now support more sophisticated ways of navigating regions. Specifically, they support [heading navigation](https://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H69) and [ARIA landmarks](https://www.w3.org/WAI/intro/aria). You should take advantage of these features by using a clear heading outline and defining page regions, as illustrated in [Quick Tip: ARIA Landmark Roles](https://a11yproject.com/posts/2013-01-14-aria-landmark-roles/).
 
 
 ## Example

src/posts/2014-05-15-getting-started-aria.md

@@ -79,7 +79,7 @@ To create accessible applications, basic principles of semantic HTML, keyboard s
 
 ### Landmark role
 
-The `<nav>` element implicitly has a landmark role of `navigation` allowing screen reader users to navigate directly to this element. Review the article [Quick Tip: Aria Landmark Roles and HTML5 Implicit Mapping](https://a11yproject.com/posts/aria-landmark-roles/) for more information.
+The `<nav>` element implicitly has a landmark role of `navigation` allowing screen reader users to navigate directly to this element. Review the article [Quick Tip: Aria Landmark Roles and HTML5 Implicit Mapping](/posts/2013-01-14-aria-landmark-roles/) for more information.
 
 ```html
 <nav>

src/posts/2015-01-05-what-is-color-contrast.md

@@ -42,7 +42,7 @@ Oftentimes companies implement complementary colors to provide the most contrast
 
 ## What does this mean for web accessibility?
 
-On the web, the use of complementary colors is about finding shades that provide enough contrast between content and the background for anyone with [low vision impairments and color deficiencies](https://a11yproject.com/posts/understanding-visual-impairment/). 
+On the web, the use of complementary colors is about finding shades that provide enough contrast between content and the background for anyone with [low vision impairments and color deficiencies](/posts/2013-01-22-understanding-visual-impairment/). 
 
 This doesn't mean colors should only be limited to contrasting colors, but instead that care should be taken to ensure a level of contrast in body text, logos, and essential diagrams or other pieces of content. There are a number of tools to help designers and developers check color contrast, including these listed below:
 
@@ -64,5 +64,5 @@ Aside from using color contrast tools to determine your site's colors, there are
 
 - The larger the font and wider the stroke, the more legible it will be with lower contrast. Therefore the contrast requirement for larger font is lower. W3C recommends starting at 18pt regular weight or 14pt bold text.
 - Provide tools for users to adjust the foreground and background colors of your site on the front end. This is especially helpful for people that need to either switch to a low contrast or a high contrast mode. This gives them more control over the contrast ratio and covers everyone using your site regardless of what kind of vision loss or color deficiency they have.
-- Steer clear of text-based images and use text wherever possible. If that's not possible, consider using a high resolution for text images. Speaking of text images, [don't forget to fill out the alt text](https://a11yproject.com/posts/alt-text/).
+- Steer clear of text-based images and use text wherever possible. If that's not possible, consider using a high resolution for text images. Speaking of text images, [don't forget to fill out the alt text](/posts/2013-01-14-alt-text/).
 - Ensure that your placeholders in forms also have valid color contrast.

src/posts/2016-01-07-placeholder-input-elements.md

@@ -37,7 +37,7 @@ Make your forms accessible by using one of the following methods (in order of pr
 
 1. Redesign to include a proper visible `label`
 1. Use `aria-label` or `aria-labelledby` to provide assistive text
-1. [Visually hide](https://a11yproject.com/posts/how-to-hide-content/) `label` elements (in an accessible manner)
+1. [Visually hide](/posts/2013-01-11-how-to-hide-content/) `label` elements (in an accessible manner)
 
 While we're paying attention to our placeholder text, let's review how to add better contrast:
 

src/posts/2020-05-13-aria-has-perfect-support.md

@@ -25,7 +25,7 @@ tags:
   - myth
 ---
 
-[Accessible Rich Internet Applications (ARIA)](/posts/getting-started-aria/) is an extension of HTML. It is a technology that adds roles, states, and properties that are designed to help with the accessibility of websites and web apps.
+[Accessible Rich Internet Applications (ARIA)](/posts/2014-05-15-getting-started-aria/) is an extension of HTML. It is a technology that adds roles, states, and properties that are designed to help with the accessibility of websites and web apps.
 
 
 ## Background

src/content-style-guide.njk

@@ -312,7 +312,7 @@ templateClass: template-generic
 	</h3>
 	<ul>
 		<li>Use Markdown-style images (<code>![alternate description](image url)</code>) instead of HTML for post content.</li>
-		<li>Provide <a href="https://a11yproject.com/posts/alt-text/">meaningful alternative (alt) descriptions for images</a>. Alt descriptions should concisely describe the image&#39;s content.</li>
+		<li>Provide <a href="https://a11yproject.com/posts/2013-01-14-alt-text/">meaningful alternative (alt) descriptions for images</a>. Alt descriptions should concisely describe the image&#39;s content.</li>
 		<li>Use complete sentences for your alt descriptions (e.g. <code>![A happy-looking Labrador Retriever puppy sitting in a clay flower pot.](image url)</code>). Including punctuation in your alt description will help some assistive technology pronounce it clearly.</li>
 		<li>Do not use ambiguous terms like &quot;image&quot;, &quot;ScreenCapture at Wed Aug 22&quot;, &quot;post image&quot;, etc.</li>
 		<li>Do not use <code>height</code> and <code>width</code> attributes.</li>
@@ -375,7 +375,7 @@ templateClass: template-generic
 		a11y/accessibility
 	</h3>
 	<p>
-		&quot;a11y&quot; is a <a href="https://a11yproject.com/posts/a11y-and-other-numeronyms/">numeronym</a> that is short for &quot;accessibility&quot;. The number 11 stands for the 11 letters between the first and last letters of the word.
+		&quot;a11y&quot; is a <a href="https://a11yproject.com/posts/2017-08-26-a11y-and-other-numeronyms/">numeronym</a> that is short for &quot;accessibility&quot;. The number 11 stands for the 11 letters between the first and last letters of the word.
 	</p>
 	<p>
 		The numeronym is to not be used in formal writing. Use the full word, unless quoting in context.

README.md

@@ -2,7 +2,7 @@
 
 # The A11Y Project
 
-The Accessibility [(A11Y)](https://a11yproject.com/posts/a11y-and-other-numeronyms/) Project is an Open-source, community-driven effort to make digital accessibility easier.
+The Accessibility [(A11Y)](https://a11yproject.com/posts/2017-08-26-a11y-and-other-numeronyms/) Project is an Open-source, community-driven effort to make digital accessibility easier.
 
 
 ## Contributing