SlideShare a Scribd company logo

Accessibility is not disability Drupal South 2014

•Download as PPT, PDF•
•
Gareth Hall
Gareth Hall

Accessibility The web is about information sharing. Why make it hard for users to access your content. Release your site from bad building practices, make it equal access for all and get SEO benefits for free. Get through to the disabled community By breaking down disability barriers you open up your content to a wider community currently 600,000+ in NZ. There are definite dos and don’ts when it comes to building for the disabled. Learn what works for them.

1 of 46
ACCESSIBILITY IS NOT DISABILITY
WHO AM I • Gareth Hall (gareth@communica.co.nz) • Lead developer at Communica (communica.co.nz) • Freelancer / Contractor • Drupal, Laravel, Codeigniter, Symphony
AGENDA • Accessibility myths and misconceptions. • Common excuses to ignore accessibility. • Why accessibility is important to your site. • How accessibility relate to disability. • Use of view modes for markup control.
ACCESSIBILITY MYTHS
ACCESSIBILITY = DISABILITY • Absolutely not! • Just as an accessible building is not about just having wheel chair access; the web isn’t about just the blind and screen readers.
• Impairment • Might • We • As aren’t always permanent. have an accident or illness. might struggle only at night. we age visual, auditory, motor and cognitive ability diminish. • Impairments • Low bandwidth or poor connection. • Weather • might be external. conditions; bright light or rain. Device limitations.
SMALL PERCENTAGE • Disabled people don’t really use the web. • My target audience isn’t disabled people.
CAN YOU AFFORD NOT TOO? • 14% of New Zealanders have a disability. • Thats over 750 000 people. • Estimated 650 million world wide. • How can they benefit from your site if it’s inaccessible to them?
ACCESSIBILITY WILL LIMIT THE OVERALL EXPERIENCE • Accessibility is text only pages. • Can’t use images. • Must use a large font. • Accessible sites are boring and ugly.
TEXT ONLY PAGES • If care is taken in making your page accessible, a text only page is very rarely required. • W3C doesn't recommend full text page alternatives unless a page cannot be made accessible. • Google is not to big on duplicate content.
CAN’T USE IMAGES • You can and should. • Although blind users can’t see images, it would be pointless to disadvantage sighted users by not including graphics at all. • Graphics can enhance the accessibility of a website for people who have low levels of literacy, the elderly or children. • Remember to use the alt attribute.
USE A LARGE FONT • Not necessary at all. • Use relative or flexible font sizes. Someone with poor vision can resize the text to suit their needs. In fact large fonts can make reading more difficult for some users. Some sight conditions leave people with good visual accuracy, but a very small field of vision.
BORING AND UGLY • Wrong! Accessibility places very few restrictions on site design. Accessible sites make full use of structural HTML elements. • The use of images and colours actually improve accessibility for many users.
NEED AN EXPERT • Most accessibility fixes are simple to understand and implement. • You already know how. • Good structure is key. • For instance: • Heading for each section. • Selection of fonts (dislexia) • alt attributes. • Good markup.
YEAH, YEAH - WHY SHOULD I CARE?  
SEO • Many accessibility guidelines are the same as SEO techniques. • For example: • • Clear link names. • Using text rather than images of text. • Providing text equivalents for multimedia. • • Valid HTML Site map This means that incorporating accessibility will at the same time help to improve a websites search engine ranking.
INCREASED USAGE • Easier to find. • Easier to access. • Easier to use. • Maximise the number of possible visitors.
INCREASED USABILITY • Accessibility increases usability. • Improves quality of user experience. • Increased usability makes users more likely to return to the website, use it more thoroughly and recommend it to others. • Some accessibility guidelines are similar to the usability ones: • Clear and consistent design. • Clear and consistent navigation. • Dividing blocks of information into logical sections.
ACCESSIBILITY = ACCESSIBLE • Visual - make it easy to read. • Auditory - make it easy to hear. • Motor - make it easy to interact. • Cognitive - make it easy to understand.
ACCESSIBILITY IS GOOD • Accessibility helps any physical or mental impairment. • It advocates equal access. • It’s a positive impact on your company’s reputation. • Creates an image of ethical and socially responsible organisation. • Makes you a better developer / designer. • You already benefit from accessibility.
IMPROVED INTEROPERABILITY • Accessible websites enable content to be presented and interacted with on many different configurations. • Which increases interoperability and device independence.
STILL NOT CONVINCED
GOOGLE BOT • Is a blind. • Loves good structured. • Likes alt attribute. • Fast site.
ACCESSIBILITY VS DISABILITY
ACCESSIBILITY = GOOD SCREEN READER USABILITY Not so good
THINGS WE LEARNT • Form a screenreader's perspective the title attribute is a waste of time. • A screen reader will only read the title attribute immediately if the anchor tag is empty. • If the anchor tag is not empty it will read the title attribute ……………………. eventually.
TITLE ATTRIBUTES NOT SO MUCH <a href="#" title="Article name">Read more</a> <a href="#" title="Article name">   <span>Article name</span>   Read more </a>
THINGS WE LEARNT • Screen readers struggle with iconography & icon fonts.
ICONOGRAPHY & ICON FONTS <i class="ss-icon ss-gizmo">&#x1F4F9;</i> <i class="ss-icon ss-gizmo" aria-hidden="true" role="presentation">&#x1F4F9;</i>
THINGS WE LEARNT • The alt attribute might not be your friend. • Screen readers always announce the alt attribute but it may not be what you are after.
WHAT IS THIS? <li>     <a href="#" title=“video">         <div class="img-wrapper">             <img src="/assets/img/img.jpg" alt="Man with baby">             <div class="img-hover" role="presentation"></div>             <i class="bg-icon" role="presentation"></i>         </div>         <span class="doc-title">Hands on Dad</span>         <div class="info">             <span class="desc">Sex, fertility and parenting as a tetraplegic</span>             <span>17:36 Mins</span>             <span class="last">194 Plays</span>         </div>      </a> </li>
AN INAPPROPRIATE ALT ATTRIBUTE <li>     <a href="#" title=“video">         <div class="img-wrapper">             <img src="/assets/img/img.jpg" alt="Video thumbnail">             <div class="img-hover" role="presentation"></div>             <i class="bg-icon" role="presentation"></i>         </div>         <span class="doc-title">Hands on Dad</span>             <div class="info">                 <span class="desc">Sex, fertility and parenting as a tetraplegic</span>                 <span>17:36 Mins</span>                 <span class="last">194 Plays</span>             </div>      </a> </li>
THINGS WE LEARNT • Having accessible code does not mean a screen reader will get it right. • It comes down to structure vs accessibility.
VIEWS FIELDS APPROACH • Takes a long time to build • Not modular • Updates across multiple views are time consuming • Inconsistencies are easily introduced
VIEWS FIELDS ARE NO GOOD <li class="views-row">     <div class="views-field view-field-image">         <span class="field-content">           <a href="#"><img src="assets/img/img.jpg" alt="Man with Baby"></a>         </span>     </div>        <div class="views-field view-field-title">         <span class="field-content">             <h3><a href="#">Hands on Dad</a></h3>         </span>     </div>        <div class="views-field view-field-description">         <span class="field-content">Sex, fertility and parenting as a tetraplegic</span>     </div>     <div class="views-field view-field-duration">         <span class="field-content">17:36 Mins</span>     </div>     <div class="views-field view-field-plays">         <span class="field-content">194 Plays</span>     </div> </li>
STRUCTURE IS KEY <li class="views-row">     <a href="#" title=“video">         <div class=“img-wrapper">                       <img src="/assets/img/img.jpg" alt="video thumbnail">             <div class="img-hover" role="presentation"></div>             <i class="bg-icon" role="presentation"></i>         </div>         <span class="doc-title">Hands on Dad</span>         <div class="info">             <span class="desc">Sex, fertility and parenting as a tetraplegic</span>             <span>17:36 Mins</span>             <span class="last">194 Plays</span>         </div>     </a> </li>
USE VIEW MODES
CREATING A VIEW MODE (PROGRAMMATICALLY) /**   * Implements hook_entity_info_alter().   */ function hook_entity_info_alter(&$entity_info) {   $entity_info['node']['view modes']['hub'] = array(     'label'  => t('Hub'),     'custom settings' => TRUE,   ); }
ASSIGN VIEW MODE
DISPLAY SUITE MAGIC
DS CREATING VIEW MODES • The old way
DS PREDEFINED LAYOUTS
DS CODE FIELD • Code fields • Dynamic fields • Block fields • Preprocess fields
DS ADVANCED FIELD TEMPLATES • Advance field templates.
FINAL THOUGHTS • Use a screen reader yourself. • Setup a test plan and get in some users to test it. • Home button • Search • Mobile navigation is not a given. • Take their feedback seriously.
QUESTIONS

More Related Content

Accessibility is not disability Drupal South 2014

  • 2. WHO AM I • Gareth Hall (gareth@communica.co.nz) • Lead developer at Communica (communica.co.nz) • Freelancer / Contractor • Drupal, Laravel, Codeigniter, Symphony
  • 3. AGENDA • Accessibility myths and misconceptions. • Common excuses to ignore accessibility. • Why accessibility is important to your site. • How accessibility relate to disability. • Use of view modes for markup control.
  • 5. ACCESSIBILITY = DISABILITY • Absolutely not! • Just as an accessible building is not about just having wheel chair access; the web isn’t about just the blind and screen readers.
  • 6. • Impairment • Might • We • As aren’t always permanent. have an accident or illness. might struggle only at night. we age visual, auditory, motor and cognitive ability diminish. • Impairments • Low bandwidth or poor connection. • Weather • might be external. conditions; bright light or rain. Device limitations.
  • 7. SMALL PERCENTAGE • Disabled people don’t really use the web. • My target audience isn’t disabled people.
  • 8. CAN YOU AFFORD NOT TOO? • 14% of New Zealanders have a disability. • Thats over 750 000 people. • Estimated 650 million world wide. • How can they benefit from your site if it’s inaccessible to them?
  • 9. ACCESSIBILITY WILL LIMIT THE OVERALL EXPERIENCE • Accessibility is text only pages. • Can’t use images. • Must use a large font. • Accessible sites are boring and ugly.
  • 10. TEXT ONLY PAGES • If care is taken in making your page accessible, a text only page is very rarely required. • W3C doesn't recommend full text page alternatives unless a page cannot be made accessible. • Google is not to big on duplicate content.
  • 11. CAN’T USE IMAGES • You can and should. • Although blind users can’t see images, it would be pointless to disadvantage sighted users by not including graphics at all. • Graphics can enhance the accessibility of a website for people who have low levels of literacy, the elderly or children. • Remember to use the alt attribute.
  • 12. USE A LARGE FONT • Not necessary at all. • Use relative or flexible font sizes. Someone with poor vision can resize the text to suit their needs. In fact large fonts can make reading more difficult for some users. Some sight conditions leave people with good visual accuracy, but a very small field of vision.
  • 13. BORING AND UGLY • Wrong! Accessibility places very few restrictions on site design. Accessible sites make full use of structural HTML elements. • The use of images and colours actually improve accessibility for many users.
  • 14. NEED AN EXPERT • Most accessibility fixes are simple to understand and implement. • You already know how. • Good structure is key. • For instance: • Heading for each section. • Selection of fonts (dislexia) • alt attributes. • Good markup.
  • 15. YEAH, YEAH - WHY SHOULD I CARE?  
  • 16. SEO • Many accessibility guidelines are the same as SEO techniques. • For example: • • Clear link names. • Using text rather than images of text. • Providing text equivalents for multimedia. • • Valid HTML Site map This means that incorporating accessibility will at the same time help to improve a websites search engine ranking.
  • 17. INCREASED USAGE • Easier to find. • Easier to access. • Easier to use. • Maximise the number of possible visitors.
  • 18. INCREASED USABILITY • Accessibility increases usability. • Improves quality of user experience. • Increased usability makes users more likely to return to the website, use it more thoroughly and recommend it to others. • Some accessibility guidelines are similar to the usability ones: • Clear and consistent design. • Clear and consistent navigation. • Dividing blocks of information into logical sections.
  • 19. ACCESSIBILITY = ACCESSIBLE • Visual - make it easy to read. • Auditory - make it easy to hear. • Motor - make it easy to interact. • Cognitive - make it easy to understand.
  • 20. ACCESSIBILITY IS GOOD • Accessibility helps any physical or mental impairment. • It advocates equal access. • It’s a positive impact on your company’s reputation. • Creates an image of ethical and socially responsible organisation. • Makes you a better developer / designer. • You already benefit from accessibility.
  • 21. IMPROVED INTEROPERABILITY • Accessible websites enable content to be presented and interacted with on many different configurations. • Which increases interoperability and device independence.
  • 23. GOOGLE BOT • Is a blind. • Loves good structured. • Likes alt attribute. • Fast site.
  • 25. ACCESSIBILITY = GOOD SCREEN READER USABILITY Not so good
  • 26. THINGS WE LEARNT • Form a screenreader's perspective the title attribute is a waste of time. • A screen reader will only read the title attribute immediately if the anchor tag is empty. • If the anchor tag is not empty it will read the title attribute ……………………. eventually.
  • 27. TITLE ATTRIBUTES NOT SO MUCH <a href="#" title="Article name">Read more</a> <a href="#" title="Article name">   <span>Article name</span>   Read more </a>
  • 28. THINGS WE LEARNT • Screen readers struggle with iconography & icon fonts.
  • 29. ICONOGRAPHY & ICON FONTS <i class="ss-icon ss-gizmo">&#x1F4F9;</i> <i class="ss-icon ss-gizmo" aria-hidden="true" role="presentation">&#x1F4F9;</i>
  • 30. THINGS WE LEARNT • The alt attribute might not be your friend. • Screen readers always announce the alt attribute but it may not be what you are after.
  • 31. WHAT IS THIS? <li>     <a href="#" title=“video">         <div class="img-wrapper">             <img src="/assets/img/img.jpg" alt="Man with baby">             <div class="img-hover" role="presentation"></div>             <i class="bg-icon" role="presentation"><!--camera-icon--></i>         </div>         <span class="doc-title">Hands on Dad</span>         <div class="info">             <span class="desc">Sex, fertility and parenting as a tetraplegic</span>             <span>17:36 Mins</span>             <span class="last">194 Plays</span>         </div>      </a> </li>
  • 32. AN INAPPROPRIATE ALT ATTRIBUTE <li>     <a href="#" title=“video">         <div class="img-wrapper">             <img src="/assets/img/img.jpg" alt="Video thumbnail">             <div class="img-hover" role="presentation"></div>             <i class="bg-icon" role="presentation"><!--camera-icon--></i>         </div>         <span class="doc-title">Hands on Dad</span>             <div class="info">                 <span class="desc">Sex, fertility and parenting as a tetraplegic</span>                 <span>17:36 Mins</span>                 <span class="last">194 Plays</span>             </div>      </a> </li>
  • 33. THINGS WE LEARNT • Having accessible code does not mean a screen reader will get it right. • It comes down to structure vs accessibility.
  • 34. VIEWS FIELDS APPROACH • Takes a long time to build • Not modular • Updates across multiple views are time consuming • Inconsistencies are easily introduced
  • 35. VIEWS FIELDS ARE NO GOOD <li class="views-row">     <div class="views-field view-field-image">         <span class="field-content">           <a href="#"><img src="assets/img/img.jpg" alt="Man with Baby"></a>         </span>     </div>        <div class="views-field view-field-title">         <span class="field-content">             <h3><a href="#">Hands on Dad</a></h3>         </span>     </div>        <div class="views-field view-field-description">         <span class="field-content">Sex, fertility and parenting as a tetraplegic</span>     </div>     <div class="views-field view-field-duration">         <span class="field-content">17:36 Mins</span>     </div>     <div class="views-field view-field-plays">         <span class="field-content">194 Plays</span>     </div> </li>
  • 36. STRUCTURE IS KEY <li class="views-row">     <a href="#" title=“video">         <div class=“img-wrapper">           <!-- always video thumbnail if it's linking to a video -->             <img src="/assets/img/img.jpg" alt="video thumbnail">             <div class="img-hover" role="presentation"></div>             <i class="bg-icon" role="presentation"></i>         </div>         <span class="doc-title">Hands on Dad</span>         <div class="info">             <span class="desc">Sex, fertility and parenting as a tetraplegic</span>             <span>17:36 Mins</span>             <span class="last">194 Plays</span>         </div>     </a> </li>
  • 38. CREATING A VIEW MODE (PROGRAMMATICALLY) /**   * Implements hook_entity_info_alter().   */ function hook_entity_info_alter(&$entity_info) {   $entity_info['node']['view modes']['hub'] = array(     'label'  => t('Hub'), ��   'custom settings' => TRUE,   ); }
  • 43. DS CODE FIELD • Code fields • Dynamic fields • Block fields • Preprocess fields
  • 45. FINAL THOUGHTS • Use a screen reader yourself. • Setup a test plan and get in some users to test it. • Home button • Search • Mobile navigation is not a given. • Take their feedback seriously.

Editor's Notes

  1. Broken Arm poor mouse control or an illness that affect motor control Poor Night vision Might be tired
  2. Link to content read more ……………. article name. Link to content article name read more.
  3. Link to content Man with baby, Hands on Dad, Sex, fertility and parenting as a tetraplegic 17min 194 play.
  4. Link to content Video thumbnail, Hands on Dad, Sex, fertility and parenting as a tetraplegic 17min 194 play.
  5. Link to content Man with baby Section heading, link to content Hands on Dad, Sex, fertility and parenting as a tetraplegic 17min 194 play.
  6. Link to content Video thumbnail, Hands on Dad, Sex, fertility and parenting as a tetraplegic 17min 194 play.