Merge pull request #4131 from owid/a11y

✨ Site accessibility improvements
owid · Dec 4, 2024 · e33bb0d · e33bb0d
2 parents ddc617a + d761a03
commit e33bb0d
Show file tree

Hide file tree

Showing 23 changed files with 134 additions and 58 deletions.
diff --git a/packages/@ourworldindata/components/src/Button/Button.tsx b/packages/@ourworldindata/components/src/Button/Button.tsx
@@ -14,11 +14,15 @@ type ButtonCommonProps = {
 type WithHrefProps = {
     href: string
     onClick?: never
+    ariaLabel?: never
+    type?: never
 }
 
 type WithOnClickProps = {
     onClick?: () => void
     href?: never
+    ariaLabel: string
+    type?: "button" | "submit"
 }
 
 export type ButtonProps =
@@ -31,6 +35,8 @@ export const Button = ({
     href,
     onClick,
     text,
+    ariaLabel,
+    type = "button",
     icon = faArrowRight,
 }: ButtonProps) => {
     const classes = cx("owid-btn", `owid-btn--${theme}`, className)
@@ -44,7 +50,12 @@ export const Button = ({
     }
 
     return (
-        <button className={classes} onClick={onClick}>
+        <button
+            aria-label={ariaLabel}
+            type={type}
+            className={classes}
+            onClick={onClick}
+        >
             {text} {icon && <FontAwesomeIcon icon={icon} />}
         </button>
     )

diff --git a/packages/@ourworldindata/components/src/styles/mixins.scss b/packages/@ourworldindata/components/src/styles/mixins.scss
@@ -24,6 +24,19 @@
     }
 }
 
+@mixin owid-link-40 {
+    color: $blue-40;
+    text-decoration: underline;
+    text-underline-offset: 4px;
+
+    &:visited {
+        color: $blue-30;
+    }
+    &:hover {
+        text-decoration: none;
+    }
+}
+
 @mixin cancel-link-styles {
     color: $blue-90;
     text-decoration: none;

diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
@@ -426,6 +426,7 @@ export class Footer<
                 <a
                     className="learn-more-about-data"
                     data-track-note="chart_click_sources"
+                    tabIndex={0}
                     onClick={action((e) => {
                         e.stopPropagation()
 

diff --git a/site/DataCatalog/DataCatalogPage.tsx b/site/DataCatalog/DataCatalogPage.tsx
@@ -4,6 +4,7 @@ import { SiteHeader } from "../SiteHeader.js"
 import { SiteFooter } from "../SiteFooter.js"
 import { SiteFooterContext, TagGraphRoot } from "@ourworldindata/utils"
 import { DataCatalogInstantSearchWrapper } from "./DataCatalog.js"
+import { Html } from "../Html.js"
 
 declare global {
     interface Window {
@@ -18,7 +19,7 @@ export const DataCatalogPage = (props: {
     const { baseUrl, tagGraph } = props
 
     return (
-        <html>
+        <Html>
             <Head
                 canonicalUrl={`${baseUrl}/charts`}
                 pageTitle="Data Catalog"
@@ -47,6 +48,6 @@ export const DataCatalogPage = (props: {
                     baseUrl={baseUrl}
                 />
             </body>
-        </html>
+        </Html>
     )
 }
diff --git a/site/Html.tsx b/site/Html.tsx
@@ -7,5 +7,11 @@ import React, { HtmlHTMLAttributes } from "react"
  * See the <script> tag in Head.tsx / NoJSDetector.tsx for the client-side JavaScript that removes this class.
  */
 export const Html = (props: HtmlHTMLAttributes<Element>) => {
-    return <html {...props} className={cx("js-disabled", props.className)} />
+    return (
+        <html
+            {...props}
+            lang="en"
+            className={cx("js-disabled", props.className)}
+        />
+    )
 }
diff --git a/site/SiteFooter.tsx b/site/SiteFooter.tsx
@@ -240,7 +240,15 @@ export const SiteFooter = (props: SiteFooterProps) => (
                                 Please consult our full{" "}
                                 <a href="/about#legal">legal disclaimer</a>.
                             </p>
-                            <p>
+                            <p className="legal--last-paragraph">
+                                <span>
+                                    Our World In Data is a project of the{" "}
+                                    <a href="https://global-change-data-lab.org/">
+                                        Global Change Data Lab
+                                    </a>
+                                    , a registered charity in England and Wales
+                                    (Charity Number 1186433).
+                                </span>
                                 <a
                                     href="https://global-change-data-lab.org/"
                                     className="partner-logo gcdl-logo"
@@ -260,12 +268,6 @@ export const SiteFooter = (props: SiteFooterProps) => (
                                         />
                                     </picture>
                                 </a>
-                                Our World In Data is a project of the{" "}
-                                <a href="https://global-change-data-lab.org/">
-                                    Global Change Data Lab
-                                </a>
-                                , a registered charity in England and Wales
-                                (Charity Number 1186433).
                             </p>
                         </div>
                     </div>

diff --git a/site/blocks/AllChartsListItem.tsx b/site/blocks/AllChartsListItem.tsx
@@ -18,7 +18,11 @@ export const AllChartsListItem = ({
                 href={`${BAKED_BASE_URL}/grapher/${chart.slug}`}
                 onClick={onClick}
             >
-                <GrapherImage slug={chart.slug} noFormatting />
+                <GrapherImage
+                    slug={chart.slug}
+                    alt={`A thumbnail of the "${chart.title}" chart`}
+                    noFormatting
+                />
                 <span>{chart.title}</span>
             </a>
             {chart.variantName ? (

diff --git a/site/blocks/ExpandableParagraph.tsx b/site/blocks/ExpandableParagraph.tsx
@@ -64,6 +64,10 @@ export const ExpandableParagraph = (
         <div className={cx("expandable-paragraph", className)}>
             <div
                 style={contentStyles}
+                // inert isn't supported in react@17
+                // prevents focus on elements that are not visible
+                // ideally would only apply to elements below the fold but that's hard
+                {...{ inert: isClosed ? "true" : undefined }}
                 ref={containerRef}
                 // Either pass children or dangerouslySetInnerHTML
                 {...propsWithoutStyles}

diff --git a/site/css/cookie-notice.scss b/site/css/cookie-notice.scss
@@ -30,6 +30,9 @@
 
     .cookie-notice__text {
         margin: 0;
+        a {
+            @include owid-link-90;
+        }
 
         @include lg-up {
             text-align: left;

diff --git a/site/css/footer.scss b/site/css/footer.scss
@@ -1,7 +1,7 @@
 .site-footer {
     background-color: $oxford-blue;
     padding: 3rem 0;
-    color: $blue-50;
+    color: scale-color($blue-50, $lightness: 5%);
 
     @include sm-only {
         text-align: center;
@@ -14,20 +14,15 @@
     }
 
     a {
-        color: inherit;
-        transition: color 150ms ease;
-
-        &:hover {
-            color: $blue-30;
-        }
+        @include owid-link-40;
     }
 
     ul {
         list-style-type: none;
         margin-bottom: 1rem;
 
         a {
-            display: block;
+            display: inline-block;
             text-decoration: none;
 
             @include sm-only {
@@ -47,12 +42,26 @@
 
     .legal {
         font-size: 0.875rem;
-        color: $blue-60;
+        color: scale-color($blue-50, $lightness: 5%);
         text-align: left;
 
         p {
             margin: 0 0 1rem;
         }
+
+        .legal--last-paragraph {
+            display: flex;
+            span {
+                flex: 7;
+            }
+            .partner-logo {
+                flex: 1;
+                text-align: right;
+                img {
+                    max-width: 48px;
+                }
+            }
+        }
     }
 
     .partner-logo {
@@ -63,7 +72,7 @@
             opacity 150ms ease,
             filter 150ms ease;
         filter: grayscale(1);
-        opacity: 0.5;
+        opacity: 0.9;
 
         &:hover {
             filter: grayscale(0);

diff --git a/site/css/forms.scss b/site/css/forms.scss
@@ -117,9 +117,6 @@ $checkbox-check-height: 4px;
     &:hover {
         opacity: 0.85;
     }
-    &:focus {
-        outline: 4px solid $highlight-color;
-    }
 }
 
 %owid-button {

diff --git a/site/gdocs/components/AllCharts.tsx b/site/gdocs/components/AllCharts.tsx
@@ -53,7 +53,11 @@ export function AllCharts(props: AllChartsProps) {
                 id={ALL_CHARTS_ID}
             >
                 {heading}
-                <a className="deep-link" href={`#${ALL_CHARTS_ID}`} />
+                <a
+                    className="deep-link"
+                    aria-labelledby={ALL_CHARTS_ID}
+                    href={`#${ALL_CHARTS_ID}`}
+                />
             </h1>
             <RelatedCharts
                 showKeyChartsOnly={true}

diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
@@ -427,7 +427,11 @@ export default function ArticleBlock({
                     ) : null}
                     {renderSpans(text, shouldRenderLinks)}
                     {shouldRenderLinks && (
-                        <a className="deep-link" href={`#${id}`} />
+                        <a
+                            className="deep-link"
+                            aria-labelledby={id}
+                            href={`#${id}`}
+                        />
                     )}
                 </h3>
             )

diff --git a/site/gdocs/components/DataInsightsNewsletter.tsx b/site/gdocs/components/DataInsightsNewsletter.tsx
@@ -73,8 +73,10 @@ export default function DataInsightsNewsletter({
                         />
                         <input type="hidden" name="group[85302][16]" value="" />
                         <Button
+                            ariaLabel="Subscribe to the Daily Data Insights newsletter"
                             theme="solid-vermillion"
                             text="Subscribe"
+                            type="submit"
                             icon={null}
                             onClick={() =>
                                 analytics.logSiteClick(

diff --git a/site/gdocs/components/KeyInsights.scss b/site/gdocs/components/KeyInsights.scss
@@ -85,6 +85,10 @@ $slide-content-height: $grapher-height;
             color: $blue-90;
             letter-spacing: -0.2px;
         }
+        &:focus {
+            border-color: $gray-50;
+            outline: none;
+        }
     }
 
     .slides {

diff --git a/site/gdocs/components/KeyInsights.tsx b/site/gdocs/components/KeyInsights.tsx
@@ -322,7 +322,11 @@ export const KeyInsights = ({
                 id={KEY_INSIGHTS_ID}
             >
                 {heading}
-                <a className="deep-link" href={`#${KEY_INSIGHTS_ID}`} />
+                <a
+                    className="deep-link"
+                    aria-labelledby={KEY_INSIGHTS_ID}
+                    href={`#${KEY_INSIGHTS_ID}`}
+                />
             </h1>
             <div className={KEY_INSIGHTS_CLASS_NAME}>
                 <div>

diff --git a/site/gdocs/components/LatestDataInsights.scss b/site/gdocs/components/LatestDataInsights.scss
@@ -191,7 +191,7 @@ html:not(.js-enabled) .latest-data-insights__card,
     }
 }
 
-.latest-data-insights__control-dots {
+.latest-data-insights__dots {
     position: absolute;
     display: flex;
     justify-content: center;
@@ -207,7 +207,7 @@ html:not(.js-enabled) .latest-data-insights__card,
     }
 }
 
-.latest-data-insights__control-dot {
+.latest-data-insights__dot {
     background-color: $blue-30;
     touch-action: manipulation;
     display: inline-flex;

diff --git a/site/gdocs/components/LatestDataInsights.tsx b/site/gdocs/components/LatestDataInsights.tsx
@@ -1,12 +1,5 @@
 import * as React from "react"
-import {
-    memo,
-    useState,
-    useCallback,
-    useEffect,
-    useMemo,
-    ComponentPropsWithRef,
-} from "react"
+import { memo, useState, useCallback, useEffect, useMemo } from "react"
 import { useMediaQuery } from "usehooks-ts"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
@@ -54,8 +47,7 @@ export default function LatestDataInsights({
     const [emblaRef, emblaApi] = useEmblaCarousel({ align: "start" }, [
         ClassNames(),
     ])
-    const { selectedIndex, scrollSnaps, onDotButtonClick } =
-        useDotButton(emblaApi)
+    const { selectedIndex, scrollSnaps } = useDotButton(emblaApi)
     const [canScrollPrev, setCanScrollPrev] = useState(false)
     const [canScrollNext, setCanScrollNext] = useState(false)
 
@@ -111,6 +103,7 @@ export default function LatestDataInsights({
             </div>
             {canScrollPrev && (
                 <Button
+                    ariaLabel="Scroll to the previous data insight card"
                     className="latest-data-insights__control-button latest-data-insights__control-button--prev"
                     theme="solid-blue"
                     onClick={scrollPrev}
@@ -120,20 +113,20 @@ export default function LatestDataInsights({
             )}
             {canScrollNext && (
                 <Button
+                    ariaLabel="Scroll to the next data insight card"
                     className="latest-data-insights__control-button latest-data-insights__control-button--next"
                     theme="solid-blue"
                     onClick={scrollNext}
                     icon={faChevronRight}
                     text=""
                 />
             )}
-            <div className="latest-data-insights__control-dots">
+            <div className="latest-data-insights__dots">
                 {scrollSnaps.map((_, index) => (
-                    <DotButton
+                    <div
                         key={index}
-                        onClick={() => onDotButtonClick(index)}
-                        className={cx("latest-data-insights__control-dot", {
-                            "latest-data-insights__control-dot--selected":
+                        className={cx("latest-data-insights__dot", {
+                            "latest-data-insights__dot--selected":
                                 index === selectedIndex,
                         })}
                     />
@@ -248,14 +241,3 @@ function useDotButton(emblaApi: EmblaCarouselType | undefined): {
         onDotButtonClick,
     }
 }
-
-function DotButton({
-    children,
-    ...restProps
-}: ComponentPropsWithRef<"button">) {
-    return (
-        <button type="button" {...restProps}>
-            {children}
-        </button>
-    )
-}