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