Accessibility Conscious Development Angular for Everyone 

Hey! I’m Peter Ekene. 

What is Accessibility? 

The general idea of building websites, tools, and technologies that are completely accessible by everyone irrespective of their disabilities or life conditions. 

Common Disabilities Visual Impairment Hearing Impairment Physical Impairment Intellectual Impairment 

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 

Other Conditions Old age Poor network Old devices || technologies 

So why accessibility ? 

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 

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. 

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 , , 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 

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 

Popular Misconception We are making the web accessible for disabled people Actually... We are making the web accessible for our future selves 

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. 

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 !! 

Thank You !! Questions? Twitter: @kenny_io 

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