From 2299b21086f32c8b8b39b31d7b70cbc3a5a01992 Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Sat, 8 Jun 2024 12:00:56 +0800 Subject: [PATCH] Add high-level overview of accessibility features --- src/statements/accessibility.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/statements/accessibility.md b/src/statements/accessibility.md index c77de12a..a5a9306d 100644 --- a/src/statements/accessibility.md +++ b/src/statements/accessibility.md @@ -1,20 +1,31 @@ --- title: Accessibility keyword: accessibility statement -updated: 2024-06-01 +updated: 2024-06-08 eleventyNavigation: order: 12 --- 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. Therefore, I strive to design this website to be accessible, including to disabled and neurodivergent people, by aiming to meet [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/) Level AA standards. +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 +* 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 +* No autoplay of videos and audio + This site uses the [Lexend](https://www.lexend.com/) font family as the default font and [Intel One Mono](https://www.intel.com/content/www/us/en/company-overview/one-monospace-font.html) as the monospace font to improve text readability. I use the following tools to test my site for accessibility: * WebAIM's [WAVE Browser Extension](https://wave.webaim.org/extension/) +* Acart Communications' [Contrast Checker](https://contrastchecker.com/) * [NVDA](https://www.nvaccess.org/about-nvda/) screen reader for Windows * TalkBack screen reader for Android -* VOiceOver screen reader for iOS +* VoiceOver screen reader for iOS In addition, I test the accessibility of my website manually by navigating with keyboard alone.