What is WCAG? Principles, guidelines, versions. how to make a website accessible according to Wcag 2.1?

1. WCAG: Web Content
Accessibility Guidelines
BY: Purnima Agarwal
MCA 2nd Sem
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 websites usable
by as many people as possible
around the world.
Traditionally, we think of this
as being about people with
disabilities, but the practice
of making sites accessible
also benefits other groups
such as those using mobile
devices, or those with slow
network connections.

4. We might also think of
accessibility as treating everyone
the same, and giving them
equal opportunities, no matter
what their ability or
circumstances.
Just as it is wrong to exclude
someone from a physical
building because they are in a
wheelchair (modern public
buildings generally have
wheelchair ramps or elevators),
it is also not right to exclude
someone from a website because
they have a visual impairment.
We are all different, but we are
all human, and therefore have
the same human rights.
Accessibility is the right thing to
do. Providing accessible
sites is part of the law in some
countries, which can open up
some significant markets that
otherwise would not be able to
use your services or buy your
products.

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. Web Content Accessibility Guidelines
(WCAG) 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.
Following these guidelines will also often
make your 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.
WCAG is designed to apply broadly to
different Web technologies now and in
the future, and to be testable with a
combination of automated testing and
human evaluation.

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 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. The guidelines are not testable, 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 helps you to check your web accessibility
progress, record how far you’ve come and set your targets out for
the future..

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
The Enterprise Edition of dotCMS—an open source Java CMS—customers get a Java
implementation of Achecker. 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 lesson 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 to achieve beautiful site design that meets accessibility
requirements. 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. True to their name, 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 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 important
that the Web be accessible to everyone
in order to provide equal
access and equal opportunity to people
with disabilities. 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/