From 642b503023e4ff7f0fcd52bf7ebc7ae95c767fe3 Mon Sep 17 00:00:00 2001 From: Tim Dujardin Date: Mon, 20 Feb 2023 21:08:07 +0100 Subject: [PATCH 1/3] Added serie + new blog post "How to build accessible forms?" --- data/blog/how-to-build-accessible-forms.md | 13 +++++++++++++ .../blog/how-to-build-accessible-main-navigation.md | 1 + data/series/how-to-build-accessible-components.md | 8 ++++++++ 3 files changed, 22 insertions(+) create mode 100644 data/blog/how-to-build-accessible-forms.md create mode 100644 data/series/how-to-build-accessible-components.md diff --git a/data/blog/how-to-build-accessible-forms.md b/data/blog/how-to-build-accessible-forms.md new file mode 100644 index 00000000..93098075 --- /dev/null +++ b/data/blog/how-to-build-accessible-forms.md @@ -0,0 +1,13 @@ +--- +title: 'How to build accessible forms?' +date: '2023-03-01' +tags: ['frontend', 'a11y', 'accessibility'] +summary: 'This article contains a guide to building accessible forms in 5 steps. The key takeaways of this guide are HTML semantics, WAI-ARIA, CSS, and JS for accessibility.' +authors: ['tim-dujardin'] +theme: 'orange' +serie: 'how-to-build-accessible-components' +--- + +## Introduction + +... diff --git a/data/blog/how-to-build-accessible-main-navigation.md b/data/blog/how-to-build-accessible-main-navigation.md index bc0e1eb6..b6de1e4a 100644 --- a/data/blog/how-to-build-accessible-main-navigation.md +++ b/data/blog/how-to-build-accessible-main-navigation.md @@ -5,6 +5,7 @@ tags: ['frontend', 'a11y', 'accessibility'] summary: 'This article contains a guide to building an accessible main navigation of a website in 5 steps. The key takeaways of this guide are HTML semantics, WAI-ARIA, CSS, and JS for accessibility.' authors: ['tim-dujardin'] theme: 'orange' +serie: 'how-to-build-accessible-components' --- ## Introduction diff --git a/data/series/how-to-build-accessible-components.md b/data/series/how-to-build-accessible-components.md new file mode 100644 index 00000000..d8d993f1 --- /dev/null +++ b/data/series/how-to-build-accessible-components.md @@ -0,0 +1,8 @@ +--- +title: 'How to build accessible components?' +date: '2023-02-07' +tags: ['frontend', 'a11y', 'accessibility'] +summary: 'This serie contains guides to building accessible components in just 5 steps.' +authors: ['tim-dujardin'] +theme: 'orange' +--- From e253e21a0519847459dd84fd493333e5b023ea6e Mon Sep 17 00:00:00 2001 From: Tim Dujardin Date: Sat, 18 Mar 2023 14:52:26 +0100 Subject: [PATCH 2/3] Added first part of "How to build accessible forms?" blog post --- data/blog/how-to-build-accessible-forms.md | 83 +++++++++++++++++++++- 1 file changed, 80 insertions(+), 3 deletions(-) diff --git a/data/blog/how-to-build-accessible-forms.md b/data/blog/how-to-build-accessible-forms.md index 93098075..b5de0df1 100644 --- a/data/blog/how-to-build-accessible-forms.md +++ b/data/blog/how-to-build-accessible-forms.md @@ -2,12 +2,89 @@ title: 'How to build accessible forms?' date: '2023-03-01' tags: ['frontend', 'a11y', 'accessibility'] -summary: 'This article contains a guide to building accessible forms in 5 steps. The key takeaways of this guide are HTML semantics, WAI-ARIA, CSS, and JS for accessibility.' +summary: 'Within our data-driven world, forms are essential in gathering information. Filling in that information should be easy, straightforward and accessible to everyone.' authors: ['tim-dujardin'] -theme: 'orange' +theme: 'rouge' serie: 'how-to-build-accessible-components' --- ## Introduction -... +16% of the world's population (1.3 billion people) experience significant disability, that is 1 in 6 of us. +Can you imagine how many important data you would miss when your form is not accessible? Making your form accessible +will help those 16% ànd your business to thrive by sharing and collecting more quality data. + +In this article, I will be using +[VoiceOver](https://support.apple.com/en-gb/guide/voiceover/vo2682/mac), the default screen reader on Mac, to illustrate +examples. If you need more information concerning screen readers or assistive technology, please read the introduction +of the first blog post in this series: "How to build +accessible main navigation?". + +These are some terms I use alternatively throughout the article: + +| Abbreviation | Term | +| ------------ | -------------------- | +| a11y | Accessibility | +| AT | Assistive Technology | +| SR | Screen reader | + +## Accessible in 4 steps + +This article will guide you through the most important aspects of form accessibility in 4 steps: + +1. Labels and input types +2. Form field attributes +3. Structuring a form +4. Form validation + +### 1. Labels and input types + +This step shouldn't even be in this guide, since it is that straightforward. +Yet, we sometimes manage to make this overcomplicated and inaccessible. + +For example: I need to collect a full name and username. + +#### 1.1 No labels + +Can you make a distinction between the 'Full name' and the 'Username' field when using only placeholders and no labels? + +> AT info: When focusing on an `` field with a `placeholder` attribute, not all screen readers mention the +> placeholder value in the announcement, so you should always use a `