How to add alternate text to images?

Accessibility Tips
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…
Read More

<alt> Campaign: Let’s make images on the web accessible

Accessibility Tips, Web Accessibility
A picture speaks several words. Use of images over the internet is increasing everyday. It's essential they are make accessible to all users and technologies. Benefits of making images accessible are: Information conveyed through images is made available to blind and visually impaired users Information is made available to those users who turns off images in the browser Information is made available to those users who may not be able to load images due to poor connectivity Search engines cannot read images; no matter how beautiful those images are Today images are used on the websites, social media channels such as Facebook, Twitter, Google+, LinkedIn, Instagram, blogs and almost every platform over the internet. These images carry a lot of information; hence it's important to make these images accessible. Here…
Read More

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

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…
Read More

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

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,…
Read More

Colours with Good Contrast – Accessibility Tips

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 Understanding 1.4.3 Contrast (minimum) How to meet 1.4.3 Contrast (minimum) 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…
Read More