DEV Community


Discussion on: Deep Dive into Front-End Accessibility Issues

inhuofficial profile image
InHuOfficial • 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 Author

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

inhuofficial profile image

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