Accessibility Demo

Recommended reading: Practical Web Accessibility (2nd edition) by Ashley Firth (accompanying source code).
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). Element receiving keyboard focus must have clear focus indication, e.g. change in border or outline.
Buttons are for "doing", links are for "going". Links in text MUST be underlined as color-blind users may not see difference in color, even with hover effects.
Aim for a Flesch-Kincaid Readability test score of above 60 for content on website and in emails.
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.

Alerts

Do not depend solely on color to differentiate the type of alert, prepend icon or status text (e.g. "Success: ", "Error: "). Try using the Sim Daltonism color blindness simulator to view the alerts below - the success and error messages will be indistinguishable.

This is a success message.

This is an error message.

This is an informational message.

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