Web inklusiver gestalten: So geht barrierefreies Internet

Täglich nutzen etwa 5,16 Milliarden Menschen das Internet. Ein großer Teil dieser Menschen hat eine Art von Behinderung, die ihnen die Nutzung des Internets erschwert und manchmal sogar unmöglich macht. Wie Du dir vorstellen kannst, ist das nicht gerade nutzerfreundlich und auch nicht das Ziel einer Website. In diesem Artikel stellen wir unsere Strategien vor, mit denen wir die Barrierefreiheit gewährleisten und zeigen detailliert, wie wir dabei vorgehen.

1. Barrierefreiheit im Web Development
2. Detaillierte Beispiele für barrierefreie Websites
3. Fazit

Barrierefreiheit im Web Development

Accessibility (oft abgekürzt mit A11y - also "A", dann 11 Buchstaben und "y") bedeutet im Web Development, dass so viele Menschen wie möglich Websites nutzen können sollen, auch wenn ihre Fähigkeiten dazu in irgendeiner Weise eingeschränkt sind.

"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." (W3C - Accessibility)

Detaillierte Beispiele für barrierefreie Websites

Statistiken zeigen, dass allein in den USA 4,9 % der Erwachsenen eine Sehbehinderung haben, d.h. sie sind blind oder haben selbst mit Brille große Schwierigkeiten zu sehen und benötigen spezielle Bildschirmlesegeräte.

Hier sind verschiedene Lösungsansätze für barrierefreie Websites.

1. CSS/Web Components Frameworks

Der einfachste Weg, eine Website barrierefrei zu gestalten, ist die Verwendung von Frameworks, die bereits Features für Barrierefreiheit beinhalten.

Ein Beispiel wäre die Verwendung von Chakra UI oder Material UI, die eine breite Palette von Components wie Dropdowns, Modals, Tooltips und Menüs bieten, die den A11y Standards entsprechen.

Vorteile

• Man muss nicht viel über Accessibility Standards wissen.
• Einfache Integration mit den meisten Frameworks wie React, Angular, VueJS und sogar HTML/CSS.
• Built-in Styles für skalierbare Websites.
• Verwaltet den Browser-Support für dich.
• Macht es einfach, responsive Websites zu erstellen.

Nachteile

• Es ist sehr schwer, die Stile an ein spezifisches Designsystem anzupassen. Darum verwenden wir sie bei MVST eher selten.
• Die Bundle Size ist normalerweise sehr groß.

2. Do it Yourself

Warum nicht alles von Grund auf selbst bauen? Schließlich sind es doch nur ein paar HTML-Attribute, die man den Components hinzufügt.

Auf den ersten Blick scheint es einfach zu sein, Components wie Dropdown-Menüs oder Modals zu erstellen. Man kann ein position:absolute und vielleicht ein ref mit ein paar ARIA Labels verwenden und das war's.

Pedro Duarte dachte anfangs auch, er könne ein Dropdown-Menü an einem einzigen Tag erstellen. In seinem Video erklärt er, warum das nicht möglich ist.  

Dieses Video zeigt deutlich, dass es wenig Sinn ergibt, alles von Grund auf neu zu bauen.

Vorteile

• 100% anpassbar an dein spezifisches Designsystem.
• Weniger Bundle Size.

Nachteile

• 2000+ Stunden für die Erstellung eines Dropdown-Menüs sind viel zu zeitaufwändig.
• Du musst ein Experte für Accessibility sein.
• Du musst es für die wichtigsten (ggf. auch die meisten) Browser zur Verfügung stellen.

Es gibt einen viel besseren Ansatz, welcher als Nächstes vorgestellt wird.

3. Unstyled Components (oder auch Headless Components)

Im Web Development bedeutet das Wort "headless" normalerweise ohne Styles oder ohne UI. Du bist also für das Styling verantwortlich.

Headless oder unstyled Components sind vollständig barrierefrei mit einer einfachen API, auf die jedoch keine Styles angewendet werden, sodass du deine eigenen Styles mit einfachem CSS oder einem Framework wie Tailwind verwenden kannst.

Die Variante verwenden wir bei MVST am häufigsten, denn wir sind eine designorientierte Company und jede Website sollte einzigartig sein. Jeder Client hat seine eigene Marke und Identität, die wir in ein Designsystem umsetzen.

Beispiele für Headless UI Libraries

1. Headless UI
2. MUI base - Material UI verwendet MUI base und stellt ihre Low-Level-Components kostenlos zur Verfügung.
3. Radix UI Primitives
4. Downshift
5. React Aria - Diese wurde von Adobe erstellt.
6. React Dropdown - Diese ist nur für Dropdowns und gibt dir einen Einblick, wie schwierig es ist, ein skalierbares und barrierefreies Dropdown komplett neu zu erstellen.

Fast alle dieser Libraries haben die meisten Components, die du für eine Website brauchst. Einige von ihnen sind noch in der Beta-Phase und andere sind nur für einen spezifischen Component. Aber sie haben alle das gleiche Prinzip:

Ein weiterer wichtiger Hinweis (besonders für React Developer):

• Libraries wie MUI base oder React ARIA arbeiten mit Hooks API.
• Libraries wie Radix UI stellen nur die Components API zur Verfügung.
• Andere Libraries bieten jedoch Hooks und Components APIS für die meisten ihrer Components an.

Als Nächstes geht es um den Unterschied zwischen Hooks und Components APIs.

Hooks API

import type { UseSwitchParameters } from '@mui/base';
import { useSwitch } from '@mui/base';
import { clsx } from 'clsx';

export function Switch(props: UseSwitchParameters) {
  const { getInputProps, checked, disabled } = useSwitch(props);
  return (
    <div
      className={clsx('switch-root', {
        'switch-root_checked': checked,
        'switch-root_disabled': disabled,
      })}>
      <div className={clsx('switch-thumb', { 'switch-checked': checked })} />
      <input
        onClick={e => e.stopPropagation()}
        {...getInputProps()}
        className='switch-input'
        aria-label='switch'
      />
    </div>
  );
}

Das hier ist ein simpler Switch Component. Barrierefrei und zu 100 % anpassbar verwenden wir einfach den useSwitch Hook von mui/base. Der Hook gibt die benötigten Props getInputProps zurück, die wir in das input Element einfügen. Außerdem erhalten wir die checked und disabled Props, die wir verwenden können, um den Component je nach State zu gestalten. In diesem Beispiel werden verschiedene Class Names für unterschiedliche States verwendet.

Dies ist auch ein einfaches Beispiel aus React-Aria. Hier wird ein Button-Component mit Hooks API verwendet:

import {useButton} from 'react-aria';
import {useRef} from 'react';

function TestButton(props) {
  let ref = useRef();
  let { buttonProps } = useButton(props, ref);
  let { children } = props;

  return (
    <button {...buttonProps} ref={ref}>
      Test
    </button>
  );
}

Die Idee ist dieselbe: Wir verwenden den useButton Hook, um die buttonProps abzurufen und sie in unseren eigenen Component zu übertragen.

Unser Button ist unstyled und sieht auf dem Bild unten auch so aus, aber bei näherem Betrachten können wir das type=button Attribut sehen, das aus Gründen der Barrierefreiheit hinzugefügt wurde. Mehr dazu hier: type=button.

Components API

Hier haben wir ein Beispiel von Radix Primitives als Vorlage genommen.

import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';
import './styles.css';

const CheckboxDemo = () => (
  <form>
    <div className="CheckboxWrapper"> 
      <Checkbox.Root className="CheckboxRoot" defaultChecked id="c1">
        <Checkbox.Indicator className="CheckboxIndicator">
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <label className="Label" htmlFor="c1">
        Accept terms and conditions.
      </label>
    </div>
  </form>
);

export default CheckboxDemo;

Wir importieren unsere verschiedenen Components aus Radix-UI und stellen dann unsere eigenen Styles bereit.

Wenn wir uns diesen Component ansehen, stellen wir fest, dass wir alle attributes haben, die wir brauchen, um sie barrierefrei zu machen.

<input type="checkbox" aria-hidden="true" tabindex="-1" value="on" checked="">
<label for="c1" class="c-kxiRoP c-kxiRoP-igwYzjZ-css">Accept terms and conditions.</label>

Fassen wir nun die Vor- und Nachteile der Verwendung von unstyled Components zusammen.

Vorteile

• 100% anpassbar.
• Minimale Konfiguration im Vergleich zur DIY-Methode.
• Erleichtert den Umgang mit der Barrierefreiheit einer Website.
• Geringe Bundle Size.
• Einmal erstellen und überall wiederverwenden - dieser Ansatz ist kompatibel mit den meisten Web-Frameworks wie React, Angular und VueJS.

Nachteile

• Mehr Verantwortung im Vergleich zur Verwendung von Frameworks wie Material UI oder ChakraUI usw.
• Die Implementierung nimmt einige Zeit in Anspruch. Daher ist sie nicht für MVPs oder Projekte geeignet, die in kurzer Zeit fertiggestellt werden müssen.

Fazit

Es gibt mehrere Möglichkeiten, wie Du das Internet barrierefrei machen kannst. Menschen, die auf Tastaturen oder Bildschirmlesegeräte angewiesen sind oder einfach nur die Bedienung mit der Tastatur bevorzugen, haben dadurch einen erheblich leichteren Zugang zum Internet. Anhand unserer Beispiele und Lösungsansätze kannst Du leichter entscheiden, was für dein Projekt am besten geeignet ist.

Barrierefreiheit muss im Web Development mehr Priorität bekommen, damit Menschen mit unterschiedlichen Bedürfnissen voll und ganz an der Online-Welt teilhaben können. Indem wir barrierefreie Libraries und Tools nutzen, können wir digitale Produkte inklusiver gestalten und gleichzeitig unser unverwechselbares Design und unsere kreative Vision beibehalten.