Accessibility in Advertising

Elad Shechter

 @eladsc     

@elad2412     

elads@walla.net.il     

fb.com/groups/css.masters.israel

f

New law for accessibility on websites

From October 25, the law requires public websites to be accessible.

Inaccessible sites could be fined 50,000 NIS, without proof of damage.

Contrast Colors

Contrast has to be at least 1:4.5

http://webaim.org/resources/contrastchecker/

Screen Reader

A screen reader is a software application that attempts to identify and interpret what is being displayed on the screen

http://webaim.org/articles/screenreader_testing/

Add advertisement Identifier (WAI-ARIA)

<a class="walla-ads"
        role="banner"
        aria-label="פרסומת">
        /** advertisement content **/
</a>

Accessibility For Image Ads

<a href=”” class=”walla-ads”>
        <img 
            src=”pizza.jpg” 
            alt=”Pizza Hut, 2 pizza in 99 nis”>
</a>

Accessibility For Closed Ads

HTML

<div class=”walla-ads”>
    <h5 class=”walla-ads-title screen-reader”>
        Castro Sale!
    </h5>
    <p class=”walla-ads-paragraph screen-reader”>
        Now two t-shirts in 99 nis
    </p>
    <canvas id=”walla-ads-castro”></canvas>
</div>

Accessibility For Closed Ads

CSS

.walla-ads{overflow:hidden;}
.screen-reader{
     position:absolute;
     left:-10000px;
     top:auto;
     width:1px;
     height:1px;
     overflow:hidden;
}

Advertisement Ratio Size

Fixed height --> liquid width

http://news.walla.co.il/

Ratio size

http://codepen.io/anon/pen/rVqRbV

Example for non flash commercial

Canvas

http://www.codebelt.com/typescript/html5-canvas-banner-ads-with-greensock-tweening-and-typescript-tutorial/

CSS3 & JS - with ADOBE Edge Animate

http://x.wcdn.co.il/banners/Studio/0012/testhtml5/yaris/publish/web/yaris.html

Elad Shechter

 @eladsc     

@elad2412     

elads@walla.net.il     

fb.com/groups/css.masters.israel

f

You can find this slides at:           slides.com/wallacode
Follow us on twitter:                   twitter.com/wallacode
And github:                                  github.com/wallacode