Skip to main content
Posted in

Accessibility Tips

Short note: Why it’s important for promotional emails to be accessible and not text embedded into an image?

March 8, 2018 Srinivasu Chakravarthula Leave a Comment Accessibility Tips

These days, almost every day, we will end up receiving an email about a promotional offer but quite often they are image based. If you are a user with vision impairment, you cannot read that email with a screen reader. If you are viewing that email on a mobile device, often, images does not get loaded or take a lot of time to load due to poor connectivity.

Today (though not really new), I have observed email applications specially GMail uses some sort of intelligence to filter if an email is spam, if it decides as spam, it doesn’t by default load images of that email. Here is a screenshot of a promotional email I have recently received and how GMail displays it:

Screenshot from GMail

This Screen short displays a warning from GMail saying that this email may be spam and hence images are not loaded. Though there is an option to load images, what if user is a beginner or someone who does not know such features. In this scenario, actually messaging is lost. Fabulous emails can be generated using HTML and not really just as embedded into an image.

Read The ultimate guide for accessible emails

How to add alternate text to images?

How to add alternate text to images?
October 31, 2017 Srinivasu Chakravarthula Leave a Comment Accessibility Tips , ,

Authors note: This is a re-published post due to an unavoidable technical issue.

In continuation to our post <alt> Campaign: Let’s make images on the web accessible, here are a few tips on how to add alternate text on different platforms.

In all platforms, ensure that your alternate text is meaningful.

Add alternate text in HTML Code

After writing image source, add <alt> attribute to include alternate text of the image. Example code:

For informative images: <img src=”place image source here” alt=”This is alternate text for given image”>

For active images: <a href=”link address”><img src=”Place image source here” alt=”This is alternate text for this image link”></a>

For decorative images:<img src=”Place image source here” alt=””> Leaving an empty alt attribute will ask screen readers to ignore that image. But if we do not use alt attribute at all, then screen reader would possibly pick relevant information such as image’s file name as alternate text and expose to the user which doesn’t makes sense.

For CSS rendered background images: If those are just for decorative purpose, no worries but if background images are informative, then bring them to foreground and provide a meaningful alternate text.

Add alternate text to social media

Most of the social platforms such as Facebook, Twitter, WhatsApp, Google+ etc., has an option to add description while uploading an image. Even if we are uploading an image album, there is an option to describe each image. All we need to do is to make sure to use this feature and describe those images we post. That not only helps our connects with disabilities but also someone who have knowledge about the location we are posting about etc.,

OK… let’s continue to make images accessible!

Tips for developers: Get your website teted for accessibility – Part 2 – Operable

May 9, 2017 Srinivasu Chakravarthula Leave a Comment Accessibility Testing, Accessibility Tips , , ,

This is Part 2 of 4 parts on how a developer should get their website or application tested for accessibility. Objective of this series is to provide easy method of accessibility testing to developers so that they can test as they code. This is how we would achive accessibility right at the development and design stage. These tips would not only be helpful to developers but also to interaction designers who decides interaction of elements and those who develop prototypes. This Part 2 is related to Operable section of Web Content Accessibility Guidelines 2.1.

Question: How to test for keyboard accessibility?
Answer: Load the page. Press CTRL + Home (Windows), this will take focus to the top of the page. Then use tab key to move from one element to another. Use enter or space key to activate an element. One should be able to activity every element including menus, modals, buttons etc.,

Question: When I was browsing a page with keyboard, focus does not move from an element, focus just gets stuck; is there a problem with my keyboard?
Answer: Probably not, this is called keyboard trap and needs to be avoided. When a component recieves keyboard focus, there should be mechanism to move away keyboard focus from same component.

Question: What to consider when there is a time limit for a page?
Answer: Check if there is an option to turn-off timing, adjust as per user’s requirement or extend the time limit. There could exceptions such as activity at real-time, esential time limit such as a test and time limit of 20 hours and more.

Question: What to look for elements that moves, blinks or scroll?
Answer: There should be a mechanism to pause, stop or hide. If content is being updated automatically, there should be a mechanism to pause or set how periodical that an update should happen.

Question: What is bypass blocks and how do we test?
Answer: Bypass blocks is a mechanism to enable keyboard users to skip representative set of blocks such as navigation and jump quickly to main content. This can be achieved by providing “Skip to main content” link at the top, using appropriate heading structure and/or using ARIA land marks.

Question: How to test page titles?
Answer: Look at top bar of browser window and see if page title does exist and is appropriate. For example Page title should be page name along with the company / domain name. It should not be just company name only on all the pages.

Question: What all needs to be considered as Focus order issues?
Answer: Ensure that the tab order is logical, if an element opens a modal, focus focus must be set to modal and must not move out until user closes the modal, When modal is closed, focus should be returned to the triggered element.

Question: Testing for link purpose
Answer: Ensure that all links have meaningful and spell out the context to the users. Avoid links like “Read more”, “Click here” etc., Using automated tools would be effective to test this requirement.

Question: What are the multiple ways required for a website?
Answer: A search functionality or a site map. There should be more than one way to reach a specific page on the website.

Question: How to test for focus visible?
Answer: When you tab through the page, every element should receive an indicator and you should be able to see where the keyboard focus is. It can be either custom focus indicator or browser’s default focus indicator.

Should websites include Accessibility Options? May be and may be not…

June 3, 2016 Srinivasu Chakravarthula Leave a Comment Accessibility Tips

In 2013, posted about Accessibility options and Browser Accessibility options and still I see concept of including accessibility is still exist in the minds of web authors. So wanted to reiterate as to why we do not recommend accessibility options embed on to the website.

I still agree that having such options like Increase Font size, decrease font size, change contrast icons may be helpful but for only a few users and not to many. Some of the problems occurs by using these options are:

  • Increases development cost: Specially for options like Change contrast, it involves writing additional style sheets and that’s a huge investment. Also one needs to worry about things like what happens to images when contrast is changed, etc.,?
  • Less usage: When user comes to a website, it means he or she already have some assistive tools that meets their requirement. So they can continue to use their own tools and technologies and really do not use options provided in the website

What could be done instead is to add information about Braower’s accessibility support, information about assistive technology, what’s the accessbility care taken in the website such as keyboard functionality, etc., in a help page.

Bottom line is let’s invest efforts on where actually needed and avoid unnecessary efforts!

Colours with Good Contrast – Accessibility Tips

May 19, 2016 Srinivasu Chakravarthula Leave a Comment Accessibility Tips , ,

Today colours play a big role in design. It’s important to ensure that there is sufficient contrast between foreground and background. For regular text, there should be minimum ratio of 4.5:1. Be especially careful while dealing with light color shades of gray, orange and yellow

WCAG Success Criteria: 1.4.3 Contrast (minimum) Level AA

Exceptions

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Tools to analyze

Choose right and neat colours!