Inline SVG can do wonders for responsive design while reducing page load times and generating crisp, clean icons, but it comes with some concerns: in particular, accessibility. There’s a strong argument to be made that accessibility was not a priority when the original SVG 1.0 specification was released 15 years ago; however, SVG 1.1 improved upon that some, and the upcoming SVG 2.0 should bring accessibility needs front-and-center.

In the there here and now, making SVG accessible takes a little work, but it’s a straightforward process if you remember five rules:

Read more about Make SVG Accessible

Keyboard control is the most common alternate interaction mode for sites, one vital for users with coordination and control challenges and those who desire optimized use of web apps. It’s also probably the most overlooked aspect of modern UI design. This is ironic, given that creating keyboard accessibility is straightforward if you pay attention to just a few rules:

Read more about Tips For Keyboard Accessibility

An upcoming personal project faces an interesting UI challenge in which web app users will have the opportunity to change the background color of a page. At the same time, instructions on the page must remain legible, which is impossible if the text remains a fixed color.

The most straightforward solution to this problem is to calculate the perceived “lightness” or “darkness” of the background, and then modify the color of the text so that is opposite that value.

Read more about Auto-maximize Text Contrast