Frontend Focus Issue 396: June 19, 2019

DRANK

Web Accessibility for Devs: 3 Tips for Better Readabilityby Nikola ShekerevWhilst implementing accessibility compliance for KendoReact (a UI components library for React), I learnt a lot about readability.Good readability ensures a site will be accessible for and usable by people both with and without disabilities. Readable subtitles/transcripts will be of help to people with hearing problems and readable text in general will be of help to those with low vision or dyslexia. A rule of thumb is to use a simple and clean sans-serif font in a large font size.SPACE: Long lines are hard to read so apply a limit of 70 characters per line, if possible. For subtitles, the recommended limit is 35 characters. Provide enough space for characters to breathe - 1.5x line spacing is good.CONTRAST: Background images can obscure text, so use them sparingly. Some fonts have a border around the letters to enhance contrast, but it's better to avoid background images altogether and provide a solid backgrou…