{"id":398,"date":"2023-06-07T10:50:11","date_gmt":"2023-06-07T08:50:11","guid":{"rendered":"https:\/\/digital.hfh.ch\/eaccessibility\/?post_type=chapter&p=398"},"modified":"2024-10-03T14:17:28","modified_gmt":"2024-10-03T12:17:28","slug":"nuetzliche-prueftools","status":"publish","type":"chapter","link":"https:\/\/digital.hfh.ch\/eaccessibility\/chapter\/nuetzliche-prueftools\/","title":{"raw":"N\u00fctzliche Pr\u00fcftools","rendered":"N\u00fctzliche Pr\u00fcftools"},"content":{"raw":"

Tools zur \u00dcberpr\u00fcfung einiger Barrieren<\/h2>\r\nViele potenzielle Barrieren lassen sich nicht einfach per \u00abAugenmass\u00bb\u00a0aufdecken. Auf dieser Seite findet sich eine \u00dcbersicht einiger praktischer Tools zur Ermittlung h\u00e4ufiger Barrieren.\r\n

\u00dcberpr\u00fcfung der Webseitenstruktur \/ Tags<\/h2>\r\n

Bookmarklet \u00abShow content structure\u00bb<\/span><\/h3>\r\nDieses Bookmarklet<\/span> dient dem Sichtbarmachen der semantischen Struktur auf einer Webseite (HTML-Tags). Wenn das Bookmarklet aktiviert ist, wird die sematische Auszeichnung einer Webseite so dargestellt:\r\n\r\n[caption id=\"attachment_418\" align=\"aligncenter\" width=\"796\"]\"Sichtbarmachen<\/a> Bookmarklet \u00abShow Content Structure\u00bb in Anwendung[\/caption]\r\n\r\nDer Screenshot zeigt beispielhaft die Funktionsweise des Bookmarklets an der Seite Master Psychomotoriktherapie<\/a>. Der erste Textbaustein \u00abAuf einen Blick\u00bb ist mit <P> am Anfang des Textes und <\/P> am Ende des Textes als Paragraf gekennzeichnet. Die Titel sind in korrekter, aufeinanderfolgender Reihenfolge mit den Tags <h1> (\u00abMaster Psychomotoriktherapie\u00bb), <h2> (\u00abKontakt\u00bb und \u00abWas macht den Masterstudiengang Psychomotoriktherapie an der HfH aus?\u00bb) und <h3> (\u00abOlivia Gasser-Haas, Dr. phil.\u00bb) zu erkennen. Links sind mit dem Tag <a> hinterlegt und als Liste aufgef\u00fchrt.\r\n

<\/a>Installation<\/h4>\r\n
    \r\n \t
  1. Gehe auf bookmarklet.html<\/a>.<\/li>\r\n \t
  2. Das Bookmarklet kann ganz einfach mittels Drag&Drop in die Favoritenleiste eingef\u00fcgt werden:\"\"<\/a><\/li>\r\n<\/ol>\r\n

    Wenn das nicht geht:<\/h4>\r\n
      \r\n \t
    1. Gehe auf bookmarklet.html<\/a>.<\/li>\r\n \t
    2. F\u00fcge den Link unter \u00abShow content structure\u00bb als Favorit \/ Lesezeichen hinzu. Hinweis: Das Lesezeichen sollte nicht auf die URL \u00abhttps:\/\/www.accessibility-developer-guide.com\/...\u00bb gesetzt werden, sondern auf \u00abjavascript:(function()%7Bjavascript%3A...\u00bb\r\nBei den g\u00e4ngigsten Browsern geht das so:<\/li>\r\n<\/ol>\r\n
      \r\n

      Chrome<\/p>\r\n\r\n<\/header>\r\n

      \r\n
        \r\n \t
      1. Rechtsklick auf \u00abShow content structure<\/span>\u00bb<\/li>\r\n \t
      2. Klicke auf \u00abAdresse des Links kopieren\u00bb<\/li>\r\n \t
      3. Gehe auf die Webseite chrome:\/\/bookmarks oder \u00f6ffne den Lesezeichen-Manager<\/li>\r\n \t
      4. Gehe auf die drei Punkte rechts oben<\/li>\r\n \t
      5. F\u00fcge ein neues Lesezeichen f\u00fcr den kopierten Link hinzu<\/li>\r\n \t
      6. Speichere<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n
        \r\n

        Safari<\/p>\r\n\r\n<\/header>\r\n

        \r\n
          \r\n \t
        1. Rechtsklick auf \u00abShow content structure\u00bb<\/li>\r\n \t
        2. Klicke auf \u00abLink kopieren\u00bb<\/li>\r\n \t
        3. Gehe im Reiter \u00abLesezeichen\u00bb auf \u00abLesezeichen hinzuf\u00fcgen\u00bb und speichere<\/li>\r\n \t
        4. Gehe im Reiter \u00abLesezeichen\u00bb auf \u00abLesezeichen bearbeiten\u00bb<\/li>\r\n \t
        5. Ersetze in der Spalte \u00abAdresse\u00bb die URL mit dem kopierten Link<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n
          \r\n

          Firefox<\/p>\r\n\r\n<\/header>\r\n

          \r\n
            \r\n \t
          1. Rechtsklick auf \u00abShow content structure<\/span>\u00bb<\/li>\r\n \t
          2. Klicke auf \u00abLesezeichen f\u00fcr Link hinzuf\u00fcgen\u2026\u00bb<\/li>\r\n \t
          3. Speichere<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n
            \r\n

            Edge<\/p>\r\n\r\n<\/header>\r\n

            \r\n
              \r\n \t
            1. Rechtsklick auf \u00abShow content structure\u00bb<\/li>\r\n \t
            2. Klicke auf \u00abLink kopieren\u00bb<\/li>\r\n \t
            3. Gehe auf: edge:\/\/favorites\/<\/li>\r\n \t
            4. F\u00fcge den Link als Favorit hinzu<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n

              Anwendung<\/h4>\r\nNach dem Hinzuf\u00fcgen als Favorit \/ Lesezeichen erscheint das Bookmarklet in der Favoriten(leiste) \/ Lesezeichen(leiste).\r\n
                \r\n \t
              1. Gehe auf eine beliebige Seite.<\/li>\r\n \t
              2. Klicke auf das Bookmarklet (den erstellten Favoriten \/ Lesezeichen). Es erscheinen die HTML-Tags der aufgerufenen Seite.<\/li>\r\n \t
              3. Pr\u00fcfe die semantische Logik. Hilfreich sind verschiedene umfangreiche Listen der HTML-Tags, welche im Netz zu finden sind. Zum Beispiel HTML Element Reference<\/a>.<\/li>\r\n \t
              4. Nach einem Refresh der Seite verschwinden die Tags.<\/li>\r\n<\/ol>\r\n

                Bookmarklet \u00abh123\u00bb<\/span><\/h3>\r\nDieses Bookmarklet zeigt die \u00dcberschriftsstruktur neben der Webseite an. Dadurch sieht man leicht, welche \u00dcberschriften aktuell auf der gleichen Hierarchieebene sind. Zudem k\u00f6nnen z. B. versteckte \u00dcberschriften zum Vorschein gebracht werden.\r\n\r\n[caption id=\"attachment_438\" align=\"aligncenter\" width=\"1024\"]\"Sichtbarmachen Bookmarklet \u00abh123\u00bb in Anwendung[\/caption]\r\n\r\nDer Sreenshot zeigt beispielhaft die Funktionsweise des Bookmarklets an der Seite Master Logop\u00e4die<\/a>. Durch Anw\u00e4hlen k\u00f6nnen versteckte \u00dcberschriften (Show hidden) und visuell versteckte \u00dcberschriften (Mark visually hidden) zum Vorschein gebracht werden. Ausserdem k\u00f6nnen \u00fcber die Option \u00abHover-Highlight\u00bb entsprechende Stellen (Titel) hervorgehoben werden.\r\n

                Installation<\/h4>\r\n
                  \r\n \t
                1. Gehe auf hinderlingvolkart.github.io\/h123<\/a><\/li>\r\n \t
                2. Das Bookmarklet kann, wie oben (Show content strucure) gezeigt, ganz einfach mittels Drag&Drop in die Favoritenleiste eingef\u00fcgt werden.<\/li>\r\n \t
                3. Wenn das nicht geht: Kopiere den Link unter \u00abh123\u00bb und f\u00fcge ihn zu den Favoriten \/ Lesezeichen. Die Anleitung je nach Browser ist analog dem oben beschriebenen Bookmarklet \u00abShow content structure\u00bb.<\/li>\r\n<\/ol>\r\n

                  Anwendung<\/h4>\r\nNach dem Hinzuf\u00fcgen als Favorit \/ Lesezeichen erscheint das Bookmarklet in der Favoriten(leiste) \/ Lesezeichen(leiste).\r\n
                    \r\n \t
                  1. \r\n
                      \r\n \t
                    1. Gehe auf eine beliebige Seite.<\/li>\r\n \t
                    2. Klicke auf das Bookmarklet (den erstellten Favoriten \/ Lesezeichen).<\/li>\r\n \t
                    3. Es werden die vom Screenreader gesehenen \u00dcberschriften angezeigt sowie versteckte aufgelistet. Beim Setzten eines Hakens auf den versteckten \u00dcberschriften erscheinen diese in der Liste.<\/li>\r\n \t
                    4. Nach einem Refresh der Seite verschwinden die Anzeige.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n

                      \u00dcberpr\u00fcfung von Farbkontrasten<\/h2>\r\n

                      WebAIM<\/h3>\r\nNebst dem im Kapitel Kontraste<\/a>\u00a0beschriebenen Pr\u00fcftool \u00abCCA\u00bb kann die Kontrastst\u00e4rke auch ohne Installation \u00fcber die Seite Contrast Checker von WebAIM<\/a> beurteilt werden.\r\n

                      Installation<\/h4>\r\nKeine. Gehe auf die Seite Contrast Checker von WebAIM<\/a>. Benutze dabei nicht Firefox, da dieser Browser die Pipetten-Funktion nicht zur Verf\u00fcgung stellt.\r\n

                      Anwendung<\/h4>\r\n
                        \r\n \t
                      1. Gehe auf die (Vordergrund-) Farbe (1). Klicke auf die Pipette (2). Fahre mit dem Cursor \u00fcber die gew\u00fcnschte Stelle um den genauen Farbcode zu ermitteln.<\/li>\r\n \t
                      2. Wiederhole Schritt 1 und 2 f\u00fcr die Hintergrundfarbe.<\/li>\r\n \t
                      3. Ausschlaggebend f\u00fcr eine ausreichende Kontrastst\u00e4rke ist ein \u00abPass\u00bb unter \u00abAA\u00bb (3).<\/li>\r\n<\/ol>\r\n\"Contrast<\/a>\r\n\r\n ","rendered":"

                        Tools zur \u00dcberpr\u00fcfung einiger Barrieren<\/h2>\n

                        Viele potenzielle Barrieren lassen sich nicht einfach per \u00abAugenmass\u00bb\u00a0aufdecken. Auf dieser Seite findet sich eine \u00dcbersicht einiger praktischer Tools zur Ermittlung h\u00e4ufiger Barrieren.<\/p>\n

                        \u00dcberpr\u00fcfung der Webseitenstruktur \/ Tags<\/h2>\n

                        Bookmarklet \u00abShow content structure\u00bb<\/span><\/h3>\n

                        Dieses Bookmarklet<\/span> dient dem Sichtbarmachen der semantischen Struktur auf einer Webseite (HTML-Tags). Wenn das Bookmarklet aktiviert ist, wird die sematische Auszeichnung einer Webseite so dargestellt:<\/p>\n

                        \"Sichtbarmachen<\/a>
                        Bookmarklet \u00abShow Content Structure\u00bb in Anwendung<\/figcaption><\/figure>\n

                        Der Screenshot zeigt beispielhaft die Funktionsweise des Bookmarklets an der Seite Master Psychomotoriktherapie<\/a>. Der erste Textbaustein \u00abAuf einen Blick\u00bb ist mit <P> am Anfang des Textes und <\/P> am Ende des Textes als Paragraf gekennzeichnet. Die Titel sind in korrekter, aufeinanderfolgender Reihenfolge mit den Tags <h1> (\u00abMaster Psychomotoriktherapie\u00bb), <h2> (\u00abKontakt\u00bb und \u00abWas macht den Masterstudiengang Psychomotoriktherapie an der HfH aus?\u00bb) und <h3> (\u00abOlivia Gasser-Haas, Dr. phil.\u00bb) zu erkennen. Links sind mit dem Tag <a> hinterlegt und als Liste aufgef\u00fchrt.<\/p>\n

                        <\/a>Installation<\/h4>\n
                          \n
                        1. Gehe auf bookmarklet.html<\/a>.<\/li>\n
                        2. Das Bookmarklet kann ganz einfach mittels Drag&Drop in die Favoritenleiste eingef\u00fcgt werden:\"\"<\/a><\/li>\n<\/ol>\n

                          Wenn das nicht geht:<\/h4>\n
                            \n
                          1. Gehe auf bookmarklet.html<\/a>.<\/li>\n
                          2. F\u00fcge den Link unter \u00abShow content structure\u00bb als Favorit \/ Lesezeichen hinzu. Hinweis: Das Lesezeichen sollte nicht auf die URL \u00abhttps:\/\/www.accessibility-developer-guide.com\/…\u00bb gesetzt werden, sondern auf \u00abjavascript:(function()%7Bjavascript%3A…\u00bb
                            \nBei den g\u00e4ngigsten Browsern geht das so:<\/li>\n<\/ol>\n
                            \n
                            \n

                            Chrome<\/p>\n<\/header>\n

                            \n
                              \n
                            1. Rechtsklick auf \u00abShow content structure<\/span>\u00bb<\/li>\n
                            2. Klicke auf \u00abAdresse des Links kopieren\u00bb<\/li>\n
                            3. Gehe auf die Webseite chrome:\/\/bookmarks oder \u00f6ffne den Lesezeichen-Manager<\/li>\n
                            4. Gehe auf die drei Punkte rechts oben<\/li>\n
                            5. F\u00fcge ein neues Lesezeichen f\u00fcr den kopierten Link hinzu<\/li>\n
                            6. Speichere<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
                              \n
                              \n

                              Safari<\/p>\n<\/header>\n

                              \n
                                \n
                              1. Rechtsklick auf \u00abShow content structure\u00bb<\/li>\n
                              2. Klicke auf \u00abLink kopieren\u00bb<\/li>\n
                              3. Gehe im Reiter \u00abLesezeichen\u00bb auf \u00abLesezeichen hinzuf\u00fcgen\u00bb und speichere<\/li>\n
                              4. Gehe im Reiter \u00abLesezeichen\u00bb auf \u00abLesezeichen bearbeiten\u00bb<\/li>\n
                              5. Ersetze in der Spalte \u00abAdresse\u00bb die URL mit dem kopierten Link<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
                                \n
                                \n

                                Firefox<\/p>\n<\/header>\n

                                \n
                                  \n
                                1. Rechtsklick auf \u00abShow content structure<\/span>\u00bb<\/li>\n
                                2. Klicke auf \u00abLesezeichen f\u00fcr Link hinzuf\u00fcgen\u2026\u00bb<\/li>\n
                                3. Speichere<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
                                  \n
                                  \n

                                  Edge<\/p>\n<\/header>\n

                                  \n
                                    \n
                                  1. Rechtsklick auf \u00abShow content structure\u00bb<\/li>\n
                                  2. Klicke auf \u00abLink kopieren\u00bb<\/li>\n
                                  3. Gehe auf: edge:\/\/favorites\/<\/li>\n
                                  4. F\u00fcge den Link als Favorit hinzu<\/li>\n<\/ol>\n<\/div>\n<\/div>\n

                                    Anwendung<\/h4>\n

                                    Nach dem Hinzuf\u00fcgen als Favorit \/ Lesezeichen erscheint das Bookmarklet in der Favoriten(leiste) \/ Lesezeichen(leiste).<\/p>\n

                                      \n
                                    1. Gehe auf eine beliebige Seite.<\/li>\n
                                    2. Klicke auf das Bookmarklet (den erstellten Favoriten \/ Lesezeichen). Es erscheinen die HTML-Tags der aufgerufenen Seite.<\/li>\n
                                    3. Pr\u00fcfe die semantische Logik. Hilfreich sind verschiedene umfangreiche Listen der HTML-Tags, welche im Netz zu finden sind. Zum Beispiel HTML Element Reference<\/a>.<\/li>\n
                                    4. Nach einem Refresh der Seite verschwinden die Tags.<\/li>\n<\/ol>\n

                                      Bookmarklet \u00abh123\u00bb<\/span><\/h3>\n

                                      Dieses Bookmarklet zeigt die \u00dcberschriftsstruktur neben der Webseite an. Dadurch sieht man leicht, welche \u00dcberschriften aktuell auf der gleichen Hierarchieebene sind. Zudem k\u00f6nnen z. B. versteckte \u00dcberschriften zum Vorschein gebracht werden.<\/p>\n

                                      \"Sichtbarmachen
                                      Bookmarklet \u00abh123\u00bb in Anwendung<\/figcaption><\/figure>\n

                                      Der Sreenshot zeigt beispielhaft die Funktionsweise des Bookmarklets an der Seite Master Logop\u00e4die<\/a>. Durch Anw\u00e4hlen k\u00f6nnen versteckte \u00dcberschriften (Show hidden) und visuell versteckte \u00dcberschriften (Mark visually hidden) zum Vorschein gebracht werden. Ausserdem k\u00f6nnen \u00fcber die Option \u00abHover-Highlight\u00bb entsprechende Stellen (Titel) hervorgehoben werden.<\/p>\n

                                      Installation<\/h4>\n
                                        \n
                                      1. Gehe auf hinderlingvolkart.github.io\/h123<\/a><\/li>\n
                                      2. Das Bookmarklet kann, wie oben (Show content strucure) gezeigt, ganz einfach mittels Drag&Drop in die Favoritenleiste eingef\u00fcgt werden.<\/li>\n
                                      3. Wenn das nicht geht: Kopiere den Link unter \u00abh123\u00bb und f\u00fcge ihn zu den Favoriten \/ Lesezeichen. Die Anleitung je nach Browser ist analog dem oben beschriebenen Bookmarklet \u00abShow content structure\u00bb.<\/li>\n<\/ol>\n

                                        Anwendung<\/h4>\n

                                        Nach dem Hinzuf\u00fcgen als Favorit \/ Lesezeichen erscheint das Bookmarklet in der Favoriten(leiste) \/ Lesezeichen(leiste).<\/p>\n

                                          \n
                                        1. \n
                                            \n
                                          1. Gehe auf eine beliebige Seite.<\/li>\n
                                          2. Klicke auf das Bookmarklet (den erstellten Favoriten \/ Lesezeichen).<\/li>\n
                                          3. Es werden die vom Screenreader gesehenen \u00dcberschriften angezeigt sowie versteckte aufgelistet. Beim Setzten eines Hakens auf den versteckten \u00dcberschriften erscheinen diese in der Liste.<\/li>\n
                                          4. Nach einem Refresh der Seite verschwinden die Anzeige.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

                                            \u00dcberpr\u00fcfung von Farbkontrasten<\/h2>\n

                                            WebAIM<\/h3>\n

                                            Nebst dem im Kapitel Kontraste<\/a>\u00a0beschriebenen Pr\u00fcftool \u00abCCA\u00bb kann die Kontrastst\u00e4rke auch ohne Installation \u00fcber die Seite Contrast Checker von WebAIM<\/a> beurteilt werden.<\/p>\n

                                            Installation<\/h4>\n

                                            Keine. Gehe auf die Seite Contrast Checker von WebAIM<\/a>. Benutze dabei nicht Firefox, da dieser Browser die Pipetten-Funktion nicht zur Verf\u00fcgung stellt.<\/p>\n

                                            Anwendung<\/h4>\n
                                              \n
                                            1. Gehe auf die (Vordergrund-) Farbe (1). Klicke auf die Pipette (2). Fahre mit dem Cursor \u00fcber die gew\u00fcnschte Stelle um den genauen Farbcode zu ermitteln.<\/li>\n
                                            2. Wiederhole Schritt 1 und 2 f\u00fcr die Hintergrundfarbe.<\/li>\n
                                            3. Ausschlaggebend f\u00fcr eine ausreichende Kontrastst\u00e4rke ist ein \u00abPass\u00bb unter \u00abAA\u00bb (3).<\/li>\n<\/ol>\n

                                              \"Contrast<\/a><\/p>\n

                                               <\/p>\n","protected":false},"excerpt":{"rendered":"

                                              Tools zur \u00dcberpr\u00fcfung einiger Barrieren Viele potenzielle Barrieren lassen sich nicht einfach per \u00abAugenmass\u00bb\u00a0aufdecken. Auf dieser Seite findet sich eine \u00dcbersicht einiger praktischer Tools zur Ermittlung h\u00e4ufiger Barrieren. \u00dcberpr\u00fcfung der Webseitenstruktur \/ Tags Bookmarklet \u00abShow content structure\u00bb Dieses Bookmarklet dient dem Sichtbarmachen der semantischen Struktur auf einer Webseite (HTML-Tags). Wenn das Bookmarklet aktiviert ist, wird […]<\/p>\n","protected":false},"author":1591,"menu_order":14,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"categories":[],"chapter-type":[],"contributor":[],"license":[],"class_list":["post-398","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapters\/398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/users\/1591"}],"version-history":[{"count":61,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapters\/398\/revisions"}],"predecessor-version":[{"id":493,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapters\/398\/revisions\/493"}],"part":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapters\/398\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/media?parent=398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/categories?post=398"},{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapter-type?post=398"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/contributor?post=398"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/license?post=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}