Coding for Accessibility Flashcards
What aria property sets a form field as required?
aria-required
What is the HTML tag equivalent of landmark role=banner?
<header>
What is the HTML tag equivalent of landmark role=complementary?
<aside>
What is the HTML tag equivalent of landmark role=contentinfo?
<footer>
What is the HTML tag equivalent of landmark role=navigation?
<nav>
What are the 8 landmark WAI-ARIA roles?
- banner
- complementary
- contentinfo
- form
- main
- navigation
- region
- search
What is the HTML tag equivalent of landmark role=region?
<section aria-label>
Which semantic element displays a hand pointer on hover state?
Link
Is touch functionality covered by support for click events or keyboard events?
Click events
What is the minimum recommended touch target size?
44 x 44 px
What is the effect of role=presentation on screen readers?
It removes the default semantics and implicit ARIA from the accessibility tree. For example, and <h2> will be treated as a <div>
Is keeping headings in hierarchal order a MUST or a SHOULD for AA conformance.
SHOULD
What aria attribute tracks paginated views for screen readers?
aria-current
What is the main thing to add when coding an accessible iframe (MUST exist for AA conformance)
a non-element title attribute
Example:
<iframe title="Video: Specify the Language" width="560" height="315" src="https://www.youtube.com/embed/qyjDrUV_el8" frameborder="0" allowfullscreen> </iframe>
What would be considered the best practice when choosing the title attribute for an iframe?
It should match the <title> element of the enclosed document.
How do the headings of an iframe relate to the headings of the main page?
The iframe headings are part of the main page accessibility tree and SHOULD be designed to fit into the main page hierarchy if possible.
What aria attribute should be added to an iframe without meaningful content
aria-hidden
What 2 properties will disable pinch-to-zoom when set on the meta viewport element?
user-scalable=no and maximum-scale=1.0.
What attributes will override the alt attribute text on an img element
aria-label and aria-labelledby
How should an image be coded in order to be ignored by a screen reader?
Have an empty alt attribute and no aria-label or aria-labelledby attribute
What is the difference between role=application and role=presentation?
Role=application causes the element and all of it’s descendants are part of an application that doesn’t conform to default ARIA specifications and where the web developer has implicated their own keyboard shortcuts.
Role=presentation removes all the default semantics and implicit ARIA from the accessibility tree and leaves only content available to screen readers.
What is the difference between role=alert and role=alertdialog?
Role=alert announces but doesn’t require user interaction or focus.
Role=alertdialog requires user interation and therefore also requires focus.
What are 2 other ways to hide images from screen readers aside from empty alt text?
- Role=presentation
- Implement as CSS backgrounds
What is the max number of characters that SHOULD be used in alt text?
150
What SHOULD be included and what MUST be included when coding informative icon fonts without visible redundant text?
- Role=img (SHOULD)
- aria-label or aria-labelledby (MUST)
Use aria-hidden if there is visible redundant text
What tags should NOT be used to embed an SVG?
<object><iframe>
What are the downsides of using an <img> tag with an SVG src?
- Javascript and CSS can’t be directly applied to the SVG for animations/manipulations.
- The SVG is not directly available in the DOM if the image is complex
What are the downsides of embedding an inline <svg> tag?
- The increased embedded code will also result in an increased file size.
- The inline SVG cannot be cached.
- If the image is used in multiple places, maintaining inline SVG code becomes more complicated.
What element MUST be added for <svg> alternative text and then programmatically associated for screenreaders?
<title>
Screen readers won’t always recognize it without role=img
What element can be added to a complex <svg> to include a longer description?
<desc>
What is the recommended method of including a long description for a complex <svg>?
Provide a long description in the HTML content itself, either on that page or another page (linked). Using the <desc> tag will only announce to screen readers and not be available to sighted users.
What method should be used to animate an <svg>?
Use Javascript instead of the <animate> element.
What 4 keyboard features are not disabled by role=application?
- The Tab key to go to focusable elements.
- The Enter or Return key
- The space bar
- The arrow keys
What 3 ARIA roles automatically trigger application mode?
- role=”dialog”
- role=”alertdialog”
- role=”tablist”
What ARIA property will suppress announcements while a region is updating,
aria-busy
When using an SVG image, when MUST role=img be added for accessibility?
When embedding inline with the <svg tag
When using an SVG image, when SHOULD role=img be added for accessibility, but is not necessary?
When setting an svg src for an <img> tag
What 2 properties must be set on an informative icon font to make it accessible?
- role=”img”
- aria-label
A good way to set alt text for CSS background images is with CSS visually-hidden text. What type of image should this method not be used on?
Icon fonts
Better for accessibility: SVG or <canvas?
SVG
What is the main thing that will make a PDF accessible?
Tagging the file as a PDF
What is the maximum time a transiton effect should run?
5 seconds
SHOULD lazy loading content be announced as it loads?
No
There should only be a placeholder in the content area, but not a live a
