Taken the session on WordCamp Pune 2019. The WordCamp is really amazing, so the public and speaker. Great experience.

1. A Short Story

2. This story is about a boy
named Louis Braille who is
Blind in both eyes as a result
of an early childhood
accident.

3. Braille mastered his disability
while still a boy. He excelled
in his education and received
a scholarship to France's
Royal Institute for Blind
Youth.

4. At that time it is very tough to
read as they have a
embossed letter system
which include traising the
finger in the raised letter.

6. However this system meant
that the reading was slow and
difficult to know by touching
the complex letter.

7. In 1821, Braille meet a man
named Charles Barbier.
Charles has developed a “night
writing system” for military
which was found little bit
complex for the blind people.

8. But Braille find it inspiring and
invented a matrix which is
simpler and easier to read.

9. And today we known it as
Braille - A globally adopted
language by an barely 16 yr
old boy.

11. People are present who have
willingness to learn.
If our product will not
accessible for everyone then
we are excluding them.

12. Priyanka Behera
WordPress Developer
@priyankab_WP @priyankabehera155

13. Steps to make
WordPress site
accessible to everyone

14. Objective

15. 1)Web Accessibility
2)Terminology
3)Steps while creating a site
accessible
4)Assistive technology

16. What is Web Accessibility?

17. Web accessibility is the degree to which
a website is usable by as many people
as possible.

18. With what we measure Web
Accessibility?

19. WCAG
Web Content Accessibility
Guidelines

20. WCAG is Web Accessibility
Guideline
Created by W3C

21. WordPress 5.0.3 is follows
WCAG 2.0

22. With what level we are
going to build our Website?

23. Level
1)A - Basic
2)AA - Global Standard
3)AAA - Dedicated Software

24. Why we need of
accessibility?

25. Data says 1 in 5 people has
some kind of disability.
Excluding 20% of our user,
customer or many more.

26. Accessibility doesn’t just benefit
people with specific disabilities,
it improves the usability of a
website for everyone.
-Laura Kalbag, Accessibility for Everyone

27. Google is Deaf and blind.

28. Google doesn’t care how
your website design is.
For google your website is
without the style.

29. What are the steps to make
a site accessible?

30. Step - 1
When to include
accessibility?

31. Know the functionality we
are going to build.

32. Some example which are
hard to make accessible

33. Audio and Video
- Transcript and captions

34. PDF

35. Branding Color

36. Step - 2
Design

37. Color contrast checker
https://webaim.org/resources/contrastchecker/
https://snook.ca/technical/colour_contrast/colour.htm
l#fg=,bg=333333

39. Check what the design is
suitable for.

40. Don’t give meaning to color.
Give always some extra
information.

43. Animations

45. Make the animation
stoppable

46. Icons

47. Add text or a tooltip to an
icon. Design for your users.

48. Step - 3
Code

50. If you disable the CSS then
can you read the content?

51. Do not put the inline CSS
through javascript

53. Dynamic Content

54. Dynamic content loading
with JS without loading the
page

55. If you can’t able to see the
screen then you can’t able
to know the changes.

56. Announce dynamic content
For
Assistive tools

57. aria-live

58. It is used to define the
dynamic content region
aria-live="polite"

59. JS function
wp.a11y.speak( yourData.strings.resultsFound, 'polite' );
This will add aria-live in the result.

60. JS function
wp.a11y.speak( yourData.strings.resultsFound, 'polite' );
This will add aria-live in the result.

61. Dialog box
aria-label="Close"
Screen reader can access this using area-label

62. Images and Icons
aria-label="Close"
Screen reader can access this using area-label

63. aria-
expanded="tru
e"

64. Tools

65. Aria attribute accessibility
document
https://make.wordpress.org/accessibility/
handbook/markup/aria-landmarks/

66. Lighthouse

68. AXE Chrome extension

70. Assistive Technology

71. Voiceover

72. NVDA

73. Screen Reader - Orca

74. WP Contributions

76. Reference Link
https://make.wordpress.org/core/handbook/best-practices/coding-
standards/accessibility-coding-standards/
https://webaim.org/resources/contrastchecker/
https://www.w3.org/WAI/standards-guidelines/wcag/
https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+label
%3AAccessibility

77. Thank you

78. Priyanka Behera
WordPress Developer
@priyankab_WP @priyankabehera155