web accessibility logo

Web Accessibility

Why?

kids with disabilities

Reasons:

  • enabling access to content for people with disabilities
  • add new clients to your business
  • follow laws
    •
w3c wai logo

WAI

WAI is a W3C Web Accessibility Initiative

w3c guidelines scheme

WAI

WAI provides a set of standards for web accessibility:

UAAG

User agents include browsers, browser extensions, media players, readers, and other applications that render web content.

ATAG

Authoring tools are software and services that “authors” (web developers, designers, writers, etc.) use to produce web content. For example: HTML editors, content management systems (CMS), and websites that let users add content, such as blogs and social networking sites.

WCAG

Web “content” generally refers to the information in a web page or web application

WAI guidelines grouped for four principles:

  1. Perceivable - information must be perceivable for users in ways that it can perceive
  2. Operable - interfaces must be operatable (navigation, inputs, buttons)
  3. Understandable - content information and interact actions must be understhandable
  4. Robust - content must be robust for assistive technologies (screen readers …)
    5.
wcag four principles

WCAG is a Web Content Accessability Guidelines.

WCAG is a documentation that describe how to make web applications suitable and accessible for people with disabilities.

WCAG2.1 include 12 guidelines.

WCAG quick reference

wcag quick reference overview

WCAG2.1 successful criteria:

  • “A” has 25 success criteria
  • “AA” has 45 success criteria (include previous)
  • “AAA” has 78 success criteria (include previous)
    •
accessibility banner

10 WCAG2.1 tips for developers

Tip 1

Associate each input (formControl) with label

Tip 2

Include alternative text for images


						wcag four principles

Tip 3

Identify language and language changes for each page


						html lang="en"

Tip 4

Use markUp to convey structure and information

Use WIA ARIA roles to identify functionality (role=”search”) and if possible HTML5 semantic tags


						

							

								
								
								
Search records by customer id or name

Tip 5

Provide user clear description and error information to avoid mistakes (error messages, examples)


						
						
						
For example, (02) 1234 1234

Tip 6

Reflect the reading order in the code order

tip six: reflect reading order example

Tip 7

Write code to adapt content for user technology (Responsive, and different viewport's)


						/* On narrow viewports, 
						make the navigation full width */
						@media screen and (min-width: 25em) {
							#nav {
								float: none;
								width: auto;
							}
							#main {
								margin-left: 0;
							}
						}

Tip 8

Provide meaning for non-standart interactive elements

Tip 9

Provide keyboard accusable for all alternative interactive elements

Think about keyboard access, especially when developing interactive elements, such as menus, mouseover information, collapsable accordions, or media players. Use tabindex="0" to add an element that does not normally receive focus, such as or, into the navigation order when it is being used for interaction. Use scripting to capture and respond to keyboard events.

Tip 10

Avoid CAPTCH where possible

If it not possible to avoid capture you should make CAPTHCHA understandable and clear

WIA-ARIA

wia aria pyramid

WIA-ARIA is Web Interface Accessibility - Accessible Rich Internet Application

WIA-ARIA provide developers a set of new HTML attributes wich add additional schematic and make elements more accessible.

Main type of attributes in WIA-ARIA:

  • Roles - define special attribute role to identify role, group, structure of element (button, article, tab, menu…)
  • Properties - define attributes to manage elements (aria-required, aria-describedby, aria-controls…)
  • State - define attributes to show element condition (aria-disabled, aria-checked, aria-hidden…)
    •

Define a custom button


						

							Click me!

Define input with aria-label

Add alert role for error

Accessibility tree and devtools

transform process from DOM to accessibility tree

Accessibility tree is a tree that browser make from DOM tree and provide information about elements for assistive tools (screen readers and e.c.t).

Semantic

To make accessibility tree browsers take info from tags elements and nodes. To describe roles and provide browser information about schematic and content of your application your should use semantic/landmarks tags like main, nav, section, article, button, side…


							

							

								

									
Hello world

Chrome devtools - Accessibility tree

chrome devtools accessibility tree

Chrome devtools - LightHouse

chrome devtools lighthouse tab

Web accessibility laws in EU and USA

EU

The European Union follows the European Accessibility Act (EAA). Similar to the Americans with Disabilities Act (ADA) in the United States, the EAA requires all members of the E.U. to provide accessible products and services, including e-commerce, banking services, smartphones, ticketing and check-in, and more. The Web Accessibility Directive and EAA are based on WCAG standards, though they differ significantly.

Conclusion:

All government web application should have WCAG2.1 with AA success tests criteria, other institution and private organization WCAG2.1 with A success rate.

USA

The USA follows the ADA American Accessible Design standard - say what is required for a building or facility to be physically accessible to people with disabilities.

Conclusion:

All government web application should have WCAG2.0 with AA success tests criteria, other institution and private organization WCAG2.0 with A success rate.

Useful links

The End