This is for everyone: the accessible web of the future

A talk I gave at Future of Web Design London.

The Government Digital Service is revolutionising digital public services, ensuring they work for everyone while still being agile.

Using the award-winning Gov.uk site as a case study, Head of Accessibility, Joshua Marshall, will look at the challenges and triumphs of designing a web that’s fully accessible and why an understanding of these principles is so important to the future of web design.

Transcript

1. Joshua Marshall Head of Accessibility Government Digital Service
 @partiallyblind Future of Web Design London, 2014 Cabinet Office
2. This is for everyone: The accessible web of the future
3. The power of the Web is in its universality.
 Access by everyone regardless of ability is an essential aspect.” ! Sir Tim Berners Lee
 Inventor of the World Wide Web “
4. What is the GDS?
5. Establish the GDS Fix publishing Go wholesale Fix transactions http://www.flickr.com/photos/paul_clarke/6476402581/
6. Who am I?
8. Departments Topics Worldwide How government works Get involved Policies Publications Consultations Statistics Announcements GOV.UK DCMS blog Government Equalities Office Sign up to our eNews: The Review First World War Centenary Sign up to superfast broadband eNews 21 March 2014 — News story Marking World Poetry Day From Vera Brittain to Wilfred Owen: online memorial of First World War poems created Department for Culture Media & Sport Search
9. Departments Topics Worldwide How government works Get involved Policies Publications Consultations Statistics Announcements GOV.UK World location 227 A Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla Antigua and Barbuda Argentina Worldwide What is the UK government doing in ? Example: France Search
10. Departments Topics Worldwide How government works Get involved Policies Publications Consultations Statistics Announcements GOV.UK You can use the filters to show only results that match your interests 3,948 1 April 2014 BIS and ONS Statistics - national statistics Part of a collection: Trade union statistics 1 April 2014 MOD Statistics 1 April 2014 DECC Statistics Part of a collection: DECC statistics governance 1 April 2014 HMT Statistics - national statistics 1 April 2014 HMT Statistics - national statistics Part of a collection: GDP deflators at market prices, and money GDP publications Get updates to this list email feed Trade union statistics 2012 MOD timetable for future releases of National and Official Statistics Statistical releases: timetable for twelve months ahead Weekly economic indicators GDP deflators at market prices, and money GDP: March 2014 (Quarterly National Accounts) Publications: Statistics Contains keywords Publication type Statistics Topic All topics Department All departments Official document status All documents World locations All locations Published after Search
11. Over GOV.UK’s first year
    427m visits 1.2b page views
12. How do you make it work for everyone?
13. Government Digital Service Listed below are our design principles and examples of how we’ve used them so far. These build on, and add to, our original 7 digital principles. Start with needs* Do less Design with data Do the hard work to make it simple Iterate. Then iterate again. Build for inclusion Understand context Build digital services, not websites Be consistent, not uniform Make things open: it makes things better Last updated 2 July 2012 ALPHA Design Principles 1 2 3 4 5 6 7 8 9 10 Start with needs* *user needs not government needs 1 Search https://www.gov.uk/design-principles
14. https://www.gov.uk/service-manual/digital-by-default
15. Digital by Default Service Standard Start using the manual Feedback Government Service Design Manual From April 2014, digital services from the government must meet the new Digital by Default Service Standard. Read the standard » Think differently about digital delivery Discover what it means to be part of an agile, user- focused and multidisciplinary team, delivering digital services in government. Start building digital by default services Making a service Learn about the different phases of service design and get guidance for the phase you're in now. Discovery A short phase, in which you start researching the needs of your service’s users, find out what you should be measuring, and explore technological or policy-related constraints. Learn about the discovery phase Service managers Designers Guides and resources for… Government Service Design Manual Build services so good that people prefer to use them Search https://www.gov.uk/service-manual/
20. Where does accessibility fit into the process?
21. I’m not disabled. Why should I care?
22. Better products through empathy
23. Design like you give a damn
24. useit.com: usable information technology Search useit.com: Jakob Nielsen's Website Permanent Content Alertbox Jakob's column on Web usability Beyond the Buy Button in E-Commerce (July 6) The best way for ecommerce sites to increase subsequent orders is to treat customers well after they place their initial order. Government Intranets (June 21) Remote Controls (June 7) Thirty Years With Computers (May 24) All Alertbox columns from 1995 to 2004 Sign up for short newsletter by email when a new Alertbox is published Reports Intranet usability > Government intranets > Intranet design annual > Intranet portals Return on investment from usability (ROI) Email newsletters Confirmation email E-commerce: 207 design guidelines Corporate sites: "About Us", PR, IR areas More reports and usability guidelines News Get a free usability test of your intranet if you will allow us to publish the findings and screenshots. User Experience 2004 Conference > Las Vegas and Amsterdam Our biggest conference ever with 33 full-day tutorials: > 16 brand-new seminars, including advanced content usability and Web-based applications > 17 best-selling classics like information architecture and e-commerce usability Sydney Morning Herald RSS Feeding frenzy eWeek Mac OS X's Spotlight Puts Search Center Stage ZDNet UK Two UK intranets make global top 10 Line56 The Best Government Intranets Sydney Morning Herald The key to email: a two-second grab CIO Insight Time for a Redesign BusinessWeek Big Bang! Digital convergence is finally happening Sydney Morning Herald Seek but you won't always find 15 2003 2004 2005 1,373 captures 27 Dec 96 - 12 Jun 13 Help
25. We stopped sounding like the government
26. µµµµ iA Web Design is 95% Typography by oliver reichenstein 95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography. Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites: Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply older ◊ newer þ 19. october 2006
27. How do I get started?
28. services articles resources community Search WebAIM Introduction to Web Accessibility WebAIM Training 10 Easy Accessibility Tips Anyone Can Use Home > Blog > 10 Easy Accessibility Tips Anyone Can Use Translation A translation of this post is available at http://financesonline.com/WebAIM_10Tips.html courtesy of FinancesOnline . Today is Global Accessibility Awareness Day (GAAD). To celebrate and to help promote accessibility, here are 10 simple accessibility tips that most anyone can implement today into their web site’s HTML and CSS to make it more accessible. 1. Add Alternative Text to Your Logo 1. Add Alternative Text to Your Logo Alternative text is presented to blind screen reader users in place of images they cannot see. Every image that conveys content or has a function on your web site should be given alternative text. But to get started, adding alternative text to your site logo presents your company or organization name to May 9, 2013 Jared Smith 23 Comments Search the blog Search for: Search Blog Archives March 2014 February 2014 January 2014 October 2013 http://webaim.org/blog/10-easy-accessibility-tips/
29. The new hotness.
 (Almost) the same as the old hotness.
30. HTML5 CSS3 JavaScript SVG WAI-ARIA
31. What does the future of accessibility look like?
32. WAI-ARIA 1.0
33. Accessible UX
34. rosenfeldmedia.com/books/a-web-for-everyone/
35. Web Components
36. Templates Custom elements Shadow DOM Imports
37. ! ! SSH clone URL git@github.com:eduardolundgren/google-maps-e You can clone with HTTPS, SSH, or Subversion. latest commit 6c0619cf05 Web Component wrapper for Google Maps using Polymer Update README.md zenorocha authored 7 months ago " src Rename element from gmaps to google-maps 7 months ago # .editorconfig Hello World 8 months ago # README.md Update README.md 7 months ago # index.html Rename element from gmaps to google-maps 7 months ago $ $ README.md README.md Web Component wrapper for Google Maps using Polymer. workwithgreat workwithgreat + + % % & & 3 60 10 ' ' Watch Watch ⋆ ⋆ Star Star ) ) Fork Fork eduardolundgren / google-maps-element * + + Code Code , , Issues Issues 3 3 - - Pull Requests Pull Requests 2 2 $ $ Wiki Wiki . . Pulse Pulse / / Graphs Graphs 0 0 Network Network ? 1 1 Clone in Desktop Clone in Desktop 2 2 Download ZIP Download ZIP 3 12 commits 0 2 branches 4 1 release 5 2 contributors 6 6 0 0 master master branch: google-maps-element / 7 <google-maps> Demo Explore Explore Gist Gist Blog Blog Help Help Search or type a command This repository This repository ? ? https://github.com/eduardolundgren/google-maps-element
38. Building bloc Polymer is a library that uses the create custom HTML elements. complete application as an enca works across desktop and mobi GET POLYMER GET http://www.polymer-project.org
39. Mobile accessibility
40. Testing tools
41. Documentation and existing tools
42. bbc.co.uk/guidelines/futuremedia/accessibility/mobile MOBILE ACCESSIBILITY MOBILE ACCESSIBILITY ​GUIDELINES ​GUIDELINES Home The BBC Standards and Guidelines for Mobile Accessibility are a set of technology agnostic best practices for mobile web content, hybrid and native apps. This prototype is for use by BBC employees and suppliers and anyone else involved in the development of mobile and native websites and apps. Find out more about the BBC Mobile Accessibility Standards and Guidelines. USER EXPERIENCE DEVELOPERS EDITORS RESOURCES Home Summary Principles Audio and video Design Editorial Focus Forms Images Links Notifications Scripts and dynamic content Structure
43. Source Last updated: 9 October 2013 Download the latest version of this demo as a zip file For questions or feedback regarding this demo, please contact Hans Hillen Acknowledgements Accessibility work on these widgets was implemented by The Paciello Group (TPG) and funded by AOL and AEGIS. Accessible jQuery-ui Components Demonstration How to use the Slider widget: Each slider thumb takes up one stop in the tab order. The slider thumb's value can be changed using the following shortcuts: Left Arrow: Descrease value by 1 Left Arrow: Inscrease value by 1 Page Down: Descrease value by larger increment Page Up: Inscrease value by larger increment Home: Set value to minimum End: Set value to maximum Tab: move focus between multiple thumbs To be announced properly, the slider must be used with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode, Accessibility Changes Made to the Original Slider: Added ARIA markup so role, name & state information is exposed Added keyboard support Support for Double Slider labeling About the Slider Widget Demo: Example sliders for choosing a price Choose the price slider Price: Choose the min and max price double slider Price range: Slider Progress bar Menubar Buttons Dialog Checkbox Accordion Tree Carousel Tabs Tooltip Autocomplete Datepicker $0 $75 $300 Destroy slider Disable slider hanshillen.github.io/jqtest/
44. Bootstrap accessibility plugin: making the popular web development framework better By Victor Tsaran January 28, 2014 Accessibility bootstrap plugin Bootstrap Accessibility Plugin is an extension for the Bootstrap 3 web development frame‐ work that makes many of the components of this library accessible for keyboard and screen reader users. Today we are launching this plugin on Github under the BSD license. We hope that this extension will make it very simple for website developers who use Bootstrap 3 components to provide great user experience for as many users as possible. If you develop websites or web applications using Bootstrap components and want it to be accessible with a minimal development effort, this accessibility plugin may be the perfect solution. By adding the JavaScript plugin in your Bootstrapped HTML pages, you extend the stock components with an additional mark-up and events without modifying the original Bootstrap code. In doing so, you make those widgets keyboard-navigable and introduce the compatibility with screen reader software used by people who are visually impaired. Features Recent Posts Recent Posts Outbound SSL Performance in Node.js April 1, 2014 Get a Sneak Peek into PayPal Acces‐ sibility Showcase March 13, 2014 PayPal Hosts Inaugural NodeDay March 5, 2014 Open sourcing kraken.js March 3, 2014 Node.js Application Engineers Wanted! February 28, 2014 Code at PayPal Code at PayPal garfieldmypet commented on issue paypal/sdk-packages#27 Engineering Search https://github.com/paypal/bootstrap-accessibility-plugin
45. Easily create apps using the web technologies you know and love: HTML HTML, CSS CSS, and JavaScript JavaScript PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. ► ► Install PhoneGap Install PhoneGap ► ► Getting Started Guides Getting Started Guides Wrap your app with PhoneGap PhoneGap Deploy to mobile mobile platforms platforms!  Watch Intro About About Developer Developer Community Community Apps Apps Support Support   Install Install ! ! SSH clone URL git@github.com:phonegap/phonegap-mobile-accessibi You can clone with HTTPS, SSH, or Subversion. latest commit 728fad52fd PhoneGap plugin to expose mobile accessibility APIs. Update version number majornista authored 12 days ago " src Adjust behavior of MobileAccessibility.updateTextZoom and MobileAcces… 13 days ago " www Add MobileAccessibilityNotifications to store notification constants 13 days ago # .gitignore Adding Android platform 2 months ago # LICENSE Initial commit 6 months ago # NOTICE Update copyright and license information 13 days ago # README.md Documentation layout adjustments 13 days ago # plugin.xml Update version number 12 days ago $ $ README.md README.md workwithgreat workwithgreat + + % % & & 19 12 8 ' ' Watch Watch ⋆ ⋆ Star Star ) ) Fork Fork phonegap / phonegap-mobile-accessibility * + + Code Code , , Issues Issues 0 0 - - Pull Requests Pull Requests 0 0 $ $ Wiki Wiki . . Pulse Pulse / / Graphs Graphs 0 0 Network Network ? 1 1 Clone in Desktop Clone in Desktop 2 2 Download ZIP Download ZIP 3 26 commits 0 1 branch 4 0 releases 5 2 contributors 6 6 0 0 master master branch: phonegap-mobile-accessibility / 7 com.phonegap.plugin.mobile- accessibility Explore Explore Gist Gist Blog Blog Help Help Search or type a command This repository This repository ? ? https://github.com/phonegap/phonegap-mobile-accessibility
46. The power of the Web is in its universality.
 Access by everyone regardless of ability is an essential aspect.” ! Sir Tim Berners Lee
 Inventor of the World Wide Web “
47. What will you do?
48. Thanks Joshua Marshall Head of Accessibility Government Digital Service @partiallyblind