Accessibility in Low-Code: Applications with no Limits
•Download as PPTX, PDF•
3 likes•309 views
Come to this session to understand how we are working in order to make OutSystems UI fit accessibility needs.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Accessibility in Low-Code: Applications with no Limits
Similar to Accessibility in Low-Code: Applications with no Limits (20)
More from OutSystems
More from OutSystems (20)
Recently uploaded
Recently uploaded (20)
Accessibility in Low-Code: Applications with no Limits
- 1. | Accessibility in Low-Code: Applications with no Limits Accessibility in Low-Code: Applications with no Limits
- 2. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits José Rio Front-End Expert @ in jose.rio@outsystems.com /joseluisrio
- 3. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits What is Accessibility?
- 4. | Accessibility in Low-Code: Applications with no Limits What is Accessibility? Accessibility is when applications, tools, and technologies are developed and designed to be used by everyone.
- 5. | Accessibility in Low-Code: Applications with no Limits All kinds of people … doesn’t mean people with disabilities, whether they are visual, auditive, speech, physical, cognitive, or neurological ...
- 6. | Accessibility in Low-Code: Applications with no Limits It also means: ● Temporary impairments ● Use phone when driving ● Multi-Tasking ● Age-related limitations
- 7. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits A truly accessible web
- 8. | Accessibility in Low-Code: Applications with no Limits "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
- 9. | Accessibility in Low-Code: Applications with no Limits A truly accessible web There is a motion to make a Web for all. It relies on the principle that the Web provides equal access and equal opportunities to people with disabilities, and to all of us when we need it.
- 10. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits WCAG Web Content Accessibility Guidelines
- 11. | Accessibility in Low-Code: Applications with no Limits WCAG defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities and these guidelines cover a wide range of issues. WCAG
- 12. | Accessibility in Low-Code: Applications with no Limits The four pillars of Accessibility Perceivable Operable Understandable Robust Users must be able to perceive the information being presented Can the application be operated without a mouse or keyboard? Are content and functionality easy to understand? Does the application work across browsers, and devices, including assistive technologies?
- 13. | Accessibility in Low-Code: Applications with no Limits Accessibility Levels rules to achieve Level A 78 30 rules to achieve Level AA20 rules to achieve Level AAA 28
- 14. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits It's not only a good practice… It's the law!
- 15. | Accessibility in Low-Code: Applications with no Limits The number of ADA (Americans with Disabilities Act) lawsuits is growing fast Countries that Adopted WCAG Standards
- 16. | Accessibility in Low-Code: Applications with no Limits Countries that Adopted WCAG Standards The EU public sector has to comply to WCAG 2.1 by the following dates: ● New Web Apps - Sep 2019 ● Older Web Apps - Sep 2020 ● Mobile Apps - Jun 2021
- 17. | Accessibility in Low-Code: Applications with no Limits Countries that Adopted WCAG Standards Even in places without specific laws the WCAG 2.0 is cited as reference
- 18. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits How can we make OutSystems UI more Accessible?
- 19. | Accessibility in Low-Code: Applications with no Limits UX UI We created a LAB ... FE Main goal Help our customers to build accessible apps AA
- 20. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits Setting up the Lab
- 21. | Accessibility in Low-Code: Applications with no Limits Which tools did we use? Design HTML Structure WAVE Chrome & Firefox Extension Check color contrast ratio Sketch plugins Lighthouse (Audits) Chrome DevTools Do we need more tools?
- 22. | Accessibility in Low-Code: Applications with no Limits We need a Screen Reader! A screen reader is a software application that enables people with visual disabilities to use a computer. It provides feedback to the user in two ways: ● Speech ● Braille (hardware)
- 23. | Accessibility in Low-Code: Applications with no Limits Screen Readers Statistics https://webaim.org/projects/screenreadersurvey8/#used
- 24. | Accessibility in Low-Code: Applications with no Limits The tools we used on testing HTML StructureDesign Screen Readers Screen readers / Browser combinations ● JAWS on Chrome ● NVDA on Firefox ● NVDA on Chrome ● JAWS on Internet Explorer 11 ● VoiceOver
- 25. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits Assessment & Outcomes
- 26. | Accessibility in Low-Code: Applications with no Limits Colour Palette issues Colours need to have additional contrast Warning and Info colours don’t reach 4.5 ratio (Level AA) OutSystems UI sketch file
- 27. | Accessibility in Low-Code: Applications with no Limits Colour Palette issues - Recommendations New Warning color New Info color
- 28. | Accessibility in Low-Code: Applications with no Limits Let’s see wave working...
- 29. | Accessibility in Low-Code: Applications with no Limits Text size Is often on the small side. Good practices recommend text size 16px to 20px. OutSystems UI sketch file
- 30. | Accessibility in Low-Code: Applications with no Limits OutSystems UI New OutSystems UI sketch file A new sketch file with all the improvements needed was created! AA
- 31. | Accessibility in Low-Code: Applications with no Limits Starter Page ● tabindex attribute it’s not zero for all clickable items
- 32. | Accessibility in Low-Code: Applications with no Limits Starter Page - Solution ● Add “Lang” input to Layout web block ● Reset all [tabindex] to zero
- 33. | Accessibility in Low-Code: Applications with no Limits Starter Page - Solution ● AddPostProcessingFilter ● Find for "maximum-scale=1" ● Replace it for "maximum-scale=5"
- 34. | Accessibility in Low-Code: Applications with no Limits Starter Page - Solution ● AddPostProcessingFilter ● Find for "user-scalable=no," ● Replace it for ""
- 35. | Accessibility in Low-Code: Applications with no Limits Starter Page - The result
- 36. | Accessibility in Low-Code: Applications with no Limits Screen Templates ● Add a label to the search input
- 37. | Accessibility in Low-Code: Applications with no Limits OutSystems UI Patterns We don’t have any info about the active item. Buttons do not have an accessible name. Carousel Example
- 38. | Accessibility in Low-Code: Applications with no Limits OutSystems UI Patterns Changed the carousel JS Object and add the accessibility layer to it. Change the focus to the active item on each transition Carousel - Solution
- 39. | Accessibility in Low-Code: Applications with no Limits OutSystems UI An Accessible Live Style Guide with all improvements needed was created! AA
- 40. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits Final Notes
- 41. | Accessibility in Low-Code: Applications with no Limits When to care This should be a concern from day one. This way, the cost of change will be much lower. You should start in design!
- 42. | Accessibility in Low-Code: Applications with no Limits Write the content (headings, text, images, links...) in plain and straightforward language, structure it, and label it. Ensure that forms have clear labels for every input; Provide keyboard controls for content navigation and a clear markup for screen readers. A few best practices...
- 43. | Accessibility in Low-Code: Applications with no Limits Accessibility is not a feature! The entire team should be aware of the intended compliance level. Include best practices and tests in the routines and as part of the delivery cycles.
- 44. | Accessibility in Low-Code: Applications with no Limits Is this the end of creative design? No! You can have the pretty version and the accessible version!
- 45. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits Now, what if...
- 46. | Accessibility in Low-Code: Applications with no Limits The world was deprived of all his knowledge!
- 47. | Accessibility in Low-Code: Applications with no Limits Read more about Accessibility What Is Web Accessibility and Why You Should Care
- 48. | Accessibility in Low-Code: Applications with no Limits Read more about Accessibility Designing For Accessibility From Day One
- 49. | Accessibility in Low-Code: Applications with no Limits Read more about Accessibility Building Web Accessibility, Part 1: Barriers, Guidelines and Standards
- 50. | Accessibility in Low-Code: Applications with no Limits Thank You! @ injose.rio@outsystems.com /joseluisrio
- 51. | Accessibility in Low-Code: Applications with no Limits| Accessibility in Low-Code: Applications with no Limits Q&A
Editor's Notes
- This session is about how we are working in order to make OutSystems UI fit accessibility needs!
- . Imagine you broke your arm… during a period of time you must learn how to do your stuff with just one hand! . probably you don’t notice yet, but when you’re driving and answer to a call you are using assistive technology. You can do it without take your hands off the wheel! . with all the gadgets we’ve that could connect to our phones we can do multitasking; . we will all grow old and in that time we probably will need to scale the applications that we use;
- Look into all this scenarios we must have a truly accessible web.
- The power of web is in it Universality! So, it needs to be taken seriously!
- that been said, there is a motion that relies in the principle that web should provide equal access and opportunities to all, even to us if/when we need it.
- So, as we’ve html guidelines we’ve accessibility guidelines too! aka WCAG
- These guidelines define how to make web content accessible to people with disabilities and since these guidelines cover a wide range of disabilities we’ve a big number of guidelines to follow!
- This are the four pillars of accessibility!
- These are 3 accessibility levels that must must comply! The most common one is the AA, and still you must be compliant with fifty rules already!
- Nowadays…
- If this is so important, we’ve to understand how our product is delivering this!
- 1. We assemble a team of experts in UX/UI/FE 2. and created a Lab, with the main goal
- To do the assessment we need to use evaluation tools!
- There are people that use more than one screen reader.
- First of all, we checked the design file, and we realize that some colors don’t reach the 4.5 ratio value (minimum to be compliant with AA) We do this on our design theme file, so if you are using a custom design theme you should do the same!
- Here, you can see the ratio value for the A, AA and for the AAA;
- Wave: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US Link1 : https://expertsos11-dev.outsystems.net/LabAccessibilityWeb_LSG/ Link 2: https://expertsos11-dev.outsystems.net/SCML_GalopeWeb_LSG/
- In order to start the assessment to the generated html, we create a starter page just to understand how we’re before start creating new pages!
- After all of this changes here the result.
- . We made all the tests on the screen templates too, and in this example we notice that we’ve an input without an label; . After we add the label it will be visible, but we want that it will be hidden! For this we can’t use “display:none” neither “visibility:hidden” if we do that the screen reader will ignore the item (if it’s hidden it will not be read) . To hide the label we should use the css hack! As we can see, there are several time where we should use the !important . If you have your own templates/structures be aware of this too!
- As we did for the starter page and screen templates we tested all the outsystems ui patterns, This example is about the carousel where we have no info from the active item, and the buttons do not have a accessible name
- Like we do for the design files, we create an accessible live style guide with all the improvements needed!
- There are people that use more than one screen reader.
- There are people that use more than one screen reader.
- There are people that use more than one screen reader.