From ec57a8c95b6180bc94e876d3de3367fd7f93bf1e Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Sat, 6 Jul 2024 19:02:15 +0800 Subject: [PATCH] Add update info about using Scott O'Hara's ARIA Tooltips script --- src/changelogs/logs/2024/2024-07-06.md | 5 +++++ src/pages/guestbook.njk | 2 +- src/statements/accessibility.md | 10 +++------- src/statements/colophon.md | 7 ++++--- 4 files changed, 13 insertions(+), 11 deletions(-) create mode 100644 src/changelogs/logs/2024/2024-07-06.md diff --git a/src/changelogs/logs/2024/2024-07-06.md b/src/changelogs/logs/2024/2024-07-06.md new file mode 100644 index 00000000..84b9e147 --- /dev/null +++ b/src/changelogs/logs/2024/2024-07-06.md @@ -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) \ No newline at end of file diff --git a/src/pages/guestbook.njk b/src/pages/guestbook.njk index 5c9df546..d2422a5b 100644 --- a/src/pages/guestbook.njk +++ b/src/pages/guestbook.njk @@ -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 }}. --- diff --git a/src/statements/accessibility.md b/src/statements/accessibility.md index 5ec39b23..17791b1b 100644 --- a/src/statements/accessibility.md +++ b/src/statements/accessibility.md @@ -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. @@ -16,7 +16,7 @@ High-level overview of the accessibility features of this site: * Responsive design and mobile-friendly layout * Semantic HTML, enhanced by Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) * 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 * Logical content and heading flow * 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. -## 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. \ No newline at end of file diff --git a/src/statements/colophon.md b/src/statements/colophon.md index 78b6d9bf..f7aa9e5c 100644 --- a/src/statements/colophon.md +++ b/src/statements/colophon.md @@ -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.