Accessibility Demo

Guidelines:

Responsive design, i.e. adapts to different screen sizes, namely mobile, tablet, desktop.
Accessible names for all interactive elements.

Able to navigate using Tab key (Shift-Tab for reverse order).
Buttons are for "doing", links are for "going".
As much as possible, avoid setting the id attribute on HTML elements as this creates global variables. E.g.: <input id="companyName" name="company" type="text"> creates a global variable companyName and console.log(companyName, window.companyName, window['companyName']); will return 3 references to the <input> element which when modified, modifies the element directly.

Columns

3 columns on desktop, 2 columns on tablet, 1 column on mobile.

Alpha

Beta

Gamma

Delta

Epsilon

Forms

Nest inputs within <label> to create implicit association for accessible names.

Tabs

Horizontal tabs on desktop/laptop, vertical accordion on mobile

Alpha
Beta

Alpha

For horizontal tabs, use the Tab key to focus on the active tab, then use the left and right arrow keys to navigate between the different tabs. Press Enter or Space to activate the currently focused tab. For vertical tabs (not shown here), use the up and down arrow keys.

Beta

For vertical accordion, use the Tab key to move between the items in the accordion.

Tables

Hide columns from the right as viewport gets smaller, with content from hidden columns consolidated in a details icon.

Users
ID	Name	Username	Company Name	Role	Created	Actions
1	Alpha	alpha.admin	Acme Inc.	Organization Admin	01 Jan 1900	Username: alpha.admin Company Name: Acme Inc. Role: Organization Admin Created: 01 Jan 1900
2	Beta	beta.finance	Wayne Enterprises	Finance User	02 Feb 2020	Username: beta.finance Company Name: Wayne Enterprises Role: Finance User Created: 02 Feb 2020