Allow up to 200% font zooming for Accessibility (#731)

* Relative font sizes and selective margin and padding * Fix skip link * Better way to do grid on mobile * Fit footer on mobile (tab order and grid) * Fix long line which breaks font zooming * Fix font comment * Fix typos
HTTPArchive · Apr 26, 2020 · 0f08df4 · 0f08df4
1 parent acc0bac
commit 0f08df4
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 34 deletions.
diff --git a/src/content/en/2019/resource-hints.md b/src/content/en/2019/resource-hints.md
@@ -43,9 +43,15 @@ The [`preload`](https://medium.com/reloading/preload-prefetch-and-priorities-in-
 
 ## Syntax
 
-97% of resource hint usage relied on using the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to specify a resource hint. For example, `<link rel="prefetch" href="shopping-cart.js">`.
+97% of resource hint usage relied on using the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to specify a resource hint. For example:
+```
+<link rel="prefetch" href="shopping-cart.js">
+```
 
-Only 3% of resource hint usage used [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) to specify resource hints. For example, `Link: <https://example.com/shopping-cart.js>; rel=prefetch`.
+Only 3% of resource hint usage used [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) to specify resource hints. For example:
+```
+Link: <https://example.com/shopping-cart.js>; rel=prefetch
+```
 
 Because the usage of resource hints in HTTP headers is so low, the remainder of this chapter will focus solely on analyzing the usage of resource hints in conjunction with the `<link>` tag. However, it's worth noting that in future years, usage of resource hints in HTTP headers may increase as [HTTP/2 Push](./http2#http2-push) is adopted. This is due to the fact that HTTP/2 Push has repurposed the HTTP preload `Link` header as a signal to push resources.
 
@@ -195,7 +201,10 @@ For newer resource types (e.g. fonts, `fetch()` requests, ES modules), the brows
   <figcaption>Figure 3. Adoption of the <code>crossorigin</code> attribute as a percent of resource hint instances.</figcaption>
 </figure>
 
-In the context of resource hints, usage of the `crossorigin` attribute enables them to match the CORS mode of the resources they are supposed to match and indicates the credentials to include in the request. For example: `<link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous">` enables CORS and indicates that no credentials should be included for those cross-origin requests.
+In the context of resource hints, usage of the `crossorigin` attribute enables them to match the CORS mode of the resources they are supposed to match and indicates the credentials to include in the request. For example, `anonymous` enables CORS and indicates that no credentials should be included for those cross-origin requests:
+```
+<link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous">
+```
 
 Although other HTML elements support the crossorigin attribute, this analysis only looks at usage with resource hints.
 

diff --git a/src/content/fr/2019/resource-hints.md b/src/content/fr/2019/resource-hints.md
@@ -43,9 +43,15 @@ Le rôle de [`dns-prefetch`](https://developer.mozilla.org/en-US/docs/Learn/Perf
 
 ## Syntaxe
 
-97&nbsp;% des usages d'indices de ressources sont spécifiés par le tag [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link). Par exemple, `<link rel="prefetch" href="shopping-cart.js">`.
+97&nbsp;% des usages d'indices de ressources sont spécifiés par le tag [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link). Par exemple&nbsp;:
+```
+<link rel="prefetch" href="shopping-cart.js">
+```
 
-Seuls 3&nbsp;% des indices de ressources proviennent [d'en-têtes HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) permettant de les spécifier. Par exemple, `Link: <https://example.com/shopping-cart.js>; rel=prefetch`.
+Seuls 3&nbsp;% des indices de ressources proviennent [d'en-têtes HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) permettant de les spécifier. Par exemple&nbsp;:
+```
+Link: <https://example.com/shopping-cart.js>; rel=prefetch
+```
 
 Comme l'utilisation des indices de ressources dans les en-têtes HTTP est très faible, le reste de ce chapitre se concentrera uniquement sur l'analyse de l'utilisation des indices de ressources passant par la balise `<link>`. Cependant, il convient de noter que dans les années à venir, l'utilisation des indices de ressources dans les en-têtes HTTP pourrait augmenter avec l'adoption de [HTTP/2 Push](./http2#http2-push). En effet, HTTP/2 Push réutilise l'en-tête HTTP de préchargement `Link` comme un signal permettant de pousser des ressources.
 
@@ -195,7 +201,10 @@ Pour les types de ressources plus récentes (par exemple les polices, les requê
   <figcaption>Figure 3. Adoption de l'attribut <code>crossorigin</code> en pourcentage du nombre d'indices de ressources.</figcaption>
 </figure>
 
-Dans le contexte des indices de ressources, l'utilisation de l'attribut `crossorigin` leur permet de correspondre au mode CORS des ressources auxquelles ils sont censés correspondre et indique les références à inclure dans la requête. Par exemple : `<link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous">` active le mode CORS et indique qu'aucun identifiant ne doit être inclus pour ces requêtes `cross-origin`.
+Dans le contexte des indices de ressources, l'utilisation de l'attribut `crossorigin` leur permet de correspondre au mode CORS des ressources auxquelles ils sont censés correspondre et indique les références à inclure dans la requête. Par exemple, `anonymous` active le mode CORS et indique qu'aucun identifiant ne doit être inclus pour ces requêtes `cross-origin`&nbsp;:
+```
+<link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous">
+```
 
 Bien que d'autres éléments HTML prennent en charge l'attribut `crossorigin`, cette analyse ne porte que sur l'utilisation avec des indices de ressources.
 

diff --git a/src/static/css/2019.css b/src/static/css/2019.css
@@ -287,13 +287,45 @@
 }
 
 /* Browser elements */
+
+/**
+ * A word on font-sizing units
+ * ---------------------------
+ * Font-sizes should in general be sized in rem (1rem usually equals 16px)
+ * This allows fonts to be resized in browser, which is better for accessibility
+ * (see https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html).
+ *
+ * We can also use ems, if you wish to nest elements and scale (components), but
+ * this gets tricky quite quickly, so for the most part we use rems.
+ *
+ * We show the px value before, as a fallback for non-rem browsers and to remind
+ * us of the calculated size.
+ *
+ * Margins and paddings should be considered if the need to be relative (em or rem)
+ * or happy not to scale with fonts and want set about in px.
+ * If scaling, then in general top and bottom should scale with element (em), and
+ * left and right with root element (rem) to have consistent alignment (see 
+ * https://zellwk.com/blog/rem-vs-em/#rems-or-ems%3F for why).
+ * So we set margin like this:
+ *
+ *   h2.header {
+ *     font-size: 25px;
+ *     font-size: 1.5625rem;
+ *     margin: 14px;
+ *     margin: 0.56em 0.875rem
+ *   }
+ *
+ * and remember for the non-font elements, ems are relative to current font size (25px in above example), and rems to root (16px)
+ */
+
 body {
   font-family: 'Lato', sans-serif;
   color: #1A2B49;
   margin: 0;
   font-weight: inherit;
   -webkit-font-smoothing: antialiased;
   font-size: 17px;
+  font-size: 1.0625rem;
   line-height: 1.4em;
 }
 
@@ -318,6 +350,11 @@ a:focus, a:hover {
   text-decoration: underline;
 }
 
+img {
+  max-width: 100%;
+  height: auto;
+}
+
 /* The main wrapper, center aligned */
 .container {
   max-width: 1280px;
@@ -334,7 +371,9 @@ a:focus, a:hover {
 
 .subtitle {
   font-size: 28px;
+  font-size: 1.75rem;
   line-height: 42px;
+  line-height: 1.5em;
   font-weight: bold;
 }
 
@@ -365,6 +404,7 @@ a:focus, a:hover {
 
 .title-lg {
   font-size: 48px;
+  font-size: 3rem;
 }
 
 .title-alt::before {
@@ -380,12 +420,6 @@ a:focus, a:hover {
   margin-right: auto;
 }
 
-@media (max-width: 600px) {  
-  .title-lg {
-    font-size: 40px;
-  }
-}
-
 @media (max-width: 900px) {
   .title-alt::before {
     margin-left: auto;
@@ -395,16 +429,20 @@ a:focus, a:hover {
 
 h2.header {
   font-size: 25px;
+  font-size: 1.5625rem;
   margin: 14px;
+  margin: 0.56em 0.875rem
 }
 
 .btn {
   border: 1px solid #1A2B49;
   border-radius: 50px;
   padding: 15px 30px;
+  padding: 1.07em 1.875rem;
   background: #1A2B49;
   color: #FFFFFF;
   font-size: 14px;
+  font-size: 0.875rem;
   text-decoration: none;
 }
 .btn:hover,
@@ -516,6 +554,7 @@ header .btn + .language-switcher {
   align-items: center;
   position: relative;
   font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .language-switcher select,
@@ -565,6 +604,7 @@ header .btn + .language-switcher {
 .main {
   margin: 0px auto;
   font-size: 17px;
+  font-size: 1.0625rem;
 }
 
 .main a,
@@ -583,6 +623,7 @@ h4 code {
 
 p, td, th, code, li {
   font-size: 17px;
+  font-size: 1.0625rem;
   line-height: 1.5em;
 }
 
@@ -598,6 +639,7 @@ blockquote {
   position: relative;
   font-style: italic;
   font-size: 19px;
+  font-size: 1.1875rem;
 }
 
 blockquote::before {
@@ -637,6 +679,9 @@ footer .nav-items {
   justify-content: flex-end;
   align-items: center;
 }
+footer .mobile-ha-social-media {
+  display: none;
+}
 footer .ha-logo {
   grid-area: ha-logo;
   display: flex;
@@ -677,6 +722,7 @@ footer hr:last-of-type {
 p.copyright {
   margin: 0;
   font-size: 16px;
+  font-size: 1rem;
   color: #F2F2F2;
 }
 p.copyright a {
@@ -724,7 +770,9 @@ p.copyright a {
   }
   header nav > ul > li > a {
     margin-bottom: 50px;
+    margin-bottom: 3.125rem;
     font-size: 16px;
+    font-size: 1rem;
     line-height: 1.4em
   }
   header nav > ul > li:last-child {
@@ -800,6 +848,7 @@ p.copyright a {
     margin-left: 0;
     margin: 20px 0px;
     font-size: 16px;
+    font-size: 1rem;
   }
   footer hr {
     margin: 20px 0px;
@@ -827,6 +876,7 @@ p.copyright a {
   padding: 6px;
   position: absolute;
   top: -40px;
+  top: -2.35em;
   left: 0px;
   color: white;
   border-right: 1px solid white;
@@ -850,9 +900,21 @@ p.copyright a {
 
 /* Mobile View */
 @media (max-width: 600px) {
-   body, p, td, th, code, li {
-     font-size: 16px;
-   }
+  body, p, td, th, code, li {
+    font-size: 16px;
+    font-size: 1rem;
+  }
+
+  .title-lg {
+    font-size: 40px;
+    font-size: 2.5rem;
+    font-size: min(2.5rem,15vw); /* Cap max font size on mobile, if possible. Allows 200% font-size. */
+  }
+
+  h2 {
+    font-size: min(1.5rem,12vw); /* Cap max font size on mobile, if possible. Allows 200% font-size. */
+  }
+
   /* Header */
   .top-header, footer {
     position: relative;
@@ -865,13 +927,15 @@ p.copyright a {
   }
   a.navigation-logo {
     min-width: auto;
+    max-width: 75vw;
   }
   header nav > ul > li > * {
     margin: 0;
   }
   header nav > ul > li > a {
     margin-bottom: 50px;
     font-size: 16px;
+    font-size: 1rem;
     line-height: 1.4em
   }
   header nav > ul > li:last-child {
@@ -920,24 +984,31 @@ p.copyright a {
     margin-top: 20px;
   }
 
+  .main {
+    display: block;
+  }
+
   /* Footer */
   footer {
     grid-template-areas:
-      'home-logo language-switcher'
-      'hr hr'
-      'nav-items nav-items'
-      'ha-logo  social-media'
-      'hr-last hr-last'
-      'copyright copyright';
-    grid-template-columns: 1fr 120px 0 0;
+      'home-logo'
+      'hr'
+      'nav-items'
+      'ha-social-media'
+      'hr-last'
+      'copyright';
+    grid-template-columns: 1fr;
     grid-template-rows: auto;
   }
   footer .home-logo {
     grid-area: home-logo;
     margin: 20px 0px;
   }
-  footer .home-logo > img {
-    max-width: 40vw;
+  footer .mobile-ha-social-media {
+    display: grid;
+    grid-area: ha-social-media;
+    grid-template-areas:
+      'ha-logo social-media';
   }
   footer .ha-logo {
     grid-area: ha-logo;
@@ -962,12 +1033,14 @@ p.copyright a {
     margin-left: 0;
     margin: 20px 0px;
     font-size: 16px;
+    font-size: 1rem;
   }
   footer .language-switcher {
     grid-area: language-switcher;
   }
   p.copyright {
     font-size: 12px;
+    font-size: 0.75rem;
   }
   footer .copyright {
     grid-area: copyright;
@@ -985,4 +1058,8 @@ p.copyright a {
   footer hr:last-of-type {
     display: block;
   }
+
+  .not-mobile {
+    display: none !important;
+  }
 }