Vega

Vega ist eine deklarative Sprache zum Erstellen, Speichern und Teilen interaktiver Visualisierungsdesigns. Ab Version 5.11 unterstützt sie einige ARIA-Attribute für die Ausgabe von SVG-Dateien:

aria

schließt ARIA-Attribute in SVG-Dateien ein. Der Standardwert ist true. Bei false wird das aria-hidden-Attribut für die entsprechende SVG-Gruppe gesetzt.

description

liefert in aria-label eine Textbeschreibung des SVG-ELements, wenn aria den Wert true hat.

Mit Flight Passengers Example gibt es ein Beispiel für die Verwendung der Vega-Anweisungen aria- und description durch Vega-Lite:

../../_images/flight-passengers.svg
  • Die horizontalen Linien sollen nicht zugänglich werden. Daher wurde in der Vega-Konfigurationsdatei flight-passengers.vg.json die horizontale Linie mit "aria": false, ausgezeichnet.

    108  "marks": [
    109    {
    110      "type": "line",
    111      "aria": false,
    112      "from": {"data": "traffic"},
    113      "encode": {
    114        "enter": {
    115          "x": {"scale": "x", "field": "unit0"},
    116          "y": {"scale": "y", "field": "change"},
    117          "stroke": {"value": "steelblue"},
    118          "strokeWidth": {"value": 3}
    119        }
    120      },
    121      "zindex": 2
    122    },
    

    In der generierten SVG-Datei flight-passengers.svg erhält die zugehörige Gruppe dadurch die Annotation aria-hidden="true":

    69                    <g class="mark-line role-mark" aria-hidden="true">
    70                        <path d="M24.000000019013836,20.112588094658268L93.2076502901645,26.132110486376767L160.09289618980006,14.924455087752282L229.2076502860901,20.695076449129235L298.32240438238017,9.587662748507821L362.9781420853612,109.65285552622753L432.0000000067907,164.6837644873604" stroke="steelblue" stroke-width="3"/>
    71                    </g>
    
  • Die Markierungen in der Zeitachse erhalten hingegen eine ausführliche Beschreibung (Englisch description) mit Monat, Jahr und prozentualer Veränderung zum Vorjahr:

    123    {
    124      "type": "symbol",
    125      "from": {"data": "traffic"},
    126      "encode": {
    127        "enter": {
    128          "description": {
    129            "signal": "timeFormat(datum.unit0, '%B %Y') + ': ' + format(datum.change, '+.1%') + ' change from prior year'"
    130          },
    131          "tooltip": {
    132            "signal": "format(datum.change, '+.1%')"
    133          },
    134          "x": {"scale": "x", "field": "unit0"},
    135          "y": {"scale": "y", "field": "change"},
    136          "fill": {"value": "steelblue"}
    137        }
    138      },
    139      "zindex": 2
    140    }
    

    In der generierten SVG-Datei erhalten die Pfade dadurch ein entsprechendes aria-label:

    72                    <g class="mark-symbol role-mark" role="graphics-object" aria-roledescription="symbol mark container">
    73                        <path aria-label="October 2019: +6.1% change from prior year" role="graphics-symbol" aria-roledescription="symbol mark" transform="translate(24.000000019013836,20.112588094658268)" d="M4,0A4,4,0,1,1,-4,0A4,4,0,1,1,4,0" fill="steelblue"/>
    74                        <path aria-label="November 2019: +2.0% change from prior year" role="graphics-symbol" aria-roledescription="symbol mark" transform="translate(93.2076502901645,26.132110486376767)" d="M4,0A4,4,0,1,1,-4,0A4,4,0,1,1,4,0" fill="steelblue"/>
    75                        <path aria-label="December 2019: +9.7% change from prior year" role="graphics-symbol" aria-roledescription="symbol mark" transform="translate(160.09289618980006,14.924455087752282)" d="M4,0A4,4,0,1,1,-4,0A4,4,0,1,1,4,0" fill="steelblue"/>
    76                        <path aria-label="January 2020: +5.7% change from prior year" role="graphics-symbol" aria-roledescription="symbol mark" transform="translate(229.2076502860901,20.695076449129235)" d="M4,0A4,4,0,1,1,-4,0A4,4,0,1,1,4,0" fill="steelblue"/>
    77                        <path aria-label="February 2020: +13.4% change from prior year" role="graphics-symbol" aria-roledescription="symbol mark" transform="translate(298.32240438238017,9.587662748507821)" d="M4,0A4,4,0,1,1,-4,0A4,4,0,1,1,4,0" fill="steelblue"/>
    78                        <path aria-label="March 2020: −55.6% change from prior year" role="graphics-symbol" aria-roledescription="symbol mark" transform="translate(362.9781420853612,109.65285552622753)" d="M4,0A4,4,0,1,1,-4,0A4,4,0,1,1,4,0" fill="steelblue"/>
    79                        <path aria-label="April 2020: −93.6% change from prior year" role="graphics-symbol" aria-roledescription="symbol mark" transform="translate(432.0000000067907,164.6837644873604)" d="M4,0A4,4,0,1,1,-4,0A4,4,0,1,1,4,0" fill="steelblue"/>
    80                    </g>