How many of us Care ? Accessibility A11y

Inspiration to write this blog was through my studies on Accessibility and how disabled people want webpages to be delivered for better understanding and interaction.

That’s when I got a lot of points that we could use to improve the accessibility experience in our applications. I am using Facebook as an example for explaining some real world situations people experience. Many of them, Facebook is/was facing at one or other point.

I’m jotting down some of them here with solutions for some as per guidelines.

  • Much talk is there about having accessible images. Giving image element alt attribute. using aria-labelledby and aria-describedby to make it much presentable, using role as presentation. But from the users posts, it looked like they where not much concerned about images or their labels. Couple of things we need to think about are.
    • Their audience and whom they follow where unique. they also posts the content in a fashion very much accessible to users. Mostly Text updates, status messages etc.
    • While a normal user, when he uploads an image, he doesn’t bother to make the image accessible by giving an explanatory label/caption, or a descriptive definition of image as image description. Worst case, they put in puzzles as image caption, which will not hold a direct relation/ explanation with the image.
    • Suggestions from users, was to avoid pictures from timeline, or at least give an option to hide all pictures with a link.
    • It is a good thing to understand how these users would prefer the content to be and provide additional controls.
    • If a control like hide all photo statuses is irrelevant for a normal user, then providing it offscreen is a wonderful feature to add for ATusers(one who uses Assistive Technology).
    • So they don’t want to interact with photo’s at all.
    • Similarly they would want to remove all games and ads(advertisements), because games are totally inaccessible and ads clutter up things so you can’t find what you really want to find like a text status post – UX
    • Well when it comes to Ads, Its your call. However is there any point of disturbing AT’s (Assistive Technologies). with ads that will not be read out properly to these users ? – in that case aria-hidden is what you want to have to save these souls.
    • In terms of look and feel of the app, they are okay with fair bit of changes in the way the app would behave otherwise, to adapt to their needs. All what matters is semantical meaning that is conveyed by the page, overall.
  • Another common issue raised would be “The feature did exist earlier, but was moved later with update to new layout.
    • Moving around stuffs every now and then confuses people with perfect vision. For people who rely on placement of things on the page, shifting things is like playing Hot Cold Game.
    • So please provide easy access to info and config of the object (Object here is any part of the page that has a logical explanation of itself)
    • Do not change the layout pretty often. An ATuser will find it hard and will feel lost.
  • Another issue would be, if all devices doesn’t represent data in a same format.
    • example issue: lack of chronological order in mobile, while computer follows that.
    • People do expect a relation between the behavior of an app in computer and mobile, or any other device. Again the placement, order, and similar logical organization is crucial. For them whether its a computer, mobile or anything else, its all representation of a same set of data.
  • People uses ATs like Dolphin Guide, Jaws, Braille-notes, Dragon NaturallySpeaking, System Access, Window-Eyes, NVDA, Voice Over and more.
    • Its a difficult task to get it right across all of these. But doing it is the only way to get your site accessible. If you hold a huge user base.
  • Provide a Special feedback form for Special Users.
    • This one, FB has got it perfect. Its highly customized and made easy for an ATuser to submit a grievance. But still remember, they might not even be able to understand what is happening, other than something is wrong.
  • Understand that an ATuser wouldnot understand what went wrong. Say a comment posted with just an Emoticon in it, and a like button. A user will be wondering what that like button is there for, if the emoticon doesn’t have an alt text or is not read. He wouldn’t even understand that he is in a comment object.

Some basic tips while coding…

  • Every thing that is a list of lists(not just ul-li lists, list here is semantically list), should be made as a tree. With option to skip from list to list. Each list should be provided with proper explanatory label. Don’t forget about I18n, while adding label.
  • usage of Headers should be done properly. Headers should be nested properly.
    • Headers with an improper level, when the Html elements are represented in a tree structure, is a smell.
    • <div>
      <h1><!— third level —></h1>
      <h2><!— second level —></h2>
    • is considered to be wrong implementation.
    • AT’s have their own ways to navigate through Headers. So even if you miss to give ‘skip to content’ links, proper Headers will serve the best. Even better that ‘skip to content’ links.
    • eg:  in JAWS, press H to navigate to the next heading
  • By this, what I want to superimpose is the truth that making a site Level AA by an audit is not exactly all, when it comes to accessibility.
  • The scope is way too more, to achieve. And achieving it correct comes with an add-on advantage of easy keyboard access to the site.

Now to Panic, Target Corporation was charged $6 Million as penalty for not being accessible


These are just some of them. WIll try to keep this blog updated with things that I learn. Do feel comfortable to disagree, and please be sure to share your opinion. 🙂



2 thoughts on “How many of us Care ? Accessibility A11y

  1. This is a great all encompassing post. Every sub heading can lead to something more interesting. Great work. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s