DEV Community

Cover image for Deep Dive into Front-End Accessibility Issues
Mayank Pathela
Mayank Pathela

Posted on

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?

HTML Easy-Peasy
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

CSS you say?
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

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.


Top comments (3)

grahamthedev profile image
GrahamTheDev • Edited

Nice article, most of the points are great!

However, there are a few points you made that may be misleading / not quite right that need clarifying.

Colours - use as many colours as you want, accessible does not meaning boring or bland (and thinking that is one of the things that puts people off implementing accessible design work). As long as there is good contrast and you aren't using colour as the sole way to convey information then there is no issue having a colourful website.

alt attribute - it is more complex than just to "always add it", sometimes an image is purely decorative in which case the alt attribute should be empty. Also don't forget it is important for people who use a screen reader so they can enjoy the image and flow of your document as well.

Final point here - your images in this article contain text, all of the text should all be within an alt attribute. - A near perfect example: "Meme: Captain America: I never faced an error since years. Agent Sitwell: What language? Captain America: HTML! (Fight in elevator ensues from Captain America, The Winter Soldier)"

WAI-ARIA - not sure what you mean with:

to minimize the use of JS for controlling the data try using WAI-ARIA which provides semantics in the form of new HTML attributes.

WAI-ARIA won't change how you control fetching and updating data, if anything it will add JS to the page as you need to update the WAI-ARIA attributes. This point contradicts your earlier point about using semantic HTML, WAI-ARIA is a last resort if you are unable to use a semantically correct element.

Animations - we have prefers-reduced-motion to switch animations off if the person has indicated they do not want animation, and you can always have a button to switch animations on and off, yet again accessible does not mean boring!

**aria-live="rude" - don't use this. It was removed from the spec over 10 years ago and has very poor if any support. Use aria-live="assertive" instead.

Other than those few minor points (and the last point which I would hope you change in the article as it could cause issues) it is a well written article with some fantastic points, especially those on semantic HTML, headings etc. ❤🦄

starkblaze01 profile image
Mayank Pathela

Thanks for giving in the inputs :)
I will add those points.

grahamthedev profile image

Not a problem, I will always get behind anyone writing about accessibility! ❤️