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"]
customJSFiles: ["svgIconControl", "googleSheetsReaderGizmo", "comments"]
eleventyNavigation:
order: 9
order: 10
eleventyComputed:
desc: Leave a message for {{ sitemeta.siteAuthor.name }}.
---

8
src/statements/accessibility.md
View File

@ -1,9 +1,9 @@
---
title: Accessibility
keyword: accessibility statement
updated: 2024-07-05
updated: 2024-07-06
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.
@ -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.
## 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 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
keyword: colophon page
updated: 2024-07-01
updated: 2024-07-06
toc: true
eleventyNavigation:
order: 13
order: 14
---
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)
* 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.
* 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.
* [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.
* [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)).
You can still access most of the content of this site with JavaScript disabled, but the above components will not work as intended.