DEV Community: Abdermaiza

[Boost]

Abdermaiza — Wed, 26 Feb 2025 08:58:16 +0000

Understand web Accessibility: useful links (part 10)

Abdermaiza ・ Dec 13 '23

#a11y #webdev #learning #beginners

The huge gap between Innovation & Accessibility

Abdermaiza — Wed, 03 Jul 2024 08:06:20 +0000

Here's why we still have a lot to do for improving accessibility in life:

A blind person can take a picture of his kid playing in a park with a smartphone, but he probably can't book tickets on his own, as ticketing interfaces are very inaccessible these days.
We can now pay contacless with our smartphone, but you can't log on to your bank and make a bank transfer online.
We can scan the menu of an Italian restaurant, have it translated into French and read aloud, but you can't register your children at the school canteen.
You can orient yourself very precisely with your GPS, but you can't access connections on the public transit application.

Understand web Accessibility: useful links (part 10)

Abdermaiza — Wed, 13 Dec 2023 13:13:49 +0000

In this post, you will find a bunch of links around web accessibility for developers and digital business.

Accessible components:

A11y Tools:

None of these links will be enough to check all the a11y issues of a web page! You need to check the code manually, for a big part.

Good ressources:

A11y Blogs:

Screen readers:

Best videos:

Understand web Accessibility: the cost of not priorizing a11y (part 9)

Abdermaiza — Tue, 12 Dec 2023 10:16:08 +0000

What you might loose without a11y

Disabled people represent around 16% of the population (1.3 billion people), according to the World Health Organization.
This is like Indian population, the second most populated country on earth with around 1.4 billion people.
And what we need to know is that this population is using Internet like everyone. So, it would be wise not to cut ourselves off from this population for business purposes.

The huge legal cost

If you're in some countries with a11y laws like the USA, Canada, you must provide an accessible web product.
In 1990, the United States Congress passed the Americans with Disabilities Act (ADA), which mandates that public and private spaces must be made accessible to individuals with sensory, cognitive, and physical impairments or limitations.

So, either you realize an a11y audit and try to be compliant to your local a11y standard, or you might face lawsuits and all that it cost. From a project’s kick-off, requirements, mock-ups, design, development, QA, and testing – accessibility issues need to be identified and corrected along the way.

Understand web Accessibility: semantic HTML (part 8)

Abdermaiza — Mon, 11 Dec 2023 13:59:35 +0000

With over 100 HTML elements, you can create your own markup in infinite ways, but which one will be the best?...

HTML semantics provide accessibility information about page structure and an element's role, name, and state, helping to convey the nature and purpose of content on web pages.
By using HTML elements instead of a div soup without any semantic value, you are helping users and Google's robots to understand your web content...
If a developer used a <div> instead of a <header>, the implicit role would be absent, unless provided with extra code. That means the HTML won't be as useful to the machines that interpret it.

Structuring content

You can first try to always use semantic landmarks like header, main, aside, footer and nav elements.
Then, you should also use the good HTML element for each purpose:

a p will be the direct parent of paragraph of text, not a div
if you need a link or an anchor, use an a element, not a button
if you need an action (like opening a modal, closing a burger menu, expanding some content, playing a media, validate a form), use a <button> element
for a title or a subtitle, prefer the h1 to h6 elements and respect the order
if you have a list of items, use an ul & li combo...

Naming things as they are

Just by this way, using semantic HTML, you can for instance tell to screen reader users that an component is a button, or a link or a list of items. A div alone will not provide any information about your content...
Elements like <div>s and <span>s are meaningless, inert. You can use them for layout and styling, but not to replace semantic HTML5, as it will require a lot of JavaScript to mimic the real HTML5 element.

Always choose an existing HTML5 element first!

Sources:

Understand web Accessibility: Global A11y Requirements (part 7)

Abdermaiza — Fri, 08 Dec 2023 08:05:45 +0000

When you create a new page, you might take care of some a11y requirements, like:

keyboard focus must be visible on all interactive elements like links, buttons and form fields
user can zoom at least at 200% without any loss of information or functionality
user can change orientation of device without any loss of information or functionality
user can change text spacing without any loss of information or functionality (see https://codepen.io/stevef/pen/YLMqbo/ to see this spacing WCAG criterion 1.4.12)
user can activate button using enter key and space key
user can activate link using enter key
the page must be unique and explicit
has lang="xx" attribute where xx = language code of the language used in the page
content that appears with fade/parallax effect on scroll is by default hidden with opacity="0" (no "display:none" or "visibility:hidden" code)
all content between and elements is inside a
the "sr-only" CSS class is the one described in https://hugogiraudel.com/2016/10/13/css-hide-and-seek
always use CSS for styling text. For ALL CAPS, please use the text-transform: uppercase CSS rule
when high contrast is activated text have at least a 4.5 contrast ratio and icon have at least a 3.0 contrast ratio.

This list isn't exhaustive but will avoid some common mistakes as developer.

For more info:
https://web.dev/learn/accessibility/

Understand web Accessibility: mini checklist to keep in mind... (part 6)

Abdermaiza — Thu, 07 Dec 2023 09:47:21 +0000

When you want to build any digital service or product, you maybe just need to keep some requirements in mind, without being overwhelmed with so many technicall stuff about a11y.

Mini A11y checklist

Provide text alternatives for any non-text content, example: an icon button needs a my favorites
All functionnality is keyboard accessible without keyboard traps (provide a visible focus on all interactive elements, the order must stay logical, no traps)
provide enough time to read and use content (or a stop/pause button on animations)
forms include labels or instructions (for visually impaired users and cognitive disabilities)
text and background must use good color contrast (https://monsido.com/tools/contrast-checker)
user can resize text without breaking layout (like overlapping texts)

How to use it

These rules are coming from the WCAG 2.1 criterias, level A and AA.
You should use this list before starting the development.

Generally speaking, it might be longer to provide an accessible product when you think about accessibility after the development stage...

Understand web Accessibility: why a11y overlays are so bad? (part 5)

Abdermaiza — Wed, 06 Dec 2023 09:28:32 +0000

No overlay product on the market can cause a website to become fully compliant with any existing accessibility standard and therefore cannot eliminate legal risk.

They do not correctly adress every error: accessible coding is key to ensuring that your website is inclusive to all users. For instance, missing alternative texts require a manual review to add meaningfull contents. And, overlays are not changing the source code so far.
They don't make your website fully compliant: only capable of detecting around 20-30% of all a11y issues on websites (the easy stuff). A few examples of the issues an a11y overlay cannot fix:
keyboard traps
incorrect heading structure
focus order
unclear hyperlink text
no labels on form fields
identifying decorative images,
etc...
They can disrupt the UX for disabled users: people using screen readers will find it disruptive to their user experience if they have to switch to using the overlay assistive technology. Overlays can also bring about new problems for users, by affecting the layout. That's why some disabled users are blocking overlays.
They can make access to information worse, like Steve Faulkner said in his article of TPGI or like Haben Girma in a video about accessiBe.
They have a poor value: many disabled individuals already have the software that they require to navigate the web and can easily leverage features already built into their browsers and OS.
A more technical example, about UserWay: https://adrianroselli.com/2021/09/userway-will-get-you-sued.html

Understand web Accessibility: what's an accessibility overlay? (part 4)

Abdermaiza — Tue, 05 Dec 2023 08:43:33 +0000

What's an overlay for web accessibility?

Automated solutions that claim to both detect web accessibility issues and fix them in compliance with the WCAG. Implemented via JavaScript code snippet or on behalf of the host site and work to adress a11y issues using heuristic engines that 'fix' issues directly on the website interface.
Most are displayed as a toolbar or widget a11y options that allow users to adjust the experience. These vendors promise to provide one-click compliance with a11y overlay tools.

My vision in a nutshell

I don't recommend using permanent overlay plugins.
We view these kinds of products as actively harmfull, and a step backwards for digital accessibility efforts.
Also, Over 250 lawsuits in the USA were filed in 2020 against companies using widgets or overlays as an accessibility solution for their websites.

Understand web Accessibility: what's an accessible digital product? (part 3)

Abdermaiza — Mon, 04 Dec 2023 11:15:18 +0000

When you want to provide an accessible digital product, when do you that it's done and your product will be fully compliant?

To give a short answer, one of the most common ways is to realize an a11y audit with an expert or a firm specialized in a11y audits. Regarding where you are in the World, you will have to follow some specific rules (WCAG or based on the WCAG). And an overlay will never be enough: https://monsido.com/blog/accessibility-overlays-not-enough.
And without a strong knowledge about these rules and how to test it, it will not be efficient to give you an overview of your a11y compliance.

But what you need to understand is that an accessibility audit doesn't mean anything if you don't try anything after that to fix your issues...

Understand web Accessibility: how to navigate on the web with disabilities (part 2)

Abdermaiza — Fri, 01 Dec 2023 21:42:58 +0000

The World Health Organization (WHO) estimates that over 15% of the world's population—or 1.3 billion people—self-identify as having a disability, making this group the largest minority group globally.

Types of disabilities

Visual disabilities: color blindness, blurry vision, low vision, tubular vision, blind people.

For visual impairments, we may use the magnifier tool, the browser zoom (like zoom at 300%), font sizes, text spacing, line-height and other customizations in the browser. The Windows High Contrast Mode is used for 4% of the Windows devices. Some users will use assistive technologies like audio transcripts or screen readers (Jaws, NVDA or Voice Over) that read aloud the page content (by parsing the HTML code).

Hearing disabilities: deafness or ringing; people will use subtitles or captions for videos and all medias with sound.
Motor skills disabilities: multiple sclerosis, tetraplegia, cerebral palsy, tremors, tendonitis, etc... This type needs to use keyboard navigation or another specific tools, so be careful about the focus visibility or providing a logical order in your pages.
Cognitive disabilities: autism, dyslexia, attention disorders, elderly people, etc... You should take care of providing simple and clear design and layouts, avoid some editorial rules like justified texts or too complexe sentences, use descriptive links and buttons (avoid the "click here" text).

Temporary disabilities

Digital accessibility also benefits for temporary disabilities such as a broken arm, lost glasses or someone recovering from surgery.

Some situational limitations also: bright sunlight or a noisy environment where reading audio transcripts could be usefull for everyone.

Understand web Accessibility: The 4 WCAG principles (part 1)

Abdermaiza — Thu, 30 Nov 2023 23:44:07 +0000

Understand web Accessibility will be a serie of 10 short articles. The goal here is to share some short insights about web accessibility, one by day (not the week-end), especially for developers. Because Accessibility awareness is so important... Hope you will enjoy it!

The beggining

The Web Content Accessibility Guidelines was reated in 1999, by the Web Accessibility Initiative (WAI).
WCAG defines how to make web content more accessible to people with disabilities.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
__Tim Berners-Lee, W3C Director and inventor of the World Wide Web

The 4 principles

So, to provide an equal digital access for everyone on the planet, WCAG members started to think about the basic needs. Whatever the disability is, anybody on the web should be able to:

perceive,
understand,
navigate,
and interact with the Web (contribute to the Web).

A short example...

For each principle, you will find some success criteria associated. Let's take a simple example:
To be sure everything is perceivable, even for blind users, the first criterion (1.1.1) is: "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose...".
It means that if you have a star button icon to add a product in your favorites without any alternative text, people using assistive technologies (or some elderly people or with cognitive disabilities) will not be able to "see" or "hear" it correctly.

The 3 Accessibility levels

What is generally mandatory is to be compliant at the level AA of the WCAG 2.1 (in 2023), so around 50 success criterias should be aimed:

A: Essential

The most basic level. If this isn't met, assistive technology may not be able to read, understand, or fully operate the page or view (30 criterias).

AA: Ideal Support

Required for multiple government and public body websites. Companies strives for AA compliance. Making a website legally accessible typically means achieving these WCAG AA standards. This level includes all Level A and AA requirements (20 criterias), so around 50 success criterias to meet.

AAA: Specialized Support

Includes a higher, more strict set of benchmarks, like: All pre recorded audio content should be provided with sign language interpretation. This is typically reserved for parts of websites and web apps that serve a specialized audience (28 criterias).