Deep Dive into Front-End Accessibility Issues

Looking into the complexity of the web-development one of the most common issue that arises in handling big websites is the accessibility issue. Let's deep dive into some common problems and learn how to avoid those.

The term "Accessibility" in front-end context

Accessibility for a web app aims to make it usable by as many people in as many contexts as possible, varying from low to high powered desktop users, and making it sensible for people with disability. We may be not able to achieve 100% of it but can develop a web app keeping our target audience in mind.
Before Jumping into the development it's better to have a User Persona and the limitations they have.

HTML you say? What possibly could go wrong with it?

Most people think that HTML is a piece of cake and underestimates the power it has. There are over 100 HTML5 tags that are supported by modern browsers (Find the whole list here). We don't use all the tags on day to day basis but it might come in handy to use them sometimes which can avoid the excess use of JS in your codebase.

Semantic Issues:
Always use proper HTML tags instead of implementing things just to make things work out the way you want.
Here are some of the key issues I notice very often:

• Often use of <br> tag instead of wrapping up their content in the <p> tag.
• Multiple <h1> tags on a single webpage. The title inside the <h1> is supposed to reflect the purpose of that very webpage. If you want to highlight any section of the page use different Heading tags and use only a single <h1> tag per page. Have proper signposts in the form of headings to help users find their concerned part of content quickly.
• Unstructured Content flow on the Page. Either the CSS is being used or not the content of the page itself should make the sense. If you want to validate that then try disabling the CSS and check if it looks good(you can download Web Developer extension for your browser and Disable CSS). Don't use CSS to control fonts if it can be done by using different HTML tags.
• No alt attribute for <img> tag. Always add this property to let the user know what was supposed to be there in case a broken image is loaded because of low network bandwidth.

Apart from semantic issues, there are few things worth noting to make your web page from better to best, Sometimes, users want more keyboard accessibility rather than using a mouse. They just use Tab and Shift + Tab to move around the webpage. So, try to ensure that the flow of the page is going in the right direction and it's easier for a user to navigate around. Always check for cross-browser compatibility of your elements, for example, IE9 behaves differently than most other browsers when a poster attribute is set in the <video> tag. Most browsers interpret the presence of a poster attribute to mean that the specified image is to be displayed until the user chooses to play the video. IE9 will only use the specified poster image in this way if preload="none" is set; otherwise, it will take the first still of the video and display that instead. Also, try using the <track> tag to add subtitles for your video to be understandable by people with disability.

Ah CSS! That's where everything goes wrong

It can be summarized in a simple sentence: Don't Overkill! There's a lot you can do with CSS but it doesn't mean to use it everywhere even when it's not needed. Pouring in the extra animations and transitions can be distracting. As a developer, we may appreciate the work and thought process you have put into it to make it happen but if it's distracting the target audience from focusing on the concerned content then it's of no use. Always keep it simple.
Adding extra colours never helps. Decide on a theme with the minimum set of colours. You are creating a web page, not a colour palate(unless you are). And always check if the different colours are in contrast and make the content more readable. You can use WebAIM to pick colours for better contrast.
On a side note check for cross-browser compatibility for CSS too.

For JS it's complicated

It always adds complexity to a webpage. Always be sure whether to use it or not. Sometimes it hard to decide whether to use repetitive <div> or simply put in a JS snippet. Try to optimize your code as much you can, because low-computation devices might not be able to render that and it's not scalable. There isn't much data you can store on the browser using cookies. Decide for yourself what's important data which user wants to quickly access first when visiting the webpage and compare trade-offs storing it on client-side or server-side.
Nowadays every other website has content dynamically loaded and JS is heavily used to fetch and update the data, to minimize the use of JS for controlling the data try using WAI-ARIA which provides semantics in the form of new HTML attributes. For example, if the content is regularly updated then use the aria-live attribute to decide when to update the data so that the user doesn't miss it depending on its importance. You can set its value to the following:

• off: The default. Updates should not be announced
• polite: Updates should be announced only if the user is idle
• assertive: Updates should be announced to the user as soon as possible

That's a wrap! But there are many more things you can explore and do, and knowing your target audience always ends up creating a better web app.

References:

• MDN
• WAI-ARIA
• WebAIM