![Page 1: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/1.jpg)
![Page 2: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/2.jpg)
a11y and UX
Junaid Masoodi
![Page 3: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/3.jpg)
![Page 4: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/4.jpg)
Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web*
Digital accessibility refers to the practice of building digital content and applications that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech, or cognitive disabilities.
* because we are talking about web accessibility only
![Page 5: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/5.jpg)
mythgossip
![Page 6: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/6.jpg)
![Page 7: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/7.jpg)
![Page 8: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/8.jpg)
achieved….
• Focusable via the keyboard or screen reader
• Clickable by Mouse, Enter Key and space bar
• Accessible name and state provided to assistive tech
• An interaction is expected when clicked
![Page 9: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/9.jpg)
![Page 10: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/10.jpg)
Change in markup..
![Page 11: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/11.jpg)
Costs extra work
![Page 12: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/12.jpg)
Costs more extra work
![Page 13: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/13.jpg)
Costs more and more extra work
![Page 14: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/14.jpg)
Web is for everyone, it doesn’t have to be hard!
^well it isn’t hard
![Page 15: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/15.jpg)
How do I get started with a11y
![Page 16: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/16.jpg)
https://www.w3.org/TR/WCAG21/
![Page 17: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/17.jpg)
User experience (UX) design is the process of creating products that provide meaningful and relevant
experiences to users.
![Page 18: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/18.jpg)
a11y + UX = ?
![Page 19: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/19.jpg)
Why designing for accessibility?
• Better experience irrespective of context or situation
• It is important
• Have bigger out reach
• SEO Friendly
• Faster than ordinary (normal in informal) websites
• Best practises
![Page 20: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/20.jpg)
Add enough colour contrast 🖍
![Page 21: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/21.jpg)
Don’t use colour alone to make critical information understandable 💈
![Page 22: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/22.jpg)
Design usable focus states
![Page 23: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/23.jpg)
Default visual focus states for Chrome and Firefox
![Page 24: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/24.jpg)
Use labels or instructions with form fields and inputs
sacrificing usability in favour of simplicity
![Page 25: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/25.jpg)
Write useful alternative text for your images and other non-text content
• Within the <alt> attribute of the image element. • Within context or surroundings of the image itself.
![Page 26: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/26.jpg)
![Page 27: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/27.jpg)
Use correct markup on your content
![Page 28: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/28.jpg)
Support keyboard navigation
![Page 29: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/29.jpg)
Avoid component identity crises.
Q: When is a menu no longer a menu?A: When it’s a non-modal dialog.
![Page 30: a11y and UX - Drupal GovConUser experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users](https://reader034.vdocument.in/reader034/viewer/2022043004/5f85d1570c82683ebb58dbcd/html5/thumbnails/30.jpg)
Design responsibly