Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add update info about using Scott O'Hara's ARIA Tooltips script

This commit is contained in:
Helen Chong 2024-07-06 19:02:15 +08:00
parent cf4040da6d
commit ec57a8c95b
4 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/changelogs/logs/2024/2024-07-06.md Normal file
View File

@ -0,0 +1,5 @@
---
date: 2024-07-06
---
* Implement accessible tooltips that meet Web Content Accessibility Guidelines (WCAG) 2.2 success criterion for [1.4.13: Content on Hover or Focus (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html), by utilising [Scott O'Hara's ARIA Tooltips](https://github.com/scottaohara/a11y_tooltips) script. (Thank you [Vera](https://www.groundedwren.com/) for your feedback on my previous implementation of the tooltips)

2
src/pages/guestbook.njk
View File

@ -3,7 +3,7 @@ title: Guestbook
customCSSSheets: ["comments"] customCSSSheets: ["comments"]
customJSFiles: ["svgIconControl", "googleSheetsReaderGizmo", "comments"] customJSFiles: ["svgIconControl", "googleSheetsReaderGizmo", "comments"]
eleventyNavigation: eleventyNavigation:
order: 9 order: 10
eleventyComputed: eleventyComputed:
desc: Leave a message for {{ sitemeta.siteAuthor.name }}. desc: Leave a message for {{ sitemeta.siteAuthor.name }}.
--- ---

10
src/statements/accessibility.md
View File

@ -1,9 +1,9 @@
--- ---
title: Accessibility title: Accessibility
keyword: accessibility statement keyword: accessibility statement
updated: 2024-07-05 updated: 2024-07-06
eleventyNavigation: eleventyNavigation:
order: 12 order: 13
--- ---
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. Accessibility is also relevant to me as a disabled and neurodivergent person. 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. Accessibility is also relevant to me as a disabled and neurodivergent person.
@ -16,7 +16,7 @@ High-level overview of the accessibility features of this site:
* Responsive design and mobile-friendly layout * Responsive design and mobile-friendly layout
* Semantic HTML, enhanced by Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) * Semantic HTML, enhanced by Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA)
* Sufficient colour contrast between text and background colours * Sufficient colour contrast between text and background colours
* Alt text for all non-decorative images, occasionally accompanied with longer image descriptions * Alt text for all non-decorative images, occasionally accompanied with longer image descriptions
* Keyboard navigation-friendly: Every interactive element can be focused and interacted with keyboard buttons, with visible outline when focused * Keyboard navigation-friendly: Every interactive element can be focused and interacted with keyboard buttons, with visible outline when focused
* Logical content and heading flow * Logical content and heading flow
* Links to skip to the main content or the top of the page * Links to skip to the main content or the top of the page
@ -38,10 +38,6 @@ I use the following tools to test my site for accessibility:
In addition, I test the accessibility of my website manually by navigating with keyboard alone. In addition, I test the accessibility of my website manually by navigating with keyboard alone.
## Known Issues
The tooltips for some site buttons displayed on this site cannot be dismissed with a keypress, which is required to meet [WCAG success criterion for 1.4.13: Content on Hover or Focus (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html).
## Feedback ## Feedback
Feedback 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. Feedback 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.

7
src/statements/colophon.md
View File

@ -1,10 +1,10 @@
--- ---
title: Colophon title: Colophon
keyword: colophon page keyword: colophon page
updated: 2024-07-01 updated: 2024-07-06
toc: true toc: true
eleventyNavigation: eleventyNavigation:
order: 13 order: 14
--- ---
Information about how this website is built. Information about how this website is built.
@ -56,10 +56,11 @@ Due to this website being a static site, JavaScript is used to create dynamic an
* [{% cite "Cassette Beasts" %}](/shrines/cassettebeasts) * [{% cite "Cassette Beasts" %}](/shrines/cassettebeasts)
* Birthdays of characters from {% cite "A Summer’s End — Hong Kong 1986" %} on its shrine. * Birthdays of characters from {% cite "A Summer’s End — Hong Kong 1986" %} on its shrine.
* When this site is viewed on mobile devices, the navigation bar's hamburger menu uses JavaScript to enable using the Escape key to close the navigation manu. * When this site is viewed on mobile devices, the navigation bar's hamburger menu uses JavaScript to enable using the Escape key to close the navigation manu.
* Scott O'Hara's [ARIA Tooltips](https://github.com/scottaohara/a11y_tooltips) script is used to implement accessible tooltips that meet Web Content Accessibility Guidelines (WCAG) 2.2 success criterion for [1.4.13: Content on Hover or Focus (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html).
* Zach Leatherman's [details-utils](https://www.npmjs.com/package/@zachleat/details-utils) JavaScript package is used to automatically expand sidebar table of contents on wide screens. * Zach Leatherman's [details-utils](https://www.npmjs.com/package/@zachleat/details-utils) JavaScript package is used to automatically expand sidebar table of contents on wide screens.
* [status.cafe](https://status.cafe/) widget, which is placed on the home page, uses JavaScript to fetch data of my latest status update. * [status.cafe](https://status.cafe/) widget, which is placed on the home page, uses JavaScript to fetch data of my latest status update.
* [Website Carbon Badge](https://www.websitecarbon.com/badge/), which is placed on the home page, uses JavaScript to calculate the carbon footprint of this website. * [Website Carbon Badge](https://www.websitecarbon.com/badge/), which is placed on the home page, uses JavaScript to calculate the carbon footprint of this website.
* [Links page](/links) has webring widgets that use JavaScript. * [Links page](/links)'s [Websites tab](/links/#websites) includes webring widgets that use JavaScript.
* [Guestbook](/guestbook) uses JavaScript to render a form, send form data to my private Discord channel via Discord webhook, and fetch data from Google Sheets to display messages on the web page (guestbook code by [Vera Konigin](https://groundedwren.neocities.org/pages/demo_controls/guestbookDemo)). * [Guestbook](/guestbook) uses JavaScript to render a form, send form data to my private Discord channel via Discord webhook, and fetch data from Google Sheets to display messages on the web page (guestbook code by [Vera Konigin](https://groundedwren.neocities.org/pages/demo_controls/guestbookDemo)).
You can still access most of the content of this site with JavaScript disabled, but the above components will not work as intended. You can still access most of the content of this site with JavaScript disabled, but the above components will not work as intended.