#WCAG 2.2

[accessibleaesthetics]

This is a little late, but for those who are really interested in digital accessibility: WCAG 2.2 is live as of October 5, 2023!

Intopia has a nice overview of these new standards, which includes a wonderful WCAG 2.2 Map that helps conceptualize the various criteria. The latter is 100% screen reader accessible, by the way, they don't just talk the talk.

If you'd like a slightly more in-depth discussion, The Web Accessibility Initiative's What's New in WCAG 2.2 article is what you want (this one has the benefit of having easily accessible links to details on specific criteria too).

[adasitecompliance]

WCAG 2.2

Explore the latest in web accessibility with a guide to WCAG 2.2. Enhance your website's inclusivity and compliance!

[notesondigitalaccessibility]

What is new in WCAG 2.2

Notes from Deque Webinar 9/7

This will take years for rules and regulations to catch up. 2.2 in final comment period. 2.2 is focused on improving the experience of people with mobility and cognitive disabilities.

Overview:

Added 9 new Success Criteria.

Remove 1 Success Criteria: Parsing

Mobility improvements:

2.4.11 & 2.4.12 Focus not being obscured.

When navigating by keyboard focused element must not be covered by content. Helps people using keyboard navigation. Example a model where someone can tab to items behind it.

AA the item must be partially visible.

AAA the item must be totally visible.

2.5.7 Dragging Movement - AA

Drag and drop cannot be the only way to do something. Provide a simple pointer alternative. Keyboard alt does not meet this. Much have a touch screen/pointer alternative.

2.5.8 Target Size Minimum - AA

Touch area 24x24 CSS px. Minimum Size or control spacing. This applies to desktop and mobile. Draw circles 24 px in diameter and make sure they don't intersect.

You can provide an alternative. That is fine.

Inline exception. Links in text is fine. It's constrained by line height

User agent control. You often can't control browser controlled user elements like drop downs. If you build yourself it applies but if you use browser default it doesn't.

Essential: Maps may have overlapping, legal forms that need to look the same as the paper form.

2.4.13 Focus Appearance - AAA

Focus indicator has sufficient size and contrast from unfocused state.

2 CSS px thick parameter.

Contrast of 3:1 between same pixels in the unfocused state.

Cognitive Improvements

3.2.6 Consistent Help - A

Phone, email, FAQ link, contact info

Always in the same place. Example contact links on the footer.

3.3.7 Redundant Entry - A

Don't require people to enter info more than one. Make it easy for people to enter the info multiple times. They shouldn't have to enter same info more than once in the same session. For example shipping and billing where you can check a box to use shipping address for billing.

Alternate ways to populate info with the same data.

3.3.8 and 3.3.9 Accessible Authentication - AA and AAA

Authentication rules. Must have a way to authenticate that doesn't rely on transcribing codes, recalling something or solving puzzles.

No cognitive function test.

Double AA allows for captcha that requires recognizing items and clicking. AAA does not.

Do not block the ability of password managers and browsers to fill in password. Don't block copy/paste of passwords and username.

Applies to all possible steps including MFA, change password, recover account.

4.1.1 Parsing - A (REMOVED)

Most Parsing issues don't impact accessibility issues. They are hard to fix. Browsers can normally fix.

Issues with duplicate IDs in forms will be covered by the success criteria on accessible labels and names.

[digitallearning-consulting]

WCAG 2.2 makes it easier for organizations to create digital products and services that are accessible to everyone.

[mabelskins]

How to: Accessibility [EN]

Part 01 - Visual design

It’s been a while since my last how to and felt like putting something together! First of all, HAPPY PRIDE MONTH! To everyone out there! Being in the queer community, i know the struggles we go through everyday and am wishing a very proud month to all of us <3

Moving on to the actual topic here: accessibility. It’s been shown here and there when discussing coding and skinning but WHAT DOES IT ACTUALLY MEAN! 

Let’s go back a bit. For years people have been trying to achieve the impossible: an universal design. A design that is universal and usable for ALL people a one-size-fits-all design that will be usable and perfect for everyone. Now, there’s only one ‘little’ problem with this: people are different. I’ve always been overweight and whenever I’ve seen clothes that say ‘one size fit all’, I look at it very suspiciously. Bottom line is: every person is different, pain points and needs will also be different. 

So what do we do? One different design for every person who is using our product? 

Well, let’s make it equitable, let’s provide flexibility to cater for a broader audience, and let this audience choose what’s best for them. But! That’s doesn't take the responsibility from us, the designers (and coders) to make sure that we are making what we can to enable this flexibility. 

------------- I've started a list which I then realised would be way bigger than expected, so decided to make each item into its own post. We'll start with VISUAL DESIGN!

Part 01 - Visual design

Colour

I’ve mentioned before about the importance of contrast and contrast ratio briefly. If you want to go into more details, you may have a look at W3 Guidelines. In short: 

Don't rely on colour alone to convey meaning, information and actions;

Make sure there's enough contrast between foreground and background

Provide an option for light/dark mode

Light/Dark Modes

There’s a myth that dark mode is good for accessibility, because it improves text readability. (Personally, I’m a big fan of dark mode, as white/bright screens may trigger migraines). However, as everything in ux, the answer to ‘is it black or white’ is that it depends. As mentioned before, a good rule of thumb is not to generalise and provide flexibility. 

When using light and dark mode, make sure the colour contrast ratio passes on both modes. Here’s a few tips for designing for dark mode (according to atmos article attached at the end of this): 

Use tints (less saturated colours). Saturated colours can cause eye strain and will be hard to pass accessibility standards.

Image from Atmos website

Avoid pure black. Please. Pure black and pure white when used together might be the default instinct, but the contrast when used together is so strong it becomes hard to look at. Choose dark greys and off-whites/light grey when possible. 

Be patient with your colour palette, inverting colours won’t make it necessarily good. Take your time to build a palette that will be suitable for both.

Target Sizes

First, what is this? This refers to the dimensions of interactive elements such as links, buttons, icons or touch targets. Basically, anything you can interact/click.

WCAG 2.2 established a minimum for pointer inputs to be 24x24. This is the space that should be provided for a clickable area.

Image from W3 website

There's a number of exceptions and guidelines which I won't get into too much detail. It's important to think about the area which people are clicking into these elements. Also remember that this may be quite useful for users that are using the forum in their mobiles - so this is quite important (don't you hate when you can't click somewhere because you haven't clicked the EXACT area needed?)

In short:

Make sure target sizes are at least 24px

Make sure buttons look like buttons, anything that is clickable and interactive LOOKS like they are interactive

Make sure links are underlined (again, as an extra visual sign that they are clickable)

THAT'S IT!!

For part 01 at least. This is just the tip of the iceberg though. If you'd like to dive deeper into this, I highly recommend Stephanie Walter's content, as well as the Extra Bold book read. I'm attaching a few more articles and resources here too! If you've read all of this, you are a champ, I know this is longer than usual. Please like and share this content, let's get it out there!

Articles:

Designers Guide to Documenting Accessibility

Dark mode ui best practices

Dark mode best practices

Accessibility annotation examples

Colour accessibility tools

Inclusive components design

Accessible design in 60s

Target size minimum

Resources

Accessible colours

Accessible colour palette builder

[hopes-archive]

Fase 2: Análisis de accesibilidad y pautas

En un blog anterior habiamos mencionado los principios de accesibilidad de la W3C. Ahora vamos a comprobar si IMCRUZ.COM cumple con sus lineamientos.

PRINCIPIO 1: Perceptible:

La información y los componentes de la interfaz de usuario son mostrados a los usuarios en formas que ellos puedan entender.

Pauta 1.1 Alternativas textuales: Proporciona alternativas textuales para todo el contenido no textual de la página, de modo que se pueda convertir a otros formatos que los usuarios necesiten.

Pauta 1.2 Medios tempodependientes: No proporciona ninguna alternativa para medios tempodependientes.

Pauta 1.3 Adaptable: La página si crea contenido que puede presentarse de diferentes formas por ejemplo, en iOS adapta la página a través de iconos e imágenes más grandes  sin perder información o estructura.

Pauta 1.4 Distinguible: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.

PRINCIPIO 2: Operable: 

Los componentes de la interfaz de usuario y la navegación son operables por teclado.

Pauta 2.1 Accesible por teclado: Proporciona acceso a algunas  funcionalidades mediante el teclado.

Pauta 2.2 Tiempo suficiente: Si proporciona a los usuarios el tiempo suficiente para leer y usar el contenido.

Pauta 2.3 Convulsiones: No existe contenido alguno que genere convulsiones.

Pauta 2.4 Navegable: Proporciona medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

PRINCIPIO 3: Comprensible

La información y el manejo de la interfaz de usuario son comprensibles, sin embargo no cumple con las pautas requeridas.

Pauta 3.1 Legible: Hacer que los contenidos textuales resulten legibles y comprensibles.

Pauta 3.2 Predecible: La página web no opera de manera predecible.

Pauta 3.3 Entrada de datos asistida: La página web corrige errores en la entrada de datos pero no otorga una ayuda asistida que cuente con revisión de datos o reenvío

PRINCIPIO 4: Robusto 

El contenido de la página no es lo suficientemente robusta debido a que otorga amplia información sobre la empresa, por lo tanto a pesar de poder presentar mejoras a futuro para el usuario, es esencialmente para revisar información y no implica gran entrada de datos en la página. 

Pauta 4.1 Compatible: Si maximiza la compatibilidad con las aplicaciones de usuario actuales y futuras, sin embargo no presenta grandes avances. 

Respecto a este punto usando el validador proporcionado la WC3: https://validator.w3.org/ la pagina presenta varios errores por lo tanto es posible que carezca de esta caracteristica.

[coffe-and-milkee]

ANALISIS DE ACCESIBILIDAD

o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-

FASE 2

BNB

PAUTAS DE WCAG 2.0

Perceptible 1.1.Proporcionar alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple. Dentro de los puntos establecidos, la página de BNB cuenta con las siguientes alternativas textuales: - Controles, Entrada de datos: Junto con el texto tipográfico, se hace uso de iconos e imágenes para un entendimiento más claro de las opciones dentro de la página, los cuales podrían dar pie a el uso de la página para gente analfabeta, no obstante, algunos de estos iconos e imágenes no son tan fieles al texto, lo cual podría dar pie a confusiones. - CAPTCHA: La página de BNB cuenta con una opción de CAPTCHA para acceder a la encuesta nacional de servicios financieros. No obstante, esta opción se encuentra en una esquina, haciendo dificultoso su percepción a vista general. - Decoración, Formato, Invisible: La página de BNB cuenta con imágenes de carácter decorativo, esto para evitar una carga excesiva de texto y así ofrecer más descanso a la vista. 1.2.Medios tempodependientes: proporcionar alternativas para los medios tempodependientes. La página de BNB no tiene servicios de audio ni video para las personas con capacidades diferentes, reduciendo en su mayoría la calidad de conformidad para los usuarios. 1.3.Crear contenido que pueda presentarse de diferentes formas sin perder información o estructura. 1.3.1. Información y relaciones: La estructura se encuentra armonizada y organizada para facilitar la visibilidad por parte del usuario. 1.3.2. Secuencia significativa: La página se encuentra mediante una estructura sencilla de exploración intuitiva, en la cual los puntos más importantes son bien visibilizados en la página de inicio y se encuentran a la vez en la parte superior de la página para comodidad. 1.3.3. Características sensoriales: En mayoría, la ubicación y tamaño de los elementos dentro de la página ayudar a ver más fácilmente y de forma más cómoda toda su estructura, no obstante, hay elementos que se ocultan a simple vista si uno es muy general en su búsqueda. 1.4.Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo. Los colores dentro de la página web son acordes a su paleta representativa de la empresa, y a la vez son utilizados de tal forma que no son pesados a la vista. No obstante, no hace uso de audios u otros medios para otro tipo de usuarios. La jerarquía textual dentro de la página es bien apreciable, esto para enfatizar en los elementos de mayor importancia o que más deben resaltar a la vista. Muchos de estos elementos son de carácter inmutable, puesto que no están sujetos a la configuración libre del sujeto. A pesar de ser un servicio público, y por tal el tener la posibilidad de ofrecer una comodidad de usuario AAA. La empresa de BNB no llega a tener puntos dentro de esta categoría, ya que no ofrece tanta variedad para los usuarios.

Operable 2.1.Proporcionar acceso a toda la funcionalidad mediante el teclado. El uso del teclado es activo y permite el seleccionar iconos mediante la tecla de “tab”, no obs6tante, se remarcan todos los elementos dentro de la página, ya sean interactivos o no. Además, al momento de visualizar el remarcado de las opciones, en su mayoría no se puede reconocer a la vista el icono seleccionado, ya que no se ve una marca de selección, se tienen que recurrir a los textos inferiores que muestran el texto correspondiente, siendo aun así muy confuso. 2.2.Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido. El medio visual temporal de la página BNB cuenta con un sistema de desplazamiento con tiempo suficiente para una lectura clara, además, si es necesario, uno puede “mantener sujeta la imagen” para poder leerlo más detalladamente. A la vez, este puede ser desplazado en ambas direcciones gracias a un sistema de flechas. No obstante, este medio no tiene una configuración externa de durabilidad por cada imagen o configuración de otras maneras. 2.3.No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones. La página BNB no contiene nada que destelle más de tres veces por segundo, volviéndolo un medio de carácter AAA en este aspecto específico. 2.4.Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran. La página BNB ofrece distintas rutas para acceso de información desde distintas perspectivas, ya que hay distintas maneras de acceder a una misma información. A la vez, todos los enlaces dentro de la página son lógicos entre sí, mostrando lógica en la información para que sea más sencilla analizarla y organizarla en las mentes de los usuarios. Inclusive cuenta con un buscador en la parte superior de la página. Lo cual ayuda en gran medida a búsquedas específicas sin tener la necesidad de pasar por otras opciones primero. Lo cual lo hubiera vuelto poco práctico.

Comprensible 3.1.Hacer que los contenidos textuales resulten legibles y comprensibles. La página de BNB cuenta con un idioma preestablecido (español) el cual no puede ser configurado de ninguna manera. 3.2.Hacer que las páginas web aparezcan y operen de manera predecible. La página de BNB cuneta una lógica estructurada dentro de esta. Puesto que para cada enlace mantiene un mismo formato, lo cual lo vuelve predecible y cómodo para la vista del usuario. 3.3.Ayudar a los usuarios a evitar y corregir los errores. Al momento de que uno quiere registrarse dentro de la página, este muestra coherencia y claridad al momento de mostrar el problema. Si aparece este tipo de advertencia, es posible volver a ingresar los datos para solventar el error. No obstante, este no muestra otro tipo de ayuda adicional, además de mencionar cual es el problema.

Robusto 4.1.Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas. Para la identificación ID del usuario, se hace uso de ciertos datos bancarios, como su nombre de usuario. Con este tipo de sistema, la probabilidad de repetición ID es relativamente nula, ya que se hace un uso compuesto de varios elementos para crear los perfiles del usuario. CONCLUSIONES La mayoría de los elementos estructurales dentro de la página BNB son de conformidad AA, y aunque hay algunos elementos de carácter AAA, también hay elementos que rozan el nivel A. por ejemplo, el uso de medios audiovisuales. Para las personas con discapacidades en la vista, se les haría muy complejo el poder manejar la página correctamente. Inclusive con personas de vista por debajo a la normal, ya que hay muchos elementos que pasan desapercibido ante la mirada, y esto se dificultaría aún más si la persona solo posee vista parcial. Hay algunos elementos útiles para las personas analfabetas, como el uso de iconos para algunas funciones. No obstante, solo algunos de estos iconos son bien aplicados, en mayoría, existen iconos que no tienen lógica complementaria con los textos con los que se relacionan. Los elementos más útiles dentro de la aplicación son su estructura bien establecida y la barra de búsqueda para una mejor accesibilidad a los elementos, ya que estos ofrecen en gran medida comodidad a los usuarios en general. En conclusión, la página está bien establecida en cuanto a comodidad general, pero en lo que respecta la conformidad más especializada, tiene muchos puntos que reforzar. Desde mi punto de vista, y tomando en cuenta los elementos anteriormente mencionado, opino que la página web de BNB tiene un grado de conformidad de AA.

o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-

[quirozpamela]

Análisis de accesibilidad. Fase 2.

LIBRERÍA Y PAPELERÍA

Olimpia

PAUTAS DE WCAG 2.0

1. Perceptible

1.1. Proporcionar alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple.

Se puede observar que la pagina cuenta con esta primera pauta, en el sitio existe una variedad de imágenes que cuentan con alternativas textuales que las describen.

Se describe al producto como tal, la marca y tamaño.

o NIVEL: Considerando lo mencionado, se puede decir que pertenece al nivel A.

1.2. Medios tempodependientes: proporcionar alternativas para los medios tempodependientes.

La página no cuenta con audios ni videos, por lo que no cumple con esta pauta.

o NIVEL: Al no llegara a cumplir la pauta tampoco llega a tener algún nivel

1.3. Crear contenido que pueda presentarse de diferentes formas sin perder información o estructura.

La página si cumple con esta pauta, si se ingresa desde un dispositivo más simple no pierde estructura, la composición no varía.

o NIVEL: Llega a cumplir con un nivel A de conformidad.

1.4. Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.

La página facilita al usuario la exploración, es fácil de ver, se logra observar una separación entre el primer plano y el fondo.

El color es de gran ayuda para el contraste entre fondo y la información de primer plano.

o NIVEL: Llega a cumplir con un nivel A de conformidad al cumplir con la pauta.

2. Operable

2.1. Proporcionar acceso a toda la funcionalidad mediante el teclado.

En esta ocasión no llega a cumplir con la pauta ya que solamente se cuenta con la funcionabilidad de los teclados de flechas “arriba y abajo” ya que si se trata de usar las de dirección a los costados no cumplen con algún movimiento.

o NIVEL: No llega a cumplir los términos para formar parte del nivel mínimo de conformidad.

2.2. Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.

El sitio web no cuenta con alguna limitación de tiempo por lo cual cumple incluso cumple con la pauta “2.2.3 SIN TIEMPO” ya que el limitante de tiempo no es parte esencial para poder ver el contenido.

o NIVEL: Debido a que cumple con lo ya mencionado, llega a cumplir con el nivel AAA de conformidad.

2.3. No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.

la página no contiene destellos, cumple con las pautas “2.3.1” y “2.3.2” ya que tampoco contiene nada que destelle más de tres veces por segundo.

o NIVEL: Llega a cumplir con los niveles A y AAA de conformidad.

2.4. Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

La página cuenta con elementos que hacen la navegación más llevadera a los usuarios, llega cumplir con la pauta “2.4.2”, “2.4.6” y “2.4.10” pues cuenta con encabezados de sección para organizar el contenido.

o NIVEL: Debido a lo mencionado llega a cumplir con el nivel AAA de conformidad.

3. Comprensible

3.1. Hacer que los contenidos textuales resulten legibles y comprensibles.

La página contiene textos legibles ya que son fáciles de comprender. Sin embargo, no cumple ni con el mínimo nivel de conformidad.

o NIVEL: No llega a nivel A.

3.2. Hacer que las páginas web aparezcan y operen de manera predecible.

La página tiene una navegación coherente, cuenta con patrones que se repiten en múltiples páginas web que aparecen en el mismo sitio, en este caso seria la barra superior de opciones.

o NIVEL: Debido a lo mencionado llega a cumplir con un nivel AA de conformidad.

3.3. Ayudar a los usuarios a evitar y corregir los errores.

La página cumple con esta pauta, contiene una opción de contacto a través de un mensaje y a la hora de redactarlo detecta errores y se proporciona un mecanismo de revisión, confirmar y corregir antes del finalizar el envió.

o NIVEL: Llega a cumplir con un nivel AAA de conformidad.

4. Robusto

4.1. Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas.

La página no cumple con esta pauta, la pagina tiene una función mas de fuente de Información.

o NIVEL: No llega ni al nivel A.

Sugerencias de Mejora

Se podría implementar videos o audios para que el contenido pueda ser accesible incluso para personas que no puedan o no sepan leer.

[webdesignn01]

Webdesign

Natürlich! Hier ist ein handgemachter Artikel über Webdesign, der verschiedene Aspekte und Tipps rund um das Thema behandelt:

 Webdesign: Der Schlüssel zur Digitalen Präsenz

In einer Ära, in der die digitale Präsenz für Unternehmen und Einzelpersonen immer wichtiger wird, ist Webdesign weit mehr als nur eine ästhetische Angelegenheit. Es ist ein strategisches Werkzeug, das den ersten Eindruck prägt und oft darüber entscheidet, ob Besucher auf einer Webseite bleiben oder sie schnell wieder verlassen.

 1. Die Grundlagen des Webdesigns

1.1 Ästhetik und Funktionalität 

Gutes Webdesign vereint Ästhetik und Funktionalität. Es ist wichtig, dass eine Webseite visuell ansprechend ist, aber ebenso entscheidend ist es, dass sie benutzerfreundlich ist. Die Farben, Schriftarten und Layouts sollten zur Identität der Marke passen und gleichzeitig eine klare und intuitive Navigation bieten.

1.2 Responsives Design 

In der heutigen mobilen Welt ist ein responsives Design unverzichtbar. Dies bedeutet, dass eine Webseite auf verschiedenen Geräten – von Desktops über Tablets bis hin zu Smartphones – gut aussieht und gut funktioniert. Responsives Design stellt sicher, dass Benutzer unabhängig von ihrem Endgerät eine optimale Erfahrung haben.

1.3 Ladezeiten 

Die Ladegeschwindigkeit einer Webseite hat großen Einfluss auf die Benutzererfahrung und das Suchmaschinenranking. Langsame Seiten können frustrierend sein und dazu führen, dass Besucher abspringen. Optimierung von Bildern, Minimierung von Code und das Vermeiden unnötiger Plugins sind einige der Maßnahmen, um die Ladezeiten zu verbessern.

 2. Benutzerfreundlichkeit (Usability)

2.1 Navigation 

Eine klare und intuitive Navigation ist entscheidend. Benutzer sollten schnell finden können, was sie suchen, ohne sich durch endlose Menüs und Unterseiten kämpfen zu müssen. Eine durchdachte Menüstruktur und eine konsistente Benutzerführung tragen erheblich zur Usability bei.

2.2 Zugänglichkeit 

Webdesign sollte inklusiv sein. Dies bedeutet, dass die Webseite für alle Benutzer zugänglich sein sollte, einschließlich Menschen mit Behinderungen. Das Einhalten von Zugänglichkeitsrichtlinien (wie WCAG) hilft, sicherzustellen, dass Inhalte für alle Nutzer, auch für Menschen mit Seh- oder Hörbehinderungen, erreichbar sind.

2.3 Call-to-Action (CTA) 

Deutliche und ansprechende Call-to-Action-Elemente sind entscheidend, um Besucher zu den gewünschten Handlungen zu führen. Sei es, um sich anzumelden, einen Kauf abzuschließen oder Kontakt aufzunehmen – CTAs sollten auffällig und einladend gestaltet sein.

 3. Suchmaschinenoptimierung (SEO)

3.1 On-Page SEO 

Webdesign und SEO gehen Hand in Hand. Die Struktur und der Code einer Webseite beeinflussen das Suchmaschinenranking. Zu den wichtigen Faktoren gehören die Verwendung von Schlüsselwörtern, Meta-Tags, Alt-Text für Bilder und eine saubere URL-Struktur.

3.2 Inhalt ist König 

Qualitativ hochwertiger und relevanter Inhalt ist essenziell für SEO. Suchmaschinen bewerten Seiten basierend auf ihrem Inhalt und ihrer Relevanz für Suchanfragen. Regelmäßige Aktualisierungen und interessante Inhalte können dabei helfen, das Ranking zu verbessern.

 4. Trends im Webdesign

4.1 Minimalismus 

Der Trend zu minimalistischen Designs setzt sich fort. Weniger ist oft mehr, wenn es darum geht, eine klare und fokussierte Botschaft zu vermitteln. Weißräume, einfache Layouts und eine reduzierte Farbpalette können die Benutzerfreundlichkeit verbessern und die wichtigsten Informationen hervorheben.

4.2 Interaktive Elemente 

Interaktive Features wie Animationen, Parallax-Effekte und Hover-Effekte können das Benutzererlebnis bereichern und die Interaktion mit der Webseite fördern. Wichtig ist jedoch, dass diese Elemente die Ladezeiten nicht negativ beeinflussen und die Benutzererfahrung verbessern.

4.3 Personalisierung 

Webseiten, die personalisierte Inhalte und Empfehlungen basierend auf dem Verhalten der Benutzer bieten, sind im Trend. Personalisierung kann dazu beitragen, die Relevanz der Inhalte zu erhöhen und die Engagement-Rate zu steigern.

 Fazit

Webdesign ist eine vielschichtige Disziplin, die Ästhetik, Benutzerfreundlichkeit, Technik und Strategie miteinander vereint. Ein gelungenes Design sorgt nicht nur für einen guten ersten Eindruck, sondern optimiert auch die Benutzererfahrung und trägt zum Erfolg einer Webseite bei. Durch die kontinuierliche Anpassung an neue Technologien und Trends bleibt Webdesign ein dynamisches und faszinierendes Feld.

Ich hoffe, dieser Artikel bietet dir einen umfassenden Überblick über die verschiedenen Aspekte des Webdesigns!

[dailydesignlink]

https://intopia.digital/wp-content/uploads/2023/10/Intopia-WCAG-2.2-Map-Portrait-Mode.pdf

[cssscriptcom]

Performant Accessible Video Embedding with youtube-vimeo-embed

youtube-vimeo-embed is a Custom Element that provides a performance- and privacy-focused approach to Youtube/Vimeo video embedding. It can enhance page load speed by fetching and displaying video thumbnails initially and loading full videos only when necessary. youtube-vimeo-embed is fully accessible and adheres to WCAG 2.2 Level AA standards. If the script fails to load, the video link is…

[1256986]

ELOIACS PDF ACCESSIBILITY SERVICES

Introduction PDF accessibility is crucial for ensuring that your content is usable by everyone, including individuals with disabilities. This guide will walk you through the essential steps to creating accessible PDFs, covering everything from document structure to the use of alternative text.

Document Structure 1.1 Use headings Organise Content: Use proper headings (H1, H2, H3, etc.) to structure your document. This helps screen readers navigate the content. Consistent Hierarchy: Maintain a logical and consistent heading hierarchy throughout the document. 1.2 Use Lists Bullet and Numbered Lists: Use the built-in list features in your word processor or PDF editor to create bullet and numbered lists. 1.3 Proper Formatting Paragraph Styles: Use paragraph styles instead of manual formatting to ensure consistency and readability. Tables: Use simple tables with column and row headers. Avoid complex tables with merged or split cells.

Text accessibility 2.1 Font and Size Readable Fonts: Use sans-serif fonts like Arial, Verdana, or Calibri for better readability. Font Size: Ensure that the font size is at least 12 points for body text. 2.2 Colour Contrast High Contrast: Use high contrast between text and background colours to enhance readability for users with visual impairments.

Images and Graphics 3.1 Alternative Text (Alt Text) Description: Provide descriptive alt text for all images and graphics. This text should convey the meaning and purpose of the image. Complex Images: For complex images like charts or diagrams, include a detailed description in the main text or as a caption. 3.2 Decorative Images Mark as Decorative: If an image is purely decorative and does not convey information, mark it as decorative so screen readers can skip it.

Links and Interactive Elements 4.1 Hyperlinks Descriptive Links: Use descriptive link text that clearly indicates the destination (e.g., “Visit our website” instead of “Click here”). URL Accessibility: Ensure that the URLs are accessible and working. 4.2 Interactive Forms Form Fields: Make all form fields accessible by providing labels and instructions. Tab Order: Ensure a logical tab order for form fields to facilitate keyboard navigation.

Multimedia 5.1 Audio and Video Captions and Transcripts: Provide captions for videos and transcripts for audio content to ensure accessibility for users with hearing impairments. Audio Descriptions: Include audio descriptions for videos to describe visual content for users with visual impairments.

Testing and Validation 6.1 Accessibility Checker Built-in Tools: Use built-in accessibility checkers in your PDF editor (like Adobe Acrobat’s accessibility tool) to identify and fix issues. External Tools: Use external accessibility validation tools for comprehensive testing. 6.2 Manual Testing Screen Readers: Test your PDF with screen readers like NVDA or JAWS to ensure it is navigable and readable. User Testing: If possible, conduct testing with users who have disabilities to get direct feedback. Conclusion Creating accessible PDFs is an essential practice to ensure that your content meets inclusive and usable accessibility standards such as WCAG and Section 508. By following the guidelines outlined in this document, you can improve the accessibility of your PDFs and comply with

[adasitecompliance]

Web Content Accessibility Guidelines

WCAG 2.2: Decoding The Latest Web Accessibility Guidelines

In the ever-evolving digital landscape, accessibility has become a non-negotiable imperative for all users. The updated and latest Web Content Accessibility Guidelines (WCAG) 2.2, released in October 2023, stands as a beacon of inclusivity, providing comprehensive guidelines for making web content accessible to people with disabilities. Moreover, lawsuits against businesses with non-compliant websites have proliferated. According to ADA attorney Nolan Klein, thousands of ADA lawsuits have been filed in federal court alleging non-compliance with WCAG standards. Implementation of WCAG 2.2 standards is therefore critical not only for inclusivity but also for proper litigation risk management. As we explore WCAG 2.2 and its anticipated updates in 2023, this article aims to simplify its complexities, shedding light on the importance of web accessibility for the general public.

What is Web Accessibility?

In today’s interconnected world, the Internet has become indispensable for communication, education, employment, and social engagement. Practically everyone turns to the internet for a solution to all their queries, be they booking tickets, job opportunities, or making purchases. However, for individuals with disabilities, the web can present a daunting landscape of barriers, hindering their ability to participate in the digital sphere fully. This is where web accessibility comes into play. It is the practice of designing and developing websites and web applications so that even people with disabilities can easily and comfortably access and use them. By removing accessibility barriers and ensuring that web content is perceivable, operable, understandable, and robust, web accessibility promotes inclusivity and empowers individuals with disabilities to navigate the digital world quickly.

The Significance of Web Accessibility

The importance of a strong web accessibility initiative cannot be overstated. It is a fundamental human right enshrined in the United Nations Convention on the Rights of Persons with Disabilities (CRPD). Moreover, web accessibility makes good business sense. By catering to a broader audience, businesses can expand their customer base, enhance their brand reputation, and gain a competitive edge.

Impact on Diverse User Experiences

Web accessibility considerations extend far beyond the realm of disabilities. They encompass a broad spectrum of user experiences, including those related to age, language barriers, and situational impairments. Examples of situational impairments include watching videos with only audio in libraries or those with stubby fingers preferring larger call-to-action buttons. By designing websites that are inclusive and accessible to all, we can create a more equitable and user-friendly digital landscape.

W3C Releases: Shaping the Evolution of Accessibility

The World Wide Web Consortium (W3C) plays a pivotal role in developing and maintaining WCAG, ensuring that the guidelines remain relevant and effective in the face of evolving technologies and user needs. The WCAG 2.2 was developed through the W3C process with other individuals and worldwide organizations to provide web content accessibility guidelines that meet international governments’, organizations’, and individuals’ accessibility needs. The W3C recommends using the WCAG 2.2 as a standard for the web.And thus provides the necessary resources and training as guidance and clarity on implementing WCAG.

WCAG 2.2: A New Standard for Web Accessibility

In October 2023, the World Wide Web Consortium (W3C) released WCAG 2.2, the latest iteration of the Web Content Accessibility Guidelines. The WCAG 2.2 is built on WCAG 2.0 and 2.1, the previous versions were built on WCAG 1.0, designed to apply different present and future technologies and tested through manual and automated testing. The update incorporates new WCAG success criteria and techniques, addressing the evolving needs of users with cognitive, language, and learning disabilities and reflecting advancements in web technologies.

WCAG 2.2 and Its Relevance

The release of WCAG 2.2 marks a significant step forward in pursuing web accessibility. By adopting these guidelines, web developers, content creators, and organizations ensure their digital products and services are accessible to a wider audience, fostering a more inclusive and equitable online experience.

Multiple Layers of Guidance

The various individuals and organizations using WCAG include policymakers, web designers, teachers, and students. Thus, multiple layers of guidance meet this varied audience’s comprehensive needs. These layers include:

Overall Principles

The foundation of WCAG 2.2 rests upon four fundamental principles: perceivable, operable, understandable, and robust. These principles, each encompassing specific guidelines and measurable success criteria, form the cornerstone of accessible web content.

Perceivable: Content must be presented so that users with visual, auditory, or other sensory impairments can perceive it.

Operable: Users with diverse abilities, including motor and speech impairments, must be able to operate a user interface component and navigate content effectively.

Understandable: Content must be presented clearly and unambiguously so that users with cognitive, learning, or language disabilities can comprehend it easily.

Robust: Content must remain accessible across all various assistive technology and user environments.

General Guidelines

These come next and are the 13 guidelines providing the goals authors adhere to for making content more accessible to users with different disabilities. While they aren’t testable, they provide the basic framework for authors to understand success criteria and, thus, better implement techniques.

Testable Success Criteria

Each guideline has testable success criteria to ensure WCAG 2.2 is used wherever requirements and performance testing are required. This includes design specifications, contractual agreements, and purchasing. WCAG 2.2 defines three levels of conformance level: A, AA, and AAA, each representing a progressive level of accessibility in different groups and situations.

Level A: The minimum level of accessibility, ensuring basic functionality for all users.

Level AA: A higher level of conformance, addressing the needs of many disabled users. It is considered the recommended level for most websites.

Level AAA: The most stringent level, catering to a wider range of disabilities and user preferences. It is often considered an aspirational goal for websites.

Sufficient and Advisory Techniques

Various techniques are used for each guideline and success criterion in WCAG 2.2, divided into two categories. Sufficient techniques for meeting success criteria and advisory techniques that let authors go beyond the individual success criteria to address guidelines better. They may address accessibility problems or barriers the testable success criteria do not cover. These layers of guidance together guide web developers to make content more accessible by applying as many layers as possible. This includes including advisory techniques so that the content addresses the needs of most users.

WCAG 2.2: A Watershed Moment in Digital Accessibility

WCAG 2.2 addresses the ever-changing technological landscape and evolving user needs, thus emerging as a pivotal step forward from its predecessor, WCAG 2.1. This enhanced iteration introduces nine tool accessibility guidelines and new success criteria meticulously crafted to enhance accessibility for users with visual, physical, and cognitive disabilities. These additional success criteria encourage:

1. Improved Focus Management

WCAG 2.2 introduces three enhanced focus management success criteria catering to users with motor impairments. These success criteria enable users to navigate web content smoothly and efficiently. These success criteria are:

2.4.11 Focus Not Obscured (Minimum) (AA): According to this success criterion, there might be some degree of hiding or obscuring keyboard-focused user interface components like buttons or links in a website or app design.

2.4.12 Focus Not Obscured (Enhanced) (AAA): According to this success criterion, content web developers create, like website and app design, cannot hide any part of keyword-focused user interface components.

2.4.13 Focus Appearance (AAA): According to this success criterion, visible keyboard focus indicator parts must be a minimum of a 2 CSS pixel thick perimeter of unfocused components or sub-components. They should also have a minimal 3:1 ratio between pixels in focused and unfocused states.

2. Enhanced Touch Input Support

Recognizing the growing prevalence of touch-enabled devices, WCAG 2.2 introduces refined guidelines for touch input and page break navigation. This ensures seamless interaction for users with limited or no mouse interaction. These success criteria are:

2.5.7 Dragging Movements (AA)

According to this success criterion, a single pointer can perform dragging movements without dragging. Exceptions are when dragging is crucial to the functionality or the user agent dictates the functionality and remains unaltered by the author.

2.5.8 Target Size (Minimum) (AA)

According to this success criterion, the minimum size for pointer input targets is 24 by 24 CSS pixels, with exceptions in:

Spacing: Targets smaller than 24 by 24 CSS pixels can be positioned so that, if a 24 CSS pixel diameter circle is centered on each target’s bounding box, the circles do not intersect with other targets.

Equivalent: The same function can be accomplished through a different control on the same page, meeting the 24 by 24 CSS pixel criterion.

Inline: The target is within a sentence, or its size is constrained by the line height of non-target text.

User-agent control: The user agent determines the target size and remains unaltered by the author.

Essential: A specific presentation of the target is deemed essential or is legally required for conveying the information.

3. Clearer Color Contrast Guidance

WCAG 2.2 provides clearer and more stringent guidelines for color contrast to address the needs of low-vision users. It thus ensures text is easily distinguishable from its background. These success criteria are:

3.2.6 Consistent Help (A)

According to this success criterion, if web pages include certain help mechanisms like human contact details, human contact mechanisms, self-help options, and fully automated contact mechanisms, they should maintain a consistent order across multiple pages unless a user-initiated change occurs.

3.3.7 Redundant Entry (A)

According to this success criterion, user-provided information that must be repeatedly entered in the same process is auto-populated or made available for the user to select. Exceptions are when:

Re-entering the information is deemed essential

The information is necessary for ensuring content security

The previously entered information is no longer valid

3.3.8 Accessible Authentication (Minimum) (AA)

According to this success criterion, an authentication process does not mandate cognitive function tests like remembering a password or solving a puzzle. Exceptions are when the step offers at least one of the following:

Alternative: Another authentication method that doesn’t involve a cognitive function test.

Mechanism: A mechanism aids the user in completing the cognitive function test.

Object Recognition: The cognitive function test involves recognizing objects.

Personal Content: The cognitive function test identifies non-text content the user provides to the website.

3.3.9 Accessible Authentication (Enhanced) (AAA)

According to this success criterion, cognitive function tests, like recalling a password or solving a puzzle, are not obligatory at any stage in an authentication process unless the step offers either:

Alternative: An alternative authentication method not dependent on a cognitive function test.

Mechanism: A mechanism is accessible to aid the user in completing the cognitive function test.

The new success criteria may reference new terms that have also been added to the glossary and form part of the normative requirements of the success criteria. WCAG 2.2 also introduces new sections detailing aspects of specifications impacting privacy and security.

Was Any Success Criterion Removed from WCAG 2.2?

Yes, the success criterion 4.1.1 Parsing was removed from WCAG 2.2. It was removed as it was considered obsolete due to the advancements in web technology. Besides, new success criteria in WCAG 2.2 provide a more robust and up-to-date approach to ensuring accessible web content to disabled users. Here is why 4.1.1 Parsing was removed from WCAG 2.2:

It was primarily focused on older technologies, such as HTML 4.0 and earlier versions of XHTML, which are no longer widely used.

It was not well-defined and could be interpreted differently, leading to inconsistencies in implementation.

It was not as effective as other success criteria in ensuring that web content is parsable by user agents.

Removing 4.1.1 Parsing from WCAG 2.2 does not mean the parsing issue is no longer important. However, the new success criteria in WCAG 2.2 provide a more comprehensive and effective way to address this issue.

WCAG 2.1 vs. WCAG 2.2- The Differences

The latest Web Content Accessibility Guidelines, WCAG 2,2, builds upon its predecessor, WCAG 2.1, to further enhance web accessibility for people with disabilities. While WCAG 2.1 laid a solid foundation for accessible web development, WCAG 2.2 introduces new success criteria, refines existing guidelines, and provides clearer instructions to make accessibility more achievable and maintainable. There are thus these five major differences between the two:

1. New Success Criteria in WCAG 2.2

WCAG 2.2 introduces nine additional success criteria, addressing areas such as:

Focus appearance: Ensuring that focus indicators are sufficiently visible and distinguishable to aid navigation for users with low vision or cognitive disabilities.

Page break navigation: Providing clear and consistent mechanisms for navigating between page breaks, particularly for users who rely on screen readers or keyboard navigation.

Dragging movements: Making drag-and-drop interactions accessible to users with motor disabilities by providing adequate target sizes and clear visual feedback.

Consistent help: Providing consistent and easily accessible help or support mechanisms throughout the website or application.

Visible controls: Ensuring that all controls, including form fields and buttons, are clearly visible and distinguishable even to low-vision users.

These new success criteria reflect the evolving technological landscape and a deeper understanding of user needs, particularly those with cognitive disabilities.

2. Enhanced Mobile Accessibility

WCAG 2.2 continues to refine mobile accessibility guidelines, recognizing the growing prevalence of mobile devices and the need for websites and applications to be accessible across all platforms. This includes improvements in:

Touch target sizes: Ensuring touch targets are large enough and spaced appropriately to accommodate ease of use to users with motor disabilities or limited dexterity.

Input modalities: Providing alternative input modalities, such as voice control or keyboard navigation, to cater to users with different physical abilities.

Context-aware activation: Preventing unintentional activation of elements, such as pop-ups or overlays, that could hinder navigation for users with cognitive disabilities.

3. Improved Usability and Clarity

WCAG 2.2 aims to make the guidelines more user-friendly and actionable for developers and content creators through:

More explicit guidelines: Provide clearer and more explicit instructions for each success criterion to reduce the need for interpretation and ensure consistent implementation.

Additional examples: Offer more comprehensive and illustrative examples to demonstrate how to meet each success criterion in real-world scenarios.

Improved organization: Structuring the guidelines more logically and intuitively makes it easier for developers to find the information they need.

4. Backward Compatibility and Continuous Evolution

WCAG 2.2 maintains backward compatibility with WCAG 2.1, meaning that websites and applications conforming to WCAG 2.2 also adhere to WCAG 2.1 accessibility standards. This ensures that accessibility efforts are not lost with each new guidelines version. As technology and user needs evolve, WCAG will adapt and refine its guidelines to ensure that the web remains an inclusive and accessible space for all.

5. Removal of One Success Criterion

The success criterion 4.1.1 Parsing was removed from WCAG 2.2 as it was considered obsolete compared to web technology advancements. Besides, new additional success criteria in WCAG 2.2 ensure web content is accessible to users with disabilities.

Impact on User Experience

As always, the WCAG 2.2 offers an improved user experience, rendering digital content more user-friendly and inclusive for everyone, including users with disabilities. By adhering to the latest WCAG 2.2 guidelines, websites, and digital platforms become more accessible to all their users and visitors, regardless of their abilities. It doesn’t matter what disability the user may have or where they are, they can easily navigate, comprehend, and interact with the digital content. This is thus a win-win situation for both users and web developers. For example, visually impaired users easily navigate websites with images with alt text. In addition to improved accessibility, the alt text helps with SEO, thus improving the digital platform’s SEO rankings. Similarly, users with physical impairments and, in general, all users can easily navigate websites that are keyboard-navigable.

WCAG and Its Benefits for Businesses:

Embracing web accessibility guidelines should never be considered a waste of time or investment. It’s because web accessibility perfectly aligns with any and every business’s interests. It offers benefits like:

Broader Customer Base

Not only does WCAG 2.2 ensure everyone has equal access to the web, but the additional success criteria in WCAG 2.2 address additional disabilities to foster a broader customer base. People with disabilities form a major part of any website visitors. They will not be able to use or visit inaccessible websites. This, in turn, prevents them from accessing important information or performing important tasks like applying for jobs, booking tickets, or making purchases.

Increased Compliance

Adhering to WCAG 2.2 guidelines helps businesses and organizations comply with legal standards like accessibility laws and regulations protecting the rights of users with disabilities. Examples include the Americans with Disabilities Act (ADA), Section 508 of the Rehabilitation Act, and the European Web Directive. With businesses adhering to the latest WCAG 2.2, there are reduced chances of users filing cases for inaccessibility. Businesses thus save money by avoiding lawsuits. Besides, by ensuring equal access to users with disabilities, organizations and businesses contribute to creating a more inclusive and equitable digital environment for all.

Common Challenges in WCAG 2.2 Implementation and Useful Solutions:

Implementing WCAG 2.2 can be complex and challenging for businesses and organizations, as incorporating them into web development and maintenance processes can pose significant hurdles.

5 Common Challenges Businesses Face

The five common challenges faced by most businesses and web developers while implementing WCAG 2.2 include:

Lack of Awareness and Understanding: Many businesses and organizations lack a comprehensive understanding of WCAG 2.2 and its implications for their websites and applications. This lack of knowledge can lead to unintentional non-compliance and potential legal issues.

Resource Constraints: Implementing WCAG 2.2 often requires significant financial and human resources. Businesses may need to allocate additional funds for accessibility testing, training, and software tools while dedicating staff time to address accessibility issues.

Legacy Technology and Codebases: Websites and applications built on older technologies or with complex codebases may be more challenging to adapt to WCAG 2.2 standards. This can require extensive, time-consuming, and costly refactoring and code remediation.

Content Management Systems (CMS) and Third-party Tools: Integrating WCAG 2.2 compliance into CMS and third-party tools can be tricky, especially in tools lacking built-in accessibility features.

Ongoing Maintenance and Testing: WCAG 2.2 compliance is not a one-time project. It requires ongoing maintenance and testing to ensure new content and updates adhere to the guidelines. This can add to the ongoing costs and resource demands for maintaining an accessible website.

Practical Solutions to Overcome Challenges

The good news is that there are practical solutions that web developers can easily use to overcome these challenges. They include:

Educating and Training Staff: Regular training sessions for web developers, designers, and content creators raise awareness of WCAG 2.2 guidelines and best practices.

This helps ensure that accessibility considerations are integrated into all web development and maintenance aspects.

Prioritize Accessibility from the Start: Incorporating accessibility considerations into web development projects’ planning and design phases helps.

This proactive approach can help identify and address potential accessibility issues early on, thus preventing costly retrofits later.

Utilize Accessibility Testing Tools: Employing automated accessibility testing tools to identify and troubleshoot accessibility issues throughout the development process also helps.

These tools can provide valuable insights and help streamline the remediation process.

Choose Accessible CMS and Third-party Tools: When selecting CMS and third-party tools, prioritize those that offer built-in accessibility features and support WCAG 2.2 compliance.

This can save time and effort in the long run. Businesses may need to customize these tools or find alternative solutions that meet accessibility requirements.

Establish an Accessibility Workflow: Implementing a clear accessibility workflow that outlines roles, responsibilities, and procedures for ensuring and maintaining WCAG 2.2 compliance helps.

This will help keep accessibility at the forefront of web development and maintenance.

Clearing Common WCAG 2.2 Implementation Misconceptions

A few common misconceptions about implementing WCAG 2.2 discourage web developers from implementing them. Here are 5 common misconceptions dispelled:

Accessibility is Expensive: True

Yes, implementing WCAG 2.2 can involve upfront costs. However, the long-term benefits of an accessible website outweigh these expenses. An accessible website can increase user engagement, improve brand reputation, and reduce the risk of legal issues.

Accessibility is Only for People with Disabilities: False

Accessibility benefits everyone, not just those with disabilities. An accessible website is more user-friendly and usable for all, regardless of their abilities or limitations.

Accessibility is Too Technical: True

While some technical expertise is required to implement WCAG 2.2, accessibility is not solely a technical issue. It requires collaboration between designers, developers, content creators, and stakeholders to ensure a truly accessible user experience.

Accessibility Can Wait: False

Accessibility should not be an afterthought for website owners. It is essential to integrate accessibility considerations into all web development and maintenance phases. Addressing accessibility early on can save time and resources in the long run.

Accessibility is Binary: False

Accessibility is not a pass-fail situation but a spectrum of conformance levels. Businesses should strive to achieve the highest level of accessibility possible, as even incremental improvements can make a significant difference for users with disabilities.

Conclusion

WCAG 2.2 marks a significant milestone in pursuing digital accessibility by addressing more accessibility needs. It builds on WCAG 2.1 by adding new guidelines and success criteria and clarifying and updating existing ones. It makes the web more accessible and offers a roadmap for creating inclusive and user-friendly websites for individuals with diverse abilities. By adhering to these guidelines, web developers, content creators, and organizations play a pivotal role in bridging the digital divide, thus ensuring everyone has equal access to digital content across the internet.

Web Content Accessibility Guidelines Experts – ADA Site Compliance

Contact ADA Site Compliance today for all your ADA website compliance and website accessibility needs! Get your FREE SITE SCAN now. We are leaders in assistive technologies and making all your websites accessible.

[accessiblemindstech]

On October 5, 2023, the much-anticipated release of the latest iteration of the Web Content Accessibility Guidelines (WCAG) marked a significant milestone for digital inclusivity. The unveiling of WCAG 2.2 by the W3C Web Accessibility Initiative (WAI) presents an opportunity for businesses to prioritize accessibility and cater to a broader audience. Click Here:https://shorturl.at/SX457

[mabelskins]

Como fazer: Acessibilidade [PT]

(english version here)

Parte 01 – Design visual

Primeiro 'como fazer' em português! Tentando deixar as coisas mais acessíveis pra todo mundo. Em primeiro lugar, FELIZ MÊS DO ORGULHO PRA NÓS! Por fazer parte da comunidade queer, conheço as lutas que enfrentamos todos os dias e desejo um mês de muito orgulho para todos nós <3

Mas vamos la pro tópico de hoje: acessibilidade. Isso foi mostrado aqui e ali anteriormente mas O QUE QUE É ISSO?

Vamos voltar um pouco. Durante anos, as pessoas tentaram alcançar o impossível: um design universal. Um design que é universal e utilizável para TODAS as pessoas, um design de tamanho único que será utilizável e perfeito para todos. Agora, só há um “pequeno” problema nisso: as pessoas são diferentes. Sempre tive excesso de peso e sempre que vejo roupas que dizem ‘tamanho único’, olho para elas com muita desconfiança e novidade: quase nunca serve. O ponto principal é: cada pessoa é diferente, os pontos de dor e as necessidades também serão diferentes.

Então, o que fazemos? Um design diferente para cada pessoa que usa nosso produto?

Bem, a ideia é de criar designs equitativos? (espero não ter traduzido isso errado). Vamos fornecer flexibilidade para atender a um público mais amplo e deixar esse público escolher o que é melhor para si. Mas! Isso não tira de nós, os designers (e programadores), a responsabilidade de garantir que estamos fazendo o que podemos para permitir essa flexibilidade.

----------------

Comecei uma lista que percebi que seria muito maior do que o esperado, então decidi colocar cada item em sua própria postagem. Começaremos com DESIGN VISUAL!

Parte 01 - Design Visual

Sobre cores

Já mencionei brevemente a importância do contraste e da taxa de contraste. Se quiser entrar em mais detalhes, você pode dar uma olhada nas Diretrizes W3. Resumidamente:

Não confie apenas na cor para transmitir significado, informações e ações;

Certifique-se de que haja contraste suficiente entre o primeiro plano e o fundo

Forneça uma opção para o modo claro/escuro

Modos claro/escuro

Existe um mito de que o modo escuro é bom para acessibilidade, porque melhora a legibilidade do texto. (Pessoalmente, sou muito fã do modo escuro, pois telas brancas/brilhantes podem me causar enxaquecas). Porém, como tudo em ux, a resposta para ‘é preto ou branco’ é que depende. Como mencionado anteriormente, uma boa regra é não generalizar e oferecer flexibilidade.

Ao disponibilizar modo claro e escuro, certifique-se de que a taxa de contraste da cor seja válida em ambos os modos. Aqui estão algumas dicas para projetar para o modo escuro (de acordo com o artigo atmos anexado no final):

Utilize tonalidades (cores menos saturadas). Cores saturadas podem causar cansaço visual e serão difíceis de serem aprovadas nos padrões de acessibilidade.

Imagem do website Atmos

Evite preto puro. Por favor. Preto puro e branco puro quando usados ​​juntos podem ser o instinto padrão, mas o contraste quando usados ​​juntos é tão forte que fica difícil de olhar. Escolha cinza escuro e off-white/cinza claro quando possível.

Seja paciente com sua paleta de cores, inverter as cores não a tornará necessariamente boa. Não tenha pressa para construir uma paleta que seja adequada para ambos.

Areas de Target

Primeiro, o que é isso? Refere-se às dimensões dos elementos interativos, como links, botões, ícones ou alvos de toque. Basicamente, qualquer coisa que você possa interagir/clicar.

WCAG 2.2 estabeleceu um mínimo para entradas de ponteiros deve ser 24x24. Este é o espaço que deve ser fornecido para uma área clicável.

Imagem do website WCAG

Há uma série de exceções e diretrizes que não entrarei em muitos detalhes. É importante pensar na área clicável dos elementos. Lembre-se também de que isso pode ser bastante útil para usuários que usam o fórum em seus celulares - (você não odeia quando não consegue clicar em algum lugar porque não clicou EXATAMENTE na área necessária?)

Resumindo:

Certifique-se de que os tamanhos de destino sejam de pelo menos 24 px

Certifique-se de que os botões se pareçam com botões, qualquer coisa que seja clicável e interativa PARECE que são interativos

Certifique-se de que os links estejam sublinhados (novamente, como um sinal visual extra de que são clicáveis)

É ISSO!!

Pelo menos para a parte 01. Esta é apenas a ponta do iceberg. Se você quiser se aprofundar nisso, recomendo muuuuito o conteúdo de Stephanie Walter, bem como a leitura do livro Extra Bold. Estou anexando mais alguns artigos e recursos aqui também! Se você leu tudo isso, você é um campeão, sei que foi bem longo.

Please like and share this content, let’s get it out there!

Artigos em ingles:

Designers Guide to Documenting Accessibility

Dark mode ui best practices

Dark mode best practices

Accessibility annotation examples

Colour accessibility tools

Inclusive components design

Accessible design in 60s

Target size minimum

Artigos em portugues:

Acessibilidade em UI

Dicas de UX/UI pra acessibilidade

Importância do contraste

Recursos:

Accessible colours

Accessible colour palette builder