DQ WAS Course notes Flashcards
What’s the keyboard shortcut to go to main content?
I do not know, look this up for the major SRs.
How do we help the blind use the web?
Supply alt text for non-text content
Don’t convey information only visually
Keyboard functionality
Logical structure w semantics from HTML (headings, landmark, etc)
Custom controls have ARIA name, role, value defined and updated
Give immediate feedback for all actions
Videos have audio description of the visuals as needed
Mobile: Swipe actions, controls and widgets require click
ZoomText opens with what default magnification?
What is the highest magnification it can do?
2X normal text
36X
Besides magnifying the text, what other features does ZoomText offer?
ZoomText has a built in screen reader!
Colors, pointer, cursor, focus
colors- can change to invert, different schemes (black and white, inverted
pointer- yellow with red cross, red circle, big yellow, circle only when moving, big green, can customize
cursor- for input- default is very hard to see, green circle
focus- tabbing through, hard to see for anyone-red rectangle,
What does the Low Vision user do to help themselves?
Use Screen readers
Color customization- low contrast or too bright- here, the OS or browser offers help, light green against black is popular
Design considerations for Low Vision
Don’t disable pinch-to-zoom with content=”user-scalable=no”
Follow color contrast rules for text
Use :focus and :hover states
provide a clear visual distinction between content (e.g., text) and controls (e.g., buttons, links, etc.).
place popups, alerts, error messages, and other similar messages near the visual focus, to make sure users don’t miss them.
What is the most common type of colorblindness?
What are two types of the that most common type?
Red-green
Deuteranopia and Protanopia
Tritanopia, or blue-yellow color-blindness.
Achromatopsia see colors in grayscale.
red/black is also bad
Design considerations for those with Color Blindness
Don’t use color alone to communicate information
Don’t make users distinguish between colors, especially red/green
Design considerations for the deaf
Audio is the issue for them. audio only or video with audio
For Audio only- Provide transcript that include: narration, dialog, and other important sounds, such as applause, crashes, music, etc.
For Video with Audio- provide captions (because a transcript can’t line up with the video) but also provide a transcript for the blind and braille users
Sign language interpretation on videos is also good but not required
Design considerations for Deaf Blind
They use braille through a screen reader, so all text must be screen reader accessible
Use all of the blind considerations and all of the deaf ones
Transcripts are essential for audio and video content
What do people with Motor Disabilities use?
Assistive software, like SRs, word prediction
Assistive hardware- pointers, switch (with a custom keyboard like Marie-France Bru), motion detection, vertical keyboard with mouth stick, one-handed keyboard, or other alternate input device
Speech recognition (Dragon)
Paul Smith types art!
Design considerations for Motor Disabilities
Keyboard accessible
Visible :focus and :hover states
Session time outs- give warning, allow extension, give at least 2 minutes for response
Provide large click target areas
Examples of speech disabilities
Stuttering
Cluttering-slurred rapid speech
Apraxia- motor disability of the speech muscles
Dysarthria- brain damage- slurred, slow, mumbling, hoarse, breathy
Speech sound disorders- difficulty with certain sounds, consonants
Articulation disorder- physically produce sound
Phonemic disorder- can’t tell some sounds apart, say Tall for Call
Non-vocal- unable to produce any speech
What do people with speech disorders use to communicate?
Augmentative and Alternative Communication, or AAC
Unaided ACC- body language, facial expressions, gestures, and sign language.
Aided ACC- communication books and boards, pen and paper to electronic devices that produce computer-generated voices
Low tech and high tech aided ACC- divided by use of electricity
Design considerations for Speech Disabilities
No voice input!
Cognitive Disabilities
Limited comprehension
Cognitive overload- complexity of the moment
Limited problem-solving skills
Short-term Memory Loss
Attention deficit
Difficulty reading
Difficulty with math
Design considerations for Cognitive Disabilities
Simplify the interface
Simplify the content
Videos/Audios short as possible
Limit the number of choices
Help feature
Ease of use
Test with users
Retain info across the path
Reduce/Eliminate distractions
Design considerations for Reading Disabilities
Supplement text- videos, audio, illustrations
Avoid highest level of constrast
Design considerations for Seizures
Photo-epilectic is the only kind of seizure we can code for.
Don’t include videos, animations, or transitions with flashing light sequences of 3 times or more per second.
WCAG 2.0 date?
AS ISO standard date?
WCAT 2.1 date?
2008
2012
2018
Why are there both WCAG guidelines and techniques
They separated the what from the how so that the guidelines (what) remain viable as technology(How) changes
Talk about Authoring Tool Accessibility Guidelines (ATAG)
If any part of a web application allows users to create web content, though, the ATAG principles apply. Think of web-based authoring tools like Google Drive, or any of the many WYSIWYG editors incorporated into content management systems like Drupal, Joomla, MODX, and so on. All of these user-input tools should conform with ATAG.
ATAG says web authoring tools must be accessible. How so?
A.1. Authoring tool user interfaces follow applicable accessibility guidelines
A.2. Editing-views are perceivable
A.3. Editing-views are operable
A.4. Editing-views are understandable
ATAG says the Authoring tools should make it easy to produce accessible content by default. The standard output of the tool should be accessible, and it should prompt the user to fix accessibility problems and provide guidance on how to do so. How so?
B.1. Fully automatic processes produce accessible content
B.2. Authors are supported in producing accessible content
B.3. Authors are supported in improving the accessibility of existing content
B.4. Authoring tools promote and integrate their accessibility features
What is ARIA?
ARIA allows developers to specify the name, role, state, and property of HTML elements in both static and dynamic content. ARIA is not an entirely new language. It is an add-on to the HTML syntax.
What three AT users are helped by ARIA?
SR
Speech Recognition users
Keyboard only users
The Americans with Disabilities Act is what type of law?
Civil rights
What are the current Procurement Laws and who do they apply to?
The most prominent procurement laws (like Section 508 of the Rehabilitation Act in the United States, and EN 301 549 in the European Union) apply only to government entities, but it is possible that a future law could impact private businesses.
What are some US Industry Specific accessibility laws?
Examples include telecommunications and airplane travel, both of which have accessibility-related laws in the United States, which are the 21st Century Communications and Video Accessibility Act (CVAA) and the Air Carrier Access Act (ACAA), respectively.
What is it in the ADA that relates to web?
the term “public accommodation”
What is the acception that the ADA applies to all businesses and other organizations open to the public?
religious entities and private clubs
Talk about Section 508
requires the U.S. federal government to take accessibility into account when procuring information technologies: websites, telephones, copiers, computers, and other technologies, including both hardware and software.
the WCAG level A and AA guidelines are now incorporated by reference and required by Section 508
Applies to US federal government entities only and private entities doing any business with the fed
Talk about 21st Century Communications and Video Accessibility Act (CVAA)
Applies to- video communications, text messaging, web browsers on mobile devices, and other similar technologies
all video programs presented with captions on television must be presented with closed-captions on the internet
Talk about Air Carrier Access Act (ACAA)
On November 12, 2013 the DoT issued a rule (DOT-OST-2011-0177-0111 opens in a new window) regarding the accessibility of carrier websites and ticket kiosks, which will require these sites and kiosks to be accessible to people with disabilities.
U.S. and foreign air carriers operating flights within or to the U.S. or selling tickets to the U.S. public are required to ensure that the public-facing content of websites that they own or control conforms to the Web Content Accessibility Guidelines (WCAG) Level AA.
Core air travel services:
Booking or changing a reservation, including all flight amenities;
Checking in for a flight;
Accessing a personal travel itinerary;
Accessing the status of a flight;
Accessing a personal frequent flyer account;
Accessing flight schedules; and
Accessing carrier contact information.
Talk about state accessibility laws
Some states have laws aimed at state and local government, including schools
Talk about the Accessible Canada Act (ACA)
Barrier free by 2040 in these areas
Employment
The built environment (buildings and public spaces)
Information and communication technologies
Other forms of communication
Procurement of goods, services, and facilities
The design and delivery of programs and services
Transportation (airlines, rail, road, and marine transportation providers that cross provincial or international borders)
The scope of the law applies to the Canadian federal government, private sectors regulated by the government (e.g. banks, transportation, broadcasting, telecommunications, the Canadian Forces and the Royal Mounted Police).
they have published their own web standards
Talk about The Accessibility for Ontarians with Disabilities Act (AODA)
Ontario went further.
The AODA “applies to every person or organization in the public and private sectors of the Province of Ontario, including the Legislative Assembly of Ontario” if the person or organization “provides goods, services or facilities… employs persons in Ontario… offers accommodation… owns or occupies a building, structure or premises… or is engaged in a prescribed business, activity or undertaking or meets such other requirements as may be prescribed.”
Talk about Quebec’s Standards sur l’accessibilité du Web
Applies to government web site
It’s a modified version of AA
Talk about the UK’s The Equality Act of 2010 and it’s
The Public Sector Bodies (Websites and Mobile Applications) (No.2) Accessibility Regulations 2018
While the EQA does not expressly refer to websites, the consensus has been that the reference to the “provision of a service” applies to commercial web services as much as to traditional services.
Public Sector bodies- Websites and mobile applications of public sector bodies (with some allowable exceptions) must be accessible (perceivable, operable, understandable and robust).
Talk about the EU’s EN 301 549: “Accessibility requirements for ICT products and services”
They are separated by public/private sectors
EU Directive 2016/2102 opens in a new window applies to the public sector
Talk about the EU’s EN 301 549: “Accessibility requirements for ICT products and services”
They are separated by public/private sectors
EU Directive 2016/2102 opens in a new window applies to the public sector
Talk about the EU’s EN 301 549: “Accessibility requirements for ICT products and services”
They are separated by public/private sectors
EU Directive 2016/2102 opens in a new window applies to the public sector
Directive 2016/2102 refers directly to the European standard EN 301 549. It is similar to Section 508 (procurement law)
EN 301 549 mentions WCAG 2.1 level AA
Directive 2019/882 is for the private sector- e-commerce, banking, e-books, and electronics
Some EU countries also have their own laws (see UK cards)
Talk about the European Accessibility Act (EAA) - this is the EUs civil rights law whereas EN 301 549 is procurement law
Adopted in 2019
Covers:
computers and operating systems
ATMs, ticketing and check-in machines
smartphones
TV equipment related to digital television services
telephone services and related equipment
access to audio-visual media services such as television broadcast and related consumer equipment
services related to air, bus, rail and waterborne passenger transport
banking services
e-books
e-commerce
What other European countries have their own laws?
Belguim
France
Germany
Ireland
Italy
Netherlands
Spain
What about Australia?
All public and private sites must meet WCAG AA
What about Brazil? Hong Kong? India?
Brazilian Law for Inclusion of Persons with Disabilities
all websites to be maintained by companies with either headquarters or commercial representation in the country or else by government agencies, in accordance with international best practices and accessibility guidelines.
Hong Kong and India require AA
Talk about Japan
They have The Act on the Elimination of Discrimination against Persons with Disabilities
WCAG
Dispell the myths of accessibility
the sites are better for everyone
anyone can acquire a disability
20% of the population has a disability
Accessibility is more affordable than lawsuits or negative publicity
Most accessibility features are invisible to the user
What is inclusive design?
What does it lead to?
Inclusive design design to include a whole range of human diversity including a wide spectrum of abilities and disabilities.
Web accessibility is then the result of inclusive design.
What category of disability is most neglected and why?
Cognitive disability because many of the measurements of cognitive disability access include some degree of subjective judgment.
Subjective means based on personal feelings, values, etc
What are some subjective accessibility guidelines?
Use visual cues to focus the user’s attention on the main purpose of the web page.
Ensure the font is easily readable.
Minimize the cognitive skills required to use the web page.
Name the 7 principles of Universal Design
What is a major drawback of these rules when applied to web accessibility?
- Equitable Use- designed for all kinds of users, identical where possible, equivalent where not
- Flexibility in Use- bake in some adaptability, like left or right handed
- Simple and Intuitive Use- remove complexity, provide feedback
- Perceptible Information- a variety of modes of presentation
- Tolerance for Error- provide warnings, minimize errors
- Low Physical Effort- minimize repetitive or sustained action
- Size and Space for Approach and Use- line of sight, room for assistive devices
These things are hard to objectively test for.
How can we achieve Universal design principle one- Equitable use?
How do we fail?
One design for all users that incorporates semantic markup for headings, landmarks, labels, tables, etc.
Inaccessible to screen readers or keyboard users, separate design for those with disabilities.
How can we achieve Universal design principle two - Flexibility in Use?
How do we fail?
A JavaScript drag-and-drop widget is designed to work with any of the following: a mouse, a touchscreen, or a keyboard.
A bank web site warns the user 2 minutes before the session is about to expire and gives the user the option of extending the session.
A mobile web site has three superscripts after a word, each linked to a footnote at the bottom of the page. Each superscript is tiny, and all of them are very close to each other, making it almost impossible to activate the correct link accurately.
How can we achieve Universal design principle three- Simple and Intuitive use?
How do we fail?
A form validation script provides clear success confirmation messages when the form is submitted successfully, and clear error messages when there is a problem with the data. The focus moves to the error messages, ensuring that keyboard and screen reader users get the full benefit of the messages.
A web site uses native HTML widgets that are familiar to users.
Content is organized with headings that clearly mark the important sections of content.
Fail-
An e-commerce site requires many detailed steps to complete a purchase, making the process unnecessarily complex.
A web site uses advanced or uncommon vocabulary.
A web site uses custom JavaScript widgets that are new in design and concept, and unfamiliar to users.
How can we achieve Universal design principle four- Perceptible Information?
How do we fail?
A tutorial on how to tie your shoes is presented in text, illustrations, and video with narrated instructions.
ARIA live announcements are used to announce to screen reader users the number of available options in a custom ARIA/JavaScript autocomplete drop-down list (e.g. “There are three cities that start with ‘SAN.’ Use the down arrow key to navigate the options”).
Fail- A video tutorial on how to tie your shoes is shown with no narration, making the video useless for a person who is blind.
A low contrast color scheme on a web site makes it difficult for people with low vision to read the text or distinguish buttons from the surrounding text.
How can we achieve Universal design principle five- Tolerance for Error?
How do we fail?
On a financial web site, a script confirms “Are you sure you want to transfer funds?” before funds are transferred, in case users had pressed the button by accident, or before they were sure they wanted to do it.
A search feature performs a spell check on submissions and suggests corrections.
Autocomplete
fail-A web site responds to a “delete account” request without confirming with the user, resulting in the irreversible loss of the account.
A search feature searches only for the literal string of text and doesn’t take into account variations in word order, spelling, etc.
How can we achieve Universal design principle six - Low Physical Effort?
How do we fail?
A web site has a “skip to main content” link at the top, allowing keyboard users to avoid tabbing through all of the links in the header and navigation.
A web site has good heading and landmark structure (importantly, the content starts with an <h1> heading, inside a landmark, among others), allowing screen reader users to navigate by headings and landmarks to the part of the page they’re interested in.
Fail- A sign-up process on a web site requires typing a large amount of information, which can lead to fatigue in people with motor disabilities.
A web site is designed with many links in the header and navigation section, and no headings, landmarks, or “skip to main content” link to allow users to jump to the main content.</h1>
How can we achieve Universal design principle seven - Size and Space for Approach and Use?
How do we fail?
Large buttons with ample space between, swipe gestures replaced with keyboard actions
How does the screen know what type of elements are on a page?
because of how they are represented by the accessibility API of the browser and the operating system.
What JAWS command brings up the element lists (Headings List, Forms List),etc?
Insert + F3
How do JAWS users bring up the list of Landmarks?
(not to be confused with the elements list)
insert + Ctrl + R key
When alt text is not available for an image, what might some screenreaders provide instead?
The image file name
What is the ideal audio-structural (for screen readers) user experience for a page?
These landmarks:
(or <div>)
(or <div>)
<div>
(or <div>)
(or <div>)
Headings: one H1 and then The heading levels should form a logical hierarchical outline of the content on the page without skipping any levels
Form: fields have labels
Images: have alt text that is accurate, succinct, and meaningfully descriptive of the image's purpose.
Lists: The key is to use actual list markup (<ul>, </ul><ol>, or <dl> whenever presenting a list</dl></ol></div></div></div>
</div></div>
For audio-structural (for screen readers), how can we deal with live audio?
- continuous AJAX updates- problem tho that the user may reach the end of the text, then new text may be posted above the user’s current location in the document. If that happens, the user would have to traverse the text backward to find the new text.
- a “load more live text” button.
What is Audio Structural, Tactile Structural, Silent Visual Structural and who uses each?
Audio Structural is for screen readers used by the blind. Because they cannot see, all content must be announced
Tactile Structural is for braille users, the deafblind. All content must be in text format.
Silent Visual Structural is for deaf users, all audio must also be visually presented either through accessibile captions or transcripts. Don’t embed captions within the video
How to implement Tactile-Structural Text-only UX?
Everything must be text
alt, aria-label, aria-described by, aria-live
Synchronized captions do NOT count as text for deafblind users- the answer is a transcript.
Associate the transcript to the video only by placing it immediately after, using aria-described for the transcript is bad because users cannot pause it.
What type of content is basically useless to the deafblind?
Multimedia content.
You should provide transcripts that include descriptions of the visuals as well as the dialog
What are the best practices for providing synchronized captions?
Provide them as a separate file from the video
Provide them in multiple formats
Provide Web VTT captions as users set preferences at browser level
Provide caption customization options in the media player
How do we provide captions for live video feeds?
Use a professional broadcast system to embed the captions in the video itself in real time.
Use AJAX to provide synchronized captions with a live video. This option can be tricky to set up. The live captions will never be fully synchronized with the live video, because of the delay involved in transcribing the words. One way to get around this is to experiment with a delay in the video feed.
How do we include sign-language in videos?
Include a sign language interpreter in the original video, standing or sitting next to the speaker.
Use picture-in-picture (PiP) technology to show the sign language interpreter in a corner of the video, or off to the side.
Allow the user to turn the sign language interpretation on or off, and play the interpretation as a separate video next to the original video, synchronized with the original video.
What are ways to design for cognitive disabilities?
design to be intuitive, compelling, and successful for the user. The tasks should be well-defined, with no confusion or distractions.
Simplify the visual interface, navigation, processes and tasks, the content
Provide alternative representations
Allow extra time
Focus the user’s attention by reduce distractions, Present a small number of clearly-defined tasks, Make the experience compelling and fun, Provide immediate feedback for both success and error scenarios, Use visual design cues to draw attention:
blank space, color, contrast, the gaze of others, surprise, framing, directional cues, leading lines, motion
Which WCAG guideline is most directly linked to cognitive disability?
3.1.5: Reading Level.
When might these rules apply? Authoring Tool Accessibility Guidelines (ATAG)
Content management systems and blog authoring systems
User comment features (forums, discussions, blog comments, etc.)
Product rating and review features
Social media platforms
Document review and collaboration features
Anything that invites and posts user input
How can you help users create accessible content while they visit your site? (ATAG)
A widget for adding images that allows users to specify alt text.
A widget for creating HTML tables that allows users to specify a , table headers, and the scope for those headers.
A widget that allows users to specify headings (and ensure the resulting code is actual headings, not paragraphs or <div> elements styled to look like headings).</div>
What are some important HTML elements to always include for accessibility that many people forget?
title
lang
When an inline element changes languages, such as a quote in a different language, from the defined lang, what needs to happen?
Inline language changes MUST be identified with a valid lang attribute so the SR uses the proper accent when reading it.
With a span <span></span>
For HTML , instead of using the aria role=”region”, which is not supported universally, what’s better?
Use headings to label sections, as that is more descriptive and especially if there are many of them.
Most SRs will read “region” if you make it an aria-label or aria-labeledby, but really, don’t bother.
Which aria roles are NOT considered landmarks?
region and aritcle
What is one region that may occur more than once on a page and how to distinguish each occurrance?
use aria-label to add description, aria-label=”Main Menu”
Which three landmarks/regions should only appear once per page?
Banner
Main
Footer
What’s a good CSS practice when using HTML5 landmarks?
Set them all to display: block for backwards compatibility
How do you find Landmarks lists w/ SRs?
How do you find Headings lists ?
JAWS- Insert + F3 (to open Elements List), then select landmarks
NVDA- Insert + F7 (to open Elements List), then select landmarks
VO- not on mobile, Control Option U, arrow to landmarks
Talkback with FF- Local context menu (swipe up then right), then select landmarks
HEADINGS:
JAWS Insert + F6
NVDA- Insert + F& and then select headings
VO- Control Option U, arrow to headings
How do you navigate through the landmarks with various SRs?
How do you navigate through the headings with various SRs?
How do you navigate by heading level?
LANDMARKS:
JAWS- shift R (or shift ; on real old version)
NVDA, Narrator with Edge- shift D
VO-Local context menu (swipe up then right), then select landmarks
HEADINGS:
JAWS, NVDA,- H
VO- Contr Opt Comm H
Talkback with FF- Local context menu then select headings
By HEADING LEVEL:
JAWS, NVDA- Command 1-6
How do you navigate to the MAIN landmark with SRs?
JAWS- Q or shift Q? not sure which
Narrator w Edge- Caps Lock + N
Not available with the others, no wonder AE includes the button for that jump.
SR users can jump to the H1 with a shortcut, so put it where?
At the beginning of the main content.
What’s the difference between how JAWS and VO announce headings?
JAWS says the text first, then the level
VO says level first, then the text
Does WCAG 2.0 require all headings to ALWAYS be in hierarchal order?
no, it does not.
True or False: Screen readers will read the alt text of an image within a heading as part of the heading text.
TRUE! wow.
What is one way among many that can be used by JavaScript to provide a destination for the link.
data-href=”https://deque.com”
If you must use role=”link” what else should be sure to add?
tabindex=0
click events for mouse and keyboard
What is the difference between a link and a button?
Links take users to different locations (either to a different page or to a different location on the same page);
Buttons activate scripted functionality (e.g. make a dialog appear, expand a collapsed menu, turn font bold, etc.), usually on the same page, but a button can also submit form data.
How and in what order do SRs determine the name of a link?
- aria-labelledby
- aria-label
- Text contained between the opening <a> and closing </a> elements (including alt text on images) - yes, alt text on image contained within a link becomes the link name if there is no aria-labelledby or aria-label, thus, both of those can OVERRIDE the link text. Ha!
- title attribute (but don’t use this)
What two ways are there to replace “Read more…”?
Use aria-labelled by or aria-label on the anchor tag to override it and provide more info
Create a visually hidden span after the Read More text to add more info after the Read More
What MUST be included for each link?
Text that tells the purpose of the link.
aria-labelledby, aria-label, text (or alt on image), title
What special things that result from links should be indicated to user?
Goes to external site (MAY)
Opens new window OR TAB
Opens a type of document
What is the required contrast between links and surrounding text?
What additional visual must be added to links?
3:1
:focus and :hover states
When can designers remove the underline from a link?
Contrast between the colors of the regular text versus link text is 3:1 or better
The underline appears upon focus or hover
What are ways to make the link visually discernible?
Color plus underline
Color with underline upon hover or focus (must be 3:1 contrast with words around it).
Have it be in an obvious menu
I believe adding a background color change, or an outline or border, all upon focus or hover is IN ADDITION to adding back the underline and that having just one of these without the outline does not meet the success criteria.
When must the focus indicator be visible?
When focus is on any focusable element
*browsers all provide an indicator but some are dotted lines. Although compliant, we should enhance that.
Never use CSS to remove focus indicator
How do you get a links list?
How do you navigate through the links on a page? Unvisited only? Visited only?
LIST-
JAWS- Insert F7
NVDA- insert F7 then choose
VO- Cont Opt U ,then arrow
To go through all the tabs on page-
Tab and shift tab (which will include all focusable elements)
Or
JAWS- does not have one for ALL links but see below
NVDA- K
VO- Cont Opt Com L
Unvisited only:
JAWS- U
NVDA- U
VO- doesn’t have
Visited only:
JAWS- V
NVDA- V
VO- Cont Opt Com V
Which aria do we use to inform blind users which nav page they are on?
Aria-current
Why must we add tabindex = “-1” to the element we skip to on a skip to main?
Because Safari will then tab to the next focusable element after the skip to code rather than the next element within the main content area.
What two things to be aware of for focus/reading order?
CSS things like floats and positions can alter the natural reading order
Javascript or Ajax injected content may end up above the viewpoint of the user. They will miss it because they don’t know to tab back
What about single key shortcuts written into apps?
Don’t use them! (Gmail)
Use a non printable character with it, such as Control G instead of just G.
What three ways can you caption a table?
aria-labeled, aria-labelledby
What is used for and what should always go with it?
designates a table header, either for a column or row.
Also use scope=”whatever” with even though col is implied if the th is the first row
Tables:
Header/data associations that cannot be designated with and scope MUST be designated with headers plus id
WTF?
If there is no way to mark up the table the usual way because of complexity then-
Each data cell must be explicitly associated with each corresponding header cell using headers and id.
Give each of the headers a unique id.
User headers=”” to include ALL of the headers each data cell falls under, both rows and columns
Give me a good reason to hate nested tables!
Nested data tables break the accessibility of the data presentation as a whole, making it impossible to associate the data and header cells appropriately with any of the standard methods.
If you provide a data table summary, what must it do?
SHOULD make the table more understandable to screen reader users.
How do you navigate between table cells?
All except VO - cont alt arrows
VO cont opt arrows
What’s the difference between how Jaws and VO read lists?
Jaws announces “list end”
How do we find the Lists list?
Navigate between lists?
Navigate between list items?
Only JAWS lists lists- insert control L
Between lists:
JAWS, NVDA- L
VO- Cont alt com X
Items in lists:
JAWS NVDA- I
All other n/a
Screen readers can read nested lists if coded right?
True
What’s the deal with iFrames?
And what special thing about JAWS make more work for us?
All must have title=”whatever”.
Most SRs treat iframe content as if it were in the DOM, so the keyboard shortcuts work and if we can, we should match heading heirarchy.
JAWS reads the rather than the title= of something inside the iframe instead so we must change that to equal what we define as the title.
yes, we give a title on the element and if there is another title, we change that to match!
Give iframes without meaningful content aria-hidden=”true”
How do we find the list of iframes?
how do we navigate between iframes?
LIst:
JAWS-Insert F3 then choose iframe
Between:
JAWS, NVDA- M
VO- cont opt comm F
Since most SRs ignore <em> and <strong>, how can we convey emphasized text when it is necessary for understanding?</strong></em>
We can add a span visible only to SRs (like the AE spans) or we can add an image to the design whose alt text provides the warning to SRs.
What about the HTML quotes elements <blockquote> and ?</blockquote>
<blockquote> works with SRs and so should not be used only for styling.
does not work so just use quote marks.</blockquote>
HTML5 <code> element
And the <pre> for preformatted text</pre></code><del> provides a strike through</del>
Used to set apart actual code prose and usually styled with monospace courier and pre is for preformated, SR does NOT read <code> or <pre></pre></code>
<del> provides a strike through</del><ins></ins>
<del>, if it is critical, provide hidden spans.
The price example of $100 crossed out and $75 next to it,
Put WAS $100 Now $75 in hidden spans</del>
<ins> is for inserted text, usually underlined- if vital, add hidden spans that says where deleted and inserted begin and end.
If you can’t say something nice, don’t say begin deleted textnothing end deleted textbegin inserted text anything end inserted text at all:</ins></del>
“If the meaning of the text is lost” without the highlight of what can you do?
SR does not read
Hidden text in a span
Screen readers rely on IDs in the markup for a variety of things, including:
form labels
(using and the id attribute on the form field)
table header associations
(when using the headers plus id method)
labels for custom JavaScript/ARIA widgets
(when using aria-labelledby)
descriptions for custom JavaScript/ARIA widgets
(when using aria-describedby)
other associations for custom JavaScript/ARIA widgets
(using attributes like aria-controls, aria-owns, etc.)
What’s kinda odd about TAB LIST?
TABS have a required parent of Tab List
But Tab panel does not have any required parent
True or False: Every non-text element requires a text alternative
True
Alternative text should be used to clearly communicate the intent, purpose, and meaning of the image in a way that serves as a true alternative for the image.
Alternative text is:
Programmatically determinable
Meaningful
Concise- they say 150 chars
What’s the best practice for decorative images?
Decorative images inside Office documents?
Hide them, use alt = “”
These must have alt text because Office does not honor alt=””
How is the accessible name calculated for an image?
aria-labelledby
aria-label
alt
title
What are some quirks of SRs with alt text?
Screen reader users cannot resume where they left off if they pause while in the middle of reading alt text.
Screen reader users cannot navigate the text (e.g. by word, character, etc.).
Some older screen readers do not read the full length of the alt text.
Define “decorative image”
How do we deal with them?
An image that does not convey content. Or is redundant (so the image in a product card is redundant to the text name)
alt = “”
role = “presentation”
or make it a CSS background image
What will a SR do if there is no alt on an image?
They might read the file name.
Alt text for controls should do what?
alternative text for actionable graphics clearly describes the destination, purpose, function, or action.
They do not describe the graphic.
Do form inputs with type = “image” (like a submit button that is an image), need alt text?
yes,
even if they already have a “name” attribute
Animated images:
Video longer than 5 seconds
Flash or flickering images
Anything longer than five seconds must provide a means to pause, stop, or hide it
Cannot flash more than 3 x per second.
What if the image is complex, like a graph, and 150 characters is not enough?
Provide the long description in the context of the HTML document itself. (aria-describedby)
Provide a button that expands a collapsed region that contains the long description. (use these next three if the image may be too complex for even sighted users)
Provide a button to open a dialog that contains the long description.
Provide a link to a long description on another page via a normal link text.
What is an exception to the rule of not using images of text?
when the image itself is decorative in nature or the text in the image is essential.
Logos is a good example. They still need alt text.
How to deal with images of text for low-vision users who magnify?
Use SVGs as it scales while enlarged and they can customize font, color, size
How do we do alt text on a server-side image map?
Give the entire map and alt and then each of the map items an alt.
(the solar system example)
Use client side image maps where possible
Do images always require alt text?
The image (of a painting) will require alt text, even if a long description is provided. The alt text can even mention that a long description is available elsewhere.
A long description of the painting is required only if the author’s intent requires more elaboration than a brief alt text would allow.
These same two rules also apply to diagrams.
Decorative images also require alt but it should be empty
How are maps made accessible?
Color contrast options
Make the directions into a printable list
What is the worst way to add an SVG to the page?
Embed the SVG in an or tag, or referenced as the data attribute through an .
Because SRs are sketchy on how they interpret it
The best ways are:
Utilize the <img></img> tag and reference the SVG file as the source (e.g. <img></img>). (no javascript or css)
Embed the SVG directly (inline) into your existing HTML code, using the element. (can use javascript or css with it, except it cannot be cached and SRs can be inconsistent)
Don’t use object or iframe to embed SVG
Actionable INLINE SVGs must have title for equivalent text, not alt. Use aria-describedby to associate title to svg
ALWAYS add role=image to SVGs
SVGs that require longer descriptions– do that how?
There are several ways of providing a long description for SVG images:
Provide the long description in the context of the HTML document itself.
Provide a button that expands a collapsed region that contains the long description.
Provide a button to open a dialog that contains the long description.
Provide a link to a long description on another page via a normal link text.
Via the attribute within the element.
Ideally, the long description should be available to sighted and non-sighted users alike; therefore, options #1 - #4 above are strongly preferred.
In addition to the which essentially serves as alternative text for the image, the element provides a way to fully describe the graphic.
Associate it to the svg using aria-labelledby
What weirdness do SRs do with in an SVG?
They read it as one continuous string.
Once you add both and role=”img”, the behavior of screen readers changes. Instead of treating the element as text, screen readers treat the element as an image, and they ignore the element inside.
You must use aria-labelledby to present the text.
How do we deal with SVGs whose backgrounds depend on the color of the page being a certain color and then the user turns on Windows High Contrast Mode or some other color changer?
Windows High Contrast Mode overrides CSS colors
Use proprietary CSS media queries (Edge and Internet Explorer only)
Use JavaScript to detect user-initiated changes to colors (the changes may be at the browser level or at the operating system level)
Animated SVGs?
Use Javascript to animate rather than
The acceptable methods are either declarative, using Synchronized Multimedia Integration Language (SMIL) or Cascading Style Sheets (CSS), or through JavaScript DOM manipulation.
SMIL can be used to create both simplistic and relatively complex animations of SVGs without the use of CSS or JavaScript, but with one major downfall. Internet Explorer does not offer support for SMIL.
Rules for SVG animation-
Can’t blink > 3X second
Can’t auto-play for more than 5 seconds
Users can pause the animation
Should not distract users from main content
What must happen for interactive SVGs?
Must be keyboard accessible
Must be touch screen accessible
All mouse-only actions have a touch equivalent action.
All keyboard-only actions have a touch equivalent action.
All gesture-dependent actions have an equivalent non-gesture method to achieve the same result (this rule exists because screen readers override and disable page-specific gestures in most cases; a click action is best for touchscreens).
MUST communicate the applicable name, role, and value of controls, events, and semantic elements within the object.
Icon fonts should be given what role?
role = “img”
If there is no accompanying text, they must also have text alternative- use aria-label
DO NOT hide the icon and use a span!
What about an icon font that does not need to be recognized as an image by SRs?
The example was:
Enter your username ?
Where the ? is a question mark icon that provides more info
Put an aria-label on the Enter your username button and hide the icon.
If there is a title defined, some screen readers will announce both that and the label so this is far from perfect.
Decorative or Redundant Icon Fonts?
Hide those suckers just like with other images
Difference between using Icon Font versus SVG?
Both icon fonts and SVGs scale but
icon fonts have this:
users can change color, scale with the text when only text is magnified, work with images turned off
SVGs have this:
can be multiple colors, retain original colors when user changes font/background colors, work when styles are turned off, work with user choses fonts
Talk about the element
Renders as pixels on a page, is not scalable
Is not natively accessible to SRs
accessibility has to be added with JavaScript or ARIA on the element itself or using internal fallback content placed within the opening and closing tags.
Content in the element is not part of the DOM except for the fallback content.
Use SVG if possible instead!
True or False: “canvas” images must be assigned role=”img”
True or False: “canvas” must have alternative text
What about complex canvas like diagrams and charts?
True! Just like svgs
True! We add it with aria-describedby
Complex ones, still give it role=”img”, add aria-label or aria-labelledby for the name, then use aria-describedby for the complete description
All canvas should have background fill color!
Third party plug-ins have what WCAG rules?
The same types of accessibility rules that apply to HTML also apply to third-party software: provide alternative text for images, use semantic markup (headings, tables, etc.), ensure sufficient color contrast, and so on.
The accessibility techniques vary between software applications, and some applications have more robust accessibility APIs than others.
