Improve accessibility (#73)

* Rework 'READ MORE' links (i.1)

* Add missing alt to images (i.4)

* Updated dependencies

* Fixed colors using WCAG Contrast checker (i.5)

* Fixed foreign key links (of.1)

* Fixed linting

* Fixed build

assets/styles.css

@@ -1,19 +1,20 @@
 :root {
-  /* --sl-font: "HK-Grotesk", sans-serif; */
   --purple-hsl: 209, 60%, 60%;
   --overlay-blurple: hsla(var(--purple-hsl), 0.2);
   --scrollbar-color: #ddd;
 }
 
 :root[data-theme="light"] {
   --purple-hsl: 209, 85%, 65%;
-  --sl-color-text-accent: #61d2fe;
-  --sl-color-banner-bg: #dca45b;
+  --sl-color-text-accent: #1971c2;
+  --sl-color-banner-bg: #1971c2;
+  --sl-color-bg-inline-code: #f6f8fa;
 }
 
 :root[data-theme="dark"] {
-  --sl-color-text-accent: #61d2fe;
-  --sl-color-banner-bg: #dca45b;
+  --sl-color-text-accent: #4dabf7;
+  --sl-color-banner-bg: #4dabf7;
+  --sl-color-bg-inline-code: #23262f;
 }
 
 /* Firefox */

astro.config.js

@@ -14,6 +14,7 @@ export default defineConfig({
       logo: {
         light: "/assets/logo-light.svg",
         dark: "/assets/logo-dark.svg",
+        alt: "Data Package Logo",
         replacesTitle: true,
       },
       social: {
@@ -24,7 +25,7 @@ export default defineConfig({
         baseUrl: "https://github.com/frictionlessdata/datapackage/edit/main/",
       },
       lastUpdated: true,
-      customCss: ["typeface-hk-grotesk/index.css", "/assets/styles.css"],
+      customCss: ["/assets/styles.css"],
       tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 5 },
       sidebar: [
         { label: "Standard", autogenerate: { directory: "standard" } },

components/image-link-card.astro

@@ -13,6 +13,6 @@ const { title, description, imageSrc, ...rest } = Astro.props
 
 <LinkCard
   title={title}
-  description={`<img src="${imageSrc}" /> ${description}`}
+  description={`<img src="${imageSrc}" alt="${title}" /> ${description}`}
   {...rest}
 />

content/docs/index.mdx

@@ -13,6 +13,7 @@ hero:
     that enables and ensures <strong>data quality, accessibility, and interoperability</strong>.
   image:
     file: ../../assets/hero.png
+    alt: Data Packages Illustration
   actions:
     - text: Get Started
       link: /standard/introduction/
@@ -39,7 +40,7 @@ import { CardGrid, LinkCard, Card } from "@astrojs/starlight/components"
 
 ## Standard
 
-The Data Package Standard is a comprehensive set of specifications that collectively define a framework for organizing, documenting, and sharing data in a structured and interoperable manner -- [READ MORE](/standard/specifications)
+The Data Package Standard is a comprehensive set of specifications that collectively define a framework for organizing, documenting, and sharing data in a structured and interoperable manner -- [EXPLORE THE STANDARD](/standard/specifications)
 
 <CardGrid>
   <Card title="Data Package" icon="open-book">
@@ -64,15 +65,15 @@ The Data Package Standard is a comprehensive set of specifications that collecti
 
 ## Software
 
-Data Package is backed by a rich software toolkit supporting the standard. From no-code visual tool **Open Data Editor** to low-level drivers for 10 programming languages -- [READ MORE](/standard/software)
+Data Package is backed by a rich software toolkit supporting the standard. From no-code visual tool **Open Data Editor** to low-level drivers for 10 programming languages -- [EXPLORE THE SOFTWARE](/standard/software)
 
 [![Open Data Editor](../../assets/software/ode.png)](https://opendataeditor.okfn.org)
 
 <div style="margin-bottom: 5em"></div>
 
 ## Adoption
 
-Data Package use cases encompass a wide range of scenarios where this standardized data packaging format proves invaluable for efficient data management, sharing, and analysis -- [READ MORE](/standard/adoption)
+Data Package use cases encompass a wide range of scenarios where this standardized data packaging format proves invaluable for efficient data management, sharing, and analysis -- [EXPLORE THE ADOPTION](/standard/adoption)
 
 <Adoption />
 

content/docs/recipes/external-foreign-keys.md

@@ -15,12 +15,12 @@ This pattern allows users to link values in a field (or fields) in a Tabular Dat
 
 ## Specification
 
-The [`foreignKeys`](/table-schema/#foreign-keys) array MAY have a property `package`. This property MUST be, either:
+The [`foreignKeys`](../../specifications/table-schema/#foreignkeys) array MAY have a property `package`. This property MUST be, either:
 
 - a string that is a fully qualified HTTP address to a Data Package `datapackage.json` file
-- a data package [`name`](/data-package/#name) that can be resolved by a canonical data package registry
+- a data package [`name`](../../specifications/data-package/#name) that can be resolved by a canonical data package registry
 
-If the referenced data package has an [`id`](/data-package/#id) that is a fully qualified HTTP address, it SHOULD be used as the `package` value.
+If the referenced data package has an [`id`](../../specifications/data-package/#id) that is a fully qualified HTTP address, it SHOULD be used as the `package` value.
 
 For example: