Issuu on Google+

10/28/13 Login

IDI Web Accessibility Checker : Web Accessibility Checker Register

Web Accessibility Checker Web Accessi bi l i ty Checker

Chec k Ac c essibilit y By : Web Page URL Address:

HTML File Upload

Paste HTML Markup

http://www.ybpmedia.com/blog/?p=2168

Check It

Options

Ac c essibilit y Rev iew Accessibility Review (Guidelines: WCAG 2.0 (Level AA)) Known Problems(70)

Likely Problems (3)

E xport Format: PDF

Potential Problems (687)

Report to E xport: All

HTML Validation

Get File

CSS Validation

1.1 Text Alternatives: Provide text alternatives for any non-text content Success Criteria 1.1.1 Non-text Content (A)

Check 1: imgelement missing altattribute. Repair: Add an altattribute to your imgelement. Line 102, Column 78: <img style="vertical-align:middle" src="http://www.ybpmedia.com/fb1.png" />

Line 104, Column 71: <img style="vertical-align:middle" src="http://www.ybpmedia.com/twt1.png" />

Line 106, Column 92: <img style="vertical-align:middle" src="http://www.ybpmedia.com/lin1.png" />

Line 108, Column 90: <img style="vertical-align:middle" src="http://www.ybpmedia.com/gg1.png" />

Line 110, Column 83: <img style="vertical-align:middle" src="http://www.ybpmedia.com/rss2.png" />

Line 473, Column 81: <img style="vertical-align:middle" src="http://www.ybpmedia.com/blog/doox-ybp.jpg" />

Line 640, Column 1: <img border="0" src="http://www.ybpmedia.com/doox-image.jpg" width="126" height="40">

achecker.ca/checker/index.php

1/8


10/28/13

IDI Web Accessibility Checker : Web Accessibility Checker Line 642, Column 1: <img border="0" src="http://www.ybpmedia.com/worss-image.jpg" width="126" height="40">

Line 644, Column 1: <img border="0" src="http://www.ybpmedia.com/dsy-image.jpg" width="126" height="40">

Line 646, Column 1: <img border="0" src="http://www.ybpmedia.com/tikim-image.jpg" width="126" height="40">

Line 648, Column 1: <img border="0" src="http://www.ybpmedia.com/tlv-image.jpg" width="126" height="40">

1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. Success Criteria 1.3.1 Info and Relationships (A)

Check 57: inputelement, typeof "text", missing an associated label. Repair: Add a labelelement that surrounds the control's label. Set the forattribute on the labelelement to the same value as the id attribute of the control. And/or add a titleattribute to the inputelement. And/or create a labelelement that contains the input element. Line 83, Column 80: Line 496, Column 8: <input type="text" style="width:140px" name="email" value="‫ "כתובת מייל‬/>

Check 213: inputelement, typeof "text", has no text in label. Repair: Add text to the inputelement's associated label that describes the purpose or function of the control. Line 83, Column 80: Line 496, Column 8: <input type="text" style="width:140px" name="email" value="‫ "כתובת מייל‬/>

Check 91: selectelement missing an associated label. Repair: Add a labelelement that surrounds the control's label. Set the forattribute on the labelelement to the same value as the id attribute of the control. And/or add a titleattribute to the inputelement. And/or create a labelelement that contains the input element. Line 504, Column 4: <select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].va ...

Line 560, Column 4: <select name="tag-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value; ...

Check 95: textareaelement missing an associated label. Repair: Add a labelelement immediately before or after the textareaelement. Set the forattribute value of the labelelement to the same value as the idattribute value of the textareaelement. Add label text to the labelelement. Or, set the titleattribute value to the textareaelement to the label text. Or, add a labelelement that surrounds the textareaelement and add label text. Line 443, Column 4: <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>

1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background. Success Criteria 1.4.3 Contrast (Minimum) (AA)

Check 301: The contrast between the colour of text and its background for the element is not sufficient to meet WCAG2.0 Level AA.

achecker.ca/checker/index.php

2/8


10/28/13

IDI Web Accessibility Checker : Web Accessibility Checker Repair: Use a colour contrast evaluator to determine if text and background colours provide a contrast ratio of 4.5:1 for standard text, or 3:1 for larger text. Change colour codes to produce sufficient contrast. http://www.w3.org/TR/UNDERSTANDING-WCAG20/visualaudio-contrast-contrast.html#visual-audio-contrast-contrast-resources-head Line 307, Column 413: <span id="karma-1725-up" style="font-size:12px; color:#009933;">2</span>

Fixed size example:

color contrast example

Real size example (9.09 points): color contrast example CSS rules for the element:

External CSS (http://www.ybpmedia.com/blog/wp-content/themes/wp_clear_prem_he/style.css): .clearfix{ display:block; } #wrap{ clear:both; margin:0 auto; padding:10px; width:960px; background:#fff; }

Line 321, Column 413: <span id="karma-1726-up" style="font-size:12px; color:#009933;">1</span>

Fixed size example:

color contrast example

Real size example (9.09 points): color contrast example CSS rules for the element:

External CSS (http://www.ybpmedia.com/blog/wp-content/themes/wp_clear_prem_he/style.css): .clearfix{ display:block; } #wrap{ clear:both; margin:0 auto; padding:10px; width:960px; background:#fff; }

Line 335, Column 431: <span id="karma-1727-up" style="font-size:12px; color:#009933;">4</span>

Fixed size example:

color contrast example

Real size example (9.09 points): color contrast example CSS rules for the element:

External CSS (http://www.ybpmedia.com/blog/wp-content/themes/wp_clear_prem_he/style.css): .clearfix{ display:block; } #wrap{ clear:both; margin:0 auto; padding:10px; width:960px; background:#fff; }

Line 349, Column 413: <span id="karma-1731-up" style="font-size:12px; color:#009933;">0</span>

achecker.ca/checker/index.php

3/8


10/28/13

IDI Web Accessibility Checker : Web Accessibility Checker Fixed size example:

color contrast example

Real size example (9.09 points): color contrast example CSS rules for the element:

External CSS (http://www.ybpmedia.com/blog/wp-content/themes/wp_clear_prem_he/style.css): .clearfix{ display:block; } #wrap{ clear:both; margin:0 auto; padding:10px; width:960px; background:#fff; }

Line 365, Column 413: <span id="karma-1728-up" style="font-size:12px; color:#009933;">1</span>

Fixed size example:

color contrast example

Real size example (9.09 points): color contrast example CSS rules for the element:

External CSS (http://www.ybpmedia.com/blog/wp-content/themes/wp_clear_prem_he/style.css): .clearfix{ display:block; } #wrap{ clear:both; margin:0 auto; padding:10px; width:960px; background:#fff; }

Line 381, Column 413: <span id="karma-1729-up" style="font-size:12px; color:#009933;">0</span>

Fixed size example:

color contrast example

Real size example (9.09 points): color contrast example CSS rules for the element:

External CSS (http://www.ybpmedia.com/blog/wp-content/themes/wp_clear_prem_he/style.css): .clearfix{ display:block; } #wrap{ clear:both; margin:0 auto; padding:10px; width:960px; background:#fff; }

Line 405, Column 413: <span id="karma-1730-up" style="font-size:12px; color:#009933;">0</span>

Fixed size example:

color contrast example

Real size example (9.09 points): color contrast example CSS rules for the element:

achecker.ca/checker/index.php

4/8


10/28/13

IDI Web Accessibility Checker : Web Accessibility Checker External CSS (http://www.ybpmedia.com/blog/wp-content/themes/wp_clear_prem_he/style.css): .clearfix{ display:block; } #wrap{ clear:both; margin:0 auto; padding:10px; width:960px; background:#fff; }

Success Criteria 1.4.4 Resize text (AA)

Check 116: b(bold) element used. Repair: Replace your b(bold) elements with emor strong. Line 175, Column 12: <b><a href="http://www.ybpmedia.com/blog/?p=2168" rel="‫ "קישור‬title="‫ קישור קבוע לפו‬...

Line 266, Column 24: <b>‫עוד פוסטים קשורים בבלוג בניית אתרים‬:</b>

Line 267, Column 5: <b>&#9679;<a href='http://www.ybpmedia.com/blog/?p=348' rel='bookmark' title='‫ כיצד לקדם את‬...

Line 268, Column 5: <b>&#9679;<a href='http://www.ybpmedia.com/blog/?p=634' rel='bookmark' title='‫ קידום אתרים‬...

Line 269, Column 5: <b>&#9679;<a href='http://www.ybpmedia.com/blog/?p=870' rel='bookmark' title='‫ כיצד להוסיף‬...

Line 270, Column 5: Line 271, Column 5: <b>&#9679;<a href='http://www.ybpmedia.com/blog/?p=1047' rel='bookmark' title='‫ כיצד להגדיר‬...

Line 281, Column 346: <b> <a href="http://www.ybpmedia.com">‫<בניית אתרים‬/a></b>

Line 710, Column 305: <b><a title="‫ "בניית אתרים‬target="http://www.ybpmedia.com" href="http://www.ybpmedia.com"> ...

Check 177: fontused. Repair: Remove the fontelement from the document. Line 266, Column 4: <font color="green"><b>‫עוד פוסטים קשורים בבלוג בניית אתרים‬:</b></font>

2.1 Keyboard Accessible: Make all functionality available from a keyboard. Success Criteria 2.1.1 Keyboard (A)

Check 106: scriptnot keyboard accessible - onmouseoutmissing onblur. Repair: Add an onblurhandler to your scriptthat performs the same function as the onmouseouthandler. Line 307, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 307, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 321, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 321, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 335, Column 39:

achecker.ca/checker/index.php

5/8


10/28/13

IDI Web Accessibility Checker : Web Accessibility Checker <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 335, Column 509: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 349, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 349, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 365, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 365, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 381, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 381, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 405, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 405, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Check 107: onmouseoverevent handler missing onfocusevent handler. Repair: Add an onfocushandler to your scriptthat performs the same function as the onmouseoverhandler. Line 307, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 307, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 321, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 321, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 335, Column 39: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 335, Column 509: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 349, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 349, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 365, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 365, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 381, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 381, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

Line 405, Column 21: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

achecker.ca/checker/index.php

6/8


10/28/13

IDI Web Accessibility Checker : Web Accessibility Checker Line 405, Column 491: <img style="padding: 0px; border: none; cursor: pointer;" onmouseover="this.width=this.width*1.3" on ...

2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are. Success Criteria 2.4.4 Link Purpose (In Context) (A)

Check 174: Anchor contains no text. Repair: Add text to the aelement or the titleattribute of the aelement or, if an image is used within the anchor, add Alt text to the image. Line 182, Column 75: <a href="https://twitter.com/share" data-url="http://www.ybpmedia.com/blog/?p=2168" data-counturl="h ...

Line 254, Column 75: <a href="https://twitter.com/share" data-url="http://www.ybpmedia.com/blog/?p=2168" data-counturl="h ...

3.1 Readable: Make text content readable and understandable. Success Criteria 3.1.1 Language of Page (A)

Check 48: Document language not identified. Repair: For HTML documents add the lang attribute and a valid ISO-639-1 two letter language code to the opening HTML element. For XHTML documents add both the lang and xmllang attributes with a valid ISO-639-1 two letter language code to the opening HTML element. Line 3, Column 1: <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equ ...

Check 49: Document has invalid language code. Repair: Add a valid 2 letter or 3 letter language code as defined in the ISO 639 specification to the HTML 'lang' attribute. For XHTML, both 'lang' and 'xml:lang' must be set. Line 3, Column 1: <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equ ...

3.3 Input Assistance: Help users avoid and correct mistakes. Success Criteria 3.3.2 Labels or Instructions (A)

Check 188: Label text is empty. Repair: Add text to the labelelement. Line 83, Column 80: Line 83, Column 345: <input type="image" src="http://www.ybpmedia.com/blog/wp-content/themes/wp_clear_prem_he/images/blan ...

Line 496, Column 8: <input type="text" style="width:140px" name="email" value="‫ "כתובת מייל‬/>

Translate to English | German | Italiano

Web site engine's code is copyright © 2011

Professional Accessibility Evaluation

achecker.ca/checker/index.php

7/8


10/28/13

IDI Web Accessibility Checker : Web Accessibility Checker

Web Service API

achecker.ca/checker/index.php

8/8


Idi web accessibility checker הבלוג של יואב בן פורת יבפ מדיה