Best practices for developing web and mobile apps with accessibility in mind

1. © 2022 Xoomworks, Part of Accenture
Front-end & Usability
Best practices

2. About me
© 2022 Xoomworks, Part of Accenture
Dimitar Belchugov​
Senior Front-End Dev Xoomworks / Expedia​
@belchugov​
Sofia, Bulgaria​

3. Agenda
© Xoomworks 2022, Part of Accenture
What is accessibility?
Tools
Main issues
Demo

4. What is accessibility?
© Xoomworks 2022, Part of Accenture

5. Tools
© Xoomworks 2022, Part of Accenture
• Microsoft Inclusive Design
• Light house
• Web.dev

6. Main issues
© Xoomworks 2022, Part of Accenture
• Colour contrast
• Don’t use colour alone to make critical information
understandable
• Design usable focus states
• Use labels or instructions with form fields and inputs
• Write useful alternative text for your images and
other non-text content
• Use correct markup on your content
• Support keyboard navigation

7. © 2022 Xoomworks, Part of Accenture
Demo

8. © 2022 Xoomworks, Part of Accenture
Questions

9. © 2022 Xoomworks, Part of Accenture
Thank you!

10. Useful links / Reference
© Xoomworks 2022, Part of Accenture
• https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility
• https://en.wikipedia.org/wiki/Web_accessibility
• https://web.dev/lighthouse-accessibility/
• https://youtu.be/20SHvU2PKsM
• https://www.microsoft.com/design/inclusive/
• https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
• https://www.bbc.com/news/technology-46894463
• https://webaim.org/
• https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-
handbook/aria-landmarks/
• https://usecontrast.com/
• https://material.io/design/usability/accessibility.html#understanding-accessibility