Accessibility Principles

Dr.Seema Al Raisi
When we talk about accessibility, we are talking
about how to make a product accessible by
people with different abilities.
Accessibility

Accessibility refers to the degree to which software can be

used comfortably by a wide variety of people, including
those who require Assistive Technologies (ATs) like screen
magnifiers or voice recognition.
Accessibility is a subset of universal design, and it plays a
crucial role in achieving the broader goal of universal
design.

Accessibility ensures that those with Universal Design

disabilities are not excluded and have
equal access, which is a fundamental
aspect of universal design. Accessibility
 Accessibility is strongly related to universal design

Universal Design: creating products that are usable by

people with the widest possible range of abilities,
operating within the widest possible range of situations.

Accessibility: making things accessible to all people

(whether they have a disability or not).
By taking accessibility into account during the design
process, we can create environments and products that are
usable by people with disabilities.

This can include things like providing clear and proper labelling
for products, or designing products with built-in accessibility
features like voice command.
Who needs Accessibility?

People with special need:

▪ children under 16 years,
▪ people over 65 years,
▪ and people with disabilities
▪ Abled People
 Disabilities
▪ wheelchair users,
▪ people who cannot walk without aid,
▪ people who cannot use their fingers or arm, reduced
strength, reduced coordination,
▪ speech impairment,
▪ language impairment,
▪ dyslexics,
▪ intellectual impairment,hearing impairment and vision
impairment
 Accessibility for Abled People WHY?
▪ Users may be in a situation where their eyes, ears or
hands are busy (e.g. driving, loud environments).
Hint: Screen Readers; Bluetooth

▪ They may find it difficult to read or understand text

(Hints: Use simple language; Jargons; Avoid
Abbr/Acronyms) .
 Accessibility for Abled People WHY?
▪ browser or operating system (Hints: Write
valid/semantic HTML; HTML5)
▪ They may have a slow connection or limited
hardware. (Hint: Add h/w).
▪ They may not be fluent in the language the
document is written in. (Hints: Bilingual; Translator)
 Accessibility for Abled People WHY?
▪ They may not have or be able to use a mouse or
keyboard. (Hints: Shortcut keys; on-screen
keyboard)
▪ They may have an old or different type of,
Accessibility
• ensures both :
• “direct access” (i.e. unassisted)
• "indirect access" :compatibility with assistive technology

• Accessibility involves two key issues:

• how users with disabilities access electronic information
• and how web content designers and developers enable
web pages to function with assistive devices used by
individuals with disabilities.
What is web accessibility?
Web accessibility is about making sure that
digital content can be accessed and used
by everyone, including people with disabilities.

It’s a way of thinking that makes us stop and

question whether our web content is accessible
to all groups.
 What is web accessibility?

It’s also a practice that involves opening up

digital content, so that it can be accessed,
understood, and used without barriers.
 Assistive Technology
▪ Specialized hardware and software products that provide
essential accessibility to computers for those with
significant disability

▪ Selecting AT products that are compatible with the

computer operating system and programs
 ▪ There are lots of people who don't identify as having a disability
but still use assistive technologies. That's because ATs make our
lives easier and help provide a better user experience.

▪ ATs cover a wide range of devices, such as pointing devices, electric

wheelchairs, power lifts, eye gaze and head trackers, etc.
 Types of Assistive Technologies: Input

• Alternate keyboards • Scanners & optical character recognition

• Joysticks • Trackballs

• Keyboard modifications and additions • Touch screens

• Optical pointing devices • Voice recognition Processing

• Pointing and typing aids

• Switches with scanning

Alternate
keyboards

ITIS401 22
ITIS401 23
ITIS401 24
Types of Assistive Technologies

Programs Output
• Access utilities: Narrator • Braille displays and embossers
• Reading comprehension • Monitor additions
programs • Screen enlargement programs
• Writing composition programs • Screen readers
• Writing enhancement tools • Speech synthesizers
(i.e. grammar checkers) • Talking and large print word
• Speech Recognition processors
 Screen readers

Voice control and Alternative text

switch devices

Color modification Speech to text

• Shortcut Keys for some Assistive Technologies
Windows logo + +/- Magnify Screen
Windows logo + Ctrl + O On-screen Keyboard
Windows logo + Ctrl + Enter Narrator
Windows logo + H Talking Word Processor

• URLs for some Assistive Technologies

http://www.Sribens.com Grammar-checking
http://www.grammarly.com Grammar-checking
 Activity

• Search and find one of the latest assistive

technology. Explain its purpose, how it is used
and provide a picture or screenshot of it.

• Explore your smart phone and give other

examples of Accessibility
How to make the design accessible?
Issues to keep in mind about users
They may be in a situation where their eyes, ears or hands are busy (eg driving, loud environments).

They may find it difficult to read or understand text.

They may not have or be able to use a mouse or keyboard.

They may have an old or different type of browser or operating system.

They may have a slow connection or limited hardware.

They may not be fluent in the language the document is written in.
Accessibility Guidelines
 Accessibility Guidelines: Keyboard Access
To do this (Word) Press

• Keyboard equivalents. Open a document. Ctrl+O

Create a new document. Ctrl+N

Provide keyboard equivalents for all
Save the document. Ctrl+S
actions.
Close the document. Ctrl+W

Users who are unable to use the mouse Cut the selected content to the Clipboard. Ctrl+X

need all functions to be available via the Copy the selected content to the Clipboard. Ctrl+C

Paste the contents of the Clipboard. Ctrl+V

keyboard. (Keyboard shortcuts or
Select all document content. Ctrl+A
hotkeys )
Apply bold formatting to text. Ctrl+B

Apply italic formatting to text. Ctrl+I

Apply underline formatting to text. Ctrl+U

On-screen Keyboard
 Keyboard shortcuts in Word

Keyboard shortcuts in PowerPoint

Accessibility Guidelines: Object Information
• Focus.
• Provide a visual focus indicator that moves among
interactive objects as the focus changes.
• This indicator must be programmatically exposed
to assistive technology.
• Assistive technology needs to know the position
and contents of the visual focus indicator so it can
appropriately convey that information to the user.
Object Information

• User Interface Objects.

• Provide semantic information about user interface
objects.
• When an image represents a program element, the
information conveyed by the image must also be available
in the text.
• Assistive technology will then be able to convey the
identity of the focus object as well as its role and state to
the user.
ITIS401 42
ITIS401 43
Accessibility Guidelines: Object Information

Forms

▪ When electronic forms are used, the form should allow people with
assistive technology to access the information, field elements, and
functionality needed to complete and submit the form, including all
directions and cues.
Example : Hints: Tabbing / Hotkeys /On-screen keyboard / Input
Assista3n5 ce
▪ Provide helpful error messages and suggestions for form validation.
Accessibility Guidelines: Object Information

labels

▪ Give proper labeling.

▪ If an image is used to identify programmatic elements, the meaning of
the image must be consistent throughout the application.
ITIS401 46
Accessibility Guidelines: Sound and Multimedia
• Audio alerts.
• Provide an option to display a visual cue for all audio alerts.
• Significant audio and video.
• Provide accessible alternatives to significant audio and video.
• Provide closed captions and transcripts for audio and video content.
• Add screen reader

• Volume
• Provide an option to adjust the volume.
• Ensure that media players have accessible controls and keyboard
navigation.
adjust the volume.
Display a visual cue for all audio alerts

ITIS401 49
Transcript and Screen reader
Transcript and Screen reader
Closed Caption Video Controls
 Accessibility Guidelines: Text
▪ Ensure the text is Readable.
▪ Display text in the standard format If text is displayed in a non-standard
way, the screen reader will not be able to read the information to the user.
▪ Select a font that clearly distinguishes between the numeral 1, capital I
and lower case i, and the zero 0 and the capital O.
▪ Using both upper- and lower-case characters is more legible
▪ Avoid using DECORATIVE AND CURSIVE fonts because it is difficult to read
▪ Ensure that text can be Resizable by adding an option to increase or
▪ decrease the text size.
▪ For English text, Left-justified text is easier to read than centered text
Avoid using DECORATIVE AND CURSIVE fonts
Customizable font sizes
Customizable font sizes
 Accessibility Guidelines :Colour
▪ Maintain sufficient color contrast for text & content to ensure
readability.
▪ Avoid relying on color alone to convey information.
▪ Avoid pale colors and colors that are close in tone.
▪ Use no more than five colors when coding information.
▪ Follow established color conventions, such as using red for stop.
▪ Avoid blue, green, and violet for conveying information, since they
cause problems for older users
▪ Choose background and text colors with a high contrast ratio.
Examples of use of colors

Maximize contrast ratio

Bad Accessibility Example
Accessibility Guidelines: others
▪ Images
▪ Use appropriate alternative text for images.
▪ Example: Alt text for non-text; CAPTCHA
Accessibility Guidelines: others
▪ Skip the content
▪ Include a "Skip to Content" link to allow keyboard users to bypass unnecessary
content and save the time

64
Skip the content
Accessibility Guidelines: others
▪ Background
▪ Patterned backgrounds make text more difficult to read.
▪ Example: Watermark; Contrasting colors

66
Can you read me

Can you read me

Accessibility Guidelines: others

▪ Blinking Elements
Flickering or flashing content can cause discomfort to some people.
Example: Not more than 3 times per second

▪ Format
Provide documentation in an accessible format such as HTML(viewing),
accessible PDF(downloading), and sometimes Microsoft Office files.
Activity
• Select A website and evaluate it using the accessibility guidelines.
Write your answer in the homework section in team.

Keyboard Object Sound and Text Colour

Access Information Multimedia
 Test Your
Knowledge!
1. Explain formal definition of Accessibility.

2. Explain with example - "One of the benefits of accessibility is that

accessibility creates market opportunity.“

3. “Accessibility is only for disabled people.”

A. True
B. False

4. Give examples of ATsfor the following disabled people:

• Blind
• Deaf
• Person with Parkinson’s Disease
5. Which of the following is applied to make the text in a web site
accessible?
A. Use clear fonts with customizable font size
B. Decorate the text
C. Style the text with more than five different colors
D. Put all the text as images in the web site.

6. Khalfan is a student who is visually impaired. He is struggling to use

the E-learning to access his course material.
• Suggest an assistive technology that can help Khalfan in accessing
the online material.
• Suggest one accessibility improvement that can be added to the
E-learning to help Khalfan access the online content.
7. What are the alternatives of Video and Audio in website design?

8. Explain CONTRAST in background and CONTRAST in sound/audio in

website design.

9. If physical keyboard is inaccessible, what should you do?

10. How to solve physical reactions against BLINKING and FLICKERING

elements in the website?

11. How to ensure UNDERSTANDABILITY in your website?

7. If physical keyboard is inaccessible, what should you do?

8. How to solve physical reactions against BLINKING and FLICKERING

elements in the website?

9. How to ensure UNDERSTANDABILITY in your website?

7. Samira wanted to use her device hand-free with less mental stress to
type. She wanted to have a voice recording in order to convert her
voice to text. What would you recommend her to use?

A. Screen reader
B. Narrator
C. Speech-to-text
D. Magnifier
14. Ahmed is making used of a technology in his mobile phone and
webpage. The technology reads out text found on-screen such as
visible text and non-text elements such as buttons and alternative
text. What technology is described in the scenario?

A.Screen Reader
B.Narrator
C.Magnifier
D.Voice Recognition
 15. Give examples of ATs for the following disabled people:

• Blind
• Deaf

16. What are the two main benefits of universal design in collaboration with
accessibility, and how do they contribute to improving products and
services for everyone