Having an accessible website provides equal access and equal opportunity to people with disabilities. Providing an accessible website helps people with disabilities actively participate in society. Moreover, accessibility barriers in other media like print audio and visual can be overcome through an accessible Web. And last but not the least, web accessibility is required by laws and policies in some cases.
5. The Web is an important resource in many
aspects of life
● Having an accessible website provides equal access and
equal opportunity to people with disabilities
● Accessible Web helps people with disabilities actively
participate in society
● Accessibility barriers in other media like print audio and
visual can be overcome through an accessible Web
● Web accessibility is required by laws and policies in some
cases
6. Assistive Technologies for PWDs
Disability Assistive Technologies
Blindness ● Screen readers
● Refreshable braille devices
Low vision ● Screen enlargers
● Screen readers
Color blindness ● Color enhancement overlays or glasses
Deafness ● Captions
● Transcripts
Motor/Mobility disabilities ● Head wand
● Mouth stick
● Alternative keyboards
● Eye gaze tracking
● Voice activation
Cognitive disabilities ● Screen readers
● Screen overlays
● Augmentative communication aids
10. Perceivable
You have to be able to perceive web content through at least one of your
biological senses for it to be accessible at all.
11. Users perceive web content by:
● Seeing Web Content
● Hearing Web Content
● Feeling Web Content
12. Operable
Operability is about making the input methods of web content functionally
available to a wide range of input devices, including:
● mouse or touchpad
● keyboard
● touchscreen
● voice recognition software
● other specialized input devices (most of which emulate the keyboard or
mouse)
13. Understandable
Understandability is about making content and interfaces that people can
comprehend.
Create understandable content:
● Specify the Language
● Simplify the Reading or Vocabulary level
● Limit or Avoid Terminology or Concepts that are Unfamiliar or Complex
e.g. Do not use slang!
● Provide Supplemental Formats
14. Robust
Robustness is about ensuring compatibility with a broad range of user agents,
including assistive technologies.
● Different user agent (browsers and other devices) parse web content
differently
● This is also true across operating platforms (Windows, Mac, iOS, Android,
Linux, etc.), and even across different versions of the same browser
● Different screen readers handle content differently
● Newer feature better support for newer technologies such as ARIA
● You’ll have draw a line on the last set of things you’ll support
15. WCAG 2.0
Web Content Accessibility Guidelines (WCAG) 2.0 defines how to make
Web content more accessible to people with disabilities. These
guidelines are also based on the 4 principles of accessibility.
17. Non Text Content (Guideline 1.1.1)
Example of Alt text describing a character in a book:
<img src=”black_cat.jpg” alt=”A pudgy black cat sitting on a
fence post” />
Example of empty Alt text used for a corner image in a user interface:
<img src=”top_left_corner.png” alt=”” />
19. Info and Relationships (Guideline 1.3.1)
Structure content in meaningful ways
● Headings
● Lists
● Form Labels
● Table Headers
20. Meaningful Sequence (Guideline 1.3.2)
A meaningful sequence when navigating through a webpage using a
keyboard is from left to right, top to bottom, much like the path the eyes take
when reading a book.
21. Use of Color (Guidelines 1.4.1 and Guideline 1.4.3)
1.4.1 Use of Color: Color is not used as the only visual means of conveying
information, indicating an action, prompting a response, or distinguishing a
visual element.
1.4.3 Contrast (Minimum): The visual presentation of text and images of text
has a contrast ratio of at least 4.5:1.
22. Keyboard Accessible (Guideline 2.1.1)
When developing custom interactive elements in Web content, developers
should attempt to use device independent event handlers whenever possible.
They may, however, use both mouse and keyboard event handlers together.
Device independent event handlers:
• onfocus
• onblur
• onselect
• onchange
23. Provide Ways to Navigate (Guideline 2.4.1)
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that
are repeated on multiple Web pages.
● Use skip links
● Use ARIA Landmarks
24. Link Purpose - In Context (Guideline 2.4.4)
Link text should describe the destination of a link or its function if it operates a
feature of a webpage. Do not use “click here” as link text.
25. Error Identification (Guideline 3.3.1)
Be sure that screen reader users are aware of feedback messages. Use the
ARIA role=”alert” on dynamically injected messages so they get read
automatically.
<label for=”firstname”>First Name</label>
<input type=”text” id=”firstname” />
<div style=”display:none” role=”alert”>
The first name field is required.
</div>
26. Labels and Instructions (Guideline 3.3.2)
Provide explicit instructions describing how things work, and associate those
instructions with the relevant feature using aria-describedby.
29. Semantic Elements
Instead of assigning a class of “nav” to a navigation div and another assigning
an id of “navigation,” use of semantic elements allow for “nav” to replace div or
span. Some other element names include <article>, <section>, <figure> and
<figcaption>, <footer> and <header>.
31. Aural Alerts
A JavaScript method (Drupal.announce) in D8 takes advantage of the WAI-
ARIA compliance and presents screen readers with a string to be read aloud to
the user.
33. Form Errors
In Drupal 8 there is an option to turn on a feature to improve accessibility
related to the display of form errors and you may put the error inline with the
field.
34. CSS Display Options
Instead of using “display:none”, D8 has adopted four new display classes: (1)
hidden, (2) visually-hidden, (3) visually-hidden.focusable and (4) invisible.
Ask the audience who has heard about “accessibility” before and what comes to their minds when they heard about it.
Web accessibility means that people with disabilities can use the Web
People with disabilities can perceive, interact, understand, navigate and contribute to the Web
Web accessibility benefits a lot of individuals, including older people with changing abilities due to aging
Our Diverse Abilities
Roughly 1 in 5 (about 20%) people have a disability of some kind
Some disabilities cannot be hidden (blindness, physical disabilities, etc.)
Others are hidden (deafness, seizures, reading disorders, etc.)
Some are temporary (crutches, wheelchair, etc.)
Age-related (lose sight, hearing, mobility and/or cognition)
Disabilities that matter most on the web are disabilities with the eyes, ears, hands and brain
How do users with disabilities access web content? They use assistive technologies.
Websites do not have the correct implementation and developers do not have accessibility in mind when they started working on it
Some web softwares are not compatible with the assistive technologies that people with disabilities use
… But for web content we are only concerned with sight, sound and touch.
Seeing Web Content
Most people perceive webpages by looking at them
For users with low or no vision, this does not work well if the developers only focus on that
Hearing Web Content
Blind users use screen reader software, which converts digital text into synthesized speech
Different != bad, unless the experience is not parallel
Blind users are used to listening rather than seeing, so it’s a logical and natural approach for them
Feeling Web Content
Digital text can be converted into 3D Braille characters with:
Printed paper with raised dots
Refreshable Braille devices
Screen readers and Braille software is pretty much the same except for one is for hearing and the other is for touch
For users that are both blind and deaf, touch output is the only available device
Why Perceivability Matters
If you cannot perceive web content, it might as well not exist
If you can’t see it, you should provide a digital text alternative for the screen readers can convert that into sound or Braille
If you can’t hear it, you should provide captions and/or transcripts for audio content
Not Everyone Uses a Computer Like You Do
Not everyone can use a mouse and touchpad because of fine motor skills
Some use alternative devices, like devices that sense movements in the cheeks or tracks the gaze of the eyes
Everything Has to Work
Goal of operability = ensure that web components work
All features must be functional, especially navigation and dynamic/interactive components, no matter what device a person is using
Specify the Language
If the language isn’t set by the website (i.e. <html lang=”en”>), the screen reader will read the pronunciation rules of whatever language is specified in the user’s default settings
That’s cool if the user only speaks one language and sets the default language
Developers can mark certain words or phrases to help with this also (i.e. <span lang=”fr”>Je parle français</span>).
Simplify the Reading or Vocabulary level
Write in plain language
Things that can be difficult for some users include:
Long or unfamilar words
Long sentences
Complex sentence construction
Unclear wording
Long passages of text:
It's usually best to break up text into sections with headings, shorter paragraphs, and lists, where appropriate
Lines of text that are too close to each other
It's usually best to include some blank visual space between lines of text
Limit or Avoid Terminology or Concepts that are Unfamiliar or Complex
Don’t use slang because it’s confusing
Provide Supplemental Formats
For users that can’t read, provide alternative formats such as:
Images
Audio
Video
Accessibility guidelines don’t require you to do this, however it ends up benefiting all users
Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.
1.1.1 Non-Text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
1.2.2 Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
1.3.1 Info and Relationships: Information, structure , and relationships conveyed through presentation can be programmatically determined or are available in text.
Properly nested headings, using HTML heading markup, should be used to structure topics and subtopics within a webpage, rather than using otherwise styled large bold text.
---
If a collection of items on a page looks like a list, ensure that list markup has been used to create the list, rather than using simple line breaks after each item.
--
Relationships between form labels and their respective input fields should be created using the HTML element and explicitly associating the two by matching the "id" attribute value of the input field, with the "for" attribute value of the element.
--
Ensure that data tables use table header elements at the top of each column, and in some cases, at the start of each row.
1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined . (Level A)
While the use of colour can help to add meaning to Web content, the use of colour on its own to represent meaning can create a barrier for those who cannot see colour, including those who are blind, colour blind, or have low vision.
2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
3.3.1 Error Identification: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input.
Accessibility has been greatly improved with the release of Drupal 7. Many of the best practices have been incorporated into the Core making Drupal a good framework for building accessible sites.
Some of the improvements include:
Drag and drop functionality
Improved color contrast and intensity
Adding skip navigation to core themes
Adding labels by default for input forms
Fixing CSS display:none with consistent methods for hiding and exposing text on focus.
Drupal 8 has all the templates and semantic rules for accessibility It has HTML tags, like <article>, <section> …, roles for the main content, ARIA properties (aria required) out of the box and ARIA states out of the box (aria invalid) Very important to keep in mind is that Google likes semantic markup, so if you do all the described things, Google will “like you more”
Drupal 8 has followed WAI-ARIA guidance to make these more understandable to assistive technologies. Drag and Drop is a great example.
You use it when something changes dynamically For example, when you add a new content at the bottom, you add new items … Users, especially blind ones, may not see it, so you have to tell them (announce) that something changed.