From 224d7842269bf8bc6a9f286b1a197aa85c8ff16a Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Wed, 22 May 2024 12:48:14 +0800 Subject: [PATCH] Add accessibility statement --- src/_includes/main/statement.njk | 9 +++++++ src/pages/about.md | 31 ++++--------------------- src/statements/accessibility.md | 30 ++++++++++++++++++++++++ src/statements/statements.11tydata.json | 10 ++++++++ 4 files changed, 54 insertions(+), 26 deletions(-) create mode 100644 src/_includes/main/statement.njk create mode 100644 src/statements/accessibility.md create mode 100644 src/statements/statements.11tydata.json diff --git a/src/_includes/main/statement.njk b/src/_includes/main/statement.njk new file mode 100644 index 00000000..52cd8409 --- /dev/null +++ b/src/_includes/main/statement.njk @@ -0,0 +1,9 @@ +--- +layout: main/content +--- + +
+ {{ content | safe }} + +

(This {{ title }} statement was last updated on {{ updated | formatDate }})

+
\ No newline at end of file diff --git a/src/pages/about.md b/src/pages/about.md index db10c9a0..365991b5 100644 --- a/src/pages/about.md +++ b/src/pages/about.md @@ -3,7 +3,6 @@ layout: main/content title: About desc: About this website and its owner. isContentDivided: true -toc: true eleventyNavigation: key: About order: 2 @@ -12,7 +11,7 @@ eleventyNavigation: {% container "article", "content__section" %} ## The Site -This is a literal queer-coded website (as in, this website is coded by a queer person) that serves as a personal hub for my interests and self-expression, as well as my own corner on the internet outside social media platforms. +{{ sitemeta.siteName }} is a literal queer-coded website (as in, this website is coded by a queer person) that serves as a personal hub for my interests and self-expression, as well as my own corner on the internet outside social media platforms. On this site, you can find various stuff I have created or curated, as well as articles dedicated to my interests. @@ -26,29 +25,9 @@ If you also have a Neocities account, you can follow this site through its [Neoc ![A website button with Penelope the cat, the mascot of Neocities, and the text 'hosted by neocities'](/assets/banners/hosted-by-neocities.png "Hosted by Neocities") -### Accessibility +### Accessibility Information -Even though this website is primarily meant to be my own space of self-expression, I also want every visitor to my website have the best possible experience of browsing my website. Therefore, I strive to design this website to be accessible. - -Currently, this site includes the following accessibility features: - -* Fully responsive and mobile-friendly layout -* Semantic HTML -* Alt text for all non-decorative images -* No autoplaying music or video -* Proper color contrast for backgrounds, text, and links -* Font sizes, margins and paddings use relative units such as rem/em instead of absolute units such as px for scalability -* Site is functional up to 200% text zoom -* Allows reader mode to be enabled enabled for articles and blog posts -* Keyboard navigation-friendly; visible outline when an interactable element is focused - -I use the following tools to test my site for accessibility: -* WebAIM's [WAVE Browser Extension](https://wave.webaim.org/extension/) -* [NVDA](https://www.nvaccess.org/about-nvda/) screen reader for Windows - -In addition, I manually test my website with keyboard navigation - -Feedbacks for improving the accessibility of this site are welcome. +While this website is primarily meant to be my own space of self-expression, I also strive to make my website accessible to provide the best possible user experience. You can read my [accessibility statement](/acessibility/) for more info. ### Technical Information @@ -62,7 +41,7 @@ This website is deployed to Neocities from a GitHub repository through the GitHu ![Avatar of a drawing of Leilukin bee](/assets/leilukin/leilukin-bee.png){style="border-radius: 50%; width: 15rem; margin: 0.5em auto;"} -You can call me Leilukin. I am a Malaysian Chinese, queer, non-binary lesbian born in the early 90s. My pronouns are they/she/他/她. +You can call me {{ sitemeta.siteAuthor.name }}. I am a Malaysian Chinese, queer, non-binary lesbian born in the early 90s. My pronouns are they/she/他/她. I speak Mandarin, English, Cantonese and Malay, though I am most fluent in Mandarin and English. @@ -85,7 +64,7 @@ I also have media catalogues online on the following platforms: * [Steam](https://steamcommunity.com/id/leilukin/) * [The StoryGraph](https://app.thestorygraph.com/profile/leilukin) -You can contact me via email: [leilukin@outlook.com](mailto:leilukin@outlook.com). +You can contact me via email: [{{sitemeta.siteAuthor.email}}](mailto:{{sitemeta.siteAuthor.email}}). [Check out my Now page](/now) to learn what I am doing right now. diff --git a/src/statements/accessibility.md b/src/statements/accessibility.md new file mode 100644 index 00000000..d1eaafb4 --- /dev/null +++ b/src/statements/accessibility.md @@ -0,0 +1,30 @@ +--- +title: Accessibility +desc: Leilukin's Hub's accessibility statement. +updated: 2024-05-20 +eleventyNavigation: + order: 12 +--- + +Even though this website is primarily meant to be my own space of self-expression, I also want every visitor to my website to have the best possible experience of browsing my website. Therefore, I strive to design this website to be accessible, including to disabled and neurodivergent people. + +Currently, this site includes the following accessibility features: + +* Fully responsive and mobile-friendly layout +* Semantic HTML +* Alt text for all non-decorative images +* No autoplaying music or video +* Proper colour contrast for backgrounds, text, and links +* Font sizes, margins and paddings use relative units such as rem/em instead of absolute units such as px for scalability +* Site is functional up to 200% text zoom +* Allows reader mode to be enabled for articles and blog posts +* Visible outline when an interactive element is focused +* Uses the [Lexend](https://www.lexend.com/) font family as the default font and [Intel One Mono](https://www.intel.com/content/www/us/en/company-overview/one-monospace-font.html) as the monospace font to improve text readability + +I use the following tools to test my site for accessibility: +* WebAIM's [WAVE Browser Extension](https://wave.webaim.org/extension/) +* [NVDA](https://www.nvaccess.org/about-nvda/) screen reader for Windows + +In addition, I test the accessibility of my website manually by navigating with keyboard alone. + +Feedbacks from disabled and neurodivergent people are welcome. You can [contact me via email](mailto:{{sitemeta.siteAuthor.email}}) for feedbacks and suggestions for improving the accessibility of this site diff --git a/src/statements/statements.11tydata.json b/src/statements/statements.11tydata.json new file mode 100644 index 00000000..a099724e --- /dev/null +++ b/src/statements/statements.11tydata.json @@ -0,0 +1,10 @@ +{ + "tags": "statements", + "layout": "main/statement", + "permalink": "/{{ page.fileSlug }}/", + "eleventyComputed":{ + "eleventyNavigation":{ + "key": "{{ title }}" + } + } +} \ No newline at end of file