\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{Jason Reiche (jreiche)}
\pdfinfo{
  /Title (wai-aria-1-1.pdf)
  /Creator (Cheatography)
  /Author (Jason Reiche (jreiche))
  /Subject (WAI-ARIA 1.1 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}{34385E}
\definecolor{LightBackground}{HTML}{F8F8F9}
\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{WAI-ARIA 1.1 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Jason Reiche (jreiche)} via \textcolor{DarkBackground}{\uline{cheatography.com/33853/cs/10566/}}}
\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}Jason Reiche (jreiche) \\
  \uline{cheatography.com/jreiche} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 13th February, 2017.\\
   Updated 31st January, 2017.\\
   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{multicols*}{2}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{ARIA Abstract Roles}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#command"\}\}command\{\{/popup\}\}}} & A form of widget that performs an action but does not receive input data. \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#composite"\}\}composite\{\{/popup\}\}}} & A widget that may contain navigable descendants or owned children. \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#input"\}\}input\{\{/popup\}\}}} & A generic type of widget that allows user input. \tn 
% Row Count 12 (+ 4)
% Row 3
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#landmark"\}\}landmark\{\{/popup\}\}}} & A region of the page intended as a navigational landmark. \tn 
% Row Count 16 (+ 4)
% Row 4
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#range"\}\}range\{\{/popup\}\}}} & An input representing a range of values that can be set by the user. \tn 
% Row Count 20 (+ 4)
% Row 5
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#roletype"\}\}roletype\{\{/popup\}\}}} & The base role from which all other roles in this taxonomy inherit. \tn 
% Row Count 24 (+ 4)
% Row 6
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#section"\}\}section\{\{/popup\}\}}} & A renderable structural containment unit in a document or application. \tn 
% Row Count 28 (+ 4)
% Row 7
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#sectionhead"\}\}sectionhead\{\{/popup\}\}}} & A structure that labels or summarizes the topic of its related section. \tn 
% Row Count 33 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{ARIA Abstract Roles (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#select"\}\}select\{\{/popup\}\}}} & A form widget that allows the user to make selections from a set of choices. \tn 
% Row Count 4 (+ 4)
% Row 9
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#structure"\}\}structure\{\{/popup\}\}}} & A document structural element. \tn 
% Row Count 8 (+ 4)
% Row 10
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#widget"\}\}widget\{\{/popup\}\}}} & An interactive component of a graphical user interface (GUI). \tn 
% Row Count 12 (+ 4)
% Row 11
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#window"\}\}window\{\{/popup\}\}}} & A browser or application window. \tn 
% Row Count 16 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The roles above are used to support the WAI-ARIA role taxonomy for the purpose of defining general role concepts.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Widget Roles}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#alert"\}\}alert\{\{/popup\}\}}} & A message with important, and usually \seqsplit{time-sensitive}, information. See \seqsplit{related alertdialog and status}. & alert() \tn 
% Row Count 9 (+ 9)
% Row 1
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#alertdialog"\}\}alertdialog\{\{/popup\}\}}} & A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. See \seqsplit{related alert and dialog}. &  \tn 
% Row Count 20 (+ 11)
% Row 2
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#button"\}\}button\{\{/popup\}\}}} & An input that allows for \seqsplit{user-triggered} actions when clicked or pressed. See \seqsplit{related link}. & \{\{noshy\}\}`\textless{}button\textgreater{}`\{\{nl\}\}`\textless{}input type="submit"\textgreater{}`\{\{nl\}\}`\textless{}input type="reset"\textgreater{}`\{\{nl\}\}`\textless{}input type="image"\textgreater{}` \tn 
% Row Count 28 (+ 8)
% Row 3
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#checkbox"\}\}checkbox\{\{/popup\}\}}} & A checkable input that has three possible \seqsplit{values: true}, false, or mixed. & \{\{noshy\}\}`\textless{}input type="checkbox"\textgreater{}` \tn 
% Row Count 34 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Widget Roles (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#combobox"\}\}combobox\{\{/popup\}\}}} & A presentation of a select; usually similar to \seqsplit{a textbox where} users can type ahead to select an option, or type to enter arbitrary text as a new item in the list. See \seqsplit{related listbox}. & \{\{noshy\}\}`\textless{}select\textgreater{}\{\{nl\}\}HTML5 \textless{}input\textgreater{}` \tn 
% Row Count 15 (+ 15)
% Row 5
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#dialog"\}\}dialog\{\{/popup\}\}}} & A dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response. See \seqsplit{related alertdialog}. &  \tn 
% Row Count 31 (+ 16)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Widget Roles (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#grid"\}\}grid\{\{/popup\}\}}} & A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table. & \{\{noshy\}\}`\textless{}table\textgreater{}` \tn 
% Row Count 9 (+ 9)
% Row 7
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#gridcell"\}\}gridcell\{\{/popup\}\}}} & A cell in a grid or treegrid. & \{\{noshy\}\}`\textless{}td\textgreater{}` \tn 
% Row Count 15 (+ 6)
% Row 8
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#link"\}\}link\{\{/popup\}\}}} & An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. See \seqsplit{related button}. & \{\{noshy\}\}`\textless{}a href...\textgreater{}\{\{nl\}\}\textless{}area\textgreater{}` \tn 
% Row Count 27 (+ 12)
% Row 9
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#listbox"\}\}listbox\{\{/popup\}\}}} & A widget that allows the user to select one or more items from a list of choices. See \seqsplit{related combobox and list}. &  \tn 
% Row Count 36 (+ 9)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Widget Roles (cont)}}  \tn
% Row 10
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#log"\}\}log\{\{/popup\}\}}} & A type of live region where new information is added in meaningful order and old information may disappear. See \seqsplit{related marquee}. &  \tn 
% Row Count 10 (+ 10)
% Row 11
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#marquee"\}\}marquee\{\{/popup\}\}}} & A type of live region where \seqsplit{non-essential} information changes frequently. See \seqsplit{related log.} &  \tn 
% Row Count 17 (+ 7)
% Row 12
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#menu"\}\}menu\{\{/popup\}\}}} & A type of widget that offers a list of choices to the user. &  \tn 
% Row Count 23 (+ 6)
% Row 13
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#menubar"\}\}menubar\{\{/popup\}\}}} & A presentation \seqsplit{of menu that} usually remains visible and is usually presented \seqsplit{horizontally.} &  \tn 
% Row Count 31 (+ 8)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Widget Roles (cont)}}  \tn
% Row 14
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#menuitem"\}\}menuitem\{\{/popup\}\}}} & An option in a set of choices contained by \seqsplit{a menu or menubar}. &  \tn 
% Row Count 6 (+ 6)
% Row 15
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#menuitemcheckbox"\}\}menuitemcheckbox\{\{/popup\}\}}} & A values are true, false, or mixed. &  \tn 
% Row Count 14 (+ 8)
% Row 16
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#menuitemradio"\}\}menuitemradio\{\{/popup\}\}}} & A checkable \seqsplit{role menuitemradio}, only one of which can be checked at a time. &  \tn 
% Row Count 21 (+ 7)
% Row 17
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#option"\}\}option\{\{/popup\}\}}} & A selectable item in \seqsplit{a select list}. & \{\{noshy\}\}`\textless{}option\textgreater{}` \tn 
% Row Count 27 (+ 6)
% Row 18
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#progressbar"\}\}progressbar\{\{/popup\}\}}} & An element that displays the progress status for tasks that take a long time. & \{\{noshy\}\}`\textless{}progress\textgreater{}` \tn 
% Row Count 34 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Widget Roles (cont)}}  \tn
% Row 19
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#radio"\}\}radio\{\{/popup\}\}}} & A checkable input in a group \seqsplit{of radio roles}, only one of which can be checked at a time. & \{\{noshy\}\}`\textless{}input type="radio"\textgreater{}` \tn 
% Row Count 7 (+ 7)
% Row 20
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#radiogroup"\}\}radiogroup\{\{/popup\}\}}} & A group \seqsplit{of radio buttons}. &  \tn 
% Row Count 14 (+ 7)
% Row 21
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#scrollbar"\}\}scrollbar\{\{/popup\}\}}} & A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area. &  \tn 
% Row Count 27 (+ 13)
% Row 22
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#slider"\}\}slider\{\{/popup\}\}}} & A user input where the user selects a value from within a given range. & \{\{noshy\}\}`\textless{}input type="range"\textgreater{}` \tn 
% Row Count 33 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Widget Roles (cont)}}  \tn
% Row 23
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#spinbutton"\}\}spinbutton\{\{/popup\}\}}} & A form \seqsplit{of range that} expects the user to select from among discrete choices. &  \tn 
% Row Count 7 (+ 7)
% Row 24
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#status"\}\}status\{\{/popup\}\}}} & A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar. See \seqsplit{related alert}. & \{\{noshy\}\}`\textless{}output\textgreater{}` \tn 
% Row Count 22 (+ 15)
% Row 25
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#tab"\}\}tab\{\{/popup\}\}}} & A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. &  \tn 
% Row Count 30 (+ 8)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Widget Roles (cont)}}  \tn
% Row 26
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#tablist"\}\}tablist\{\{/popup\}\}}} & A list of elements, which are references \seqsplit{to tabpanel elements}. &  \tn 
% Row Count 6 (+ 6)
% Row 27
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#tabpanel"\}\}tabpanel\{\{/popup\}\}}} & A container for the resources associated with a tab, where \seqsplit{each tab is} contained in a tablist. &  \tn 
% Row Count 14 (+ 8)
% Row 28
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#textbox"\}\}textbox\{\{/popup\}\}}} & Input that allows free-form text as its value. & \{\{noshy\}\}`\textless{}input type="text|password|email"\textgreater{}\{\{nl\}\}\textless{}textarea\textgreater{}` \tn 
% Row Count 20 (+ 6)
% Row 29
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#timer"\}\}timer\{\{/popup\}\}}} & A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point. &  \tn 
% Row Count 32 (+ 12)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Widget Roles (cont)}}  \tn
% Row 30
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#tooltip"\}\}tooltip\{\{/popup\}\}}} & A contextual popup that displays a description for an element. &  \tn 
% Row Count 6 (+ 6)
% Row 31
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#tree"\}\}tree\{\{/popup\}\}}} & A type \seqsplit{of list that} may contain sub-level nested groups that can be collapsed and expanded. &  \tn 
% Row Count 14 (+ 8)
% Row 32
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#treegrid"\}\}treegrid\{\{/popup\}\}}} & \seqsplit{A grid whose} rows can be expanded and collapsed in the same manner as for a tree. &  \tn 
% Row Count 21 (+ 7)
% Row 33
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#treeitem"\}\}treeitem\{\{/popup\}\}}} & An option item of a element within a tree that may be expanded or collapsed if it contains a sub-level group \seqsplit{of treeitem elements}. &  \tn 
% Row Count 32 (+ 11)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{The roles above act as standalone user interface widgets or as part of larger, composite widgets.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Document Structure Roles}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#article"\}\}article\{\{/popup\}\}}} & A section of a page that consists of a composition that forms an independent part of a document, page, or site. & \{\{noshy\}\}`\textless{}article\textgreater{}` \tn 
% Row Count 9 (+ 9)
% Row 1
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#columnheader"\}\}columnheader\{\{/popup\}\}}} & A cell containing header information for a column. & \{\{noshy\}\}`\textless{}th scope="col"\textgreater{}` \tn 
% Row Count 16 (+ 7)
% Row 2
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#definition"\}\}definition\{\{/popup\}\}}} & A definition of a term or concept. &  \tn 
% Row Count 23 (+ 7)
% Row 3
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#directory"\}\}directory\{\{/popup\}\}}} & A list of references to members of a group, such as a static table of contents. &  \tn 
% Row Count 30 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Document Structure Roles (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#document"\}\}document\{\{/popup\}\}}} & A region containing related information that is declared as document content, as opposed to a \seqsplit{web application}. & \{\{noshy\}\}`\textless{}body\textgreater{}` \tn 
% Row Count 9 (+ 9)
% Row 5
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#group"\}\}group\{\{/popup\}\}}} & A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive \seqsplit{technologies.} & \{\{noshy\}\}`\textless{}fieldset\textgreater{}\{\{nl\}\}\textless{}optgroup\textgreater{}` \tn 
% Row Count 20 (+ 11)
% Row 6
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#heading"\}\}heading\{\{/popup\}\}}} & A heading for a section of the page. & \{\{noshy\}\}`\textless{}h1\textgreater{}, \textless{}h2\textgreater{}\{\{nl\}\}(aria-level must be set \seqsplit{appropriately)`} \tn 
% Row Count 26 (+ 6)
% Row 7
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#img"\}\}img\{\{/popup\}\}}} & A container for a collection of elements that form an image. & \{\{noshy\}\}`\textless{}img\textgreater{}` \tn 
% Row Count 32 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Document Structure Roles (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#list"\}\}list\{\{/popup\}\}}} & A group of \seqsplit{non-interactive} list items. See \seqsplit{related listbox}. & \{\{noshy\}\}`\textless{}ul\textgreater{}, \textless{}ol\textgreater{}` \tn 
% Row Count 6 (+ 6)
% Row 9
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#listitem"\}\}listitem\{\{/popup\}\}}} & A single item in a list or directory. & \{\{noshy\}\}`\textless{}li\textgreater{}` \tn 
% Row Count 12 (+ 6)
% Row 10
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#math"\}\}math\{\{/popup\}\}}} & Content that represents a mathematical expression. &  \tn 
% Row Count 18 (+ 6)
% Row 11
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#note"\}\}note\{\{/popup\}\}}} & A section whose content is parenthetic or ancillary to the main content of the resource. &  \tn 
% Row Count 25 (+ 7)
% Row 12
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#presentation"\}\}presentation\{\{/popup\}\}}} & An element whose implicit native role semantics will not be mapped to the \seqsplit{accessibility API}. & \{\{noshy\}\}`alt=""` \tn 
% Row Count 33 (+ 8)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Document Structure Roles (cont)}}  \tn
% Row 13
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#region"\}\}region\{\{/popup\}\}}} & A large perceivable section of a web page or document, that is important enough to be included in a page summary or table of contents, for example, an area of the page containing live sporting event statistics. & \{\{noshy\}\}`\textless{}div\textgreater{}\{\{nl\}\}\textless{}frame\textgreater{}\{\{nl\}\}\textless{}section\textgreater{}` \tn 
% Row Count 17 (+ 17)
% Row 14
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#row"\}\}row\{\{/popup\}\}}} & A row of cells in a grid. & \{\{noshy\}\}`\textless{}tr\textgreater{}` \tn 
% Row Count 23 (+ 6)
% Row 15
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#rowgroup"\}\}rowgroup\{\{/popup\}\}}} & A group containing one or more row elements in a grid. & \{\{noshy\}\}`\textless{}thead\textgreater{}\{\{nl\}\}\textless{}tbody\textgreater{}\{\{nl\}\}\textless{}tfoot\textgreater{}` \tn 
% Row Count 29 (+ 6)
% Row 16
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#rowheader"\}\}rowheader\{\{/popup\}\}}} & A cell containing header information for a row in a grid. & \{\{noshy\}\}`\textless{}th scope="row"\textgreater{}` \tn 
% Row Count 36 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Document Structure Roles (cont)}}  \tn
% Row 17
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#separator"\}\}separator\{\{/popup\}\}}} & A divider that separates and \seqsplit{distinguishes} sections of content or groups of menuitems. & \{\{noshy\}\}`\textless{}br\textgreater{}` \tn 
% Row Count 7 (+ 7)
% Row 18
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#toolbar"\}\}toolbar\{\{/popup\}\}}} & A collection of commonly used function buttons or controls represented in compact  & \{\{noshy\}\}`\textless{}menu type="toolbar"\textgreater{}` \tn 
% Row Count 14 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{The roles above describe structures that organize content in a page. Document structures are not usually interactive.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Landmark Roles}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#application"\}\}application\{\{/popup\}\}}} & A region declared as a web application, as opposed to a web {\bf{document}}. &  \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#banner"\}\}banner\{\{/popup\}\}}} & A region that contains mostly \seqsplit{site-oriented} content, rather than \seqsplit{page-specific} content. & \{\{noshy\}\}`\textless{}header\textgreater{}`\{\{nl\}\}`\textless{}div id="header"\textgreater{}` \tn 
% Row Count 14 (+ 7)
% Row 2
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#complementary"\}\}complementary\{\{/popup\}\}}} & A supporting section of the document, designed to be \seqsplit{complementary} to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content. & `\textless{}aside\textgreater{}` \tn 
% Row Count 29 (+ 15)
% Row 3
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#contentinfo"\}\}contentinfo\{\{/popup\}\}}} & A large perceivable region that contains information about the parent document. & `\textless{}footer\textgreater{}` \tn 
% Row Count 36 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Landmark Roles (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#form"\}\}form\{\{/popup\}\}}} & A {\bf{landmark}} region that contains a collection of items and objects that, as a whole, combine to create a form. See related {\bf{search}}. & `\textless{}form\textgreater{}` \tn 
% Row Count 11 (+ 11)
% Row 5
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#main"\}\}main\{\{/popup\}\}}} & The main content of a document. & `\textless{}div id="content"\textgreater{}`\{\{nl\}\}`\textless{}main\textgreater{}` \tn 
% Row Count 17 (+ 6)
% Row 6
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#navigation"\}\}navigation\{\{/popup\}\}}} & A collection of navigational elements (usually links) for navigating the document or related documents. & `\textless{}nav\textgreater{}` \tn 
% Row Count 25 (+ 8)
% Row 7
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#search"\}\}search\{\{/popup\}\}}} & A {\bf{landmark}} region that contains a collection of items and objects that, as a whole, combine to create a search facility. See related {\bf{form}}. &  \tn 
% Row Count 37 (+ 12)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{The roles above are regions of the page intended as navigational landmarks. All of these roles inherit from the {\bf{landmark}} base type and, with the exception of {\bf{application}}, all are imported from the {\emph{Role Attribute {[}ROLE{]}}}. The roles are included here in order to make them clearly part of the WAI-ARIA Role taxonomy.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{ARIA Global States and Properties}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-atomic"\}\}aria-atomic\{\{/popup\}\}}} & Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the {\bf{aria-relevant}} attribute. See related {\bf{aria-relevant}}. \tn 
% Row Count 11 (+ 11)
% Row 1
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-busy"\}\}aria-busy\{\{/popup\}\}}} & Indicates whether an element, and its subtree, are currently being updated. \tn 
% Row Count 15 (+ 4)
% Row 2
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-controls"\}\}aria-controls\{\{/popup\}\}}} & Identifies the element (or elements) whose contents or presence are controlled by the current element. See related {\bf{aria-owns}}. \tn 
% Row Count 22 (+ 7)
% Row 3
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-describedby"\}\}aria-describedby\{\{/popup\}\}}} & Identifies the element (or elements) that describes the object. See related {\bf{aria-labelledby}}. \tn 
% Row Count 27 (+ 5)
% Row 4
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-disabled"\}\}aria-disabled\{\{/popup\}\}}} & Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. See related {\bf{aria-hidden}} and {\bf{aria-readonly}}. \tn 
% Row Count 35 (+ 8)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{ARIA Global States and Properties (cont)}}  \tn
% Row 5
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-dropeffect"\}\}aria-dropeffect\{\{/popup\}\}}} & Indicates what functions can be performed when the dragged object is released on the drop target. This allows assistive technologies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the application. Typically, drop effect functions can only be provided once an object has been grabbed for a drag operation as the drop effect functions available are dependent on the object being dragged. \tn 
% Row Count 23 (+ 23)
% Row 6
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-flowto"\}\}aria-flowto\{\{/popup\}\}}} & Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. \tn 
% Row Count 34 (+ 11)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{ARIA Global States and Properties (cont)}}  \tn
% Row 7
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-grabbed"\}\}aria-grabbed\{\{/popup\}\}}} & Indicates an element's "grabbed" state in a drag-and-drop operation. \tn 
% Row Count 5 (+ 5)
% Row 8
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-haspopup"\}\}aria-haspopup\{\{/popup\}\}}} & Indicates that the element has a popup context menu or sub-level menu. \tn 
% Row Count 10 (+ 5)
% Row 9
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-hidden"\}\}aria-hidden\{\{/popup\}\}}} & Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See related {\bf{aria-disabled}}. \tn 
% Row Count 18 (+ 8)
% Row 10
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-invalid"\}\}aria-invalid\{\{/popup\}\}}} & Indicates the entered value does not conform to the format expected by the application. \tn 
% Row Count 23 (+ 5)
% Row 11
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-label"\}\}aria-label\{\{/popup\}\}}} & Defines a string value that labels the current element. See related {\bf{aria-labelledby}}. \tn 
% Row Count 28 (+ 5)
% Row 12
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-labelledby"\}\}aria-labelledby\{\{/popup\}\}}} & Identifies the element (or elements) that labels the current element. See related {\bf{aria-label}} and {\bf{aria-describedby}}. \tn 
% Row Count 35 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{ARIA Global States and Properties (cont)}}  \tn
% Row 13
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-live"\}\}aria-live\{\{/popup\}\}}} & Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. \tn 
% Row Count 8 (+ 8)
% Row 14
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-owns"\}\}aria-owns\{\{/popup\}\}}} & Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship \seqsplit{between DOM elements} where the DOM hierarchy cannot be used to represent the relationship. See related {\bf{aria-controls}}. \tn 
% Row Count 21 (+ 13)
% Row 15
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-relevant"\}\}aria-relevant\{\{/popup\}\}}} & Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region. See related {\bf{aria-atomic}}. \tn 
% Row Count 30 (+ 9)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Widget Attributes}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-autocomplete"\}\}aria-autocomplete\{\{/popup\}\}}} & Indicates whether user input completion suggestions are provided. \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-checked"\}\}aria-checked\{\{/popup\}\}}} & Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. See related {\bf{aria-pressed}} and {\bf{aria-selected}}. \tn 
% Row Count 13 (+ 8)
% Row 2
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-disabled"\}\}aria-disabled\{\{/popup\}\}}} & Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. See related {\bf{aria-hidden}} and {\bf{aria-readonly}}. \tn 
% Row Count 21 (+ 8)
% Row 3
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-expanded"\}\}aria-expanded\{\{/popup\}\}}} & Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. \tn 
% Row Count 27 (+ 6)
% Row 4
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-haspopup"\}\}aria-haspopup\{\{/popup\}\}}} & Indicates that the element has a popup context menu or sub-level menu. \tn 
% Row Count 32 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Widget Attributes (cont)}}  \tn
% Row 5
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-hidden"\}\}aria-hidden\{\{/popup\}\}}} & Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See related {\bf{aria-disabled}}. \tn 
% Row Count 8 (+ 8)
% Row 6
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-invalid"\}\}aria-invalid\{\{/popup\}\}}} & Indicates the entered value does not conform to the format expected by the application. \tn 
% Row Count 13 (+ 5)
% Row 7
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-label"\}\}aria-label\{\{/popup\}\}}} & Defines a string value that labels the current element. See related {\bf{aria-labelledby}}. \tn 
% Row Count 18 (+ 5)
% Row 8
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-level"\}\}aria-level\{\{/popup\}\}}} & Defines the hierarchical level of an element within a structure. \tn 
% Row Count 23 (+ 5)
% Row 9
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-multiline"\}\}aria-multiline\{\{/popup\}\}}} & Indicates whether a text box accepts multiple lines of input or only a single line. \tn 
% Row Count 28 (+ 5)
% Row 10
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-multiselectable"\}\}aria-multiselectable\{\{/popup\}\}}} & Indicates that the user may select more than one item from the current selectable descendants. \tn 
% Row Count 34 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Widget Attributes (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-orientation"\}\}aria-orientation\{\{/popup\}\}}} & Indicates whether the element and orientation is horizontal or vertical. \tn 
% Row Count 5 (+ 5)
% Row 12
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-pressed"\}\}aria-pressed\{\{/popup\}\}}} & Indicates the current "pressed" state of toggle buttons. See related {\bf{aria-checked}} and {\bf{aria-selected}}. \tn 
% Row Count 11 (+ 6)
% Row 13
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-readonly"\}\}aria-readonly\{\{/popup\}\}}} & Indicates that the element is not editable, but is otherwise operable. See related {\bf{aria-disabled}}. \tn 
% Row Count 17 (+ 6)
% Row 14
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-required"\}\}aria-required\{\{/popup\}\}}} & Indicates that user input is required on the element before a form may be submitted. \tn 
% Row Count 22 (+ 5)
% Row 15
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-selected"\}\}aria-selected\{\{/popup\}\}}} & Indicates the current "selected" state of various widgets. See related {\bf{aria-checked}} and {\bf{aria-pressed}}. \tn 
% Row Count 28 (+ 6)
% Row 16
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-sort"\}\}aria-sort\{\{/popup\}\}}} & Indicates if items in a table or grid are sorted in ascending or descending order. \tn 
% Row Count 33 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Widget Attributes (cont)}}  \tn
% Row 17
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-valuemax"\}\}aria-valuemax\{\{/popup\}\}}} & Defines the maximum allowed value for a range widget. \tn 
% Row Count 5 (+ 5)
% Row 18
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-valuemin"\}\}aria-valuemin\{\{/popup\}\}}} & Defines the minimum allowed value for a range widget. \tn 
% Row Count 10 (+ 5)
% Row 19
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-valuenow"\}\}aria-valuenow\{\{/popup\}\}}} & Defines the current value for a range widget. See related {\bf{aria-valuetext}}. \tn 
% Row Count 15 (+ 5)
% Row 20
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-valuetext"\}\}aria-valuetext\{\{/popup\}\}}} & Defines the human readable text alternative of widget. \tn 
% Row Count 20 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{This section contains attributes specific to common user interface elements found on GUI systems or in rich internet applications which receive user input and process user actions. These attributes are used to support the widget roles.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Live Region Attributes}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-atomic"\}\}aria-atomic\{\{/popup\}\}}} & Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the {\bf{aria-relevant}} attribute. See related {\bf{aria-relevant}}. \tn 
% Row Count 11 (+ 11)
% Row 1
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-busy"\}\}aria-busy\{\{/popup\}\}}} & Indicates whether an element, and its subtree, are currently being updated. \tn 
% Row Count 15 (+ 4)
% Row 2
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-live"\}\}aria-live\{\{/popup\}\}}} & Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. \tn 
% Row Count 23 (+ 8)
% Row 3
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-relevant"\}\}aria-relevant\{\{/popup\}\}}} & Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region. See related {\bf{aria-atomic}}. \tn 
% Row Count 32 (+ 9)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{This section contains attributes specific to live regions in RIAs. These attributes may be applied to any element. The purpose of these attributes is to indicate that content changes may occur without the element having focus, and to provide assistive technologies with information on how to process those content updates. Some roles specify a default value for the {\bf{aria-live}} attribute specific to that role. An example of a live region is a ticker section that lists updating stock quotes.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Drag-and-Drop Attributes}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-dropeffect"\}\}aria-dropeffect\{\{/popup\}\}}} & Indicates what functions can be performed when the dragged object is released on the drop target. This allows assistive technologies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the application. Typically, drop effect functions can only be provided once an object has been grabbed for a drag operation as the drop effect functions available are dependent on the object being dragged. \tn 
% Row Count 23 (+ 23)
% Row 1
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-grabbed"\}\}aria-grabbed\{\{/popup\}\}}} & Indicates an element's "grabbed" state in a drag-and-drop operation. \tn 
% Row Count 28 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{This section lists attributes which indicate information about drag-and-drop interface elements, such as draggable elements and their drop targets. Drop target information will be rendered visually by the author and provided to assistive technologies through an alternate modality.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Relationship Attributes}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-activedescendant"\}\}aria-activedescendant\{\{/popup\}\}}} & Identifies the currently active descendant of a widget. \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-controls"\}\}aria-controls\{\{/popup\}\}}} & Identifies the element (or elements) whose contents or presence are controlled by the current element. See related {\bf{aria-owns}}. \tn 
% Row Count 13 (+ 7)
% Row 2
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-describedby"\}\}aria-describedby\{\{/popup\}\}}} & Identifies the element (or elements) that describes the object. See related {\bf{aria-labelledby}}. \tn 
% Row Count 18 (+ 5)
% Row 3
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-flowto"\}\}aria-flowto\{\{/popup\}\}}} & Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. \tn 
% Row Count 29 (+ 11)
% Row 4
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-labelledby"\}\}aria-labelledby\{\{/popup\}\}}} & Identifies the element (or elements) that labels the current element. See related {\bf{aria-label}} and {\bf{aria-describedby}}. \tn 
% Row Count 36 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Relationship Attributes (cont)}}  \tn
% Row 5
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-owns"\}\}aria-owns\{\{/popup\}\}}} & Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship \seqsplit{between DOM elements} where the DOM hierarchy cannot be used to represent the relationship. See related {\bf{aria-controls}}. \tn 
% Row Count 13 (+ 13)
% Row 6
\SetRowColor{white}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-posinset"\}\}aria-posinset\{\{/popup\}\}}} & Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See related {\bf{aria-setsize}}. \tn 
% Row Count 23 (+ 10)
% Row 7
\SetRowColor{LightBackground}
{\bf{\{\{popup="http://www.w3.org/TR/wai-aria/roles\#aria-setsize"\}\}aria-setsize\{\{/popup\}\}}} & Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See related {\bf{aria-posinset}}. \tn 
% Row Count 32 (+ 9)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{This section lists attributes that indicate relationships or associations between elements which cannot be readily determined from the document structure.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}