Building a better, accessible web linked resources

accessible-web-links.md

Slide numbers and links

0

• Inclusive Design at Microsoft: https://www.microsoft.com/en-us/design/inclusive

2

• W3C Standards: https://www.w3.org/standards/

3

• Stock Photo: Man using smartphone and laptop compute in cafe: https://www.dreamstime.com/stock-photo-man-using-smartphone-laptop-compute-cafe-happy-casual-computer-image65959113

4

• Stock Photo: Self employed woman working with her phone and laptop in a restaurant: https://www.dreamstime.com/stock-photo-self-employed-woman-working-her-phone-laptop-restaurant-terrace-cup-coffee-image47405774

5

• Sir Tim Berners-Lee photo: http://www.newsby2.com/2015/12/25/sir-tim-berners-lee-inventor-of-the-world-wide-web-calls-for-online-bill-of-rights-on-christmas/

6

• WHO World report on disability: http://www.who.int/disabilities/world_report/2011/report/en/

7

• Australian Network on Disability: http://www.and.org.au/

8

• Australian law: https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014
• European Union law: https://ec.europa.eu/digital-single-market/en/web-accessibility
• USA law: https://www.section508.gov/

10

• BBC Subtitle Guidelines: http://bbc.github.io/subtitle-guidelines/

11

• Invisible Animation: https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5#.4hgbvsc8l
• Context-Shifting UX: https://css-tricks.com/the-importance-of-context-shifting-in-ux-patterns/
• An Introduction to the Reduced Motion Media Query: https://css-tricks.com/introduction-reduced-motion-media-query/

12

• Mouse hover actions need to be forgiving: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

15

• The State of Front-End Tooling 2016 - Results: https://www.ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

18

• Trello: https://trello.com

19

• Stark plugin for Sketch: https://github.com/stark-contrast/stark-sketch-plugin
• Color Oracle: http://colororacle.org/
• NoCoffee Vision Simulator: https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
• AcceCSS: http://lukyvj.github.io/accecss

20

• aremycolorsaccessible.com: http://www.aremycolorsaccessible.com/

22

• JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS
• NVDA: https://www.nvaccess.org/
• VoiceOver: http://www.apple.com/uk/accessibility/mac/vision/
• Windows-Eyes: http://www.gwmicro.com/Window-Eyes/
• ChromeVox: http://www.chromevox.com/
• TalkBack: https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback&hl=en_GB

23

• WebAim Screen Reader User Survey #6 Results: http://webaim.org/projects/screenreadersurvey6/

27

• WCAG 2.0: https://www.w3.org/TR/WCAG20/
• WCAG 2.1: https://www.w3.org/TR/WCAG21/

28

• WCAG 2.0 Principle 1: https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle1

29

• WCAG 2.0 Principle 2: https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle2

30

• WCAG 2.0 Principle 3: https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle3

31

• WCAG 2.0 Principle 4: https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle4

33

• .visually-hidden: https://gist.github.com/stowball/2704364c1ceefb1d7eaf570b903463b3

34

• keyboard-focus: https://github.com/stowball/keyboard-focus

35

• :focus-ring: https://drafts.csswg.org/selectors-4/#the-focusring-pseudo

37

• ARIA roles: https://www.w3.org/TR/wai-aria-1.1/#widget_roles

38

• ARIA properties: https://www.w3.org/TR/wai-aria-1.1/#global_states

42

• Maintaining Accessibility in a Responsive World: https://www.filamentgroup.com/lab/accessible-responsive.html

46

• WAI-ARIA Authoring Practices 1.1: https://www.w3.org/TR/wai-aria-practices/
• Heydon Pickering's Practical ARIA Examples: http://heydonworks.com/practical_aria_examples/
• Deque University's Examples: https://dequeuniversity.com/resources/
• OpenAjax Accessibility Examples: http://oaa-accessibility.org/
• Inclusive Components: http://inclusive-components.club/
• Matt Stow's Accessible Widgets CodePen Collection: http://codepen.io/stowball/collections/public/
• Web Accessibility Evaluation Tools List: https://www.w3.org/WAI/ER/tools/

50

• @stowball on Twitter: https://twitter.com/stowball
• Slides: http://slides.com/stowball/accessible-web
• Links: http://bit.ly/accessible-web-links