c2b_default

Abend 24: 23.11.2016 - Accessibility & SEO

Accessibility & SEO

Accessibility & SEO

8
0.0 (0)
M. R.
Étudier
M. R.
Diese Karteikarten behandeln das Thema Barrierefreiheit und Suchmaschinenoptimierung (SEO) auf Universitätsniveau. Sie konzentrieren sich auf die Verbesserung der Seitenstruktur gemäß WCAG, die Bedeutung von HTML-Elementen für SEO, die Implementierung von Labels für Formularfelder zur Unterstützung von Screenreadern, Best Practices für das Crawling und die Indexierung dynamischer Inhalte, sowie die Prinzipien der Web Content Accessibility Guidelines. Diese Karteikarten sind besonders nützlich für Studierende und Entwickler, die Webinhalte zugänglich und suchmaschinenfreundlich gestalten möchten.
Cartes-fiches
8
Utilisateurs
9
Langue
Allemand
Catégorie
Informatique
Niveau
Université
Créé / Mis à jour
26.11.2016 / 10.01.2018
  • 1  / 8

Cartes-fiches

Welches sind die 4 Prinzipien der Web Content Accessibility Guidelines?

  • wahrnehmbar
  • bedienbar
  • verständlich
  • robust

Accessability für eine Tabelle

Welche Elemente sind Mindestanforderungen um eine Tabelle barrierefrei zu gestalten?

  • Tabellenbeschreibung als <caption>
  • Tabellenheader in einem <thead> Gruppe
  • Spalten oder Zeilen Titel in einem <th>
  • Beschreibung in welche Richtung die Beschreibung gilt mittels scope="col" bzw. scope="row"

Was ist Barrierefreiheit?

Barrierefrei heisst, dass Räumlichkeiten, Medien oder Einrichtungen so angelegt sind, dass sie von jedem Menschen unabhängig von einer eventuell vorhandenen Einschränkung benutzt werden können und dass sie grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar sind.

Was ist (WAI)-ARIA und welches Ziel hat es?

Web Accessibility Initiative: Accessible Rich Internet Applications

• W3C Recommendation: http://www.w3.org/TR/wai-aria/

• Ziel: Inhalte (insbesondere dynamische) zugänglich machen, welche
standardmässig nicht zugänglich sind

SEO: Nenne vier Best practices bzgl. Crawling/Indexierung von dynamischen Inhalten

  • server-side oder hybrid rendering (Isomorpher / Universal-Ansatz)
  • alternativ: Test mit Google Search Console “Fetch as Google tool”, um zu überprüfen, ob die Inhalte erfolgreich dargestellt werden für den google search crawler
  • unabhängig zugängliche URLs
  • XML Sitemap

Weshalb ist es aus Accessibility-Sicht wichtig, zu jedem HTML-Formularfeld auch ein -Tag zu implementieren?

User mit Screenreader navigieren in der Regel mit Hilfe der Tabulator-Taste durch eine Website und springen damit bei Formularen von Feld zu Feld. Ohne <label> zu einem Feld ist es für den Benutzer eines Screenreaders schwierig bis unmöglich herauszufinden, was er in einem Formularfeld eingeben muss (z.B. Textfeld) bzw. welche Optionen er hat (z.B. Checkbox). Wird ein <label> zu einem Feld gesetzt, liest der Screenreader dessen Inhalt vor, wenn man zu einem Formularfeld navigiert.

SEO Relevanz

Nenne mindestens vier HTML-Elemente, die relevant für die Suchmaschinenoptimierung sind.


1. <title></title>

2. <meta name="description"></meta>
3. <nav></nav>
4. <h1></h1> (Pro in sich geschlossener Inhaltsblock erlaubt -> http://accessiblehtmlheadings.com )
5. <section></section>
6. <article></article>

WCAG - Seitenstruktur

Wie kannst du gemäss WCAG die Seitenstruktur verbessern? (3 Bsp.)

  • versteckte <hX> Elemente, um Bereiche auszuzeichnen
  • semantisch korrekte Markup-Elemente in Kombination mit ARIA-Rollen (z.B. <main role="main">...</main>)
  • Skiplinks, um dem User zu ermöglichen, Bereiche wie die Navigation zu überspringen

Étudier