Accessibility conscious development

97b8897f620c6dc18f4ea6a53e0e0796?s=47 Ekene Eze
June 15, 2019
7

Accessibility conscious development

In this presentation, I talked about the need for building software with accessibility in mind. You will also learn the business values accrued to building for all user groups and how to go about it.

97b8897f620c6dc18f4ea6a53e0e0796?s=128

Ekene Eze

June 15, 2019
Tweet

Transcript

  1. Accessibility Conscious Development Angular for Everyone

  2. Hey! I’m Peter Ekene.

  3. What is Accessibility?

  4. The general idea of building websites, tools, and technologies that

    are completely accessible by everyone irrespective of their disabilities or life conditions.
  5. Common Disabilities Visual Impairment Hearing Impairment Physical Impairment Intellectual Impairment

  6. What this means is... Some people can’t: • Use a

    mouse • View a screen • See low contrast text • Hear dialogue or music • Understand complex language These people need: • Keyboard support • Screen reader support • High contrast text • Captions and transcripts • Plain language
  7. Other Conditions Old age Poor network Old devices || technologies

  8. So why accessibility ?

  9. 15% of the world lives with a certain form of

    Disability, that is 1.506 Billion people -- W.H.O In Nigeria alone, we have about 25 Million people living with Disabilities
  10. Why should i care ?? Usability Accessibility practices also make

    your site more usable by other groups, such as the • Older people, • People in rural areas, • People in developing countries where the internet might be slow. • People still operating on older browsers, phones etc. SEO Accessible websites improve Search Engine Optimization(SEO), making your site index-able by search engines. Best practice Overall, accessible websites are preferred and inaccessible sites are frowned at everywhere. It’s an edge you’ll have over your peers if you learn accessibility concepts. Empathy The ability to understand and share the feelings of another.
  11. Okay you got me, what then ? 1. Include alternative

    text for non-text based content - Images | Audio | Video A visually impaired person cannot view a picture or video content. Providing a plain text alternative for all functional and informative non-text contents makes it possible for such persons to access the content. 2. Specify the Language of a Page Use the lang attribute to specify the language of a page on the HTML element. Also if the language of an element differs from the rest of the page use the lang attribute to specify the language of that element 3. Use semantic elements Use the right element tag for paragraphs, headings, lists, and tables. Also use semantic elements such as <header>, <nav>, <footer> to structure the layout of your website. 4. Structure elements in a logical reading order Assistive technologies read web contents in the order they appear in the source code. So elements should always be placed in the order it should be read. CSS can always be used to place elements anywhere, but the order in which it appears in the source code should be in the logical reading order. 5. Ensure interactive elements are keyboard accessible Interactive elements such as buttons, links, and form controls are by default keyboard accessible. However other custom built interactive widgets are not accessible via the keyboard. To add keyboard accessibility, use the tabindex="0" attribute on the target element. 6. Avoid using CAPTCHAs for authentication CAPTCHAs can be problematic to some kinds of users. You can opt for alternative methods such as automatic detection or interface interactions to verify that all inputs are generated by a human. 7. Use Linters Linters are tools/plugins that help report bottlenecks and recommend fixes in our codes. Some of them identify accessibility bottlenecks and recommends fixes for developers. Example: eslint-plugin-jsx-a11y
  12. Summary Accessibility conscious development simply means designing software and websites

    using: 1. Good enough fonts 2. Good contrast colors 3. Big enough buttons 4. Making sure all elements have textual descriptions 5. Everything is navigable and accessible with the keyboard
  13. Popular Misconception We are making the web accessible for disabled

    people Actually... We are making the web accessible for our future selves
  14. At 40yrs > the lens inside our eye has already

    lost most of its flexibility, and thus we are no longer able to focus on close objects such as our mobile device or the laptop screen ----- Sure, there are optic tools that can help — eye glasses, contacts, and sometimes surgeries — but even then, it is still not as good as it used to be Around 60yrs> our resolution decreases as time goes by no matter what, and this can’t even be fixed with either glasses or surgery. And speaking of receptors, we also need to remember that not everyone has all of them — some people are color blind and can only see certain colors. The point is... so sooner or later, we will all be a part of the target audience for accessibility.
  15. At 40yrs > the lens inside our eye has already

    lost most of its flexibility, and thus we are no longer able to focus on close objects such as our mobile device or the laptop screen ----- Sure, there are optic tools that can help — eye glasses, contacts, and sometimes surgeries — but even then, it is still not as good as it used to be Around 60yrs> our resolution decreases as time goes by no matter what, and this can’t even be fixed with either glasses or surgery. And speaking of receptors, we also need to remember that not everyone has all of them — some people are color blind and can only see certain colors. And when that time comes, you will thank yourself for having contributed to making it possible for your future self to access the web !!
  16. Thank You !! Questions? Twitter: @kenny_io

  17. Resources Accessibility tips for Angular Devs: https://coryrylan.com/blog/angular-accessibility-tips-and-tricks