Accessibility: We Need It Yesterday

•Download as PPTX, PDF•

0 likes•87 views

My slides from LvivCSS 2018 Somebody thinks that Web Accessibility doesn't worth the efforts and investments. Somebody doesn't care at all. In this talk, we'll go through the importance of Web A11y - how it can affect the revenue, how it can make your life easier, how bad decisions increase the bounce rate. And of course, you will see some steps to make the web a better place. For everyone.

Engineering

Accessibility
We Need It Yesterday
Vitaliy Stanyshevskyy

Vitaliy Stanyshevskyy
Sr. Front-End Developer
@

Definition of Done:
- Meet deadlines
- No bugs
...
- PROFIT

4.23 %
WHO: Blindness and vision impairment - http://bit.ly/who-blindness
285 389 000
of world population is
visually impaired

WHO: The International Classification of Impairments, Disabilities, and Handicaps (1980)
http://bit.ly/who-classification
Impairment or Disability?
Impairment Disability
Signs and symptoms Consequences

Cognitive
Motor
Visual
Hearing
Impairments types

15 %
WHO: World Report on Disability http://bit.ly/who-world-disability
1 010 625 000
of world population
have disabilities

12.6%
Institute on Disability/UCED: Disability Statistics 2016 Annual Report http://bit.ly/USA-2016-Disability
of the US population live with disabilities

Accessibility is about
COMFORT
of a user.

<div>
<footer>
<header>
<h1>
<li>
<article>
<nav>
<main>

DEMO
Headings and Landmarks
https://cbracco.github.io/html5-test-page/#top

Quiz. Spot the difference
<button> <a>
🤔Primary Primary
🤔
♂️

DEMO
Rotor: Links and Form Controls
https://cbracco.github.io/html5-test-page/#top

Semantics for everyone
● Code maintainability
● Content readability
● Help for a screen reader
● “HTML as a protocol”
Mandy Michael on Medium. http://bit.ly/websites-
reading-mode

Zoom
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-
scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-
scale=1">
👍
👎

DEMO
Outline
https://vstanyshevskyy.github.io/lviv-css-a11y/no-outline.html

:focus-visible
button:focus { /*some exciting button focus styles*/ }
button:focus:not(:focus-visible) {
/* undo all the above focused button styles
if the browser supports :focus-visible */
}
button:focus-visible { /* keyboard focus styles */ }

DEMO
Skip to Content / Navigation
https://vstanyshevskyy.github.io/lviv-css-a11y/skip.html

Outline
● NYT against texty.org.ua (lviv.css)

Contrast Ratio. WCAG Recommendations
AA AAA
Normal Text 4.5 : 1 7 : 1
Large Text 3 : 1 4.5 : 1

DEMO
Contrast
https://vstanyshevskyy.github.io/lviv-css-a11y/contrast.html

User styles
<body style="outline: none!important">
…
</body>

Summary
● A11y is about everyone.
● The best tool to make site accessible is
HTML.
● Use your keyboard to test a UI

Further reading
● Udacity/Google Course
● https://a11yproject.com/
● Web Content Accessibility Guidelines (WCAG) 2.0

Yura Chaikovsky
Accessibility: let's do it now
16:10. Main Stage

Accessibility
We Need It Yesterday
Vitaliy Stanyshevskyy
/in/stanyshevskyy
vitaliy.stanyshevskyy@gmail.com
@vitaliystanyshevskyy

Similar to Accessibility: We Need It Yesterday

AR&TTs challenge 2013 - Understanding Disability Workshop Part 1

arttschallenge

As population continues to grow, and countries invest in human capital there is a group left out. 15% of the population is living with one or more disabilities, and 66% of the adult population is unemployed. This puts strains on public social expenditure between 10-25% in OECD countries. I believe the “future of work” is a call-to-action to make work more accessible and increase productivity. There is a potential 3-7% GDP gain from the people unemployed and an estimated $8 Trillion economic buying power from including them in the economy. But some things can be done.

The future of accessible work

Edmundo Del Castillo Soto

Enabling seniors in need / Alzheimer's Disease patients to stay longer at the...

Amir Fish

Universal Design for Digital Content - Radina Matic - tcworld2015

Radina Matic

The Definitions and Demographics of low vision

Hossein Mirzaie

Accessibility: An Even Playing Field

Steve Grobschmidt

Great design and usability, your website can have both.

Lisa Spitz Design

Digital Health and Wellness Presentation

akdm28

Digital Health and Wellness Presentation

akdm28

Accessibility Myths for the Mobile Generation (HCID Open 2015)

Jonathan Hassell

01 - LOW VISION - Introduction to Blindness and Low Vision.pptx

JohnDean95

assisting device for visually impaired person

Pushpa Gothwal

Overview of Neurological Vision Rehabilitation System

Neuro_Vision

Presentation given by Jonathan Hassell (Head of Audience Experience & Usability) and Robin Christopherson (Head of Accessibility Services, AbilityNet) at Internet 2010, London in 2010. Covers: how many people in the UK are still unconnected from the internet, and how 25% fewer disabled people are using the internet than the general population; what the reasons for this lag in usage by disabled people might be (and definitely are not); how use of assistive technologies in the UK is much lower than the expected percentages (from Microsoft Forrester research in 2003); how My Web My Way (bbc.co.uk/accessibility) provides information on assistive technologies and browser/OS accessibility settings to help disabled people; how website personalisation technologies can help all users (no matter how contradictory their needs) get a better user-experience; how the BBC ATK is aiming to provide these features on bbc.co.uk

2009: Social inclusion in a Digital Age

Jonathan Hassell

UN Colombo 2023 workshop PWD

vcylalith

Presentation as part of the Evidence of Best Practice in Disability-Inclusive Development plenary sessions. It includes highlights of our pilot project in Bhopal including the methodology used to disaggregation data by disability, results, lessons learnt and next steps. Presented by Emma Jolley at the 2016 international symposium: Disability in the SDG: Forming Alliances and Building Evidence for the 2030 Agenda, in London, 18-19 February 2016.

Disaggregating routine monitoring data by disability – an example from eye he...

Sightsavers

National Programme for Control of Blindness

KEM Hospital

visual impairment .pptx

SulakshaDessai

10 Years of Web Content Accessibility Rules: Time for a Rethink?

Roger Hudson

Com ophthal - I,blindness, vision 2020, 15.09.16, dr.n.swathi

ophthalmgmcri

Similar to Accessibility: We Need It Yesterday (20)

AR&TTs challenge 2013 - Understanding Disability Workshop Part 1

The future of accessible work

Enabling seniors in need / Alzheimer's Disease patients to stay longer at the...

Universal Design for Digital Content - Radina Matic - tcworld2015

The Definitions and Demographics of low vision

Accessibility: An Even Playing Field

Great design and usability, your website can have both.

Digital Health and Wellness Presentation

Accessibility Myths for the Mobile Generation (HCID Open 2015)

01 - LOW VISION - Introduction to Blindness and Low Vision.pptx

assisting device for visually impaired person

Overview of Neurological Vision Rehabilitation System

2009: Social inclusion in a Digital Age

UN Colombo 2023 workshop PWD

Disaggregating routine monitoring data by disability – an example from eye he...

National Programme for Control of Blindness

visual impairment .pptx

10 Years of Web Content Accessibility Rules: Time for a Rethink?

Com ophthal - I,blindness, vision 2020, 15.09.16, dr.n.swathi

Recently uploaded

HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKAR

KOUSTAV SARKAR

Digital Communication: Digital communication refers to the transmission of information using digital signals, where data is represented by discrete symbols or values. It encompasses various techniques for encoding, transmitting, and decoding digital data, including text, images, audio, and video. Digital communication systems offer advantages such as improved signal quality, noise immunity, and the ability to multiplex multiple data streams. Differential Pulse Code Modulation (DPCM): DPCM is a digital modulation technique used for encoding analog signals into digital form. In DPCM, the difference between the current sample and the predicted value of the sample is quantized and encoded, rather than encoding the absolute sample value directly. This technique can reduce the amount of data required for transmission compared to standard pulse code modulation (PCM), especially for signals with correlation between successive samples. Delta Modulation (DM): Delta modulation is a simple form of analog-to-digital conversion where the difference (delta) between the current sample and the previous sample is quantized and encoded. In DM, only the sign of the difference (positive or negative) is transmitted, which simplifies the encoding process. However, DM may suffer from quantization noise and limited signal fidelity, especially for rapidly changing or high-frequency signals. Adaptive Delta Modulation (ADM): Adaptive delta modulation is an extension of delta modulation that dynamically adjusts the step size or quantization level based on the characteristics of the input signal. Unlike fixed-step delta modulation, ADM can adapt to changes in signal amplitude or frequency, resulting in improved signal fidelity and reduced quantization error. ADM is particularly useful for encoding signals with varying dynamics or signal-to-noise ratios

Digital Communication Essentials: DPCM, DM, and ADM .pptx

pritamlangde

scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...

HenryBriggs2

Memory Interfacing of 8086 with DMA 8257

subhasishdas79

Augmented Reality (AR) with Augin Software.pptx

Mustafa Ahmed

POST OFFICE works in every walk of our life. Through the automation of this system one can easily generate the information about the customer available and also about the old records. For this efficient software the first and the foremost thing is that all the requirements should be known before hand and the developer should devote its effort for the completion of that requirement which are demanded by the customer should be fulfilled. This system can be used in various education departments and can distribute the copies of the system among the management and staff members for the required information of their customer.

Post office management system project ..pdf

Kamal Acharya

Introduction to Geographic Information Systems

Ange Felix NSANZIYERA

HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx

SCMS School of Architecture

Basic Electronics for diploma students as per technical education Kerala Syll...

ppkakm

Signal Processing and Linear System Analysis

National Chung Hsing University

The purpose of Integrated Test Rig is to assess performance of Fuel Cooled Oil Cooler (FCOC), HP Pump & Oil Pump prior to fitment on Aero Engine. The design of rig is such that it can cater to individual testing of individual LRU or integrated testing of all the LRU’s installed together (in combination). The pumps under test shall be mounted directly on the high-speed electric motor flange through adapter quill shaft assembly. Variable speed drives shall be provided for all the pumps under testing. The rig shall cater for real time monitoring and recording of performance parameters. KEY FEATURES Key features of this Rig are as follows: - 1. It has separate power packs for both the fluids i.e. ATF Power pack for ATF Fluid, OX Power Pack for OX-27 Oil. 2. This Rig is designed for high temperature Application. It works on 200 deg. Celsius. 3. Two Dedicated heating systems have been integrated with this Rig to raise the temperature of OX-27 Oil. 4. In both Power Packs insulated tanks are being used, which is good for safe operation and safety of operator. 5. This rig is designed in such a way, that it’s OX power pack is in its left side, ATF Power pack is in right Side and test bed is in Centre. 6. A big Test bed have been provided for smooth testing of UUT’s. 7. All piping is being insulated for safe operation and maintenance. 8. It comprises with DAQ System. 9. This rig can test several components at a time, together or separately. Application All the UUT’s are mounted on HTFE-25 Engine after successful performance testing of those. Application of this Rig are as follows: - 1. One of its application is to test LP Pump of HTFE-25. It is designed for functional testing of LP Pump. a. Free Flow Test b. Load Test 2. It is used to test HP Pump of HTFE-25. It is designed for functional testing of HP Pump. a. Free Flow Test b. Load Test 3. It is used to test Oil Pump of HTFE-25. It is designed for functional testing of Oil Pump. 4. It is used to test FCOC of HTFE-25.

Integrated Test Rig For HTFE-25 - Neometrix

Neometrix_Engineering_Pvt_Ltd

S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx

SCMS School of Architecture

8th International Conference on Soft Computing, Mathematics and Control (SMC 2024) will provide an excellent international forum for sharing knowledge and results in theory, methodology and applications impacts and challenges of Soft Computing, Mathematics and Control. The conference documents practical and theoretical results which make a fundamental contribution for the development of Soft Computing, Mathematics and Control. The aim of the conference is to provide a platform to the researchers and practitioners from both academia as well as industry to meet and share cutting-edge development in the field.

8th International Conference on Soft Computing, Mathematics and Control (SMC ...

josephjonse

This presentation gives you easier way to study 8086 i.e. 16 bit microprocessor. 8086 microprocessor's architecture contains two basic functional units namely Bus Interface Unit and Execution Unit. BIS fetches the instructions from memory. It reads/writes instructions to/from memory. Input/Output of data to/from I/O peripheral ports. Address generation of memory reference. Queing instructions. Thus, BIU handles all transfer of data and address. Tasks of EU: Decodes the instructions. Executes the decoded instructions. Tells BIU from where to fetch the instruction. EU takes care of performing operation on the data. EU is also known as heart of the data.

8086 Microprocessor Architecture: 16-bit microprocessor

AshwiniTodkar4

Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...

ssuserdfc773

Education system forms the backbone of every nation. And hence it is important to provide a strong educational foundation to the young generation to ensure the development of open-minded global citizens securing the future for everyone. Advanced technology available today can play a crucial role in streamlining education-related processes to promote solidarity among students, teachers and the school staff. School Management System(SMS) consists of tasks such as registering students, attendance record keeping to control absentees, producing report cards, producing official transcript, preparing timetable and producing different reports for teachers, officials from Dr.Mohiuddin Education foundation and other stakeholders. Automation is the utilization of technology to replace human with a machine that can perform more quickly and more continuously. By automating SMS documents that took up many large storage rooms can be stored on few disks. Transcript images can be annotate. It reduces the time to retrieve old transcripts from hours to seconds.

School management system project Report.pdf

Kamal Acharya

Worksharing and 3D Modeling with Revit.pptx

Mustafa Ahmed

"Lesotho Leaps Forward: A Chronicle of Transformative Developments"

mphochane1998

UNIT 4 PTRP final Convergence in probability.pptx

kalpana413121

Query optimization and processing for advanced database systems

meharikiros2

Recently uploaded (20)

HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKAR

Digital Communication Essentials: DPCM, DM, and ADM .pptx

scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...

Memory Interfacing of 8086 with DMA 8257

Augmented Reality (AR) with Augin Software.pptx

Post office management system project ..pdf

Introduction to Geographic Information Systems

HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx

Basic Electronics for diploma students as per technical education Kerala Syll...

Signal Processing and Linear System Analysis

Integrated Test Rig For HTFE-25 - Neometrix

S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx

8th International Conference on Soft Computing, Mathematics and Control (SMC ...

8086 Microprocessor Architecture: 16-bit microprocessor

Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...

School management system project Report.pdf

Worksharing and 3D Modeling with Revit.pptx

"Lesotho Leaps Forward: A Chronicle of Transformative Developments"

UNIT 4 PTRP final Convergence in probability.pptx

Query optimization and processing for advanced database systems

Accessibility: We Need It Yesterday

1. Accessibility We Need It Yesterday Vitaliy Stanyshevskyy

2. Vitaliy Stanyshevskyy Sr. Front-End Developer @

3. It has started 5 years ago

6. Definition of Done: - Meet deadlines - No bugs ... - PROFIT

7. Haven’t you forgotten somebody?

8. 4.23 % WHO: Blindness and vision impairment - http://bit.ly/who-blindness 285 389 000 of world population is visually impaired

9. WHO: The International Classification of Impairments, Disabilities, and Handicaps (1980) http://bit.ly/who-classification Impairment or Disability? Impairment Disability Signs and symptoms Consequences

10. Cognitive Motor Visual Hearing Impairments types

11. 15 % WHO: World Report on Disability http://bit.ly/who-world-disability 1 010 625 000 of world population have disabilities

12. 12.6% Institute on Disability/UCED: Disability Statistics 2016 Annual Report http://bit.ly/USA-2016-Disability of the US population live with disabilities

13. Impairments - Temporary and Situational

14. Accessibility is about COMFORT of a user.

15. Let’s learn A11y! ARIA specs

16.

17. HTML

18. HTML

19. <div> <footer> <header> <h1> <li> <article> <nav> <main>

20. <div> <footer> <header> <h1> <li> <article> <nav> <main>

21. DEMO Headings and Landmarks https://cbracco.github.io/html5-test-page/#top

22. Quiz. Spot the difference <button> <a> 🤔Primary Primary 🤔 ♂️

23. DEMO Rotor: Links and Form Controls https://cbracco.github.io/html5-test-page/#top

24. Semantics for everyone ● Code maintainability ● Content readability ● Help for a screen reader ● “HTML as a protocol” Mandy Michael on Medium. http://bit.ly/websites- reading-mode

25. Zoom <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum- scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial- scale=1"> 👍 👎

26. CSS

27. http://www.outlinenone.com/

28. DEMO Outline https://vstanyshevskyy.github.io/lviv-css-a11y/no-outline.html

29. :focus-visible

30. :focus-visible button:focus { /*some exciting button focus styles*/ } button:focus:not(:focus-visible) { /* undo all the above focused button styles if the browser supports :focus-visible */ } button:focus-visible { /* keyboard focus styles */ }

31. DEMO Skip to Content / Navigation https://vstanyshevskyy.github.io/lviv-css-a11y/skip.html

32. Outline ● NYT against texty.org.ua (lviv.css)

33. Contrast Ratio. WCAG Recommendations AA AAA Normal Text 4.5 : 1 7 : 1 Large Text 3 : 1 4.5 : 1

34. DEMO Contrast https://vstanyshevskyy.github.io/lviv-css-a11y/contrast.html

35. DEMO Validation Facebook Login

36. DEMO Responsive Styles The Verge

37. Beware of user styles Font Size

38. User styles <body style="outline: none!important"> … </body>

39. Google Lighthouse

40. DEMO Google Lighthouse The Verge

41. Summary ● A11y is about everyone. ● The best tool to make site accessible is HTML. ● Use your keyboard to test a UI

42. Further reading ● Udacity/Google Course ● https://a11yproject.com/ ● Web Content Accessibility Guidelines (WCAG) 2.0

43.

44. Yura Chaikovsky Accessibility: let's do it now 16:10. Main Stage

45. 100 Accessibility

46. Accessibility We Need It Yesterday Vitaliy Stanyshevskyy /in/stanyshevskyy vitaliy.stanyshevskyy@gmail.com @vitaliystanyshevskyy

Editor's Notes

Одного похмурого осіннього дня, схожого на цей я йшов в офіс, такий же небритий і непричесаний. І через неуважність мало не втрапив у халепу на пішохідному переході. Добряче перелякавшись, я почав думати “а що було б якщо...” Якщо зі мною щось станеться, якщо я втрачу зір чи дрібну моторику, яким буде моє життя? Як я зароблятиму на життя? Як жити без інтернету і сучасних девайсів?

Accessibility: We Need It Yesterday

Recommended

Recommended

More Related Content

Similar to Accessibility: We Need It Yesterday

Similar to Accessibility: We Need It Yesterday (20)

Recently uploaded

Recently uploaded (20)

Accessibility: We Need It Yesterday

Editor's Notes