Add Refactoring Accessibility

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/controllers/accessibility_first_controller.ex

@@ -20,7 +20,7 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
     |> render("properties-cheatsheet.html")
   end
 
-  @articles ["navigation", "landmarks", "roles", "accessible-name", "forms", "content"]
+  @articles ["navigation", "landmarks", "roles", "accessible-name", "forms", "content", "refactoring-accessibility"]
 
   def show(conn, %{"id" => article}) when article in @articles do
     conn
@@ -38,13 +38,11 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
   defp page_title("forms"), do: "Accessibility-First Forms"
   defp page_title("content"), do: "Accessibility-First Content"
   defp page_title("accessible-name"), do: "Learning Accessible Names"
+  defp page_title("refactoring-accessibility"), do: "Refactoring Accessibility"
 
   defp page_title(_) do
     "Accessibility-First Development"
   end
-
-  defp render_nav("content"), do: "Hello"
-  defp render_nav(_), do: ""
 end
 
 defmodule ComponentsGuideWeb.AccessibilityFirstView do

apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/refactoring-accessibility.md

@@ -0,0 +1,32 @@
+# Refactoring Accessibility
+
+## Headings
+
+- When to use `<h1>`?
+- Examples from news websites of their hierarchy
+
+Here’s an example from The Economist:
+
+```html
+<header>
+  <h1>
+    <span>
+      Silent sigh
+    </span>
+    <br>
+    <span itemprop="headline">
+      South Korea is pushing America for new talks with the North
+    </span>
+  </h1>
+  <p itemprop="description">
+    The 70-year stalemate between the two Koreas is unlikely to break without fresh diplomacy
+  </p>
+</header>
+```
+
+## Navigation
+
+- `class="current"`
+- `aria-current="page"`
+
+