What is accessibility? Different versions Guidelines and techniques How to make websites accessible?

1. WCAG: Web Content
Accessibility Guidelines
BY: Purnima Agarwal
MCA 2nd Sem
Pondicherry University
20352042
What is it and what we have to do.

2. What is web accessibility?
Before diving
into WCAG,
we will first
know what is
web
accessibility.

3. Web accessibility is a way of
making your website
available to as many people
as you can. Not everyone in
the world is same and will be
able to use your website as
you do. So it is important for
everyone to keep accessibility
in mind while designing
your websites.

4. We should think if as a way of
treating everyone same and
providing them the same
opportunity no matter what
their ability or situation is.
Just as it is wrong that someone
who is one a wheelchair can’t
use a building because it doesn’t
have a ramp or a lift, it is wrong
to exclude someone from using
a website because they have
some kind of disability.
We are all different, but we are
all human, and therefore have
the same human rights.
Accessibility is the right thing to
do. Providing accessibility is law
in some countries and govern by
the government and there are
also some guidelines issued by
organizations on how to make a
website accessible and also judge
the accessibility of a website.

5. Why we need to make our websites
accessible?
The power of the Web is in its Universality.
According to the World Health Organization:
• 15% of the world’s population (over a billion people) have some form of
disability.
• 285 million people are estimated to be visually impaired
• 39 million of those are estimated to be blind
• 246 million are estimated to have low-vision
• 260 million people worldwide have disabled hearing loss

6. Accessibility Guidelines and Laws
There are some laws which governs the accessibility of a websites and also provides principles and
guidelines to make our website accessible.
1) The W3C has published a large and very
detailed document that includes very
precise, technology-agnostic criteria for
accessibility conformance. These are called
the Web Content Accessibility
Guidelines (WCAG). The criteria are split up
into four main categories, which specify how
implementations can be made perceivable,
operable, understandable, and robust.
2) Different country may have specific
legislation governing the need for
website to be accessible — for
example EN 301 549 in the EU, Section
508 of the Rehabilitation Act in the
US, Federal Ordinance on Barrier-Free
Information Technology in Germany,
the Accessibility Regulations 2018 in the
UK, Accessibilità in Italy, the Disability
Discrimination Act in Australia, etc. The
W3C keeps a list of Web Accessibility
Laws & Policies by country.

7. WCAG: Introduction
Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in
cooperation with individuals and organizations around the world, with a goal of providing a
single shared standard for web content accessibility that meets the needs of individuals,
organizations, and governments internationally. It ensures all users have equal access to
information on the web.

8. WCAG provides a wide range of
guidelines and recommendations for
making websites accessible and it
have different versions.
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.
These guidelines makes your website
more visible to other and increases
its reach on the web.
These guidelines will also often make
our Web content more usable to
users in general.
WCAG is developed through the W3C
process in cooperation with
individuals and organizations around
the world, with a goal of providing a
shared standard for Web content
accessibility that meets the needs of
individuals, organizations, and
governments internationally.

9. Versions:
• WCAG 1.0, finalized in 1999
• WCAG 2.0 - published on 11 December 2008.
WCAG 2.1 - published on 5 June 2018.(current standard)
WCAG 2.2 - published in may 21, 2021.
• All requirements (“success criteria”) from 2.0 are included in 2.1.
The 2.0 success criteria are exactly the same (verbatim, word-
for-word) in 2.1.
All requirements in 2.0 and 2.1 are included in 2.2. The wording
of the 2.0 and 2.1 success criteria are exactly the same in 2.2.

10. Who were the main focus for WCAG 2.1?
It extends points from previous version and included more
focus for-

11. How is WCAG 2.1 different from other
pervious versions?
What’s new about WCAG 2.1 is that it includes 17 new success
criteria related to mobile accessibility, as well as provisions that
will benefit more people.
The success criteria
found in WCAG 2.0 are
included in WCAG 2.1
– the wording of those
criteria has not
changed. That means
that WCAG 2.1 is
“backwards
compatible” or, as W3C
puts it, “content that
conforms to WCAG 2.1
also conforms to
WCAG 2.0.”

12. The Four Principles:
We will be discussing the 2.1 version in details.
WCAG 2.1 is broadly broken down into four principles — major things that web content must be to be
considered accessible.
• Perceivable: Users must be able to perceive it in some way, using one or more of their senses.
• Operable: Users must be able to control UI elements (e.g. buttons must be clickable in some way —
mouse, keyboard, voice command, etc.).
• Understandable: The content must be understandable to its users.
• Robust: The content must be developed using well-adopted web standards that will work across
different browsers, now and in the future.

13. GUIDELINES :
Under the principles are the guidelines. The 12 guidelines provide the basic
goals that developers should work toward in order to make content more
accessible to users with different disabilities. We can’t test the guidelines, but
provide the framework and overall objectives to help authors understand the
success criteria and better implement the techniques.
We will now discuss the guidelines:

14. Guidelines under Principle 1: Perceivable
• Text Alternatives: Provide text
alternatives for any non-text
content so that it can be changed
into other forms people need, such
as large print, braille, speech,
symbols or simpler language.
• Time-based Media: Provide
alternatives for time-based media.
• Adaptable: Create content that can
be presented in different ways (for
example simpler layout) without
losing information or structure.
• Distinguishable: Make it easier for
users to see and hear content
including separating foreground
from background.

15. Guidelines under Principle 2: Operable
• Keyboard Accessible: Make all
functionality available from a
keyboard.
• Enough Time: Provide users
enough time to read and use
content.
• Seizures: Do not design content
in a way that is known to cause
seizures.
• Navigable: Provide ways to help
users navigate, find content, and
determine where they are.

16. Guidelines under Principle 3: Understandable
• Readable: Make text content readable and
understandable.
• Predictable: Make Web pages appear and operate in
predictable ways.
• Input Assistance: Help users avoid and correct
mistakes.

17. Guidelines under Principle 4: Robust
Compatible: Maximize compatibility with current and future user agents,
including assistive technologies.
• Parsing: In content implemented using markup languages, elements have
complete start and end tags, elements are nested according to their
specifications, elements do not contain duplicate attributes, and any IDs are
unique, except where the specifications allow these features. (Level A)
• Name, Role, Value: For all user interface components (including but not limited
to: form elements, links and components generated by scripts),
the name and role can be programmatically determined; states, properties, and
values that can be set by the user can be programmatically set; and notification
of changes to these items is available to user agents, including assistive
technologies. (Level A)

18. Levels of Conformance
To help development teams prioritize accessibility implementation and remediation
efforts, WCAG success criteria are organized into three levels of conformance:
•Level A is a basic requirement for some users with disabilities to be able to access and
use web content.
•Level AA indicates overall accessibility and removal of significant barriers to accessing
content.
•Level AAA provides improvements and enhancements to web accessibility for some
users with disabilities.
These levels are cumulative. To claim Level AA conformance, a website must meet all
Level A and AA success criteria. Likewise, Level AAA conformance implies that all success
criteria from all three levels have been met.

19. Making a
website
accessible
according to
WCAG 2.1 is
not difficult!
Many developers feel
like following WCAG
rules is very difficult
and too much work .
So, here is check
list and some
simples steps
which has some
simple steps you
can follow to
achieve
accessibility .

20. WCAG Checklist.
The W3C has extensive guidelines on how to attain basic (and recommended) web
content accessibility.
Here are some of the most actionable fundamentals below, so if you follow these
steps in the checklist , you’re well on your way to delivering an accessible user
experience.
It’s extremely useful to have a WCAG checklist to hand when you
are working on the website and going through the rules.
A WCAG checklist keeps you organized and helps you check your
progress while designing and how far you have came and a log for
future use.

21. 1. Screen-reader Compatible Web Pages
Web pages must be readable by electronic “screen readers” — which are devices commonly used by the
visually impaired to surf the internet.
2. Alt-tagged Images
Images must have “alt tags” (a type of metadata) which will help visually-impaired users to identify the image
via text or via a screen reader. Search engine optimizers will know of alt-tags as a way to optimize images for
ranking high in ‘Google Images’.
3. Alt-tagged Tables
If you’re using tables on any web pages, they must also have alt-tags — similar to those used with images — to
help explain each column via text. The user’s screen-reader will then read that text aloud, describing the
contents of the table.
4. Automatic Scripting
Any scripted display usage of image mapping should be accompanied by textual alternatives.
5. Style Sheet Independence
Your web pages shouldn’t need a stylesheet to display in a way that is understandable. They should be
readable to screen readers, most of which cannot load style sheets.

22. 6. Accessible Forms
Web forms should be usable even without a mouse, and each field should be labeled.
7. Text Links to Plugins
If your website requires a specific plugin to work correctly, you should present the link to that plugin in
text form.
8. Inclusive Color Schemes
Your website should not contain any colors or color combinations that are either integral to the correct
usage of your website, or which may confuse those with color blindness in any way pertaining to your
website, products or services.
9. Keyboard-friendly Browsing
Your website shouldn’t be reliant on the usage of a mouse or touchpad. Users who wish to navigate using
only keyboard keys should be able to do so.
10. Harmless Website Design
Your website should not serve images or videos that can cause seizures.

23. Some more ways you make your website
accessible.
Step 1: Use Heading Tags
Users who are visually impaired, have low
literacy skills or have another form of
disability may have difficulties scrolling
through websites. These users typically
employ screen readers or other tools to read
the website content for them.
Screen readers use heading tags (<h1>, <h2>,
etc.) to navigate and prioritize the content.
The strategic use of heading tags will not
only make the site more easily manageable
by screen readers but it will also make it
more optimized for search engines.
Step 2: Use ALT Text for Images
Screen readers can also read the text in the
<ALT> tags in embedded image files. These tags
usually contain a description of any images,
infographics, or other non-text information on
the page. The more descriptive the image, the
better for the user.
For instance, if an online clothing store has an
image of a dress, a descriptive ALT tag text
should contain the dress size, color, pattern,
design, the name of designer and fabric used.

24. Step 3: Use Proper HTML Structure
While some features can add some visual variety
to websites, they could potentially compromise
any attempts to make the site more accessible.
For instance, removing the underline from
hyperlinks can confuse users with visual
impairments as to whether the link text is
intended to be a link, or just more content text.
Another example is the use of HTML tables. For
decades, developers have used tables as a layout
tool, allowing them to place content in specific
areas on the page.
Step 4: Make Forms Accessible
The typical objective of a business website is to
convert visitors into customers. This conversion
can be as simple as receiving a request for
additional information, or as extensive as
receiving and fulfilling an order, complete with
payment information. In order for a business
website to be effective at converting a visitor
with special needs into a customer, the forms
that enable those conversions should be
designed for those visitors in mind.

25. Step 5: Choose a CMS That Supports Accessibility
AChecker is a PHP open source Web accessibility evaluation tool used to review the
accessibility of Web pages based on a variety of international accessibility guidelines. This
implementation is available in the WYSIWYG and can be run as part of the content editing
process.
When editing or creating content, dotCMS users can click on the Accessibility Checkmark to
run the checker. This will produce a report of all accessibility problems for your selected
guidelines. The report identifies 3 types of problems
1)Known problems: These are problems that have been identified with certainty as
accessibility barriers. You must modify your page to fix these problems;
2)Likely problems: These are problems that have been identified as probable barriers, but
require a human to make a decision. You will likely need to modify your page to fix these
problems;
3)Potential problems: These are problems that A Checker cannot identify, that require a
human decision. You may have to modify your page for these problems, but in many cases,
you will just need to confirm that the problem described is not present.

26. Example of a website which is according to
WCAG 2.1
We will take the example of SCOPE website (https://www.scope.org.uk)
Scope, is a very good example in how to do keyboard accessibility well.
Try tabbing through the page, observe the big ‘skip to main content’ banner that appears for
the first tab, the transition styles when tabbing between elements, and the thick border on the
focus indicator.
The site is also a great example of how beautiful website and be made accessible too. Large,
high-res, and captivating imagery is easy on the eye, even for partially-sighted site users, and
colors are distinct, with large font sizing, line spacing, and well-designed buttons. One of the
things we like most about this site is what you’ll find on the ‘Accessibility’ page, which is given
prominence in the top navigation bar next to ‘Contact’.

27. We can take this website as a example

28. Accessibility of websites around the world.
The WCAG are not laws, they are just guidelines. The W3C won’t legally penalize you for not
following their specific guidelines to the letters, so most of the time people don’t care.
A accessibility report in 2019 - the WebAIM Million: An accessibility analysis of the top one
million home pages - indicates that less than 1% of website home pages are likely to meet
standard accessibility requirements.
The results are very disappointing figures for those who care about making the web a more
inclusive place.
The results also mean that online companies will likely be missing out on billions of pound of
sales because their sites are unusable to large numbers of people.
As a developer, people often forget to include the guidelines in their websites cause they often
think its double work but there are many aids available to help you with this process.

29. Conclusion
The Web and Internet has become a
important part of the whole world and in
whole is an increasingly important resource
in many aspects of our life which includes:
education, employment, government,
commerce, health care, recreation, and
more.
It is very important for websites to be
accessible to provide equal opportunity for
everyone around the world.
An accessible Web can help people with
disabilities participate more actively in
society and WCAG are just some rules we
need to follow to achieve that.
There are many tools which can make this
journey more easy , like:
• Screen reader for Chrome: Chromevox
• Chrome plug-in for visual impairment
simulation: NoCoffee
• Web Accessibility page analyzer: Wave
• Google Lighthouse (Chrome Extension)

30. REFERENCES
• https://inviqa.com/blog/web-accessibility-examples-5-sites-doing-it-right
• https://dotcms.com/blog/post/website-accessibility-checklist-10-steps-towards-
website-compliance
• https://usersnap.com/blog/website-accessibility-2018/
• https://bthechange.com/make-your-website-more-accessible-to-people-with-
disabilities-132f59d19292
• https://codeburst.io/seven-ways-to-make-your-web-app-more-accessible-
411a8c716fcb
• https://www.w3.org/WAI/teach-advocate/accessibility-training/topics/#design
• https://www.abilitynet.org.uk/news-blogs/less-1-website-home-pages-are-likely-
meet-accessibility-standards
• https://youtu.be/f5qv7AnTUHk
• https://www.essentialaccessibility.com/