8 tips to improve usability & accessibility of your web application
Last year I made a speech at the University of Milano-Bicocca about designing accessible web apps. I explained why it is important and how to do it. If you are a native Italian speaker, recordings and slides were published here.
In this story we’ll see 8 tips, took from the speech and translated into English.
1. Use open standards
Forget about Flash and Silverlight: they are a pain in the neck. Use HTML5 instead. In fact, the first two technologies lack of support on mobile and custom devices like screen readers. They also don’t have accessibility tools built around them because of their nature (they are not open standards).
2. Semantic web
Use HTML5 elements which have a semantic meaning instead of abusing of “div” and “span” elements. As an example, consider this snippet:
In the next paragraph you will see the same page with semantic elements:
The front-end will be clearer for you as a developer and for your team; it will also improve accessibility thanks to tools that use these pieces of information to improve their understanding of the page.
3. Don’t reinvent the wheel
Use stable frameworks like Bootstrap; consider also following design principles commonly used (for example Material Design): standing on the shoulders of giants is always a good idea. Remember that reinventing the wheel is an anti-pattern in the field of development. If you write from scratch everything you have to maintain all the codebase without the help of the community: try to make your website compatible with every browser and device used by your clients before everything else.
4. Design responsive stuff
Websites need to be viewed from PCs, smartphones and large TVs. Make sure that the page fits every screen, regardless of the size or the resolution.
5. Have always an alternative text for images and subtitles for videos and audios
Having a caption/subtitles for media elements allow blind and deaf people to understand what the content is.
For instance, if you have a picture with three cats who are sleeping you should insert an “alt” attribute: