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 per the article Why Justified (or Centered) Text is Bad for Accessibility, do not use justified text, and try not to use centered text if it spans more than 2 lines.
• 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.