Barrierefreiheit: Empfohlene Alt-Text-Konvention für SVG und MathML?

Question 1

Überblick

HTML5 ermöglicht <svg> und <math>markiert jetzt ein HTML-Dokument ohne Abhängigkeit von externen Namespaces (anständige Übersicht hier ). Beide haben ihre eigenen altAttributanaloga (siehe unten), die von der heutigen Bildschirmlese-Software effektiv ignoriert werden. Somit sind diese Elemente für blinde Benutzer nicht zugänglich.

Gibt es Pläne, eine Standard-Alt-Text-Konvention für diese neuen Elemente zu implementieren? Ich habe die Dokumente durchsucht und bin trocken gekommen!

Weitere Details

In Bezug auf SVG: Der alternative Text einer SVG kann als Inhalt des Stamms titleoder descTags angesehen werden.

<svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

Ich habe einen Bildschirmleser gefunden, der ihn als solchen liest, aber ist das Standard? Frühere Methoden zum Einfügen von SVG hatten auch Probleme mit der Barrierefreiheit, da <object>Tags von Screenreadern inkonsistent behandelt werden.

In Bezug auf MathML: Der alternative Text von MathML sollte im alttextAttribut gespeichert werden .

<math alttext="A squared plus B squared equals C squared">
  ...
</math>

Da Bildschirmleser dies nicht zu erkennen scheinen, fügt die Mathe-Rendering-Bibliothek MathJaxaria-label zur Laufzeit Text in ein Attribut ein.

<span aria-label="[alttext contents]">...</span>

Leider lesen NVDA, JAWS und andere diese Etiketten auch noch nicht zuverlässig. (Mehr zu WAI-ARIA )

In Bezug auf beides: Da ich mit den weitgehend nicht unterstützten ARIA-Attributen keinen Erfolg hatte, habe ich versucht, titleAttribute zu verwenden. Diese scheinen auch bei diesen "fremden" HTML-Elementen ignoriert zu werden.

Einpacken

Ich bin mehr als nur ein kurzer Hack, ich suche nach der empfohlenen Möglichkeit , alternativen Text auf diesen neuen HTML-Elementen zu platzieren. Vielleicht gibt es eine W3C-Spezifikation, die ich übersehen habe? Oder ist es noch zu früh im Spiel?

Question 2

Nach einigem Graben fand ich einige offizielle Empfehlungen. Leider sind die meisten zu diesem Zeitpunkt nicht funktionsfähig. Sowohl die Browser als auch die Bildschirmleseprogramme müssen eine Menge implementieren, bevor Math und SVG als zugänglich angesehen werden können, aber Dinge sind beginnen zu suchen.

Haftungsausschluss: Die folgenden Empfehlungen habe ich in den letzten Monaten der Codierung gesammelt. Wenn etwas absolut falsch ist, lassen Sie es mich bitte wissen. Ich werde versuchen, dies auf dem neuesten Stand zu halten, wenn Browser und AT-Software fortschreiten.

MathML

Empfehlung

Verwenden Sie role="math"zusammen mit einem aria-labelauf einem umgebenden divTag (siehe Dokumentation ). Durch das Hinzufügen von tabindex="0"können sich Screenreader speziell auf dieses Element konzentrieren. Dieses Element aria-labelkann mit einer speziellen Tastenkombination (z. B. NVDA+Tab) gesprochen werden.

<div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

Einschränkungen / Überlegungen

Sketchy Screenreader-Unterstützung ein aria-label(und weniger wichtig role="math").
Update: Relevante NVDA-Tickets aria-label hier und hier .
Das Einschließen divoder spanTag erscheint unnötig, da mathes ein erstklassiges Element in HTML5 ist.
Ich fand sehr wenig Verweise auf das MathML- alttextTag.
Update: Dies scheint eine DAISY- spezifische Ergänzung zu sein, die hier beschrieben wird .

Verweise

SVG

Empfehlung

Verwenden Sie Top-Level <title>und <desc>Tags zusammen mit role="img"und aria-labelauf dem Root-SVG-Tag.

<svg role="img" aria-label="[title + description]">
  <title>[title]</title>
  <desc>[long description]</desc>
  ...
</svg>

Einschränkungen / Überlegungen

Ab Februar 2011 liest IE 9 Beta alle <title> und <desc>Tags, was wahrscheinlich unerwünscht ist. NVDA, JAWS und WindowEyes lesen jedoch, aria-labelwann das Element auch enthält role="img".
Beim Laden einer SVG-Datei (dh nicht in HTML inline) wird die Stammebene verwendet <title> wird Tag der Browsers Titel Seite werden, das wird vom Bildschirmleseprogramm gelesen werden.

Verweise

Question 3

Im Allgemeinen versucht HTML5, Autoren davon abzuhalten, Inhalte bereitzustellen, die für sehende Benutzer verborgen sind, da (a) es häufig neue Informationen enthält, die für sehende Benutzer von Nutzen sind, (b) es häufig schlecht geschrieben ist, weil es (normalerweise) nur wenig Feedback gibt ) sehender Autor, und (c) es wird nicht so sorgfältig gepflegt und kann daher schnell abgestanden sein.

Anstatt die Informationen in einem Attribut auszublenden, sollten Sie sie normalerweise als Beschriftung in einem <p>Tag neben dem Abschnitt svg oder math auf der Seite platzieren oder den Text in ein <figcaption>Tag einfügen und diesen und den Abschnitt svg / math in a setzen <figure>Element.

Wenn Sie wirklich nicht möchten, dass sehende Benutzer die Informationen sehen, besteht die Standardtechnik meiner Meinung nach darin, die Beschriftung absolut mit einem großen negativen "linken" Wert zu positionieren, zumindest bis Screenreader HTML5 einholen.

Question 4

In Bezug auf SVG, ähnlich, aber nicht identisch mit den obigen Vorschlägen, scheint es der derzeit beste Ansatz zu sein, Arienetiketten zu verwenden, indem auf die ID des Elements verwiesen wird, das den 'Alt-Text' enthält (nicht den Alt-Text selbst).

<svg aria-labelledby="svg1title">
<title id="svg1title">A wide rectangle</title>
<rect width="70" height="10" fill="black" />
</svg>

Sie können auch die Elemente title und desc verwenden, indem Sie aria-labelledby = "svg1title svg1desc" festlegen.

Quelle: http://www.sitepoint.com/tips-accessible-svg/

Ärgerlicherweise müssen Sie in diesem Fall (irgendwie) sicherstellen, dass die IDs auf der gesamten Seite eindeutig sind (mit anderen Worten, wenn Sie viele SVGs verwenden, müssen alle unterschiedliche IDs für den Titel haben). Dies gilt auch für andere IDs innerhalb der SVG und ist ein allgemeiner schwerwiegender Ärger mit Inline-SVG.

(Wenn dies äußerst problematisch ist, sollten Sie die Einbettung von SVGs mithilfe des img-Tags untersuchen. Wenn Sie eine Daten-URL verwenden und die SVG mit base64 codieren, können Sie dies weiterhin ohne externe Datei inline ausführen.)

Question 5

Theoretisch sollte ein SVG-Bild zugänglicher sein als ein Rasterbild mit einem Alt-Tag. Zum einen kann Text als Text in einem SVG gespeichert werden, ganze Textfragmente nicht nur ein kurzer Satz. Es ist traurig, wenn Screenreader diese zusätzlichen Informationen ignorieren. Es kann jedoch sein, dass nicht alle Textinhalte zu einem bestimmten Zeitpunkt sichtbar sind, wie dies auch bei HTML der Fall ist. Viele SVG-Bilder sind statische Bilder, aber ein wachsender Trend (basierend auf der tatsächlichen Verwendung im offenen Web) scheint darin zu bestehen, dynamischere SVGs zu verwenden, z. B. zum Anzeigen von Grafiken oder Diagrammen, die bearbeitet oder ausgeklappt werden können.

Beachten Sie außerdem, dass <title>Elemente in allen svg-fähigen Browsern AFAIK (zumindest der neuesten Generation) als QuickInfos (für sehende Benutzer) angezeigt werden und dass Sie sie auch in andere svg-Elemente einfügen können (der Titel gilt für das Element, zu dem es ein direktes Kind ist).

Question 6

Ich habe dies nicht getestet, aber Sie könnten versuchen, einem Container-DIV alt = "was auch immer" hinzuzufügen. Ja, es ist kein gültiges Attribut für DIV, aber ich kann ältere Bildschirmleser sehen, die sich nicht darum kümmern, wo alt erscheint.

Zum Beispiel:

<div aria-label="Whatever" alt="Whatever" role="math">
    <math>...</math>
</div>

Dies setzt natürlich voraus, dass Screenreader Alt-Attribute (falsch) auf anderen Elementen als IMG lesen. Noch nicht getestet, aber es ist besser, als darauf zu warten, dass Screenreader aufholen, wenn es funktioniert.

Answer 1

Überblick

HTML5 ermöglicht <svg> und <math>markiert jetzt ein HTML-Dokument ohne Abhängigkeit von externen Namespaces (anständige Übersicht hier ). Beide haben ihre eigenen altAttributanaloga (siehe unten), die von der heutigen Bildschirmlese-Software effektiv ignoriert werden. Somit sind diese Elemente für blinde Benutzer nicht zugänglich.

Gibt es Pläne, eine Standard-Alt-Text-Konvention für diese neuen Elemente zu implementieren? Ich habe die Dokumente durchsucht und bin trocken gekommen!

Weitere Details

In Bezug auf SVG: Der alternative Text einer SVG kann als Inhalt des Stamms titleoder descTags angesehen werden.

<svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

Ich habe einen Bildschirmleser gefunden, der ihn als solchen liest, aber ist das Standard? Frühere Methoden zum Einfügen von SVG hatten auch Probleme mit der Barrierefreiheit, da <object>Tags von Screenreadern inkonsistent behandelt werden.

In Bezug auf MathML: Der alternative Text von MathML sollte im alttextAttribut gespeichert werden .

<math alttext="A squared plus B squared equals C squared">
  ...
</math>

Da Bildschirmleser dies nicht zu erkennen scheinen, fügt die Mathe-Rendering-Bibliothek MathJaxaria-label zur Laufzeit Text in ein Attribut ein.

<span aria-label="[alttext contents]">...</span>

Leider lesen NVDA, JAWS und andere diese Etiketten auch noch nicht zuverlässig. (Mehr zu WAI-ARIA )

In Bezug auf beides: Da ich mit den weitgehend nicht unterstützten ARIA-Attributen keinen Erfolg hatte, habe ich versucht, titleAttribute zu verwenden. Diese scheinen auch bei diesen "fremden" HTML-Elementen ignoriert zu werden.

Einpacken

Ich bin mehr als nur ein kurzer Hack, ich suche nach der empfohlenen Möglichkeit , alternativen Text auf diesen neuen HTML-Elementen zu platzieren. Vielleicht gibt es eine W3C-Spezifikation, die ich übersehen habe? Oder ist es noch zu früh im Spiel?

Answer 2

Nach einigem Graben fand ich einige offizielle Empfehlungen. Leider sind die meisten zu diesem Zeitpunkt nicht funktionsfähig. Sowohl die Browser als auch die Bildschirmleseprogramme müssen eine Menge implementieren, bevor Math und SVG als zugänglich angesehen werden können, aber Dinge sind beginnen zu suchen.

Haftungsausschluss: Die folgenden Empfehlungen habe ich in den letzten Monaten der Codierung gesammelt. Wenn etwas absolut falsch ist, lassen Sie es mich bitte wissen. Ich werde versuchen, dies auf dem neuesten Stand zu halten, wenn Browser und AT-Software fortschreiten.

MathML

Empfehlung

Verwenden Sie role="math"zusammen mit einem aria-labelauf einem umgebenden divTag (siehe Dokumentation ). Durch das Hinzufügen von tabindex="0"können sich Screenreader speziell auf dieses Element konzentrieren. Dieses Element aria-labelkann mit einer speziellen Tastenkombination (z. B. NVDA+Tab) gesprochen werden.

<div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

Einschränkungen / Überlegungen

Sketchy Screenreader-Unterstützung ein aria-label(und weniger wichtig role="math").
Update: Relevante NVDA-Tickets aria-label hier und hier .
Das Einschließen divoder spanTag erscheint unnötig, da mathes ein erstklassiges Element in HTML5 ist.
Ich fand sehr wenig Verweise auf das MathML- alttextTag.
Update: Dies scheint eine DAISY- spezifische Ergänzung zu sein, die hier beschrieben wird .

Verweise

SVG

Empfehlung

Verwenden Sie Top-Level <title>und <desc>Tags zusammen mit role="img"und aria-labelauf dem Root-SVG-Tag.

<svg role="img" aria-label="[title + description]">
  <title>[title]</title>
  <desc>[long description]</desc>
  ...
</svg>

Einschränkungen / Überlegungen

Ab Februar 2011 liest IE 9 Beta alle <title> und <desc>Tags, was wahrscheinlich unerwünscht ist. NVDA, JAWS und WindowEyes lesen jedoch, aria-labelwann das Element auch enthält role="img".
Beim Laden einer SVG-Datei (dh nicht in HTML inline) wird die Stammebene verwendet <title> wird Tag der Browsers Titel Seite werden, das wird vom Bildschirmleseprogramm gelesen werden.

Verweise

Answer 3

3

Was ist mit Inline-SVG?

Michał

Answer 4

Interessanterweise zeigt Chrome (v69, Firefox nicht getestet) inline <svg>s an, wie es ist, wenn Anzeigebilder ausgeschaltet sind. Das schien mir ein Randfall zu sein, aber jetzt reicht die Antwort aus, um sie zu verwenden.

Volker E.

Answer 5

3

Im Allgemeinen versucht HTML5, Autoren davon abzuhalten, Inhalte bereitzustellen, die für sehende Benutzer verborgen sind, da (a) es häufig neue Informationen enthält, die für sehende Benutzer von Nutzen sind, (b) es häufig schlecht geschrieben ist, weil es (normalerweise) nur wenig Feedback gibt ) sehender Autor, und (c) es wird nicht so sorgfältig gepflegt und kann daher schnell abgestanden sein.

Anstatt die Informationen in einem Attribut auszublenden, sollten Sie sie normalerweise als Beschriftung in einem <p>Tag neben dem Abschnitt svg oder math auf der Seite platzieren oder den Text in ein <figcaption>Tag einfügen und diesen und den Abschnitt svg / math in a setzen <figure>Element.

Wenn Sie wirklich nicht möchten, dass sehende Benutzer die Informationen sehen, besteht die Standardtechnik meiner Meinung nach darin, die Beschriftung absolut mit einem großen negativen "linken" Wert zu positionieren, zumindest bis Screenreader HTML5 einholen.

Alohci
quelle

Danke, dass du mich daran erinnert hast <figcaption>. Das ist wahrscheinlich die beste "in der Zwischenzeit" -Lösung für SVG-Bilder. Ich habe immer noch keinen Hinweis darauf gefunden, ob ein Bildschirmleser, der das Top-Level- <desc>Tag spricht, Standard ist oder nicht. Vielleicht stupse ich die NVDA-Listen an. Ich werde dies als akzeptierte Antwort markieren, da es die vollständigste ist (ich dachte mir, dass es keinen bestimmten Standard geben würde, auf den jemand hinweisen könnte).

Courtney Christensen

Alt-Attribute sind ein Standard, der fast so alt ist wie HTML. Sie sind weder ein Hack noch "versteckte Inhalte", und von ihrer Verwendung wird sicherlich NICHT abgeraten. Darüber hinaus gibt es viele Fälle, in denen es nicht sinnvoll ist, sowohl ein Bild als auch einen Text zu verwenden - beispielsweise Symbole (da der gesamte Sinn von Symbolen häufig darin besteht, Text vollständig zu ersetzen).

Stephen R

@StephenR - Der Zweck meiner Antwort war es, das Denken zu erklären, das in den HTML5-Design-Mailinglisten der damaligen Zeit zum Ausdruck kam. Das alt-Attribut stand zwar unter einem gewissen Druck, zum Glück überlebte es den Schnitt, aber zum Beispiel wurde das zusammenfassende Attribut für Tabellen aus den gleichen Gründen, die in meiner Antwort erläutert wurden, nicht aus HTML5 entfernt.

Alohci

Außerdem wird erklärt, warum beispielsweise für das Posterbild eines Videos kein alt-Attribut vorhanden ist.

Alohci

Interessant, wie sich die Dinge entwickelt haben. Ich bin froh, dass sie es behalten haben - es wäre lächerlich gewesen, Alt

Stephen R

Answer 6

Danke, dass du mich daran erinnert hast <figcaption>. Das ist wahrscheinlich die beste "in der Zwischenzeit" -Lösung für SVG-Bilder. Ich habe immer noch keinen Hinweis darauf gefunden, ob ein Bildschirmleser, der das Top-Level- <desc>Tag spricht, Standard ist oder nicht. Vielleicht stupse ich die NVDA-Listen an. Ich werde dies als akzeptierte Antwort markieren, da es die vollständigste ist (ich dachte mir, dass es keinen bestimmten Standard geben würde, auf den jemand hinweisen könnte).

Courtney Christensen

Answer 7

Alt-Attribute sind ein Standard, der fast so alt ist wie HTML. Sie sind weder ein Hack noch "versteckte Inhalte", und von ihrer Verwendung wird sicherlich NICHT abgeraten. Darüber hinaus gibt es viele Fälle, in denen es nicht sinnvoll ist, sowohl ein Bild als auch einen Text zu verwenden - beispielsweise Symbole (da der gesamte Sinn von Symbolen häufig darin besteht, Text vollständig zu ersetzen).

Stephen R

Answer 8

@StephenR - Der Zweck meiner Antwort war es, das Denken zu erklären, das in den HTML5-Design-Mailinglisten der damaligen Zeit zum Ausdruck kam. Das alt-Attribut stand zwar unter einem gewissen Druck, zum Glück überlebte es den Schnitt, aber zum Beispiel wurde das zusammenfassende Attribut für Tabellen aus den gleichen Gründen, die in meiner Antwort erläutert wurden, nicht aus HTML5 entfernt.

Alohci

Answer 9

Außerdem wird erklärt, warum beispielsweise für das Posterbild eines Videos kein alt-Attribut vorhanden ist.

Alohci

Answer 10

Interessant, wie sich die Dinge entwickelt haben. Ich bin froh, dass sie es behalten haben - es wäre lächerlich gewesen, Alt

Stephen R

Answer 11

In Bezug auf SVG, ähnlich, aber nicht identisch mit den obigen Vorschlägen, scheint es der derzeit beste Ansatz zu sein, Arienetiketten zu verwenden, indem auf die ID des Elements verwiesen wird, das den 'Alt-Text' enthält (nicht den Alt-Text selbst).

<svg aria-labelledby="svg1title">
<title id="svg1title">A wide rectangle</title>
<rect width="70" height="10" fill="black" />
</svg>

Sie können auch die Elemente title und desc verwenden, indem Sie aria-labelledby = "svg1title svg1desc" festlegen.

Quelle: http://www.sitepoint.com/tips-accessible-svg/

Ärgerlicherweise müssen Sie in diesem Fall (irgendwie) sicherstellen, dass die IDs auf der gesamten Seite eindeutig sind (mit anderen Worten, wenn Sie viele SVGs verwenden, müssen alle unterschiedliche IDs für den Titel haben). Dies gilt auch für andere IDs innerhalb der SVG und ist ein allgemeiner schwerwiegender Ärger mit Inline-SVG.

(Wenn dies äußerst problematisch ist, sollten Sie die Einbettung von SVGs mithilfe des img-Tags untersuchen. Wenn Sie eine Daten-URL verwenden und die SVG mit base64 codieren, können Sie dies weiterhin ohne externe Datei inline ausführen.)

Answer 12

Theoretisch sollte ein SVG-Bild zugänglicher sein als ein Rasterbild mit einem Alt-Tag. Zum einen kann Text als Text in einem SVG gespeichert werden, ganze Textfragmente nicht nur ein kurzer Satz. Es ist traurig, wenn Screenreader diese zusätzlichen Informationen ignorieren. Es kann jedoch sein, dass nicht alle Textinhalte zu einem bestimmten Zeitpunkt sichtbar sind, wie dies auch bei HTML der Fall ist. Viele SVG-Bilder sind statische Bilder, aber ein wachsender Trend (basierend auf der tatsächlichen Verwendung im offenen Web) scheint darin zu bestehen, dynamischere SVGs zu verwenden, z. B. zum Anzeigen von Grafiken oder Diagrammen, die bearbeitet oder ausgeklappt werden können.

Beachten Sie außerdem, dass <title>Elemente in allen svg-fähigen Browsern AFAIK (zumindest der neuesten Generation) als QuickInfos (für sehende Benutzer) angezeigt werden und dass Sie sie auch in andere svg-Elemente einfügen können (der Titel gilt für das Element, zu dem es ein direktes Kind ist).

Answer 13

Ich habe dies nicht getestet, aber Sie könnten versuchen, einem Container-DIV alt = "was auch immer" hinzuzufügen. Ja, es ist kein gültiges Attribut für DIV, aber ich kann ältere Bildschirmleser sehen, die sich nicht darum kümmern, wo alt erscheint.

Zum Beispiel:

<div aria-label="Whatever" alt="Whatever" role="math">
    <math>...</math>
</div>

Dies setzt natürlich voraus, dass Screenreader Alt-Attribute (falsch) auf anderen Elementen als IMG lesen. Noch nicht getestet, aber es ist besser, als darauf zu warten, dass Screenreader aufholen, wenn es funktioniert.

Answer 14

Keine Würfel :-( Ich habe das versucht und es funktioniert nicht (jedenfalls mit modernen Bildschirmlesern). aria-labelUnd aria-labelledbyals die richtige Methode angesehen. Die Unterstützung ist jedoch immer noch lückenhaft.

Courtney Christensen

Barrierefreiheit: Empfohlene Alt-Text-Konvention für SVG und MathML?

Antworten:

MathML

SVG