Add update info about using Scott O'Hara's ARIA Tooltips script
This commit is contained in:
Helen Chong
parent
cf4040da6d
commit
ec57a8c95b
|
|
@ -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)
|
||||
|
|
@ -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 }}.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue