WorksheetsAccessible Code
Total questions: 73
Worksheet time: 1hrs 4mins
Semantic HTML is important because, when applied, all assistive technology and browsers will know how to operate the functionality.
True
False
What is the role, name and value of the link in:
<a href="https://www.google.com/">Google</a>
Role = link, name = Google, value = https://www.google.com/
Role = anchor, name = https://www.google.com/, value = Google
Does this button have a proper, accessible name?
<button id="menu" title="menu"> <i class="fas fa-bars"></i> </button>
Yes
No
Is <dl> flow content, according to the MDN Documentation?
Yes
No
Doctype declaration is not necessary if the webpage does not contain HTML5 elements.
True
False
The lang attribute can be set on the HTML root element to define the language of the web page.
True
False
What is the lang value for Esperanto?
lang="esp"
lang="eo"
lang="es"
Which <title> text is useful for screen reader users? Check all that apply.
Homepage
24 search results for "apple pie" – Recipes R Us
My Site – Just another WordPress site
Should you set user-scalable=no?
No, user-scalable=no prevents the user from zooming in and out
Yes, because then I have more control over what the user sees
<nav> is a top level landmark.
True
False
<form role=”search”> is correct because:
It's ok to change the role of an element
This is a special case, because now screen reader users can quickly navigate to the search form
An aria-label on a <nav>, like <nav aria-label=”sitemap”> is helpful for:
Keyboard users
Screen reader users
A <div> can be used to indicate the meaning of a text element.
True
False
What will a screen reader announce for:
<img src="IMG_123.jpg" alt="" />
IMG_123
Nothing, the image is omitted
Image
Which of these is true? Check all that apply.
Images always need an alternative text, describing what's on the image
Decorative images do not need an alt attribute
An alt text may not be enough for Infographics
The accessible name of an SVG can be provided by…? Check all that apply:
The title element and an aria-labelledby on the SVG element
The title element and an aria-describedby on the SVG element
The title attribute on the SVG element
An aria-label on the SVG element
Is
<select multiple="multiple">
fully supported by browsers and assistive technology?
Yes
No
Is the first rule of ARIA: don’t use ARIA?
Yes, use Semantic HTML5 over ARIA.
No, it is better to use ARIA and build components with divs and spans.
Form controls like checkboxes and radio buttons look outdated.
It’s better to use a more modern approach than use common design patterns. It’s more refreshing for the user to create a new interface for my forms.
True
False
For consistency it’s important to (check all that apply):
Have consistent navigation on every page
Keep the look and names of links and buttons consistent
Have a help page and tooltips for all functionality
Don’t depend on colour alone. That is important for:
Colour blind users
Blind users
Users with a visual impairment
Users from another culture, where colour can have a different meaning than the one you intended
Screen reader software always reads the contents of a website from top down.
True
False
It is important for the different levels of headings to be used in a linear, hierarchical order.
True
False
Why should you opt for SVGs when presenting text in images?
Smaller file size
Users can zoom in without the text becoming blurry
Screen reading software can read the text
What are drawbacks of content in CSS? (check all that apply):
Screen reader software reads it out far too loudly
Screen reader support is buggy
It can be inaccessible to users who disable CSS or who use their own CSS
The contrast is too low for users with a visual impairment
When should you use the lang attribute for parts of the content?
If your page contains content in a language that differs from the site language
For comedic effect: use a random language to have your text read with a funny accent
If your page contains proper names, technical terms, words of indeterminate language and words or phrases in well-known slang
Which values can aria-live hold?
aria-live="true" and aria-live="false"
aria-live="indirect", aria live="direct" and aria-live="off"
aria-live="polite", aria-live="assertive" and aria-live="off"
Aria-atomic is used to set whether the screen reader should always announce a live region as a whole, even if only part of the region changes.
True
False
The role=”alert” has an implicit value of..?
aria-live="polite", aria-atomic="true"
aria-live="assertive", aria-atomic="true"
The role=”alert” can be added to every element in the DOM even if that means the role of the element will change.
True
False
If the dynamic change contains a lot of information, how should you handle this with aria-live?
Read all information that has been changed
Announce there has been a change and where the changed information can be found on the page
aria-expanded should be placed on:
The element that expands, for example the nav of a menu
The button that is used to toggle the expansion
Setting the orientation of a web page fixed to landscape could lead to accessibility issues.
True
False
Creating a responsive website is also useful for visitors who like to zoom in.
True
False
Text resizing is the same as zooming in.
True
False
A user should be able to:
Zoom in up to 400% and enlarge text only up to 200%
Zoom in up to 400% and enlarge text only up to 400%
Zoom in up to 200% and enlarge text only up to 400%
Zoom in up to 200% and enlarge text only up to 200%
Creating one key shortcuts:
Can have a negative effect on voice recognition interaction
Can have a negative effect on screen reader interaction
All of the above
Don’t initiate a change of context on:
Hover, focus or input
Hover, focus or input, unless the user has been warned
What would a good alternative be for zooming in on a mobile, for a user with a stylus?
Tell them to use 2 fingers to zoom in and out
Add + and – buttons to zoom in and out
What are the accessibility issues with the following code? Check all that apply.
<a id="menu" data-title="Menu"></a>
The link doesn't get keyboard focus
The link does not have an accessible name
This should be a button, because the element invokes an action
There is no indication, for the screen reader user, whether the menu is open or closed
"data-title" is not allowed
Which CSS properties hide an element, and the content inside, from a screen reader? Check all that apply.
display: none;
visibility: hidden;
opacity: 0;
Which CSS properties remove an element, and the content inside, from the tab order? Check all that apply.
display: none;
visibility: hidden;
opacity: 0;
aria-hidden=”true” … Check all that apply:
hides an element, and the content inside, from sight
hides an element, and the content inside, from a screen reader
removes an element, and the content inside, from the tab order
The .screen-reader-text class in WordPress (check all that apply):
hides an element, and the content inside, from sight
hides an element, and the content inside, from a screen reader
removes an element, and the content inside, from the tab order
Visible focus means: a keyboard user must be able to see where the keyboard focus is.
True
False
Predictable focus means: a keyboard user must be able to predict where the next keyboard focus will be.
True
False
If you don’t like the outline of an element that gets focus you should:
Add the CSS outline: 0 to the stylesheet
Change the outline to a more visually appealing style with CSS
Learn to live with it, the native browser outline is always the best option
What is important when including a form on a webpage?
The first form input should get the keyboard focus, using tabindex="1"
Each form field should have a tab index, to make sure users fill out the form in the right way
The tab order of all the focusable elements in the DOM should be the same as the visual order. Positive tab indexes on form fields are not allowed.
After an AJAX form submit, the keyboard focus should be put on:
The top of the error or success message, just above the form
The top of the page
After the user closes a modal, the keyboard focus should be put on:
The button that opened the modal
The top of the page
A good page <title> for a search result page is:
Search results – My site
You searched for Drupal
32 search results for Drupal, page 1 of 2 – My site
32 search results for Drupal, read them in the list below just after the H2 heading called Results, this is the first page of 2 in total – My Site
A skip link (check all that apply):
Is useful for keyboard users to skip content that is repeated on every page, for example the menu
Must become visible on keyboard focus
Is not necessary when the heading and landmark structure are semantically correct
Must be the first focusable element on a webpage
An H1 heading (check all that apply):
Describes what the page is about
Can be used multiple times
Is preferably placed just above the main content
Multiple <nav>elements can be set apart by giving them:
An aria-label, for example <nav aria-label="sitemap">
An aria-label, with the description of the role. For example <nav aria-label="sitemap navigation">
A title, for example <nav title="sitemap">
For a table, which of the following is true:
A caption is the name of the table, a summary explains how to use that table
A summary is the name of the table, a caption explains how to use that table
Screen readers can announce the correlation between header cells <th> and data cells </td>.
True
False
For a screen reader, “form mode” means:Check all that apply.
A screen reader user can type in form controls instead of using the short codes from the screen reader
Only form controls and their attached information are announced by the screen reader
A screen reader user is sent to a separate form with fewer options
What is correct HTML?
What is correct HTML?<label>Your name</label> <label for="first-name">First Name</label> <input id="first-name"> <label for="last-name">Last Name</label> <input id="last-name">
<fieldset> <legend>Your name</legend> <label for="first-name">First Name</label> <input id="first-name"> <label for="last-name">Last Name</label> <input id="last-name"> </fieldset>
Aria-describedby is used to add extra information to a form control.
True
False
Autocomplete is required for every type of form control in a form.
True
False
Examples of good error prevention messages in a form are:Check all that apply.
Please choose a strong password
Your password must be at least 8 characters long and contain a number
All fields are required
Your first name must be at least 3 characters long
A placeholder can be used to replace the visible label.
True
False
What is a good way of indicating errors in a form after submit?Check all that apply.
Add the text: Please fill out this field
Add the text: Please provide a valid email address, like name@example.com
Place a red border around the field and make the text bold
Add a list of errors at the top of the form and with each form control give an explanation of what needs improvement
After an AJAX submit of a form, the keyboard focus should be put on:
The top of the form
The top of the error or success message
The top of the page
Which current (in 2021) browsers fully support the <dialog> element on desktop?Check all that apply.
Opera
Edge
Firefox
Chrome
Safari
Custom styling on a checkbox or radio button can be done by hiding the input element with the CSS display: none.
True
False
All date and time pickers need to be accessible, even if there is an accessible alternative present.
True
False
How can you help visitors to fill out a form that has a time limit?Check all that apply.
Give them a list of the documentation they will need to fill out the form
Tell them to hurry up every 10 seconds
Give them the opportunity to extend the time limit
Block the user if the time limit has expired 3 times
Yes! Your frontend code is parsing. This means:
The syntax of the frontend code is error-free
The frontend code is fully accessible
IDs of form controls should be unique on a web page.
True
False
The steps required for accessibility testing are:
Keyboard testing
Automated accessibility checks in the browser
Zooming in and out in your browser
All of the above
When opening a modal (pop-up), the keyboard focus can be put on …Check all that apply.
The close button
The first input field
The button for opening the modal
The top of the page
What can you check with a screen reader?Check all that apply.
Whether the spelling of my content is correct
Whether link texts make sense
Visual focus styles
Whether everything is understandable if you read from the top down
Feedback on dynamic changes
