Web Content Accessibility Guidelines

Question 1

What is the W3C

Answer 1

The W3C is an internationally recognized web standards body that identifies its approved technical specification standards as “W3C Recommendations” (such as HTML, CSS, etc.). The consortium has several Accessibility specifications that have achieved W3C Recommendation status, including WCAG, ATAG, and WAI-ARIA.

Question 2

What is the Web Content Accessibility Guidelines (WCAG) 2.1?

Answer 2

The international standard, WCAG 2.1, covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content
more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. WCAG is device-agnostic to address the accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, sharing the goal to provide a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. The WCAG documents explain how to make web content more accessible to people with disabilities.

Question 3

The WCAG document is organized into principles, guidelines, and success criteria. The
“P” in POUR stands for:

Answer 3

Perceivable: Information and user interface components must be presentable to users in ways persons with disabilities can perceive (including blindness, low vision, deafness and hearing loss, limited movement, and cognitive limitations).

Question 4

The WCAG document is organized into principles, guidelines, and success criteria. The
“O” in POUR stands for:

Answer 4

Operable: User interface components and navigation must be operable (functionality from keyboard).

Question 5

The WCAG document is organized into principles, guidelines, and success criteria. The
“U” in POUR stands for:

Answer 5

Understandable: Information and the operation of user interface must be understandable.

Question 6

The WCAG document is organized into principles, guidelines, and success criteria. The
“R” in POUR stands for:

Answer 6

Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Question 7

The WCAG document is organized into principles, guidelines, and success criteria. What are the success criteria?

Answer 7

Each guideline has at least one or more success criteria. Each success criterion is assigned a level: A, AA, or AAA. A site that meets all the success criteria at level A is
said to “conform to” level A. A site that meets all the success criteria of both level A and level AA conforms to level AA. A site that meets all the success criteria at all levels conforms to level AAA

Question 8

What are the W3C techniques for meeting WCAG 2.0 and WCAG 2.1?

Answer 8

The W3C has published techniques for meeting WCAG 2.0 and WCAG 2.1. The techniques can be one of three kinds:
• Sufficient techniques: If the web content meets sufficient techniques, it successfully meets the success criterion.
• Failure techniques: If the web content fails any of these, it does not meet the success criterion.
• Advisory techniques: Optional or conditional techniques may represent accessibility best practice or possible ways of meeting the success criterion.

Question 9

What are the differences between WCAG 2.0 and WCAG 2.1?

Answer 9

WCAG 2.1 added 17 success criteria added to WCAG 2.0. WCAG 2.1 did not change the 63 existing success criteria. The latest WCAG update includes how content for new technologies, such as mobile phones or tablets, should be developed or remediated so persons with disabilities can use them. WCAG 2.1 also includes more criteria that focus on individuals with low vision or with cognitive disabilities, which were not addressed in WCAG 2.0.

Question 10

Describe Accessible Rich Internet Applications (WAI-ARIA)?

Answer 10

The Web Accessibility Initiative (WAI) of the W3C created WAI-ARIA to increase the accessibility of content – dynamic content in particular – for assistive technology
users, such as screen reader users. WAI-ARIA defines attributes that can be added to standard HTML to define the name, role, and values (properties and states) of
elements, especially for custom widgets. One of the goals of WAI-ARIA is to make web applications behave more like software components. WAI-ARIA widgets interact with the accessibility API of the operating system, providing assistive technologies with the
semantics and live updates necessary for full accessibility.

ARIA enables developers to mark up dynamic content, including custom controls created with AJAX, HTML, and JavaScript, to improve their accessibility. The WAI-ARIA
Authoring Practices define the best practices for widget structure, keyboard behaviors, and dynamic content. They also promote interoperability.

Question 11

ARIA examples

Answer 11

• aria-label
  
  • Invisible
  • Defines a new name for the element, which usually comes from its content
  • Doesn´t allow the text to be clicked
  • Contains a string
• aria-labelledby
  
  • Relates to the id of another element
  • Can relate multiple ids from different elements
  • The related texts are normally visible in the page
  • Replaces the element name presented to assistive technologies that usually comes from its content
• aria-describedby
  
  • Relates the id of another element
  • Provides additional information to the element

Question 12

Describe Authoring Tool Accessibility Guidelines (ATAG) 2.0

Answer 12

The ATAG specification requires authoring tools (HTML/web editors, content management systems, social media sites, blog commenting features, discussion forums, user rating features, etc.) to:

1) Have an accessible user interface and
2) Support the production of accessible content.

Question 13

Explain normative versus non-normative documents

Answer 13

“Normative” documents define accessibility practices required for conformance (to a specification).

“Non-normative” documents provide guidance and techniques for interpreting and conforming with the normative requirements, but non-normative techniques are not required for conformance.
Non-normative documents provide information about the different way web technologies need to work with authoring tools, user agents, and assistive technologies.
Non-normative documents may change more frequently than normative documents, to adapt to changing technologies and current best practices.

Question 14

Can JavaScript be made accessible?

Answer 14

Yes. Modern screen readers and other assistive technologies can process the results of JavaScript processes, as long as the JavaScript is coded with accessibility in mind.
There are no inherent barriers in the technologies themselves to making JavaScript inaccessible.

Question 15

What are JavaScript considerations for managing focus

Answer 15

When JavaScript changes the visual focus (e.g., when a dialog is activated), JavaScript should be used to manage the keyboard focus so that it follows the visual focus.

Question 16

Why should you use semantic HTML

Answer 16

HTML defines sets of elements, attributes, and attribute

values. These features have specific semantic meanings that user agents intend to process in particular ways.

Question 17

Why should you consider the DOM order

Answer 17

When content is added or altered on a page, it should
generally be added after the current point of focus, because screen reader users are much less likely to navigate backward in the DOM than forward in the DOM, causing them to miss most additions/changes in previous positions in the DOM

Question 18

Should JavaScript event handlers be device-independent?

Answer 18

JavaScript event handlers must be device-independent. The functionality must be available with the keyboard,
mouse, touch, voice, etc.

Question 19

How should accessibility be integrated into the quality

assurance process?

Answer 19

Plan - Create -Test. (P.C.T). These are the three tasks to cycle through during the process of developing a new site/design, new feature, or remediation of a site.
Accessibility experts and people with disabilities need to be part of all these stages to ensure the quality and usability of the product.
Accessibility needs to be integrated into the entire product life cycle. Details will vary from one web development team to another, but the product life cycle can include concept, requirements, design, prototyping, development, quality assurance, user testing, support, and regression testing. Each person’s role in the product life cycle should include some aspect of accessibility.

Question 20

Plan - Create -Test. (P.C.T)

What does Plan and design phase include?

Answer 20

• research
• requirements
• design of information architecture (IA) and user experience (UX)

Question 21

Plan - Create -Test. (P.C.T)

What does Create content & components phase include?

Answer 21

• creating front-end markup & programming
• creating text content
• creating multimedia

Question 22

Plan - Create -Test. (P.C.T)

What does Test content and components phase include?

Answer 22

• testing markup & programming
• testing text content
• testing multimedia

Question 23

What is the accessibility concern with single-page applications (SPAs)?

Answer 23

Single-page designs (designs that bring in new content – often through AJAX processes– without reloading the page) present a unique set of accessibility challenges.
Screen readers typically react to a normal page load event by reading the page title, and (in the case of some screen readers) reading a summary of available semantic
elements (e.g. “page has 7 headings, 3 landmarks, and 27 links”). Single-page applications do not fire normal page load events. Single-page applications use AJAX
to pull in content to the current page/URL, rather than load a new page/URL, usually with the intent to improve performance and streamline the user experience of the web application. Screen readers typically do not announce anything when content is loaded via AJAX, so users may be completely unaware that new content has been loaded.

Question 24

What are the different strategies you need to consider for people with low vision?

Answer 24

Users with limited vision often use the vision they do have to help them navigate and find their way around an interface.
• Using text enlargement and zoom in the browser
• Changing colors in the browser or operating system
• Using magnifying tools

Some concepts that are important to understand include:
• It is quite common to use a mouse to navigate but also to use keyboard commands to speed up the interaction
• Users need clear borders to be able to see where different areas start and end
• Users might alter colors, contrasts, and font
• Users often combine zooming and screen reading
• A big gap exists between users that only need the built-in zoom in the browser and users that zoom the interface 32 times and use screen readers as a complementary technique. Their strategies vary accordingly.
• Screen reader users may also use voice input tools to navigate as many have or develop physical weaknesses associated with repetitive physical functions such as carpal tunnel and other limitations

Question 25

What are the different strategies you need to consider for people who are blind?

Answer 25

Blind users need a screen reader to translate what is shown visually on the screen to speech or (less commonly) to braille. Since the user can´t see the interface, the screen reader needs to provide the user with mechanisms to understand the structure of the
interface and to navigate.

A common approach in screen readers to help users is to create lists of headings, links, form controls, etc. In this way, users can quickly move between such elements
on the page. For this to work, it is important to use the correct markup. The support for standard HTML elements is often quite good, and most screen readers also support significant parts of WAI-ARIA, but you need to know how the support is for the markup you are planning to use in common screen readers and browsers.

Among screen reader users, knowledge and strategies vary considerably. Some users only use a few keystrokes, such as the arrow keys to navigate from item to item down the page, and the tab key to go to focusable items. In case of text messages, for example: in the questionnaire, a person who is blind that browses with a screen reader uses the tab key to surf from field to field. If the instruction messages are in a <p>, <span>, or <div>, these will not receive the default focus, and the user will probably not find them. The best way to resolve this is aria-describedby for screen readers to read measures when users navigate to form fields.</div></span></p>

Question 26

What are the different strategies you need to consider for people who are blind that use a touch screen?

Answer 26

The interaction model for sighted touchscreen users is quite different from the interaction model for blind touchscreen users. Sighted users swipe through and activate items based on their position on the screen by swiping or touching the items directly.
Blind users, on the other hand, have a completely different set of gestures available to them when a screen reader is activated on a touch device. The screen reader overrides the visual method for interacting and replaces it with a gesture-based system. There are screen reader gestures for going forward through content (swipe right), going backward (swipe left), activating the current button or link (double-tap the screen anywhere), and so on. The specific gestures vary from one brand of a screen reader to the next.
You should be familiar with the most common screen readers, including how they work and what parts of HTML5 and WAI-ARIA they support. Some examples of common screen readers include:
• JAWS for Windows by Freedom Scientific
• NVDA by NV Access
• Narrator for Windows by Microsoft
• VoiceOver for MacOS by Apple
• ChromeVox (on Chromebooks)
• TalkBack (Android)

Question 27

What is the recommended screen reader and browser combination for people using Windows?

Answer 27

• JAWS and Google Chrome (and in some cases IE11)
• NVDA and Firefox
• Narrator and Edge

Question 28

What is the recommended screen reader and browser combination for people using Mac?

Answer 28

VoiceOver and Safari

Question 29

What is the recommended screen reader and browser combination for people using iOS?

Answer 29

VoiceOver and Safari

Question 30

What is the recommended screen reader and browser combination for people using Android?

Answer 30

TalkBack and Chrome

Question 31

What do you need to consider when testing with screen readers

Answer 31

• The difference between visual order of content and the structural order of content presented to the screen reader
• How the role attribute in WAI-ARIA and semantic elements in HTML work to create a page structure
• How to use screen reader lists of different objects (e.g., tables, lists, images, etc.) to find important information on the screen
• How to navigate with a keyboard using a screen reader
• How to enter information in a form

While browsing with keyboard and screen reader, the tester must verify several points:
• Elements must receive focus (links, data input or buttons)
• The location of focus is visualized on the webpage for sighted keyboard users
• The screen reader announces adequate tags or alternative texts
• The functions of the components, such as menu and submenu, accordion, tabpanel, carousel, etc., can be browsed or performed correctly. In such components, the roles and state notification should be verified.

Question 32

What are the different strategies you need to consider for people who have trouble reading?

Answer 32

Users that have reading difficulties may use assistive technology such as Kurzweil or text-to-speech provided by the platform, or may not have any assistive technology.
Some may instead search for information that is not text. Instead of searching on Google, a user might use YouTube. If there is an alternative to text, an alternate format may be preferable. When reading text, it is possible to make changes to the presentation in the browser.
You should know how this affects the interface and what challenges might arise from making such changes. Some of the changes that can be done are:
• Text size
• Text color and background color
• Font

Some concepts that are important to understand include:
• Differences between screen readers for this group and screen readers for blind users
• The importance of using real text instead of images of text
• Typeface, color, spacing, and more: Readable fonts include typeface suggestions, as well as font size, and letter and word spacing widths

Question 33

What are the different strategies you need to consider for people with cognitive disabilities?

Answer 33

This user group is also very diverse. The group includes users that have concentration problems, users with neuropsychological disabilities, and users with intellectual
disabilities, among others. Some users with intellectual disabilities can´t use the interface even with assistive technology. However, most users can use the interface
even if it might require some alterations or assistive technology.
When using assistive technology, it is often mainly the same assistive technology as users with reading difficulties. Additionally, they might also use ad blockers, screen masking, and other such tools to help keep focusing on the present task.
There are also assistive technologies to help users with cognitive impairments to add and edit data on webpages, such as filling out form fields.

Some concepts that are important to understand include:
• The importance of a clean, simple layout and presentation to aid this group:
Provide control of as many aspects of the website as possible. CSS can be used to provide control of how information is presented.
• Plain simple language is key for this group.
• Content alternatives: Use sound also to present information. People differ in their ability to process information in different forms (text, image, audio). So, providing more than one form reaches more people.
• Images and multimedia should be used to supplement text wherever possible.
The use of appropriate and clear graphics can help to enhance understanding of materials, but do not overuse graphics and avoid animated graphics, as they can
be distracting and increase cognitive load.
• Users with cognitive disabilities often use assistive technology to read and write

Question 34

What are the different strategies you need to consider for people with motor disabilities?

Answer 34

Users that have motoric disabilities are a broad group. Some of them are completely or partly paralyzed, others have trouble with fine motoric actions, perhaps due to tremors or rheumatism.
Another example is users that need to control the interface with a keyboard. These users often use the tab key to jump between interactive objects in the interface, like buttons, form fields, and links.
Some users use a point and click-based solution; this might be:
• Ordinary mouse
• Tremor filtering mousepad
• SteadyMouse
• Eye-tracking
• EyeGaze
• Tobii
• Point scanning with a switch control
• Switch Control on iPhone, iPad and iPod Touch
• Switch Access for Android
• Mac OS Headpointer Feature

Question 35

What are the specific considerations you should keep in mind for users that use keyboard commands but are not blind?

Answer 35

• Users must be able to see where the focus is; what link, form control, or button has focus when the user navigates down the page with a keyboard since they do
not use a screen reader that can tell them this.
• Since they don’t use a screen reader, they can’t use lists of headings, links, and other items to move down a page quickly.
• When a site is navigable through the keyboard (generally with Tab, Enter, and arrow keys) in an orderly and intuitive order, important groups of persons are
benefited: persons who cannot use a mouse, persons with motor disabilities.
Furthermore, structuring the site to be operable through the keyboard facilitates navigation with assistive technologies (like switches), which simulate movement
with Tab or Enter keys.

Question 36

What are the different strategies you need to consider for people with hearing impairment?

Answer 36

Users that are deaf from birth may have sign language as their first language. For them, this means that text information on websites they visit often is their second or third language.

There are some attempts to create assistive technology that translates written text to sign language. Although this is not yet a common practice, it is preferable to use an easy to read language to help this type of assistive technology and readers without assistive technology. Icons, illustrations, and images should also be used to enhance the information.

Accurate captioning is very important for video content. The use of only automated tools and those relying only on artificial intelligence creates many opportunities for an incorrect translation of spoken content.

Some concepts that are important to understand include:
• Provide alternatives, such as captions or transcript, for time-based media
• For prerecorded audio-only, an alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content, such as a transcript
• Offering transcription benefits persons with hearing disabilities. This transcription can be available on the same screen where the audio is or through a link.