Web accessibility refers to making websites usable by people with disabilities and ensuring equal access for all users. Key aspects of accessibility include flexible design, assistive technologies, and compliance with laws requiring equal access. Accessible websites use semantic HTML5 elements, properly label all interactive elements, and support navigation via keyboard. The Web Accessibility Initiative provides guidelines for accessibility and the role of ARIA attributes in making rich interfaces understandable to assistive technologies. Testing tools help evaluate accessibility and identify issues.

1. Introduction to Web Accessibility
“The power of the Web is in its universality. Access by everyone regardless of disability is
an essential aspect.” Tim Berners-Lee
By Fabian Altahona

4. Web Usability
● Specific Users
● Specific Goals
● Specific Context
● Effectively, efficiently and with satisfaction

5. Web accessibility
● Flexibility
● User benefits
● Assistive technologies
● Is often required by law
● Equal access and equal opportunity

6. Accessibility
is not black and white

7. Accessible documents with HTML5
Use HTML5 semantic elements
like <header>, <section>, <nav>,
<article>, <aside> and heading
tags.

8. ● Make sure parts of controls are grouped together. ex. dropdown menu
right next to the button to open it.
● Label controls and Images.
● Use css for layout (not tables).
● Use ARIA attributes when no other tag is suitable for the job.
Accesible documents with HTML5

9. For keyboard only users
● Make sure you can reach all interactive controls by tabbing.
● Make sure you can [enter] or [space] to activate UI controls.
● Manage focus proactively.

10. Web Accessibility Initiative (WAI)

11. Web Accessibility Initiative (WAI)
ARIA Techniques for WCAG
(Web Content Accessibility Guidelines)
ARIA
(Accessible Rich Internet Applications)

12. ARIA
● Is meant to replace the semantics of a tag. It’s like !important
● It allows sending information about the interface behaviour and
structure to the accessibility APIs

13. ARIA properties
There are 2 kinds of properties:
● ARIA roles
● ARIA states and properties

14. ARIA roles
● Landmark roles
● Using role as specified
● Avoid HTML tags without ARIA roles
● Add "aria-label" or "aria-labelledby" to differentiate zones with the
same role

15. ARIA roles (a call of warning)
role=”application”
The application role gives us complete control, but remember: complete
control can also lead to complete chaos.
Screen readers may announce the 'application'. This also tells the screen
reader that the application will take over the expected keyboard shortcuts
and navigation functionality.

16. ARIA states
Add dynamic information about the current state of an element.

17. Web accessibility - Scenarios
Software accessibility: Properly Structured HTML
Mobile accessibility: Responsive Web Design
Accessibility for people with physical disabilities:
Accessibility is the right thing to do
Accessibility leads to good practice
Accessibility helps to avoid legal concerns

18. Accessibility Testing Tools
Accessibility/Web Standards Validators
CSS/HTML Validators, FireBug, wave.webaim.org, Web Developer for
Firefox, Accessibility Toolbar for IE, Luminosity Contrast Ratio Analyser
Browser test :
Graphical browser
Listening with screen readers
Authoring tool accessibility features
Enterprise Accessibility Reports
Define URL & Spider Profile, Select testing Criteria, Reports of progress
Over Time