Table of Contents

  1. Foreword
  2. Methodical Approach
  3. Accessibility Design Pattern
  4. Use Web Standards

Foreword In a very short time, everything was in the fog.

When I returned home from a fantastic road bike tour, I suddenly felt something in my eye.

Well, not a big deal – a little blurry, slightly pressing, probably just irritated.

In the middle of the picture, René Bergenroth, who is slightly smiling, is wearing glasses and is a bit rounder with earrings and a beard. He is wearing a shirt in various colors, with a cool design featuring a lot of red, yellow, and blue dots. He is holding a wrap, and in the background, you can see the horizon at the Marschseefest. The sky is cloudy, but it's a warm day.
I was wearing glasses for the first time in my life.

When I finally had an appointment with the eye doctor, he simply said: “Mr. Bergenroth, you are getting old. You need glasses.”

An example of how blurry I can see with my right eye. You can see two men in the middle of the picture around the Nintendo world with a lot of joyful colors, but everything is milky and you cannot see it in bright colors because of the cataract in my right eye. The center is more blurred and also whiter than the rest.
Nintendo World in Japan, Thorsten & René Bergenroth

Several months later, it became milky.
“I've never seen anything like this, Mr. Bergenroth... You have unilateral cataract.” - Eye doctor

This picture shows you an example of how I see with my cataract a form on the website without any good label or different colors, different highlighting for what is optional and what is required. It is a bad example of how you can confuse users with a screen reader or users with low cognitive abilities.
An example of how I see the world with my right eye and user interfaces!

Do you see what I see? I see a reduced design that is a piece of crap.
No help, nothing. I'm completely lost!

What if the left eye gets that too?

Methodical Approach

To ensure that we have fully accessible products by the end of 2030, we should start making the first implementations to create a product that is easier for everyone in society to use. To ensure this, the WCAG standard should serve as a guideline.

Researching Sources and Standards

I have a challenge: I do not know a single person who has any kind of limitation that applies to them. Well, I know myself and I actually have cataracts in my right eye, which means that when I close my left eye, I can hardly use any of our software products because everything just looks blurry. That's why standards and research on them are so important.

Checklist for Accessibility Rules

To ensure that all accessibility rules have been gathered and implemented as well as possible within the products, a checklist should be made available for each product team. This can then be attached as an additional element to each story.

Measurable Success Criteria

The WCAG standard includes measurable criteria that define at what point a website, application, or service meets accessibility criteria and implements them as well as possible. WCAG 2.0 is ISO/IEC 40500:2012. WCAG 2.0 is approved as an ISO standard: ISO/IEC 40500:2012. ISO/IEC 40500 is exactly the same as the original WCAG 2.0, which is introduced above along with supporting resources. [1]

[1] WCAG

Accessibility Design Pattern

Empfehlung auf Grundlage der Auswertung

In a moment, you can post something in the channel TD;LR.

Did you know that such fields actually belong inside a <form>? [2]

Did you know that the * despite the aria-label is still read as an asterisk by some screen readers? Or that required is ignored? Therefore, just write "mandatory field" next to it. Simple. 🤖 "You are on input name asterisk, beep beep lmaa." [3]

Did you know that related fields, like in this example, the validity period of the control point, should be placed inside a <fieldset>? This way, the screen reader always reads the <legend> at the beginning as well. No duplication, but accessible. [4]

Did you know that there is already validation in web browsers that checks if fields are filled out, which is achieved through the required property? [5]

Now you know!

[2] w3schools Form [3] a11y-101 Required [4] w3schools Fieldset [5] w3schools Input

Form Example

The following form is not functional and an example.

Required fields are marked with Needed and has a yellow background.

Select your favorite color
Mail Adress