Accessibility | Importance of accessibility and good HTML structure Flashcards
1
Q
What is accessibility?
A
Accessibility involves creating products and services that everyone can use.
2
Q
In the context of web development, what does accessibility mean?
A
Making websites that everyone can understand and interact with, including people with disabilities.
3
Q
Name three examples of disabilities that can impact users’ online experience.
A
- Blindness
- Low vision
- Deafness
4
Q
What organization developed a set of international standards for accessibility?
A
The World Wide Web Consortium (W3C)
5
Q
What are the Web Content Accessibility Guidelines commonly known as?
A
WCAG
6
Q
What does the ‘P’ in the POUR principles stand for?
A
Perceivable
7
Q
What is meant by ‘Perceivable’ in the context of WCAG?
A
Users must be able to perceive the information that you are presenting.
8
Q
Give an example of how to make content perceivable.
A
Provide alternative text for images.
9
Q
What does the ‘O’ in the POUR principles stand for?
A
Operable
10
Q
What does ‘Operable’ mean in WCAG?
A
Users must be able to interact with the user interface.
11
Q
How can you ensure that your website is operable for users?
A
Make sure that all functionality is accessible through the keyboard.
12
Q
What does the ‘U’ in the POUR principles stand for?
A
Understandable
13
Q
What does ‘Understandable’ mean in the context of WCAG?
A
Users must be able to understand the information.
14
Q
How can you make content understandable?
A
Avoid complex sentences and use simple language.
15
Q
What does the ‘R’ in the POUR principles stand for?
A
Robust
16
Q
What does ‘Robust’ mean in WCAG?
A
A wide range of browsers and assistive technologies must be able to interpret the content.
17
Q
What is a helpful practice for making a website robust?
A
Using semantic HTML.
18
Q
What can happen if a website does not follow any of the core principles of WCAG?
A
Not everyone will be able to use your website.
19
Q
Where can you check if you are following the WCAG guidelines correctly?
A
The Quick Reference of the World Wide Web Consortium.
20
Q
Why is accessibility essential for web development?
A
To ensure that everyone can access and engage with your content.
21
Q
What does developing with inclusivity in mind promote?
A
Equality and a better user experience for everyone.
22
Q
What are screen readers?
A
Assistive technology programs that help blind and visually impaired people use computers and mobile devices.
23
Q
Who uses screen readers?
A
Blind and visually impaired individuals, dyslexic individuals, and people with cognitive disabilities.
24
Q
True or False: Screen readers are only tools for the blind to access technology.
A
False
25
What is a common misconception about screen readers?
That they are only text-to-speech devices.
26
What are two notable features of screen readers?
* Text-to-speech
* Braille output
27
What do screen readers empower users to access?
* Education
* Work opportunities
* Social media
28
What is the built-in screen reader for macOS and iOS?
VoiceOver
29
How do you turn on VoiceOver on a macOS computer?
Press CMD + F5.
30
How can you access VoiceOver on an iPhone?
Through Settings.
31
What is the built-in screen reader for Windows computers?
Narrator
32
How do you turn on Narrator on a Windows computer?
Press WIN + CTRL + ENTER.
33
What are two additional screen reader options available for Windows?
* NonVisual Desktop Access (NVDA)
* Job Access With Speech (JAWS)
34
What is unique about NVDA?
It is free and open-source.
35
What screen reader does Linux have for the desktop environment?
Orca
36
What screen reader does Linux have for the terminal?
Speakup
37
What is the built-in screen reader for Android phones?
TalkBack
38
How do you turn on TalkBack on an Android device?
Access Settings > Special Function > Accessibility > Talkback.
39
What are two other screen reader options available on some Android devices?
* Ella
* Select to Speak
40
What is a major challenge for screen reader users?
Many software developers do not design their products with screen-reader friendliness and accessibility in mind.
41
Why is it important for developers to learn how to make their web software accessible?
To demonstrate empathy and a commitment to inclusivity.
42
What are Large Text Keyboards?
Keyboards designed with larger letters, numbers, and symbols for users with visual disabilities
## Footnote
Also called Large Print Keyboards
43
Who uses Large Text Keyboards?
Users with visual disabilities, particularly those who find smaller text difficult to see
## Footnote
Helpful for people with low vision
44
What is a key feature of a large print keyboard made by MaxiAids?
Yellow keys with black, big, and bold letters, numbers, and symbols
## Footnote
Designed for people with low vision
45
What is the purpose of backlighting in keyboards?
To allow users to adjust brightness according to different lighting conditions
## Footnote
Enhances usability for users with low vision
46
How do braille keyboards assist users?
Provide a tactile experience for people with more severe vision disabilities
## Footnote
Useful for users who are blind
47
What is Braille?
A tactile reading and writing system consisting of raised dots arranged in specific patterns
## Footnote
Represents letters, numbers, and punctuation
48
What do braille keyboards use to help users find keys?
Raised dots in patterns that represent letters, numbers, and symbols
## Footnote
Allows users to feel the patterns with their fingers
49
What is a feature of keyboards that combine large fonts and braille patterns?
They provide both visual cues and a tactile experience
## Footnote
Beneficial for people with visual disabilities and those learning braille
50
What is the primary function of large text and braille keyboards?
To empower people with visual disabilities by providing alternative input methods
## Footnote
Ensures everyone can be part of the digital world
51
What are alternative pointing devices?
Input devices that serve as alternatives to the traditional mouse
52
Name three common examples of alternative pointing devices.
* Trackballs
* Joysticks
* Touchpads
53
What is a trackball?
A stationary pointing device with a movable ball within a socket and additional buttons
54
How does a trackball differ from a traditional mouse?
A trackball remains in place, while a mouse requires movement across a surface
55
What advantage does a trackball provide for users with mobility issues?
Reduces physical movement needed for navigation
56
In what situations is a trackball more ideal than a traditional mouse?
* High precision needed
* Limited desk space
57
What is a joystick primarily designed for?
Games and certain industrial applications like machinery control
58
What does a joystick consist of?
A lever that pivots in multiple directions and often includes additional buttons
59
Why are joysticks popular for flight simulators and driving games?
They provide precise control over movement and actions within digital environments
60
How do joysticks benefit individuals with tremors?
They accommodate larger and more deliberate movements
61
What conditions make joysticks ideal for certain users?
* Tremors
* Arthritis
* Carpal tunnel syndrome
62
What is a touchpad?
A flat, touch-sensitive device that allows cursor control by sliding fingers across its surface
63
What features do touchpads include?
Buttons that emulate traditional mouse actions, such as right-click and left-click
64
What multi-touch gestures do touchpads support?
* Pinch-to-zoom
* Two-finger scrolling
* Tap-to-click
* Three-finger swipes
65
Why are touchpads seen as better alternatives to mice?
They enhance navigation with multi-touch gestures
66
Who benefits from using a touchpad?
* Individuals with low arm or hand movement
* People with arthritis and joint pain
67
What are screen magnifiers used for?
Tools that help people with low vision and other visual impairments access digital content and the web
68
How do screen magnifiers work?
By enlarging texts, graphics, and other elements on a computer or mobile device screen
69
What is the maximum zoom percentage that many screen magnifiers allow?
More than 200%
70
What features do most screen magnifiers offer?
Customizable zoom percentages and other settings
71
Who primarily benefits from screen magnifiers?
People with low vision
72
What types of content can users read more easily with screen magnifiers?
Emails, articles, and other text content
73
How do screen magnifiers assist with web browsing?
By helping users locate and click on buttons, links, and interactive elements
74
What are some considerations for software developers to make digital products accessible?
Using scalable fonts, responsive design, high-contrast color schemes, non-sticky navbars, regular HTML text, and providing feedback
75
What built-in magnifier does macOS and iOS have?
Zoom
76
How can you turn on the Zoom feature on a Mac?
Go to Settings, filter by Accessibility, and click on 'Zoom'
77
What is the path to enable Zoom on an iPhone?
Settings > Accessibility > Zoom
78
What built-in magnification feature do Android devices have?
Magnification
79
How do you access the Magnification feature on Android?
Go to Settings > Special Function > Accessibility > Magnification
80
What built-in magnifier does Windows have?
Magnifier
81
How can you access the Magnifier on Windows?
Go to Settings > Ease of Access > Magnifier
82
What are the two names for magnifiers used in Linux operating systems?
Zoom or Magnifier
83
Name a third-party screen magnifier for Windows.
ZoomText
84
Name a third-party screen magnifier for Mac.
Zoomify - Screen Magnifier
85
Fill in the blank: Screen magnifiers primarily help people with low vision read _______.
[text]
86
True or False: All mainstay Operating Systems have at least one magnifier built into them.
True
87
What is the primary use of voice recognition software?
Voice recognition software helps people with disabilities interact with computers and other digital devices
## Footnote
This technology plays a significant role in digital inclusion.
88
How do voice recognition tools assist people with disabilities?
They allow people to use their voice to pass commands instead of traditional input devices like keyboards and mice
## Footnote
This includes tasks like writing emails, surfing the net, and controlling smart home devices.
89
What is one major benefit of voice recognition software for people with disabilities?
It empowers them with significant independence and control over their environment.
90
Who are some specific groups that may find voice recognition software helpful?
* People with visual impairments
* Individuals with mobility impairments
* Those recovering from hand or arm injuries
* Individuals with cognitive disorders
* Elderly individuals
## Footnote
Each of these groups may face challenges that voice recognition software can help mitigate.
91
True or False: Only people with disabilities use voice recognition technology.
False
92
Name two other groups, besides people with disabilities, that utilize voice recognition technology.
* Law enforcement agencies
* Gamers
* Drivers
* Busy professionals
## Footnote
These groups leverage voice recognition for various tasks and efficiencies.
93
Fill in the blank: A popular third-party voice recognition software for Windows is _______.
Dragon by Nuance
94
What are some examples of voice recognition software for different operating systems?
* Voice Control for macOS/iOS
* Voice Access for Android
* Windows Speech Recognition for Windows
## Footnote
Windows Speech Recognition is referred to as Voice Access in the most recent versions of Windows.
95
What is the purpose of an accessibility auditing tool?
To improve the accessibility of digital content by reporting accessibility issues found through automated testing.
96
What types of digital content can accessibility auditing tools evaluate?
Websites, web applications, and mobile apps.
97
True or False: Automated accessibility tools can find all possible accessibility issues.
False
98
What percentage of accessibility issues do automated tools typically find?
About one third.
99
What is always required in addition to automated testing to ensure accessibility?
Manual testing, preferably by people with disabilities.
100
What is Google Lighthouse?
A popular web metric checker that can be used directly within Chrome DevTools or online.
101
What metrics can you check using Google Lighthouse?
* Accessibility
* SEO
* Best practices
* Performance
102
How do you access the Lighthouse tool in Chrome DevTools?
Press F12 and switch to the Lighthouse tab.
103
What is a limitation of the web version of Google Lighthouse?
It doesn't support testing local websites.
104
What is WAVE?
A reliable accessibility checker available as a Chrome extension or on the web.
105
How does WAVE generate an accessibility report?
By entering the URL of your website.
106
What features does the IBM Equal Accessibility Checker provide?
It scans websites for accessibility issues and generates a detailed report.
107
How can you use the IBM Accessibility Checker as a Chrome extension?
Download it from the Chrome web store and access it via the DevTools.
108
What can you do with the report generated by the IBM Accessibility Checker?
Export it as a spreadsheet or an HTML file.
109
Fill in the blank: A perfect score from automated accessibility tools does not mean that your content is entirely _______.
accessible
110
What is the limitation of automated accessibility tools mentioned in the text?
The range of issues they test for is limited.
111
How does proper heading level structure affect accessibility?
It creates a visual hierarchy for users to navigate and understand the web page
112
What is the benefit of using a logical heading hierarchy?
It allows screen reader users to understand the structure of content and navigate quickly
113
What role do headings play for screen reader users?
They create a navigational structure, allowing users to jump to needed sections
114
What is an additional benefit of well-formed headings?
They may improve the SEO of your site
115
What do headings represent in the context of web content?
The foundation of the site
116
Why is it important for people with partial sight or cognitive disabilities to have proper heading structure?
They need to process information quickly and easily to reduce cognitive load
117
What should be avoided when arranging headings?
Skipping from h1 to h3 or from h2 to h4
118
What should heading texts be like?
Clear and descriptive, summarizing the content that follows
119
What should follow a heading?
Some content must follow the heading
120
What should be used instead of formatting text to look like headings?
Appropriate headings where necessary
121
How many h1 elements should each page have?
A single h1 element representing the main topic or title
122
What is the correct heading for the page title in HTML?
h1
123
What heading should major sections of a page be introduced with?
h2
124
What heading is used for subsections under major sections?
h3
125
Fill in the blank: Proper use of headings helps everyone find the information they need on your site, and it can also improve _______.
[SEO]
126
What is the purpose of a table caption in HTML?
To provide a title that helps users, especially those using assistive technologies, quickly understand the table's purpose and content.
## Footnote
Place the caption element immediately after the opening tag of the table element.
127
What element is used to define a row or column header in a table?
The table header element, th.
## Footnote
Row headers typically describe the data in a row, while column headers describe the data in a column.
128
How should you structure the HTML for a table with headers?
Use for the title, for column headers, and for the data rows.
## Footnote
Include row headers within elements for clarity.
## Footnote
This code prompts an immediate alert about session expiration.
## Footnote
This code indicates a successful file upload without urgency.
129
What attribute should be used to determine if a header is a row header or a column header?
The scope attribute.
## Footnote
Common values are 'col' for column headers and 'row' for row headers.
130
What are the four possible values for the scope attribute?
col, row, colgroup, rowgroup.
## Footnote
Use 'col' and 'row' most frequently for clarity.
131
True or False: It is recommended to use fixed values for cell width in HTML tables.
False.
## Footnote
Use relative values like percentages instead.
132
What should you avoid defining for table cells to enhance accessibility?
Fixed cell height.
## Footnote
This allows users to adjust text size as needed.
133
What is the best practice regarding the width of a table in HTML?
Let the browser determine the table width whenever possible.
## Footnote
This reduces the need for horizontal scrolling.
134
How can you make complex table structures more accessible for screen readers?
Flatten the table structure as much as possible.
## Footnote
Avoid using row and column headers that span multiple cells.
135
Fill in the blank: The __________ element is used to group header content in a table.
thead
136
What is the primary goal when creating accessible tables?
Ensure that all users can access and understand the information presented.
## Footnote
This includes users with disabilities using assistive technologies.
137
Why are labels important for input fields?
They make forms easier to use for everyone and improve conversion rates
## Footnote
Labels are crucial for accessibility and usability.
138
How do labels assist people with disabilities?
They help screen readers describe the purpose of input fields
## Footnote
Screen readers rely on labels to announce the function of input elements.
139
What is the most common way to associate a label with an input?
Using the HTML label element
## Footnote
The label element connects with the input via the 'for' attribute.
140
What does the 'for' attribute in a label element do?
Associates the label with the id of the input element
## Footnote
This connection allows screen readers to function properly.
141
What happens when a label is properly associated with an input?
Screen readers announce the label when the input is focused
## Footnote
This helps screen reader users understand the input's purpose.
142
What is one SEO benefit of using proper labels?
Search engines understand the page content better
## Footnote
This can positively impact page search rankings.
143
What should labels be like for optimal usability?
Clear and descriptive
## Footnote
It's important to prioritize human readability over search engine optimization.
144
Fill in the blank: Labels help improve form _______.
conversion rates
145
True or False: Labels on input fields are only necessary for accessibility.
False
## Footnote
Labels benefit all users, not just those with disabilities.
146
What does WAI-ARIA stand for?
Web Accessibility Initiative - Accessible Rich Internet Applications
147
What is the primary purpose of WAI-ARIA?
To improve accessibility for dynamic content and UI components that do not have native HTML equivalents
148
How does WAI-ARIA enhance accessibility?
By introducing a set of attributes that provide additional semantic information to HTML elements
149
What are the three categories of attributes in WAI-ARIA?
* Roles
* States
* Properties
150
What is an ARIA role?
Defines the purpose of an element within a website or web app
151
True or False: ARIA roles provide functionality to HTML elements.
False
152
What is an example of setting an ARIA role for a div element?
Click Me
153
What does the role attribute 'tablist' signify?
It indicates a container for a set of tabs
154
What attribute indicates an element is currently selected in a tablist?
aria-selected
155
What is the role of a tab panel in a tabbed navigation?
To display content associated with a selected tab
156
Fill in the blank: WAI-ARIA should be used when _______.
HTML falls short
157
What does ARIA state describe?
The current status of an element, which can change based on user interactions
158
Give an example of an ARIA state attribute.
aria-expanded
159
What does the aria-labelledby property do?
Connects an element to a specific label for better understanding
160
True or False: Native HTML elements provide less accessibility than ARIA.
False
161
What should you do to test WAI-ARIA implementations?
Test with assistive technologies like screen readers or have people with disabilities test your work
162
What can happen if ARIA is overused?
It can become confusing
163
What does ARIA stand for?
Accessible Rich Internet Applications
164
What is the purpose of ARIA roles?
They specify the semantic meaning of HTML elements
165
Why are ARIA roles important?
They make web content accessible to people who use assistive technologies, like screen readers
166
What are the two types of HTML elements based on semantic meaning?
* Semantic elements
* Non-semantic elements
167
Which HTML element has a default ARIA role of button?
The button element
168
What happens if a non-semantic element does not have an ARIA role specified?
Screen readers will not know how to interpret its purpose
169
How do you specify the ARIA role of an element?
By adding the role attribute, like this role='ARIA role'
170
What does specifying a role on an element do?
Informs assistive technology of the purpose of the element
171
Does specifying a role add functionality or behavior to an element?
No, it does not add any functionality or behavior
172
What are the six main categories of ARIA roles?
* Document structure roles
* Widget roles
* Landmark roles
* Live region roles
* Window roles
* Abstract roles
173
What do document structure roles define?
The overall structure of the web page
174
Why are most document structure roles not used in modern web development?
Browsers support equivalent semantic HTML elements
175
Give examples of commonly used document structure roles.
* toolbar
* tooltip
* feed
* math
* presentation
* none
* note
176
What do widget roles define?
The purpose and functionality of interactive elements
177
List examples of widget roles.
* scrollbar
* searchbox
* separator
* slider
* spinbutton
* switch
* tab
* tabpanel
* treeitem
178
What do landmark roles classify?
Primary sections of a web page
179
Why should landmark roles be used sparingly?
To keep the overall layout simple and easy to understand
180
Give examples of landmark roles.
* banner
* complementary
* contentinfo
* form
* main
* navigation
* region
* search
181
What do live region roles define?
Elements with content that will change dynamically
182
List examples of live region roles.
* alert
* log
* marquee
* status
* timer
183
What do window roles define?
Sub-windows, like pop-up modal dialogues
184
What is now considered a best practice instead of manually creating a dialog?
Using the HTML dialog element and its associated JavaScript methods
185
What are abstract roles meant for?
To help organize the document internally by the browser
186
Are developers encouraged to use abstract roles?
No, they should not be used by developers
187
How do ARIA roles contribute to user experience?
They provide semantic information to assistive technologies, helping users understand content and set expectations
188
What do the aria-label and aria-labelledby attributes help with?
They provide crucial information about page elements for users with disabilities, particularly those using screen readers.
189
What does ARIA stand for?
Accessible Rich Internet Applications
190
What is the role of the aria-label attribute?
It is an invisible label for interactive elements that adds a text label for screen readers.
191
When is aria-label especially useful?
For elements that do not have visible text but need to be described by screen readers, such as buttons with only icons.
192
Fill in the blank: The aria-label attribute tells screen readers what text to use in place of the _______.
[icon]
193
What does the aria-labelledby attribute do?
It references existing text on the page to provide a label for an element.
194
What must the text referenced by aria-labelledby have?
An id attribute
195
How does the aria-labelledby attribute update if the referenced text changes?
The label for the input will automatically be updated to the new text.
196
True or False: You can use aria-label and aria-labelledby on the same element.
False
197
What is one advantage of using aria-labelledby over aria-label?
It prevents a mismatch between the visible label text and the invisible label for screen reader users.
198
What is another advantage of using aria-labelledby?
It allows for programmatically creating complex invisible labels from multiple sources of text.
199
Provide an example of how aria-labelledby can reference multiple elements.
aria-labelledby='volume-label volume-details'
200
What will a screen reader announce for an input with aria-labelledby referencing multiple elements?
The combined content of the referenced elements.
201
What is the aria-hidden attribute?
An attribute used to hide content from assistive technology, like screen readers.
202
How do you use the aria-hidden attribute?
Add it to the HTML element and set its value to true: aria-hidden="true".
203
What does aria-hidden="true" do?
Hides the element and all its children from the accessibility tree while keeping them visible on the page.
204
What are common use cases for aria-hidden?
* Icons and images with decorative purpose
* Duplicated content
205
True or False: aria-hidden hides content from everyone.
False
206
When should you not use aria-hidden?
When the content should be hidden from everyone, such as a collapsed hamburger menu.
207
What should be used to hide a menu from all keyboard users?
CSS display property set to none.
208
Why should you not use aria-hidden on focusable elements?
It removes the element from the accessibility tree but not from the DOM, leading to confusion.
209
What happens if aria-hidden is set to false?
The element will not be exposed to assistive technologies if any of its parents has aria-hidden set to true.
210
When is aria-hidden not necessary?
* When the HTML element has a hidden attribute
* When the element or its ancestor is hidden with display: none
* When the element or its ancestor is hidden with visibility: hidden
211
What should be done to ensure proper use of aria-hidden?
Test with assistive technologies and have users with disabilities test the work.
212
What is a best practice when using aria-hidden?
Use it sparingly to avoid hindering accessibility.
213
What should be accessible to people using assistive technology?
All content and functionality available on the page.
214
Fill in the blank: The use case for aria-hidden is very _______.
narrow
215
What is an example of using aria-hidden?
216
What is the main goal of using aria-hidden?
To create inclusive online experiences for everyone.
217
What is the aria-expanded attribute?
The aria-expanded attribute indicates if a control is expanded or collapsed.
218
How does the aria-expanded attribute work?
It is set to true if the control is expanded, or false if it is collapsed.
219
What is the purpose of the aria-expanded attribute?
It helps people using screen readers to understand the current state of the control.
220
Where is the aria-expanded attribute applied?
It is applied to the interactive element that toggles the visibility of a collapsible widget.
221
When should the aria-expanded attribute be set to true?
When the menu is expanded.
222
When should the aria-expanded attribute be set to false?
When the menu is collapsed.
223
What should the default value of aria-expanded be based on?
The default visibility of the menu.
224
How should the value of aria-expanded be updated?
Dynamically using JavaScript as the user interacts with the element.
225
What is the role of the aria-controls attribute?
It specifies the element being controlled by the interactive element.
226
What should the value of aria-controls be?
The id of the controlled element.
227
What is the recommended placement of expanded content in relation to the controlling element?
The expanded content should ideally follow the controlling element in the DOM.
228
What does the aria-owns attribute do?
It allows you to virtually move the controlled element after the control in the accessibility tree.
229
What is a drawback of using the aria-owns attribute?
It creates unnecessary verbosity for screen reader users.
230
What issue might arise from using aria-owns regarding tab order?
It does not change the tab order, potentially forcing keyboard users to tab through other controls.
231
When should the aria-owns attribute be used?
Only in worst-case scenarios when expanded content cannot be placed immediately after the controlling element.
232
What should be continuously updated when using aria-controls or aria-owns?
The value of aria-expanded.
233
True or False: The aria-expanded attribute helps create an intuitive user experience.
True.
234
Fill in the blank: The aria-expanded attribute is essential for _______ users.
screen reader
235
What does the aria-live attribute do?
Creates a live region to notify screen reader users of dynamic content changes in real time.
## Footnote
Live regions inform users about updates such as error messages, confirmations, or periodic content changes.
236
What are common uses of live regions?
* Messages after an action (error or confirmation)
* Periodically updating content (ticker, marquee, countdown)
* General status messages (process updates)
## Footnote
These uses help screen reader users stay informed about important changes.
237
Why might screen reader users miss content changes?
Because their reading focus can only be on one part of the page at a time.
## Footnote
Without live regions, users may overlook updates available to sighted users.
238
What does setting aria-live to 'assertive' mean?
The update is very important and should be announced immediately by interrupting current screen reader announcements.
## Footnote
This value is for time-sensitive or critical notifications.
239
What is an example of using aria-live='assertive'?
Your session will expire in 30 seconds.
240
What does setting aria-live to 'polite' mean?
The update is not urgent, allowing current announcements to finish before notifying the user.
## Footnote
Most live regions typically use the polite value.
241
What is an example of using aria-live='polite'?
File successfully uploaded
242
What does setting aria-live to 'off' mean?
The update will not be announced unless the content is in an element with keyboard focus.
## Footnote
This value is rarely used and not consistently implemented across screen readers.
243
When is it appropriate to use the 'assertive' value for aria-live?
When updates are urgent and require immediate user notification.
## Footnote
Use this sparingly due to potential disruptions.
244
When should the 'polite' value for aria-live be used?
When the update can wait until the current task is finished.
## Footnote
This helps maintain a smooth user experience.
245
What are some ARIA roles that already have default aria-live values?
* alert
* log
* marquee
* status
* timer
## Footnote
These roles may not need explicit aria-live settings.
246
What is the main benefit of using the aria-live attribute?
It helps users with disabilities stay updated on important announcements and updates.
## Footnote
Proper use enhances accessibility for dynamic content.
247
Fill in the blank: The aria-live attribute allows assistive technologies to know when the content is changing ______.
dynamically on a web page.
## Footnote
This ensures timely notifications for users.
248
What is the purpose of the aria-selected attribute?
To indicate that an element is selected
249
What role can the aria-selected attribute be used on?
Custom controls like tabbed interfaces, listboxes, or grids
250
What does the aria-disabled attribute indicate?
That an element is disabled only for assistive technologies
251
True or False: The aria-disabled attribute actually disables the element.
False
252
What is the role of aria-haspopup?
To indicate that an interactive element will trigger a popup element when activated
253
List the roles that can be used with the aria-haspopup attribute.
* menu
* listbox
* tree
* grid
* dialog
254
What does the aria-required attribute signify?
That a field needs to be filled out before the form is submitted
255
Fill in the blank: The aria-checked attribute indicates whether an element is in the _______ state.
checked
256
When should you omit the aria-required attribute?
When the label already has the word required
257
What is a common use case for the aria-checked attribute?
Creating custom checkboxes, radio buttons, switches, and listboxes
258
What must be done when the state of a custom checkbox changes?
Update the aria-checked attribute to reflect the new state
259
What should you do to ensure that ARIA attributes are effective?
Test your work to ensure they are applied correctly
260
What is the significance of the contenteditable attribute in custom form controls?
It allows users to type in their input
261
What should be considered when choosing between aria-required and the native required attribute?
Usability and accessibility concerns
262
In which scenario would you typically prefer using native HTML elements?
When they have better support and built-in accessibility features
263
What additional information might screen reader users hear when using aria-haspopup?
That a popup menu will open when the button is activated
264
What are semantic form control elements?
Input, select, textarea, button, and fieldset
## Footnote
These elements have built-in states conveyed to assistive technologies.
265
What is the purpose of the aria-selected attribute?
To indicate that an element is selected
## Footnote
Commonly used in tabbed interfaces, listboxes, or grids.
266
Provide an example of how to use aria-selected in a tab control.
Use it on buttons with role 'tab' to indicate which tab is selected
## Footnote
Example:
267
What does the aria-disabled attribute indicate?
That an element is disabled only to assistive technologies
## Footnote
It does not actually disable the element; developer must style it accordingly.
268
How should the aria-disabled attribute be used on a custom control?
Apply it to indicate a control is disabled, and use styling and JavaScript for appearance and behavior
## Footnote
Example:
Edit
269
What does the aria-haspopup attribute indicate?
That an interactive element will trigger a popup element when activated
## Footnote
Must be used with specific roles like menu, listbox, tree, grid, or dialog.
270
Provide an example of how to use aria-haspopup.
On a button that opens a popup menu
## Footnote
Example:
271
What is the purpose of the aria-required attribute?
To indicate that a field needs to be filled out before form submission
## Footnote
Commonly used in custom form controls.
272
When should you omit the aria-required attribute?
If the label already contains the word 'required'
## Footnote
This avoids redundancy in announcements by screen readers.
273
What is the aria-checked attribute used for?
To indicate whether an element is in the checked state
## Footnote
Commonly used for custom checkboxes, radio buttons, and switches.
274
Provide an example of using aria-checked on a custom checkbox.
On a div with role 'checkbox' to indicate its checked state
## Footnote
Example:
Checkbox
275
True or False: The native checkbox elements have built-in checked states.
True
## Footnote
They are conveyed to assistive technologies without needing ARIA attributes.
276
What is essential when creating custom controls with ARIA attributes?
Testing to ensure correct application and accessibility
## Footnote
Ensures the custom control functions in an accessible and user-friendly manner.
277
What is the aria-controls attribute?
The aria-controls attribute is used to create a programmatic relationship between an element that controls the presence of another element on the page, and the element it controls.
278
How does the aria-controls attribute help screen reader users?
It helps screen reader users better understand how the control works.
279
What are common uses of the aria-controls attribute?
Common uses include:
* A set of tabs that control the visibility of different sections of content
* A button that toggles the visibility of a menu
280
In a tabbed interface, what role attribute is set for each button?
The role attribute is set to tab.
281
What does the aria-selected attribute indicate in a tabbed interface?
It indicates which tab's associated section of content is currently visible.
282
What role attribute do the sections of content have in a tabbed interface?
The role attribute is set to tabpanel.
283
What is the purpose of the aria-labelledby attribute in a tabbed interface?
It points to the corresponding tab to give the panel an accessible name.
284
What does the hidden attribute do for sections of content in a tabbed interface?
It hides the sections of content that are not currently selected.
285
What must be done with the hidden and aria-selected attributes when switching between sections?
Update the hidden attribute on the section and the aria-selected attribute on the button based on which section is currently visible.
286
True or False: Only one section can be visible at a time in a tabbed interface.
True.
287
What is an example of a scenario where the aria-controls attribute can be used aside from tabs?
Other examples include:
* Accordions
* Dropdown menus
* Modals
288
Fill in the blank: The aria-controls attribute establishes the relationship between the _______ and the controlled element.
[controlling element]
289
What is the aria-describedby attribute?
It is used to provide additional information about an element to screen reader users by referencing existing content on the page.
290
How does the aria-describedby attribute work?
It creates a programmatic association between the element and the content, allowing screen readers to inform users of additional information.
291
What is a common use case for the aria-describedby attribute?
To associate instructions and error messages with form inputs.
292
Why is the aria-describedby attribute important for screen reader users?
It helps ensure that users hear important messages they may miss when navigating between inputs.
293
Fill in the blank: The aria-describedby attribute is commonly used to associate _______ with form inputs.
instructions and error messages
294
What example is provided for using the aria-describedby attribute with a password input?
A password input field associated with a paragraph element describing password requirements.
295
What does a screen reader announce when interacting with an input that uses aria-describedby?
The name of the input and potentially the additional information from the associated content.
296
True or False: All screen readers automatically announce the content referenced by aria-describedby.
False
297
What is the significance of matching the id value with the aria-describedby attribute?
It ensures the correct association between the element and the content.
298
Provide an example of using the aria-describedby attribute with a delete button.
A delete button with a message warning that all deletions are permanent.
299
What is a key benefit of using the aria-describedby attribute?
It enhances accessibility by ensuring additional information is available to screen reader users.
300
Fill in the blank: The aria-describedby attribute is a _______ attribute that aids screen reader users.
powerful
301
What is the purpose of alternative text (alt text)?
Provide essential information about an image for users who cannot see it
## Footnote
This includes users with visual disabilities and those using screen readers.
302
When is the alt attribute needed?
For images that convey important information and when making websites accessible
## Footnote
It is also used by search engines to understand images.
303
What should a good example of alt text include?
Specific details about the image such as appearance and context
## Footnote
Example: 'A black and white puppy with an orange collar lies on its belly in the sand.'
304
What is an example of bad alt text for an image of a puppy?
'A cute puppy.'
## Footnote
This description lacks specificity and important details.
305
What is a better alternative to bad alt text for an image of a tropical resort?
'Tropical resort featuring a swimming pool surrounded by palm trees and bungalows.'
306
What are some best practices for writing alt text?
* Keep it short but detailed enough to convey meaning
* Focus on important aspects of the image
* Avoid starting with 'image of' or 'picture of'
* Don't repeat similar text around the image
* End with a period for consistency
307
What should alt text describe if the image is a link?
What will happen if users click on it
## Footnote
Example: 'Go to next page.' instead of just 'Right arrow.'
308
What should you do for decorative images regarding alt text?
Use null (empty) alt text so they can be ignored by screen readers
## Footnote
Example: 
309
Why is it important to include an alt attribute for every image?
To prevent screen readers from reading the file name, which can be distracting.
310
What should you do before launching your website regarding alt text?
Test if screen readers can read the alt text correctly.
311
True or False: All images must have alt text, including decorative images.
False
## Footnote
Decorative images should have empty alt text.
312
What is a key benefit of good link text?
Makes it easier for everyone to find information quickly.
313
Why is clear and descriptive link text important for screen readers?
Screen readers read the link text aloud, helping users understand where the link leads.
314
How does descriptive link text assist individuals with cognitive disabilities?
It provides clear context, making navigation easier.
315
What visual cues should be used to distinguish links?
Underlining and other visual cues.
316
What type of generic link texts should be avoided?
Links like 'here', 'click here', and 'more-info'.
317
What is the ideal length for descriptive link texts?
Between 2-5 words.
318
What should link text focus on?
The destination, not the action.
319
What should you avoid in link texts to ensure clarity?
Jargon and abbreviations that users may not understand.
320
What is a best practice regarding repeated link texts?
Don’t repeat the same link text for different destinations.
321
How should links be placed in relation to surrounding text?
They should make sense within the surrounding text.
322
Provide an example of vague link text.
'Details' for an event link.
323
Provide an example of good link text for an event.
'Get details about our upcoming webinar'.
324
Why is 'Read more' not ideal for blog links?
It lacks context and specificity.
325
Provide a better example of link text for a blog post.
'Read our latest blog post on web accessibility'.
326
What is a problem with the link text 'More info'?
It is vague and doesn't provide specific details.
327
Provide a better link text example for more information.
'Learn more about our accessibility efforts'.
328
What is the primary purpose of making audio and video content accessible?
To ensure everyone can access and enjoy content, irrespective of their abilities or environment.
329
What are captions?
Text version of spoken words and important non-verbal sounds, synchronized with the video.
330
What are subtitles used for?
For people who don't understand the language being spoken.
331
Why are captions and subtitles important?
They help people who are deaf or hard of hearing and those in noisy or quiet environments.
332
Which HTML element is used to add captions or subtitles to a video?
The track element.
333
What is the purpose of the kind attribute in the track element?
To tell how the track element should be used.
334
What are the valid values for the kind attribute?
* captions
* subtitles
* chapters
* metadata
335
What does the srclang attribute represent?
The language for the track content.
336
What is a transcript?
A text version of all the spoken words in audio or video.
337
How do transcripts differ from captions?
Transcripts do not need to be synchronized with the media.
338
What are the benefits of providing a transcript?
* Useful for deaf and hard of hearing individuals
* Beneficial for those who prefer reading
* Makes content searchable
339
What can you add below audio or video to provide a transcript?
A paragraph element containing the spoken words.
340
What services can be used for automatic captions and transcripts?
* YouTube
* Vimeo
* veed.io
* Rev
* Amara
* Descript
341
What is one way to make video content accessible for deaf individuals?
Adding a sign language overlay.
342
What features should be provided to enhance accessibility in audio and video content?
* Volume controls
* Speed controls
* Good contrast for on-screen text
* Multiple formats
343
What is keyboard accessibility?
Keyboard accessibility ensures users can navigate web applications effectively without barriers.
344
Why do some users rely on keyboards instead of mice?
Due to physical disabilities, repetitive strain injuries, or personal preference.
345
What is the purpose of the tabindex attribute?
To make elements focusable and define the relative order for keyboard navigation.
346
What values can the tabindex attribute take?
Positive, zero, or negative.
347
What is the recommended value for tabindex to avoid issues?
Never use a value greater than 0.
348
What does setting tabindex to -1 do?
Allows an element to receive programmatic focus.
349
When might you need to use tabindex -1?
For focus management on headings, error messages, or custom components.
350
What does setting tabindex to 0 do?
Adds an element to the page's natural tab order for keyboard users.
351
What is the accesskey attribute used for?
To define a key that focuses on or activates a particular element.
352
How do you activate a button with the accesskey attribute on Windows?
By pressing ALT + Specified Key.
353
What is the keyboard combination to activate accesskey on Mac?
CTRL + Option + Specified Key.
354
What should you provide for clear focus indicators?
An obvious outline or visual cue for focused elements.
355
What CSS property can be used to style the focus state of an element?
The outline property.
356
What is the minimum color contrast required for focus indicators?
At least 3:1 with the background color.
357
What are keyboard traps?
Situations where a user cannot move focus away from a certain element.
-
Key Links
-
Subjects
-
Company
-
Find Us
-
