Do your best to make your webpage accessible
0 likes107 views
The document outlines the importance of web accessibility, highlighting that over 1 billion people globally have some form of disability. It emphasizes the need for developers to implement accessibility standards such as WCAG to ensure inclusivity in web design, along with guidelines and examples of best practices. Resources and tools for improving accessibility in websites are also provided, encouraging developers to view accessibility as an essential aspect rather than an afterthought.
![CSS
● Help yourself
● Example: use role attributes for styling
@drupaldevdays #drupaldevdays
[role*=banner] a {
border-bottom: none;
}
Bartik theme](https://image.slidesharecdn.com/webaccessibility-devdaysseville-170411180231/85/Do-your-best-to-make-your-webpage-accessible-55-320.jpg)
![CSS
@drupaldevdays #drupaldevdays
[role*=complementary] h2 {
font-size: 2rem;
color: #3b3b3b;
border-bottom: 1px solid #d6d6d6;
}
H2 in sidebar](https://image.slidesharecdn.com/webaccessibility-devdaysseville-170411180231/85/Do-your-best-to-make-your-webpage-accessible-56-320.jpg)
![CSS
@drupaldevdays #drupaldevdays
[role*=main] p {
color: #3b3b3b;
}
Paragraph in main content](https://image.slidesharecdn.com/webaccessibility-devdaysseville-170411180231/85/Do-your-best-to-make-your-webpage-accessible-57-320.jpg)
Do your best to make your webpage accessible
- 1. Do your best to make your webpage accessible Boštjan Kovač - @boshtian
- 3. ABOUT THE SPEAKER ● Boštjan Kovač ● Technical director @ ● @boshtian on drupal.org, Twitter … @drupaldevdays #drupaldevdays
- 4. ● Working on couple of projects where accessibility was a demand ● Went on Eric Eggert’s session in Drupal Camp Vienna in 2015 ● Really figured out how ignorant I was ● I don’t want to be ignorant INSPIRATION AND MOTIVATION @drupaldevdays #drupaldevdays
- 5. TODAY WEBPAGES ARE @drupaldevdays #drupaldevdays
- 9. WHAT ABOUT ACCESSIBILITY? @drupaldevdays #drupaldevdays
- 10. SO, CAN YOU DO IT? @drupaldevdays #drupaldevdays
- 13. 15% of the world's population (>1 billion of people), have some form of disability. – WHO, November 2016
- 14. 110 - 190 million adults have significant difficulties in functioning. – WHO, November 2016
- 15. 8% of men have some form of color blindness. – NEI (National eye institute), February 2015
- 16. ● Broken arm ● Lost eyeglasses ● Looking a video in a noisy room SITUATIONAL DISABILITIES @drupaldevdays #drupaldevdays
- 18. ● Responsive webpages for mobile devices ● Multi-lingual webpages ● Google is the biggest blind user of the web THIS IS ALSO ACCESSIBILITY @drupaldevdays #drupaldevdays
- 19. ● Zoom ● Screen readers ● Browser configuration ● Captions ● Braile keyboard ● Mouth mouse ASSISTIVE TECHNOLOGY @drupaldevdays #drupaldevdays
- 20. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” - Tim Berners-Lee, W3C Director and inventor of the World Wide Web @drupaldevdays #drupaldevdays
- 21. ● Designing for web accessibility ● Creating content for web accessibility ● Developing for web accessibility HOW TO START? @drupaldevdays #drupaldevdays
- 22. ● Guidelines for creating accessible webpages ● Developed by WAI under W3C ● Three levels of conformance: ○ Level A ○ Level AA ○ Level AAA WCAG @drupaldevdays #drupaldevdays
- 23. ● Level A ○ Provide text alternatives for non-text content ○ Provide a ‘Skip to Content’ link ○ Accessible by keyboard only (unplug mouse) ○ Logical order ○ Don’t trap keyboard users ○ Helpful and clear page title ○ Every link’s purpose is clear from its context WCAG 2.0 @drupaldevdays #drupaldevdays
- 24. ● Level AA ○ Contrast ratio between text and background is at least 4.5:1 (talk with the designers) ○ Text can be resized to 200% without loss of content or function ○ Keyboard focus is visible and clear ○ Don’t use images of text ○ Use menus consistently WCAG 2.0 @drupaldevdays #drupaldevdays
- 25. ● Level AAA ○ Contrast ratio between text and background is at least 7:1 (again, for designers) ○ Offer users a range of presentation options ○ Don’t interrupt users ○ Don’t change elements until users ask ○ Provide a text alternative to videos WCAG 2.0 @drupaldevdays #drupaldevdays
- 26. ● Public Working Draft (comment by 31 March 2017) ● Attention being given to three areas ○ Small-screen and touch mobile devices ○ Users with low vision ○ Users with cognitive or learning disabilities WCAG 2.1 @drupaldevdays #drupaldevdays
- 27. ● 3 Succes Criterias formally accepted ● 25 other Success Criterias suggestions ● https://www.w3.org/TR/WCAG21/ WHAT’S NEW IN WCAG 2.1 @drupaldevdays #drupaldevdays
- 28. SIMPLE EXAMPLES I LIKE TO SHOW @drupaldevdays #drupaldevdays
- 29. SCREEN READER EXAMPLES @drupaldevdays #drupaldevdays <button><i class="fa fa-pencil fa-2x"></i></button> <button><i class="fa fa-remove fa-2x"></i></button> <button title="Edit"><i class="fa fa-pencil fa-2x"></i></button> <button title="Remove"><i class="fa fa-remove fa-2x"></i></button>
- 30. SCREEN READER EXAMPLES @drupaldevdays #drupaldevdays <button title="Edit"><i class="fa fa-pencil-broken fa-2x"></i></button> <button title="Delete"><i class="fa fa-delete-broken fa-2x"></i></button>
- 31. SCREEN READER EXAMPLES @drupaldevdays #drupaldevdays <button title="Edit"><i class="fa fa-pencil fa-2x"></i> Edit</button> <button title="Edit"><i class="fa fa-pencil-broken fa-2x"></i> Edit</button>
- 32. SCREEN READER EXAMPLES @drupaldevdays #drupaldevdays <img src="images/marvin.jpg" alt="Marvin the robot"> <a href="print.html"> <img src="images/printer.png" alt="Print document"> </a> Informative images <img src="images/agiledrop.png" alt="Agiledrop logo"></a> Images of text Functional images
- 33. DRUPAL & ACCESSIBILITY @drupaldevdays #drupaldevdays
- 34. ● HTML5 tags <article>, <section>, <header>, <aside>, <mark> and <nav> ● WAI-ARIA markup out of the box ○ <role=”main”> for main content ○ <role=”complementary”> for sidebars HTML5 & IMPROVED SEMANTIC @drupaldevdays #drupaldevdays
- 35. ● ARIA properties: aria-required="true", aria-live, aria-label, aria-labelledby, aria-describedby ● ARIA states: aria-disabled="true", aria-checked, aria-invalid HTML5 & IMPROVED SEMANTIC @drupaldevdays #drupaldevdays
- 36. REMEMBER! Google likes semantic markup. HTML5 & Improved Semantics @drupaldevdays #drupaldevdays
- 37. ● This is more for designers ● Drupal core developers do care COLOR CONTRAST @drupaldevdays #drupaldevdays
- 38. ● Alternative text (alt) required by default ● User image also has alt text required IMAGES @drupaldevdays #drupaldevdays
- 39. ● Drupal.announce() is now part of core ● Drupal.tabbingManager is also in core ● Fieldsets for radios and checkboxes in Form API Other things that improve accessibility @drupaldevdays #drupaldevdays
- 40. ● jQuery UI used for autocomplete and dialogs ● Inline Form Errors added in core as an experimental module Other things that improve accessibility @drupaldevdays #drupaldevdays
- 41. MOST COMMON MISTAKES DEVELOPERS MAKE @drupaldevdays #drupaldevdays
- 42. MARKUP @drupaldevdays #drupaldevdays <header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t }}"> <div class="section layout-container clearfix"> {{ page.secondary_menu }} {{ page.header }} {{ page.primary_menu }} </div> </header> Bartik theme (page.html.twig)
- 43. MARKUP @drupaldevdays #drupaldevdays <header role="banner"> {{ page.header }} </header> Classy theme (page.html.twig)
- 45. MARKUP @drupaldevdays #drupaldevdays <div class="main-header"> <div class="col-sm-12 clearfix"> {{ page.header }} </div> </div> Ignorant theme
- 46. MARKUP @drupaldevdays #drupaldevdays {% if page.sidebar_first %} <div id="sidebar-first" class="column sidebar"> <aside class="section" role="complementary"> {{ page.sidebar_first }} </aside> </div> {% endif %} Bartik theme (page.html.twig)
- 47. MARKUP @drupaldevdays #drupaldevdays {% if page.sidebar_first %} <aside class="layout-sidebar-first" role="complementary"> {{ page.sidebar_first }} </aside> {% endif %} Classy theme (page.html.twig)
- 48. MARKUP @drupaldevdays #drupaldevdays {% if page.sidebar_first %} <div class="sidebar-first"> {{ page.sidebar_first }} </div> {% endif %} Ignorant theme
- 49. SKIP LINK @drupaldevdays #drupaldevdays <a href="#main-content" class="visually-hidden focusable"> {{ 'Skip to main content'|t }} </a> Don’t remove this (html.html.twig) <a id="main-content" tabindex="-1"></a> And this (page.html.twig)
- 50. IMAGES @drupaldevdays #drupaldevdays <img class="special-class" src={{ file_url(node.field_test_image.entity.fileuri) }}> Writing own markup for fields ● So many better ways of doing this ● Create your own twig file, preprocess ...
- 51. FORMS ● Form API will do most of the work for you so use it! ● Use #title property on every element ● Use #title_display if you want to hide it from display ● #description property is also highly advisable @drupaldevdays #drupaldevdays
- 52. FORMS ● Use fieldsets to group elements which belong together logically ○ Radio buttons, Checkboxes, Date elements ● Giving initial focus fo input field is almost always a bad thing to do @drupaldevdays #drupaldevdays
- 53. AJAX ● Dynamic changes on the page are tricky for screenreaders ● Also scrolling can add additional content ● Use Drupal.announce() in Drupal 8 @drupaldevdays #drupaldevdays
- 54. Drupal.announce() @drupaldevdays #drupaldevdays $('#search-list') .on('itemInsert', function (event, data) { // Insert the new items. $(data.container.el).append(data.items.el); // Announce the change to the page contents. Drupal.announce(Drupal.t('@count items added to @container', {'@count': data.items.length, '@container': data.container.title} )); }); Example from announce.js
- 55. CSS ● Help yourself ● Example: use role attributes for styling @drupaldevdays #drupaldevdays [role*=banner] a { border-bottom: none; } Bartik theme
- 56. CSS @drupaldevdays #drupaldevdays [role*=complementary] h2 { font-size: 2rem; color: #3b3b3b; border-bottom: 1px solid #d6d6d6; } H2 in sidebar
- 57. CSS @drupaldevdays #drupaldevdays [role*=main] p { color: #3b3b3b; } Paragraph in main content
- 58. DRUPAL CONTRIB MODULES @drupaldevdays #drupaldevdays
- 59. BLOCK ARIA LANDMARK ROLES ● Drupal 7 & Drupal 8 ● Extra block setting to add ARIA role @drupaldevdays #drupaldevdays <div id="block-tags" class="..." role="contentinfo"> ... </div>
- 60. SWITCHTHEME ● Only Drupal 7 ● New block available to switch theme ● Custom links by using url parameter @drupaldevdays #drupaldevdays <a href="http://d7.dev/?theme=garland" … > Switch to Garland theme </a>
- 61. HIGH CONTRAST ● Drupal 7 & Drupal 8 ● New block available to switch color scheme ● Toggle high contrast after skip link (D7 only) @drupaldevdays #drupaldevdays
- 63. ACCESSIBLE FORMS ● Only drupal 7 (Drupal 8 actually has most of this out of the box) ● It adds: ○ required attribute to required fields ○ required label to required fields (instead of asterix *) ○ aria-invalid to form fields with errors @drupaldevdays #drupaldevdays
- 64. OTHER TOOLS TO HELP YOU OUT @drupaldevdays #drupaldevdays
- 65. BROWSER EXTENSIONS ● Accessibility Developer Tools (Chrome) @drupaldevdays #drupaldevdays
- 66. BROWSER EXTENSIONS ● Siteimprove Accessibility Checker (Chrome) @drupaldevdays #drupaldevdays
- 67. BROWSER EXTENSIONS ● WAVE Accessibility Extension (Chrome & Firefox) ● aXe (Chrome) ● WCAG Contrast checker (Firefox) or Color Contrast Analyzer (Chrome) ● Web Accessibility Toolbar for IE @drupaldevdays #drupaldevdays
- 68. WEB-BASED TOOLS ● https://achecker.ca/checker/ ● http://www.508checker.com/ ● http://www.cynthiasays.com/ ● http://ffoodd.github.io/a11y.css/ @drupaldevdays #drupaldevdays
- 70. RESOURCES ● How people with disabilities use web: ○ https://www.w3.org/WAI/intro/people-use-web ● Tips for getting started: ○ https://www.w3.org/WAI/gettingstarted/tips/ ● Tutorials for different elements: ○ https://www.w3.org/WAI/tutorials/ ● Before and after demo: ○ https://www.w3.org/WAI/demos/bad/ @drupaldevdays #drupaldevdays
- 71. ACCESSIBILITY IS NOT AN AFTERTHOUGHT @drupaldevdays #drupaldevdays
- 72. MAKES YOUR WEBSITE EASIER TO UNDERSTAND (to people and to search engines) @drupaldevdays #drupaldevdays
- 73. ACCESSIBILITY IS AN OPPORTUNITY @drupaldevdays #drupaldevdays
- 74. THANK YOU @drupaldevdays #drupaldevdays BOŠTJAN KOVAČ @boshtian / bostjan.kovac@agiledrop.com