Web accessibility refers to making websites usable by people with disabilities and ensuring everyone can perceive, understand, navigate, and interact with the web. There are four main categories of accessibility - vision, motor/dexterity, auditory, and cognitive. Ensuring keyboard accessibility, using semantic HTML, managing focus and tab order, providing text alternatives and labels, and maintaining sufficient color contrast are some of the most important factors in web accessibility. Screen readers also rely on proper semantics and landmarks to announce web pages to users.

1. Web Accessibility

2. Muhammad Afif Alfiano H
Front end Developer
(Tim Army - BSI UII)
afifalfiano.my.id
afifalfiano

3. —Tim Berners-Lee, W3C Director and inventor of
the World Wide Web
“The power of the Web is in its universality.
Access by everyone regardless of disability is
an essential aspect.”

4. Web Accessibility
An accessible site is one whose content can be accessed regardless of any user's
impairments and whose functionality can also be operated by the most diverse
range of users possible.
Accessibility concerns can be split into four broad categories:
● Vision
● Motor/dexterity
● Auditory
● Cognitive

5. Keyboard Access
Fundamental

6. Keyboard Access Fundamental
Having a good keyboard navigation strategy for your application creates a better
experience for everyone.

7. Arrange elements in the DOM to be in
logical order
To check if your application's tab order is logical, try tabbing through your page.

8. Demo Arrange elements in the DOM to be
in logical order

9. Correctly set the visibility of offscreen
content
To prevent a particular interactive element from receiving focus:
● display: none
● visibility: hidden
To add the element back into the tab order:
● display: block
● visibility: visible

10. Use semantic
HTML

11. Semantic HTML
By using the correct semantic HTML elements you may be able to meet most or
all of your keyboard access needs. That means less time fiddling with tabindex.
The ones most developers use are:
● <a>
● <button>
● <input> (and its many types)
● <select>
● <textarea>

12. Use Button instead of Div
Button be considered accessible, a button should:
● Be focusable via the keyboard
● Support being disabled
● Support the ENTER or SPACE keys to perform an action
● Be announced properly by a screen reader

13. Demo Use Button instead of Div

14. Links versus buttons
Another common anti-pattern is to treat links as buttons by attaching JavaScript
behavior to them.
● If clicking on the element will perform an action on the page, use <button>.
● If clicking on the element will navigate the user to a new page then use <a>.

15. Control Focus
with Tab index

16. Control Focus with Tab Index
Standard HTML elements such as <button> or <input> have keyboard
accessibility built in for free. If you're building custom interactive components,
however, use the tabindex attribute to ensure that they're keyboard accessible.

17. Insert an element into the tab order
Insert an element into the natural tab order using tabindex="0". For example:

18. Remove an element from the tab order
Remove an element using tabindex="-1". For example:

19. Avoid tab index > 0
Any tabindex greater than 0 jumps the element to the front of the natural tab
order. If there are multiple elements with a tabindex greater than 0, the tab
order starts from the lowest value greater than zero and works its way up.

20. Styles Focus

21. Styles Focus
The focus indicator identifies the currently focused element on your page. For
users who are unable to use a mouse, this indicator is extremely important

22. Semantic and
screen readers

23. Semantic and screen readers
Have you ever stopped to wonder how assistive technology, such as a screen
reader, knows what to announce to users? The answer is that these technologies
rely on developers marking up their pages with semantic HTML.
Generally speaking, every HTML element will have some of the following
semantic properties:
● A role or type
● A name
● A value (optional)
● A state (optional)

24. Screen readers

25. Demo Screen readers

26. Heading and
landmark

27. Heading and landmark
Screen readers have commands to quickly jump between headings or to specific
landmark regions. In fact, a survey of screen reader users found that they most
often navigate an unfamiliar page by exploring the headings.
● Use headings to outline the page
● Don't skip heading levels
● Use landmarks to aid navigation
● Bypass repetitive content with skip links

28. Labels and text
alternatives

29. Labels and text alternatives
In order for a screen reader to present a spoken UI to the user, meaningful
elements must have proper labels or text alternatives.

30. Include text alternatives for images
An img should always be accompanied by an alt attribute to give the image its
accessible name. If the image fails to load, the alt text is used as a placeholder so
users have a sense of what the image was trying to convey.

31. Images as links and inputs
An image wrapped in a link should use the img's alt attribute to describe where
the user will navigate to if they click on the link:
Similarly, if an <input type="image"> element is used to create an image button,
it should contain alt text that describes the action that occurs when the user
clicks on the button:

32. Button
A button element always attempts to compute its accessible name using its text
content.
But, when working with icon buttons, it can be helpful to give them an explicit
accessible name using the aria-label attribute

33. Links
Similar to buttons, links primarily get their accessible name from their text
content. A nice trick when creating a link is to put the most meaningful piece of
text into the link itself, rather than filler words like "Here" or "Read More."

34. Label form elements
There are two ways to associate a label with a form element such as a checkbox.
● Place the input element inside of a label element
● Or use the label's for attribute and refer to the element's id

35. Color and contrast
accessibility

36. Color and contrast accessibility
The WebAIM guidelines recommend an AA (minimum) contrast ratio of 4.5:1 for
all text.

37. Accessibility Insight

38. CSS Overview
Use the CSS Overview
panel to better
understand your page’s
CSS and identify
potential
improvements.

39. Content
reordering

40. Content Reordering
The order of content in your document is important for the accessibility of your
site. A screen reader will read out content based on the document order, using
the HTML elements that you have selected to give meaning to that content.

41. Content Reordering
The following CSS properties commonly cause content reordering problems:
● Using position: absolute and taking an item out of flow visually.
● The order property in Flexbox and Grid layout.
● The row-reverse and column-reverse values for flex-direction in Flexbox.
● The dense value for grid-auto-flow in Grid Layout.
● Any positioning by line name or number, or with grid-template-areas in
Grid Layout.

42. Demo Content Reordering

43. Demo Content Reordering

44. References
https://www.w3.org/WAI/fundamentals/accessibility-intro/
https://web.dev/tabindex/
https://webaim.org/techniques/alttext/
https://web.dev/accessible/
https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-
20171214/examples/landmarks/HTML5.htmlhttps://www.w3.org/TR/2017/N
OTE-wai-aria-practices-1.1-20171214/examples/landmarks/HTML5.html

45. CREDITS: This presentation template was created by Slidesgo,
including icons by Flaticon, and infographics & images by Freepik
Do you have any questions?
afifalfiano2@gmail.com
Please keep this slide for attribution
THANKS!