\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Huluvu424242 (FunThomas424242)}
\pdfinfo{
  /Title (erstellung-barrierefreiher-webseiten.pdf)
  /Creator (Cheatography)
  /Author (Huluvu424242 (FunThomas424242))
  /Subject (Erstellung Barrierefreiher Webseiten Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{2C87A3}
\definecolor{LightBackground}{HTML}{F1F7F9}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Erstellung Barrierefreiher Webseiten Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Huluvu424242 (FunThomas424242)} via \textcolor{DarkBackground}{\uline{cheatography.com/19991/cs/2876/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Huluvu424242 (FunThomas424242) \\
  \uline{cheatography.com/funthomas424242} \\
        \uline{\seqsplit{github}.com/Huluvu424242}
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 4th January, 2015.\\
   Updated 28th July, 2019.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.


\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Nützliche Quellen}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{* {\bf{Buch}}: "Barrierefreiheit verstehen und umsetzen", Jan Eric Hellbusch \& Kerstin Probiesch, dpunkt.verlag, 2011, ISBN: 978-3-89864-864-6 \newline % Row Count 3 (+ 3)
* \{\{popup="http://www.barrierefreies-webdesign.de/bitv/anforderungen.html"\}\}BITV Anforderungen\{\{/popup\}\} \newline % Row Count 6 (+ 3)
* \{\{popup="http://www.bitvtest.de/bitvtest/das\_testverfahren\_im\_detail/pruefschritte.html"\}\}BITV Prüfschritte\{\{/popup\}\} \newline % Row Count 9 (+ 3)
* \{\{popup="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA\_Techniques"\}\}MDN - Using ARIA\{\{/popup\}\} \newline % Row Count 12 (+ 3)
* \{\{popup="https://developer.mozilla.org/de/docs/Web/Barrierefreiheit/ARIA"\}\}MDN - ARIA Barrierefreiheit\{\{/popup\}\} \newline % Row Count 15 (+ 3)
* \{\{popup="http://www.access-for-all.ch/ch/barrierefreiheit/barrierefreies-webdesign/checklist-2.html"\}\}http://www.access-for-all.ch/ch/barrierefreiheit/barrierefreies-webdesign/checklist-2.html\{\{/popup\}\} \newline % Row Count 20 (+ 5)
* \{\{popup="http://www.barrierefreie-informationskultur.de"\}\}http://www.barrierefreie-informationskultur.de\{\{/popup\}\} \newline % Row Count 23 (+ 3)
* Zus{\"a}tzliche Quelle für L{\"o}sungsideen http://whatsock.com/tsg/% Row Count 25 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Screenreader}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{* \{\{popup="https://www.nvaccess.org/"\}\}NVDA\{\{/popup\}\} Ein freier Screenreader für Windows Systeme. \newline % Row Count 2 (+ 2)
* \{\{popup="http://www.freedomsci.de/prod01.htm"\}\}JAWS\{\{/popup\}\} Ein kommerzieller Screenreader für Windows Systeme. \newline % Row Count 5 (+ 3)
* \{\{popup="https://support.google.com/accessibility/android/?hl=en\#topic=3529932"\}\}TalkBack\{\{/popup\}\} Ein Screenreader von google für Android Ger{\"a}te (in der Regel vorinstalliert). \newline % Row Count 9 (+ 4)
* \{\{popup="https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn"\}\}ChromeVox\{\{/popup\}\} Ein Screenreader von google für den Chrome Browser (in der Regel vorinstalliert).% Row Count 13 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Werkzeuge zur Prüfung des Accessibility-Trees}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Um zur Entwicklungszeit das Verhalten von Screenreadern halbwegs sicher erraten zu k{\"o}nnen, reicht eine Prüfung des DOMs nicht aus. Für die Ausgaben der Screenreader ist der Accessibility-Tree ausschlaggebend. Mit folgenden Werkzeugen l{\"a}sst sich der Accessibility-Tree analysieren und prüfen: \newline % Row Count 6 (+ 6)
* Active Accessibility Object Inspector (Windows) \newline % Row Count 7 (+ 1)
* Aviewer (Firefox, IE und Chrome unter Windows) \newline % Row Count 8 (+ 1)
* JAWS script namens "BX", das MSAA und UI Automation untersucht.  \newline % Row Count 10 (+ 2)
* Accessibility Inspector (OS X) \newline % Row Count 11 (+ 1)
* AccProbe (Linux) \newline % Row Count 12 (+ 1)
* Chrome: \{\{popup="chrome://accessibility"\}\}chrome://accessibility\{\{/popup\}\} + \{\{popup="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb"\}\}Accessibility Developer Tools (Chrome Erweiterung\{\{/popup\}\} \newline % Row Count 18 (+ 6)
* Chrome:  Developer Tools (F12) / Elements / Untertab Accessibillity \newline % Row Count 20 (+ 2)
* \{\{popup="https://developers.google.com/web/tools/lighthouse/"\}\}Chrome Lighthouse testet automatisiert WCAG Suites\{\{/popup\}   \newline % Row Count 23 (+ 3)
* Axe API (Plugins für Lighthouse) \newline % Row Count 24 (+ 1)
* \{\{popup="https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd/related"\}\}Chrome Erweiterung Axe\{\{/popup\}\} \newline % Row Count 27 (+ 3)
* \{\{popup="https://wave.webaim.org/extension/"\}\}WAVE Browser Plugin\{\{/popup\}\} \newline % Row Count 29 (+ 2)
* \{\{popup="https://chrome.google.com/webstore/detail/wcag-accessibility-audit/kpfleokokmllclahndmochhenmhncoej?hl=en"\}\}WCAG Accessibility Audit Developer UI (Chrome Extension)\{\{/popup\}\} \newline % Row Count 33 (+ 4)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Werkzeuge zur Prüfung des Accessibility-Trees (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{* \{\{popup="https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc"\}\}Siteimprove Accessibility Checker (Chrome Extension)\{\{/popup\}\}% Row Count 4 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{{\bf{Quellen}}:  \newline {\emph{ \seqsplit{http://www.barrierefreies-webdesign.de/knowhow/msaa/tools.html} \newline }} \seqsplit{https://medium.com/pulsar/which-accessibility-testing-tool-should-you-use-e5990e6ef0a}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Struktur \& Gliederung \& Bezeichnung}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{{\bf{Allgemeine Hinweise}} \newline % Row Count 1 (+ 1)
* Die Textstruktur, die Gliederung und auch Einrückungen müssen auch für nicht sehende Menschen klar erkennbar sein. Sie sollen die Orientierung, Navigation und den Leseflu{\ss} unterstützen.  \newline % Row Count 5 (+ 4)
* Die Bezeichnungen für nicht sehende Nutzer sollten identisch zu denen für Sehende sein und nur um weitere Details angereichert werden. Hintergrund ist die Verst{\"a}ndigung zwischen Sehenden und Nichtsehenden beim Betrachten genau der selben Seite am gleichen PC. Wenn der Sehende eine Schaltfl{\"a}che "Als Gelesen markieren" sieht und der Screenreader über den Tooltipp "Bearbeiten der Nachricht beenden" vorliest f{\"a}llt es schwer auf die selbe Schaltfl{\"a}che zu schlie{\ss}en.  \newline % Row Count 15 (+ 10)
{\bf{Vorgehensweisen}} \newline % Row Count 16 (+ 1)
* Unterteilung der Seite in Regionen mit Hilfe von landmark roles. Diese lassen sich per Tastatur ansteuern.  \newline % Row Count 19 (+ 3)
* Für Regionen die nicht über landmark roles abgedeckt werden k{\"o}nnen, lassen sich document structure roles verwenden. Diese sind nicht per Tastatur ansteuerbar sondern fügen der Seite nur nützliche Zusatzinformationen hinzu.% Row Count 24 (+ 5)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.061 cm} x{5.3984 cm} x{6.4106 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{17.67cm}}{\bf\textcolor{white}{Seitenregionen (aria landmark roles)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\{\{bb\}\}\{\{nobreak\}\}{\bf{ARIA Role}} & \{\{bb\}\}\{\{nobreak\}\}{\bf{HTML Element}} & \{\{bb\}\}\{\{nobreak\}\}{\bf{Benutzung}} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\{\{nobreak\}\}role="application" & - & Sehr selten als landmark role nutzbar. Nur für Bereiche in denen eine Webanwendung mit eigenem \seqsplit{Focusmanagement} eingebettet ist. Wird h{\"a}ufig falsch verwendet, z.B. wenn lieber Widget Rollen eingesetzt werden sollten. \tn 
% Row Count 18 (+ 15)
% Row 2
\SetRowColor{LightBackground}
\{\{nobreak\}\}role="banner" & \{\{nobreak\}\}\textless{}header\textgreater{} & Region mit Infos über einen \seqsplit{Seitenabschnitt} - im Sinne einer Überschrift (je Seite mehrmals nutzbar). \tn 
% Row Count 25 (+ 7)
% Row 3
\SetRowColor{white}
\{\{nobreak\}\}role="contentinfo" & \textless{}footer\textgreater{} & Region mit Infos über einen \seqsplit{Seitenabschnitt} - im Sinne von Inhalt und Metadaten (je Seite mehrmals nutzbar). \tn 
% Row Count 33 (+ 8)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.061 cm} x{5.3984 cm} x{6.4106 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{17.67cm}}{\bf\textcolor{white}{Seitenregionen (aria landmark roles) (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
\{\{nobreak\}\}role="complementary" & \textless{}aside\textgreater{} & Region für Abschnitte welche in Form von \seqsplit{Inhaltsbausteinen} zus{\"a}tzliche, eigenst{\"a}ndige Informationen bereitstellen. \tn 
% Row Count 8 (+ 8)
% Row 5
\SetRowColor{white}
\{\{nobreak\}\}role="form" & - & Region mit \seqsplit{Formularelementen} \tn 
% Row Count 10 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\{\{nobreak\}\}role="main" & \textless{}main\textgreater{} & Hauptregion (je Seite nur eine m{\"o}glich) \tn 
% Row Count 13 (+ 3)
% Row 7
\SetRowColor{white}
\{\{nobreak\}\}role="navigation" & \textless{}nav\textgreater{} & Region mit \seqsplit{Navigationselementen} \tn 
% Row Count 16 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\{\{nobreak\}\}role="search" & - & Region mit Suchelementen \tn 
% Row Count 18 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{{\bf{Allgemeine Hinweise}} \newline {\emph{ ARIA definiert 8 landmark roles von denen 5 sogar ein eigenes HTML Element besitzen. Die Verwendung des spezifischen HTML Elements mit der Rolle ist generell besser als ein DIV Element zusammen mit der Rolle.  \newline }} Regionen sollen unterscheidbar sein, z.B. per aria-labelledby oder aria-label \newline {\bf{Quelle}}: \{\{popup="http://www.barrierefreies-webdesign.de/knowhow/landmark-roles/strategie-fuer-landmark-roles.html"\}\}Strategie für Landmark Roles\{\{/popup\}\}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{4.8923 cm} x{5.3984 cm} x{6.5793 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{17.67cm}}{\bf\textcolor{white}{Dokumentstruktur (aria document structure roles)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\{\{bb\}\}\{\{nobreak\}\}{\bf{ARIA Role}} & \{\{bb\}\}\{\{nobreak\}\}{\bf{HTML Element}} & \{\{bb\}\}\{\{nobreak\}\}{\bf{Verwendung}} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
article & \textless{}article\textgreater{} & Nutzbar für eigenst{\"a}ndige Teilbereiche einer Seite, wie z.B. Artikel einer Zeitung oder Post in einem Weblog. Article sind {\bf{schachtelbar}}. Screenreader k{\"o}nnen hier in einen \seqsplit{Betrachtungsmodus} wechseln. Daher evtl. nicht sinnvoll für Bereiche mit \seqsplit{Interaktionselementen}. \tn 
% Row Count 22 (+ 19)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{columnheader} \tn 
% Row Count 23 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{3}{x{17.67cm}}{definition} \tn 
% Row Count 24 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{directory} \tn 
% Row Count 25 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{3}{x{17.67cm}}{document} \tn 
% Row Count 26 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{group} \tn 
% Row Count 27 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{3}{x{17.67cm}}{heading} \tn 
% Row Count 28 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{img} \tn 
% Row Count 29 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{3}{x{17.67cm}}{list} \tn 
% Row Count 30 (+ 1)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{4.8923 cm} x{5.3984 cm} x{6.5793 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{17.67cm}}{\bf\textcolor{white}{Dokumentstruktur (aria document structure roles) (cont)}}  \tn
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{listitem} \tn 
% Row Count 1 (+ 1)
% Row 11
\SetRowColor{white}
\mymulticolumn{3}{x{17.67cm}}{math} \tn 
% Row Count 2 (+ 1)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{note} \tn 
% Row Count 3 (+ 1)
% Row 13
\SetRowColor{white}
\{\{nobreak\}\}presentation & - & Soll benutzt werden um Semantik zu entfernen, z.B. bei einer Layouttabelle soll dadurch der Eindruck verhindert werden es handle sich um eine Datentabelle mit Kopf und Body. \tn 
% Row Count 15 (+ 12)
% Row 14
\SetRowColor{LightBackground}
region & \textless{}section\textgreater{} &  \tn 
% Row Count 16 (+ 1)
% Row 15
\SetRowColor{white}
\mymulticolumn{3}{x{17.67cm}}{row} \tn 
% Row Count 17 (+ 1)
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{rowgroup} \tn 
% Row Count 18 (+ 1)
% Row 17
\SetRowColor{white}
\mymulticolumn{3}{x{17.67cm}}{rowheader} \tn 
% Row Count 19 (+ 1)
% Row 18
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{separator} \tn 
% Row Count 20 (+ 1)
% Row 19
\SetRowColor{white}
\mymulticolumn{3}{x{17.67cm}}{toolbar} \tn 
% Row Count 21 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{{\bf{Quellen}}:  \newline {\emph{ \seqsplit{https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA\_Techniques\#Document\_structure\_roles} \newline }} \seqsplit{https://www.w3.org/TR/wai-aria/roles\#document\_structure\_roles}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.3984 cm} x{5.9045 cm} x{5.5671 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{17.67cm}}{\bf\textcolor{white}{Widget Aggregationen (aria composit roles)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\{\{bb\}\}\{\{nobreak\}\}{\bf{ARIA Role}} & \{\{bb\}\}\{\{nobreak\}\}{\bf{HTML Element}} & \{\{bb\}\}\{\{nobreak\}\}{\bf{Verwendung}} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
listbox & \textless{}select\textgreater{} & Realisierung von \seqsplit{Auswahllisten} \tn 
% Row Count 6 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{Quellen \newline {\emph{ \seqsplit{https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA\_Techniques\#Composite\_roles} \newline }} \seqsplit{https://www.w3.org/TR/wai-aria/roles\#composite\_roles}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{4.8923 cm} x{5.3984 cm} x{6.5793 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{17.67cm}}{\bf\textcolor{white}{Widgets (aria widget roles)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\{\{bb\}\}\{\{nobreak\}\}{\bf{ARIA Role}} & \{\{bb\}\}\{\{nobreak\}\}{\bf{HTML Element}} & \{\{bb\}\}\{\{nobreak\}\}{\bf{Verwendung}} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{3}{x{17.67cm}}{slider} \tn 
% Row Count 4 (+ 1)
% Row 2
\SetRowColor{LightBackground}
option &  & In Kombination mit listbox für Auswahllisten. \tn 
% Row Count 8 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{Quellen \newline {\emph{ \seqsplit{https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA\_Techniques\#Widget\_roles} \newline }} \seqsplit{https://www.w3.org/TR/wai-aria/roles\#widget\_roles}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Spracheingabe für Input Felder}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Die M{\"o}glichkeit der Spracheingabe ist nach der Nutzung des Vorlesens von Texten (text to speech) das Wichtigste Feature für Sehbehinderte Nutzer. Damit wird vieles vereinfacht.  \newline % Row Count 4 (+ 4)
Technische Umsetzung \newline % Row Count 5 (+ 1)
\textless{}input x-webkit-speech /\textgreater{} \newline % Row Count 6 (+ 1)
Event nach Spracheingabe kann ausgewertet werden mit: \newline % Row Count 8 (+ 2)
var sucheingabe = document.getElementsByTagName("input"){[}0{]}; \newline % Row Count 10 (+ 2)
\seqsplit{sucheingabe.onwebkitspeechchange} = function(e) \{ \newline % Row Count 11 (+ 1)
    location.href = \seqsplit{"http://www.google.de/search?q="+} sucheingabe.value; \newline % Row Count 13 (+ 2)
\};% Row Count 14 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Quelle: \seqsplit{https://www.drweb.de/webkit-browser-formularfelder-mit-spracheingabe-versehen/} \newline  \newline (28.07.2019 funktioniert nur im Chrome)}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Tabellen (Datentabellen)}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{{\emph{ Tabellen ben{\"o}tigen eine Zusammenfassung über das was in der Tabelle dargestellt wird. Dazu wird das Element \textless{}caption\textgreater{}  verwendet. Das frühere Attribut summary ist veraltet und darf nicht mehr verwendet werden.  \newline }} Tabellenspalten müssen eine Überschrift besitzen, damit klar ist welcher Inhalt in der Spalte zu erwarten ist ohne vorher die ganze Tabelle sichten zu müssen. Realisiert wird dies durch Texte in den th Elementen. Falls sich die visuelle Repr{\"a}sentation von der JAWS Repr{\"a}sentation unterscheiden soll z.B. Mo und Montag im Datepicker kann ein span mit sr-only und ein span mit aria-hidden="true" im th genutzt werden.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Navigation und Interaktion}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{* Bei einer Navigation zurück soll der Fokus wieder genau dort stehen von wo die Navigation erfolgte z.B. auf Seite 3 in Zeile 7 auf dem 5. Link in einer mehrseitigen Liste (falls genau dieser Link vorher die Navigation ausl{\"o}ste). \newline % Row Count 5 (+ 5)
* Bei Interaktionselementen welche je nach Status ihre Pr{\"a}sentation {\"a}ndern z.B. ein Icon für erledigt und nicht erledigt muss nach Ausl{\"o}sen der Interaktion der Fokus wieder auf diesem Icon (Interaktionselement) stehen.% Row Count 10 (+ 5)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Tooltipps, Alternativtexte}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{* Nicht l{\"a}nger als 60 Zeichen sonst wird im strukturierten Modus von JAWS nur ein Teil des Textes auf dem Brailleviewer angezeigt. \newline % Row Count 3 (+ 3)
* Textbeginn identisch mit der Oberfl{\"a}che halten, damit Sehender und Nichtsehender sich über die Inhalte unterhalten k{\"o}nnen. \newline % Row Count 6 (+ 3)
* Textanf{\"a}nge in Listen m{\"o}glichst mit unterschiedlichen Buchstaben oder Wortanf{\"a}ngen beginnen, damit der Nichtsehende über Tastenkürzel schnell die gewünschte Stelle erreichen kann (funktioniert nur bei Texten die nach einer Weile als bekannt angesehen werden k{\"o}nnen, z.B. Liste von Berufen etc.).% Row Count 13 (+ 7)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Dialoge, Fragen und Meldungen}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{* Fragen sollen stets in einfachen kurzen S{\"a}tzen und positiv formuliert werden. Negierte Fragen sind schwerer verst{\"a}ndlich und von Lernschwachen Menschen teilweise nicht korrekt erfassbar.  \newline % Row Count 4 (+ 4)
* Fehlermeldungen sollten prinzipiell aus 2 S{\"a}tzen bestehen. Im ersten Satz sollte die Fehlerursache kurz beschrieben werden. Der 2. Satz sollte einen L{\"o}sungsvorschlag beinhalten z.B. "Es wurde ein ungültiges Startdatum eingegeben. Bitte tragen Sie ein korrektes Datum als Startdatum ein." \newline % Row Count 10 (+ 6)
* Fehlermeldungen wie "Für diese Aktion besitzen Sie keine Berechtigung" sollen vermieden werden - Ätschi b{\"a}h Effekt! Interaktionen die der Nutzer nicht durchführen darf sollen nicht angezeigt werden.% Row Count 15 (+ 5)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Darstellung \& Verhalten von Webseiten}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{* Zun{\"a}chst wird die Struktur einer Webseite beschrieben z.B. durch HTML oder XML. \newline % Row Count 2 (+ 2)
* Durch Frameworks (JSP, AngularJS, doxia, ...) wird die Struktur mit Dateninhalten und Verhaltensinformationen angereichert.  \newline % Row Count 5 (+ 3)
* Über Stylesheets (css, xsl) wird die Struktur mit Informationen zum Layout und Design angereichert. \newline % Row Count 8 (+ 3)
* Über aria-role Attributen werden der Struktur semantische Informationen zugeordnet.  \newline % Row Count 10 (+ 2)
Das Gesamtergebnis im Browser ist eine Darstellung von Daten gem{\"a}{\ss} einem definierten Layout und entsprechend den Designvorgaben mit einem Verhalten welches sowohl durch die verwendeten Frameworks als auch über die per Rollen definierte Semantik bestimmt wird.% Row Count 16 (+ 6)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}



\end{document}