1 of 30

September 21, 2023

SANGROTHA

TALK

THE WEB ACCESSIBILITY

Web Designer– CAMBODIA WORDPRESS COMMUNITY

Touch Sangrotha

#YIGF

2 of 30

What is web content?

Web content is basically everything that fills the website and is the part of user experience. That’s what people read, hear, see, watch, and manipulate on a website. Based on that, the core types of web content are text, images, video, animation and audio(sound);

September 21, 2023

#YIGF

3 of 30

What is accesibility?

�“Web accessibility means that people with disabilities �can equally perceive, understand, navigate and interact with websites and tools. It also means that they can contribute equally without barriers.”- web accessibility Initiative.

September 21, 2023

#YIGF

4 of 30

What is accesibility?

Giving people with disabilities the ability to use technology.

September 21, 2023

Globally about 1 billion have a disability
“A11y” = Accessibility
~ 700000 (5%) in Cambodia have disability.

#YIGF

5 of 30

Why is it important

Information should be accessible to everyone
Increase overall UI/UX, SEO and site speed

• “Access to information and communications technologies, including the Web, is defined as a basic human right in the United Nations Convention on the Rights of Persons with Disabilities”

• Web accessibility is required by law in many situations (ADA)

Grow your audience

September 21, 2023

#YIGF

6 of 30

Who do we need to consider?

Visual Impairment
Hearing Impairment
Motor Impairment

September 21, 2023

#YIGF

7 of 30

September 21, 2023

accessibility

#YIGF

8 of 30

September 21, 2023

Accessibility is Usability for All (People of all abilities)

#YIGF

9 of 30

September 21, 2023

How people with disabilities use tech

Assitive

Technology

Adaptive

Stategies

#YIGF

10 of 30

Screen Reader
Braille Devices
Eye Tracking Devices

September 21, 2023

Assitive Technology

#YIGF

11 of 30

Screen magnification
Reducing mouse speed
Turning on captions
Color and brightness settings

September 21, 2023

adaptive stategies

#YIGF

12 of 30

About wcag

Web Content Accessibility Guidelines (WCAG) explains how to make web content more accessible to people with disabilities. WCAG cover websites, applications, and other digital content. It is developed by the World Wide Web Consortium (W3C) Web Accessiblility Initiative (WAI). WCAG is an international standard.

There three levels of conformance

Level A is the minimum level.
Level AA includes all level A and AA requirements. Many organizations strive to meet level AA.
Level AAA includes all level A, AA, AAA requirements

September 21, 2023

#YIGF

13 of 30

September 21, 2023

#YIGF

14 of 30

Color contrast is a ratio of contrast between two things to be accessible there should be adequate contrast between the color of a piece of information in the foreground and the color of its background.

September 21, 2023

Color contrast

#YIGF

15 of 30

84%

2023 WebAIM Million Survey

September 21, 2023

Of web pages have low

contrast issues

#YIGF

16 of 30

September 21, 2023

Color contrast grid

#YIGF

17 of 30

AA AAA

Large Text 3:1 4.5:1

Small Text 4.5:1 7:1

UI Element 3:1

September 21, 2023

Wcag color contrast guidelines

#YIGF

18 of 30

interactive elements

Buttons, links, clickable icons, radio buttons, checkboxes, accordions, clickable cards or tiles, etc.

September 21, 2023

#YIGF

19 of 30

September 21, 2023

#YIGF

20 of 30

interactive elements

Buttons, links, clickable icons, radio buttons, checkboxes, accordions, clickable cards or tiles, etc.

September 21, 2023

#YIGF

21 of 30

September 21, 2023

Text and contrast makes content perceivable

Before:

After:

#YIGF

22 of 30

September 21, 2023

Text and contrast makes content perceivable

Before:

After:

#YIGF

23 of 30

September 21, 2023

Text and contrast makes content perceivable

Before:

After:

#YIGF

24 of 30

September 21, 2023