Creating Accessible Web Content
Group items in a div with a role="group" and label it with an aria-labelledby attribute.
ARIA solution for labeling a group of form items (eg. radio buttons).
Perceivable
Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
No, they are not to allow for change due to evolving technologies, improvements in accessibility support, improved ideas, etc.
Are the WCAG techniques normative?
Robust
Compatible: Maximize compatibility with current and future user agents, including assistive technologies.
Perceivable
Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
Operable
Enough Time: Provide users enough time to read and use content.
Group items in a <fieldset> and label them with <legend>.
HTML solution for labeling a group of form items (eg. radio buttons).
Use aria-required="true" for screen readers. Use the HTML5 "required" attribute (the form won't submit, so it could interfere with error handling).
How do you mark required fields in a form?
Load or Reload the Page No JavaScript is needed. Ensure the page <title> reflects the content of the page AND the result of the user action. Users must be able to skip to the main content. Move the Focus When new content appears, send the focus to it (eg. a modal dialog). Elements to consider: - The container must have tabindex="-1" - The container must not be empty so the screen reader has something to read. - Use aria-live for announcements. - Sending the focus must be the last event to account for AJAX load times. It may be best to delay 1-2 seconds. ARIA Live Communicates changes without loading/reloading the page or moving the focus. Elements to consider: - The aria-live region must be present and must be empty before making an announcement. - Announcements should be brief. - Remove the announcement soon after it's inserted so the user doesn't land on it and think content has changed. - If it's not meant to be seen, hide it with CSS.
How do you notify users of changes with dynamic update, AJAX, and Single Page Apps?
WCAG 2.1 has 13 guidelines. Input Modalities is the one new guideline that was added for 2.1
How many guidelines does WCAG 2.1 have?
WCAG 2.1 added 17 success criteria.
How many new success criteria were added for WCAG 2.1?
Understandable (Users can understand how to correctly use the UI). IF THEY MISUNDERSTAND THE UI THEY WILL MAKE A MISTAKE. THEY NEED TO UNDERSTAND WHAT IS REQUIRED.
Input Assistance: Help users avoid and correct mistakes.
Operable
Input Modalities: Make it easier for users to operate functionality through various inputs beyond keyboard.
Operable
Keyboard Accessible: Make all functionality available from a keyboard.
Operable
Navigable: Provide ways to help users navigate, find content, and determine where they are.
- Time to Remediate: do quicker things first to get more done quickly. - Business Priority: Does this affect our core business process (eg. purchasing a product). - Location of Issues: Do they occur on pages with high traffic? - Volume: Does it occur repeatedly (fixing it will have a higher impact). - Impact on the Interface and Operation: If fixing the issue requires a major overhaul, it can be placed lower on the priority list. - Secondary Benefit: Will fixing the issue improve user experience in other areas?
Other than User Impact/Severity, what are some other ways to prioritize accessibility bugs? (6 items)
Understandable
Predictable: Make Web pages appear and operate in predictable ways.
What is the number of users? Is it required for completion of tasks key to our business? Is there an alternative program, system, or process that's accessible? Is there a way to provide a timely accommodation without adversely affecting the experience, opportunity, or dignity of a person with a disability?
Prioritizing WCAG Issues: Macro - How can we determine which digital systems as a whole should we engage with for remediation? (4 criteria)
Use the following data: - Analytics (page-level) - Usability testing - Experience mapping - Surveying - Diary studies/experience sampling - User feedback - Informal/anecdotal feedback
Prioritizing WCAG Issues: Meso - How can we decide which aspects/contexts of a system to focus on for review/remediation? (which processes within a site, program, course, or vended technology) (7 items)
Understandable
Readable: Make text content readable and understandable.
Operable
Seizures and Physical Reactions: Do not design content in a way that is known to cause seizures or physical reactions.
Add instructions to the legend (if they are short). Associate instructions with one of the fields using aria-describedby (typically on the first field). Place the instructions outside and before the <form> element.
Solutions for adding instructions to a group of form items (users can tab over them and aria-describedby on the <legend> doesn't work).
- Focusable elements. - Elements with semantic meaning (nav, p, etc). - Application regions (but use them sparingly)
Support for aria-label and aria-labelledby is best on:
Perceivable
Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
Perceivable
Time-based Media: Provide alternatives for time-based media.
Should provide users with a dynamic countdown feature. Should provide countdown updates (aria-live) at strategic intervals. Must not refresh or reload automatically.
What are considerations for pages with FIXED time limits? (You can't extend them).
A placeholder for AJAX content should inform users that the content is loading (don't have them land on an empty item). "Lazy loading" AJAX content should not be announce as it loads (don't overwhelm the user with aria-live announcements).
What are some considerations for AJAX content containers and for "lazy loading" AJAX content?
Interstitial views must be announced by moving the focus to the interstitial page or through an aria-live announcement.
What are some considerations for Interstitial Views (eg. "Content Loading...," popup window).
It's element must have a semantic role. In many cases, it must be a naturally focusable element. The likelihood of support is better on items that can have accessible names (like images or tables). Paragraphs, headings, list items, lists, etc. are less supported.
What are some considerations for aria-describedby?
The user must be able to reach all areas of the page: Provide a skip link or put the infinite content at the bottom. Possibly give the user the option of activating the content at their request.
What are some considerations for infinite scrolling?
Single page apps should notify users when new "pages" are loaded: - Set tabindex="-1" on the container and move the focus to it (if the focus is there already, move it away and back again so the screen reader reads it). - Announce the new content via aria-live. For AJAX, changes in focus should be delayed. The focus SHOULD be sent to a heading within the new content (treat it like the <title> on a page). The browser history MUST be updated when an AJAX event is the result of clicking on a link or if the use of the "Back" button is expected behavior.
What are some considerations for single page apps?
It MUST not be used anywhere where screen readers need to use the page navigation features. The "Document" role should be used inside if a section requires screen readers to navigate text content. Meaningful non-focusable content MUST be programmatically associated with focusable elements or made available to the screen reader in some other way. Non-focusable items SHOULD NOT be made focusable just for the sake of making them readable (this is not expected behavior). The following roles invoke the "application" role automatically: dialog, alertdialog, and tablist.
What are some considerations for the ARIA "Application" role?
Users MUST be warned before the session ends and MUST be given time to save their data and/or extend the session (eg. a popup giving users the option to save or extend with a two minute warning). Users should be warned of the duration of inactivity that could cause data loss (unless it's 20 hours or more).
What are the considerations for features with time limits?
POUR: Perceivable, Operable, Understandable, Robust
What are the four WCAG principles?
- Critical: results in blocked content. - Serious: Has serious barriers making some content inaccessible. - Moderate: Has some barriers, but doesn't prevent users from accessing the content. Needs to be resolved for the page to be considered fully compliant. - Minor: Less of an impact.
What are the levels of User Impact/Severity used to prioritize accessibility bugs? - Micro
Error/Success Summary Provide feedback either on the same page (create an error message and handle focus and aria-invalid on the form element), on a new page (place the status message in the <title> and on the page and provide a way to skip to it). Tooltips Send the focus to the first error and provide a tooltip on each input with instructions. Inline (Real-Time) Validation Appears as the user types (use aria-live for the screen reader), but not after every keystroke or on blur.
What are the three options for showing form errors to the user?
Sufficient, Failure, and Advisory
What are the three types of WCAG 2.1 techniques?
- Select pages that have the most diversified and representative data in terms of content, semantics, and structure. - Choose pages that were developed by different teams and/or individuals and compare their common elements.
What considerations should be taken when choosing entire pages for testing/evaluation?
Select at least one or two pages from all templates used, in addition to the home page (pay special attention to templates created from other templates).
What considerations should be taken when selecting parts of a template for evaluation?
It only allows you to navigate between focusable elements.
What is "Focus Mode" for screen readers?
A design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code. It seeks to create a design that achieves a simpler-but-still-usable experience for users of older browsers and devices with limited capabilities, while at the same time being a design that progresses the user experience up to a more-compelling, fully-featured experience for users of newer browsers and devices with richer capabilities.
What is Progressive Enhancement?
The Name is effectively the label for the element, explaining what it is and what it does. By default, an element's name is the text it contains. We can use aria-label and aria-labelledby to override the default name to clarify for screen readers (only use them when the default HTML is not an option).
What is an ARIA Name? When should it be used?
Every HTML element has a role (a set of features, properties, and methods of conveying info to and/or from the user). Essentially it defines what the element is, allowing the screen reader to know how to interact with it intelligently. Define roles with ARIA only when you can't use the default HTML roles.
What is an ARIA Role? When should it be used?
Values are properties and states that are communicated to screen readers.
What is an ARIA Value?
It lets the screen reader know if a whole region needs to be re-read when updated or just the change. - "false": just the change is read aloud and it can stand on it's own (default). - "true": The entire aria-live region is reread.
What is aria-atomic in an aria-live region?
It suppresses announcements while a region is updating. Should be set as "true" and updated to "false" when the update is finished.
What is aria-busy in an aria-live region?
- "all": All changes are relevant (use sparingly if at all). - "additions": Insertion of nodes to the live region are relevant, not removals. - "removals": removal of nodes to the live region are relevant. - "text": changes in textual content (including textual equivalents like alt text) are relevant.
What is aria-relevant in an aria-live region?
Marks something as a definition, but it's not well supported. Use the native html <dl>. It can only be applied to a <div> or a <span>.
What is the "Definition" role?
It designates a table of contents or other similar directory structure (whether the list items link or not).
What is the "Directory" role?
When tabbing into a text field, screen readers will switch to forms mode to allow you to type (disables screen reader shortcuts). Only focusable items and their associated labels or descriptions are read (text in a form must be associated with a focusable item).
What is the "Forms Mode" for screen readers? What is one consideration to keep in mind with "Forms Mode"?
It is used to display: MATHML.
What is the "Math" role?
It is similar to an <aside>/complementary, but it's not a landmark region and should be read in the context of the rest of the content around it.
What is the "Note" role?
It cancels the native roles of an element and turns them essentially into <div> or <span>.
What is the "Presentation" role?
You can navigate between cells with the arrow keys: - Windows: ctrl + alt+ arrow keys. - Mac: ctrl + opt + arrow keys.
What is the "Table Mode" for screen readers?
Allows developers complete freedom over the behavior of a widget, including keyboard event handlers. IT'S OFTEN NOT USED CORRECTLY AND IS BEST AVOIDED.
What is the ARIA "Application" role?
The default role for the web. Screen reader users can use the keyboard shortcuts to navigate by elements and can access all elements of the text, including the spelling of words.
What is the ARIA "Document" role?
It's the default mode. Users can read text, navigate by words, etc. They can navigate by semantic items.
What is the Document/Browse/Scan mode for screen readers?
It is equivalent to the mouse pointer functions. It can be activated with the numpad -.
What is the JAWS Cursor?
This mode is equivalent to keyboard focus mode. Users can type, access menus, etc. Items are highlighted. It can be activated with the numpad +.
What is the JAWS PC Cursor?
This is the default on web pages. It is similar to the PC cursor, but the web content is read only. It can be activated with insert + z. It can interact with text (select it, for example).
What is the JAWS Virtual PC Cursor?
Guideline: Under each principle there is a list of guidelines that address the principle. One of the key objectives of the guidelines is to ensure that content is directly accessible to as many people as possible, and capable of being re-presented in different forms to match different peoples' sensory, physical and cognitive abilities. Success Criteria: Under each guideline, there are Success Criteria that describe specifically what must be achieved in order to conform to this standard. Technique: Specific guidance for authors and evaluators on meeting the WCAG success criteria is provided in techniques, which include code examples, resources, and tests.
What is the difference between a WCAG Guideline, Success Criterion, and Technique?
- Anything that occurs across the entire site. - Anything used for navigation. - Anything used to accept payment or to commit the user to a legal contract. - Anything used during user's first interaction with the site. - Anything typically found to cause accessibility problems (images, forms, tables, frames, UI components, media). - Anything used to contact the organization. - Anything that receives a lot of traffic.
What items from a website should be given priority when determining the scope of testing? (7 items)
- Developers should be conducting automatic tests to check the code as they write it (unit tests, integration tests, and/or tools like AXE). This allows the testing phase to focus on Manual Testing and QA. - Developers should also at least test for keyboard accessibility and custom widgets with screen readers (errors that slip by can be caught in the testing phase).
What kind of accessibility considerations should take place in the Build/Creation phase of a web project?
- Developers should receive accessibility annotations based on accessibility standards and best practices the project plans to abide by (color choices, alt text, heading levels, link text, form labels, error messages, visual focus indicators, user interactions, keyboard functionality). - Testing should be considered. Those responsible should start to define the scope of the tests and develop/write them based on the defined accessibility requirements.
What kind of accessibility considerations should take place in the Planning and Design phase of a web project?
Testing can be conducted by accessibility expert team members, a QA team trained in accessibility, developers with accessibility knowledge, and/or users with disabilities. - Verify if the accessibility requirements of the project were met and validate the automatic tests run by the developers. - Run the tests that were created during the planning phase (use both automatic tools and manual testing). - Once testing is complete, report findings in such a way that even people with little accessibility knowledge can fix them.
What kind of accessibility considerations should take place in the Testing phase of a web project?
- Images (no alt attribute or low quality alt text). - Tables (only test a few of them, since devs tend to copy/paste). - Forms (all of them, unless code is duplicated). - Frames - Multimedia
What specific page content should be selected for evaluation/testing? (5 items)
Criteria for new technologies (smartphones and tablets) and for people with cognitive disabilities.
What was included in the latest WCAG update?
