Points to be kept in mind while writing HTML/CSS for smooth and better accessibility
User interface plays a vital role in improving the interaction between the customer and the product on any web-based platform whether it is a mobile app, a web app or a website. UI designs are developed into web pages by using HTML and CSS.
In this article, I am going to share a variety of nifty techniques and approaches that I have learned in the past few years of UI development. These should help you improve your efficiency and productivity.
Following are the points to be kept in mind before you start working on UI development:
1. Once you get the UI designs, export them to any of the collaboration tools available (Sympli, Zeplin, Avocode, etc). For more info about what is the need of a collaboration tool, you can check this link.
2. For ease in pixel perfect web design, browser extension tools are add-ons. Grid ruler, a google extension tool, has helped me a lot to measure the exact width and height. There are many other extension tools for chrome, you can check them at more tools > extensions.
3. During web development, a developer must keep web accessibility in mind, which doesn’t mean that you just start putting ARIA attributes.
Essentially, writing accessible code means your website should give the same experience to every single user. If you want to learn more, you can check https://www.w3.org/WAI/.
These are some easy-to-implement tricks I have learned to make web app more accessible:
i. Data URIs no doubt save HTTP Requests but at the same time they also slow down page rendering if you are using longer data URIs as this can cause the size of the generated CSS file to be large. So, try to use only short data URIs.
ii. Treat both keyboard and mouse users equally, i.e. your code should give the same experience to both keyboard and mouse users.
iii. Never forget to add alt attribute for media content because alt attribute is very helpful for users having slow internet connectivity. You can also use title attributes and there are many other aria attributes which can be used as per requirement.
iv. Try saying no to inlining CSS styles on HTML elements except a few places like HTML email, older websites, dynamic content (HTML created or changed by JavaScript), etc., as inline CSS is neither maintainable nor reusable nor scalable.
v. Always use semantic HTML tags as they improve web accessibility by making your website more informative and also SEO friendly. For ex., if you have to write the HTML code for an image with a caption below it, write it using semantic tags like this:
vi. Beware of the pros and cons of CSS pseudo-properties. For instance, I faced issues in iOS touch screens with one of the CSS pseudo properties viz. the hover property. It was transformed into double tap behavior. Since hover property doesn’t work on touch screen devices such as mobiles and tablets, we can restrict the CSS hover property code only for large screen devices using CSS breakpoints like:
@media (min-width: 768px){
//hover CSS properties
}
vii. Avoid adding autoplay attributes as this can be annoying to users who don’t want any music, video, etc., to autoplay when the page loads. Even auto navigating content can be annoying for users if they don’t want the content to automatically navigate.
viii. Make sure font properties used in your website don’t affect screen reader compatibility. Choose accessible font code including all the font properties i.e. font-family, font-size, font-style, font-weight and line-height.
Font-family: Choose light-weight and easily readable font-family.
Font-size: Font size should be large enough to be easily readable in small screen devices. Don’t use font-size below 10px.
Line-height: As per Web Content Accessibility Guidelines standard line-height should be 1.5.
In the above article, I have covered only a few points but if followed these will definitely improve your website’s performance. There are many other tricks, with new ones being added every day, to improve your website’s performance. So, keep on reading if you want to be updated with all the latest tricks and features in the world of web design. Do let me know if you have any queries, any kind of feedback or any other tricks in mind related to web design. You can leave a comment or contact me via email(shristi.s@cashify.in).
