This presentation will look at how to build accessible chat windows. Along the way we will explore: how they differ from traditional modals, how to manage focus, how to manage dynamically updating content for assistive technologies and more. The session is designed for developers and coders.
This document discusses making inline error messages accessible for assistive technologies like screen readers. It provides 4 methods for programmatically associating error messages with form fields: 1) wrapping the label, 2) using aria-describedby, 3) aria-labelledby, and 4) the newer aria-errormessage. It also recommends using aria-invalid to indicate the validation state and aria-live to announce changes for screen reader users. The goal is to ensure error messages are announced and read aloud as part of the form interaction for assistive technology users.
The document discusses several methods for programmatically associating inline error messages and hints with form fields to ensure they are accessible to screen reader users. It describes wrapping form fields and messages in <label> tags, using aria-describedby to link them, and aria-errormessage as recommended by WAI-ARIA. For longer hints, it suggests using pop-up tooltips but ensuring they are accessible via keyboard by only showing on focus, hover or active states. The tooltip content should be directly associated with the relevant form field for maximum accessibility.
The document discusses guidelines for making modal windows accessible. A modal window forces user interaction before allowing interaction with the main page. Key guidelines include: allowing full keyboard and screen reader navigation within the modal; informing users and screen readers when a modal opens through focus, labels, roles and descriptions; preventing interaction outside the modal; and ensuring screen readers can operate in "read" and "form" modes within modals as needed.
The document provides a 1048 word compare and contrast essay on the James Bond films Casino Royale and Quantum of Solace, both starring Daniel Craig. It summarizes the key plot points and characters of each film, comparing their openings, Bond's character traits in each, and their villains. The essay concludes that while Bond aims to stop terrorism and achieve world peace, the films are entertaining portrayals of modern technologies and situations.
FreeMind is open-source mind mapping software written in Java that can be used for projects, research, note-taking and more. It allows creating hierarchical nodes and links, customizing colors and styles, importing/exporting maps. The document provides instructions on how to use FreeMind's basic functions like creating nodes, links, and changing formatting, as well as alternatives to FreeMind.
Tails tells KO about how he learned to spin dash by visualizing Sonic at the finish line as motivation. This flashes back to Tails' first meeting with Sonic, where he was inspired to catch up to him. Tails explains how focusing solely on reaching Sonic helped him gain speed. KO then tries the technique, imagining reaching his friends as his finish line. He is able to successfully spin dash through an obstacle course, thanking Tails for the advice afterward.
Toolkit for the Digital Accessibility Space3Play Media
In this session, Jack Nicolai, Accessibility Product Manager at Adobe, will share tools, techniques, and best practices to integrate accessibility requirements into your projects. This presentation will help you create better documentation to effectively communicate accessibility requirements throughout all phases of the product development lifecycle.
The document provides an overview of the features and interface of Adobe Connect Pro, a web conferencing tool. It describes the main components participants and hosts will see, including pods for presentation, chat, attendees, and more. It also provides guidance on using features like screen sharing, breakout rooms, recording meetings, and recommendations for best practices in hosting meetings.
This document discusses making inline error messages accessible for assistive technologies like screen readers. It provides 4 methods for programmatically associating error messages with form fields: 1) wrapping the label, 2) using aria-describedby, 3) aria-labelledby, and 4) the newer aria-errormessage. It also recommends using aria-invalid to indicate the validation state and aria-live to announce changes for screen reader users. The goal is to ensure error messages are announced and read aloud as part of the form interaction for assistive technology users.
The document discusses several methods for programmatically associating inline error messages and hints with form fields to ensure they are accessible to screen reader users. It describes wrapping form fields and messages in <label> tags, using aria-describedby to link them, and aria-errormessage as recommended by WAI-ARIA. For longer hints, it suggests using pop-up tooltips but ensuring they are accessible via keyboard by only showing on focus, hover or active states. The tooltip content should be directly associated with the relevant form field for maximum accessibility.
The document discusses guidelines for making modal windows accessible. A modal window forces user interaction before allowing interaction with the main page. Key guidelines include: allowing full keyboard and screen reader navigation within the modal; informing users and screen readers when a modal opens through focus, labels, roles and descriptions; preventing interaction outside the modal; and ensuring screen readers can operate in "read" and "form" modes within modals as needed.
The document provides a 1048 word compare and contrast essay on the James Bond films Casino Royale and Quantum of Solace, both starring Daniel Craig. It summarizes the key plot points and characters of each film, comparing their openings, Bond's character traits in each, and their villains. The essay concludes that while Bond aims to stop terrorism and achieve world peace, the films are entertaining portrayals of modern technologies and situations.
FreeMind is open-source mind mapping software written in Java that can be used for projects, research, note-taking and more. It allows creating hierarchical nodes and links, customizing colors and styles, importing/exporting maps. The document provides instructions on how to use FreeMind's basic functions like creating nodes, links, and changing formatting, as well as alternatives to FreeMind.
Tails tells KO about how he learned to spin dash by visualizing Sonic at the finish line as motivation. This flashes back to Tails' first meeting with Sonic, where he was inspired to catch up to him. Tails explains how focusing solely on reaching Sonic helped him gain speed. KO then tries the technique, imagining reaching his friends as his finish line. He is able to successfully spin dash through an obstacle course, thanking Tails for the advice afterward.
Toolkit for the Digital Accessibility Space3Play Media
In this session, Jack Nicolai, Accessibility Product Manager at Adobe, will share tools, techniques, and best practices to integrate accessibility requirements into your projects. This presentation will help you create better documentation to effectively communicate accessibility requirements throughout all phases of the product development lifecycle.
The document provides an overview of the features and interface of Adobe Connect Pro, a web conferencing tool. It describes the main components participants and hosts will see, including pods for presentation, chat, attendees, and more. It also provides guidance on using features like screen sharing, breakout rooms, recording meetings, and recommendations for best practices in hosting meetings.
Help Scout provides chat support features for customer support teams. These include:
- Chat notifications that alert agents when a new chat request comes in. Agents can accept chats by clicking on them or starting to type a response.
- Options to view a visitor's website activity prior to the chat and integrate Masterkey for additional visitor details.
- A chat menu accessed with "/" that includes options like saving transcripts.
- Ability to assign chats to other available agents, with assignment counts displayed. Only one agent can be assigned at a time.
- Private note feature for adding internal notes during a chat without the customer seeing.
This document provides information about Google Meet, including how to access it through various platforms like smartphones, Google Chrome, Google Calendar, Gmail, and Google Classroom. It also describes the key parts and controls of Google Meet like the meeting code, microphone/camera buttons, presentation sharing features, tile views for multiple participants, and disabling third-party extensions. The document concludes with mentioning a Q&A session on Facebook Live and Google Meet with outputs captured on Padlet.
1. To start using join.me, go to the website and click to accept the invitation email. This allows you to set up your password and personalize your meeting with a link and background.
2. Once set up, you can start sharing your screen with up to 250 people per meeting from a browser, desktop app, or scheduler. Others join by entering the provided code or link in their browser or app.
3. Basic features include sharing your entire screen or specific windows, switching monitors, removing participants, and ending the meeting. Pro subscriptions allow additional options like window sharing and sharing control.
This document provides an overview of the participant and host views in Adobe Acrobat Connect Pro 2008. It describes the various pods/sections that users see, including the presentation pod, chat pod, file share pod, and attendee pod. It also covers features like recording sessions, using breakout rooms, sharing screens, and adjusting audio and microphone settings. The document is intended as a guide for both hosts and participants on navigating and making use of the different tools available in an Acrobat Connect session.
The document provides instructions for using various features in Blackboard Collaborate, including how to send text messages, troubleshoot audio, use built-in or telephone audio, and access session settings. It also includes an agenda for a training on engaging virtual learners using tools like the timer, breakout groups, polling, and accessibility features. The training materials include activities, quizzes, and guides for using the reporting tools to view session attendance and metrics.
This document provides instructions for WebsiteAlive operators to log in, engage with visitors, and use various features like hotkeys. Operators can log in through the website, desktop apps, browser extensions, or mobile apps. The guide covers taking chats, toggling online/away status, viewing chat history, using screen sharing and private/public chat. Hotkeys allow sending pre-written responses and are organized in categories that operators can create, edit and add hotkeys to.
This document provides instructions for operators to log in to the WebsiteAlive platform, engage with website visitors, and use various features like toggling between online and away modes, taking chats, viewing chat history, using screen sharing, sending hotkeys, and managing hotkey categories and keys. Operators can log in through the website, desktop and mobile apps, and log out. The platform allows operators to chat privately or publicly with visitors and other operators.
Support panel desktop user guide ver 4.5ActiveHelper
The document provides a 9-section user guide for the Support Panel Console Multi-Platform. It summarizes the key features and functions of the support panel software, including how to sign in, use the main toolbar, view visitor tracking, accept and transfer visitors, communicate via chat windows, view visitor profiles and transcripts, access offline messages, and manage pre-typed messages.
The document provides an overview of the key features and functionality of the Support Panel Console Multi-Platform user guide. It describes 10 main sections: 1) Signing in, 2) the main toolbar, 3) tracking visitors, 4) the agent and visitor tree view, 5) the chat window, 6) visitor information, 7) transcriptions, 8) offline messages, 9) pre-typed messages, and 10) configuration options. The Support Panel allows agents to manage chat sessions, track
The document describes the current interface of the website Twitlonger.com, which allows users to write tweets longer than Twitter's 140 character limit. It analyzes each page of the site and finds the design to be too simple and lacking identity across pages. A survey of users found the navigation could be improved. The author will redesign the site based on user feedback, with ideas like customizable backgrounds, consolidated account access, and visual elements to represent writing.
For my portfolio. Apparently the portal from school doesnt allow us to upload ppt files, which is REALLY weird, so I have no choice but to use this. =/
Creating accessible modals and autocompletesRuss Weakley
In this two-part presentation, Russ will guide us on a deep dive into how to create accessible modals and accessible autocomplete search functions. Along the way, we will look at the problem for different types of users as well as explore how ARIA can be used to improve these experiences. There will be blood, sweat and tears (Russ' words!) but hopefully a happy outcome for all.
Presentation for the Sydney Web Accessibility & Inclusive Design - 30 August 2019
We interact with websites, applications, and devices. Our productivity depends on the robustness, speed, load tolerance, connectivity… things that we all measure and monitor. Turn your back on these for half an hour, face the soft factor of messaging, and learn how to boost the performance of your product.
Dimiter Simov discusses improving error messages and notifications by following best practices. He recommends:
1) Avoiding messages whenever possible by designing better interactions.
2) If a message is needed, make sure it clearly states who is showing it, what happened, why it happened, and what the user can do.
3) Keeping messages short but complete, framed positively, and easy to understand for users who just want to complete their task.
4) Testing messages with real users to identify issues before widespread release.
The overall goal is to design systems that minimize disruptions and explain issues helpfully, so users can complete their work instead of struggling with unclear notifications.
Front End Frameworks - are they accessibleRuss Weakley
Frameworks like Bootstrap provide accessibility benefits but also risks if not implemented correctly. Common issues include non-semantic elements styled as buttons or headings, confusing screen reader users. Frameworks also may not fully explain interactive elements like dropdowns and modals. Developers must understand fundamentals of accessibility and not rely solely on frameworks being accessible "out of the box".
This document provides an overview of the basic features and functions of the Zoom online meeting platform. It explains how to access features like full screen view, gallery view vs speaker view, microphone and video controls, chat, reactions, screen sharing, and how to end a Zoom session. The summary highlights that the document introduces Zoom's main toolbar, viewing options, audio/video controls, chat, reactions, screen sharing, and how participants can join and exit meetings.
PowerPoint Presentation NetMeeting 3.X and MessengerVideoguy
The document provides information on using NetMeeting and MSN Messenger to conduct online meetings and communicate via instant messaging. It describes how to host and join meetings on NetMeeting, conduct chat sessions, use the whiteboard, share programs and desktops, and request control of shared items. It also outlines features of MSN Messenger like seeing who is online, exchanging instant messages, voice and video calls, file sharing, using the whiteboard, and organizing contacts into groups. The presentation was provided by Microsoft employee Todd Whitlock and includes links to additional resources.
This document provides instructions for using the basic features of a Lenovo K50a40 phone. It describes how to navigate the home screen, manage apps and widgets, change settings like date/time and language, use the camera, browse the internet, and more. Safety information is also provided at the end regarding proper handling, charging, and repairs.
A guideline for using hangouts on air for company collaborationMars Cyrillo
companies are usually scared about using these new tools inside their environments.
at CI&T we've been trying HOAs with great success so I decided to put together this quick guide.
The document provides steps for using the Zoho ShowTime presentation platform, which allows teachers to give interactive presentations that engage students. It explains how to set up a Zoho account, install the ShowTime plugin in PowerPoint, sync and share presentations, view audience engagement data, conduct polls, and use features like slide tools and chat. The goal of using ShowTime is to make presentations more conversational and enable two-way interaction between presenters and students.
This presentation for AllyCamp 2020, looks at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There is also a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
Help Scout provides chat support features for customer support teams. These include:
- Chat notifications that alert agents when a new chat request comes in. Agents can accept chats by clicking on them or starting to type a response.
- Options to view a visitor's website activity prior to the chat and integrate Masterkey for additional visitor details.
- A chat menu accessed with "/" that includes options like saving transcripts.
- Ability to assign chats to other available agents, with assignment counts displayed. Only one agent can be assigned at a time.
- Private note feature for adding internal notes during a chat without the customer seeing.
This document provides information about Google Meet, including how to access it through various platforms like smartphones, Google Chrome, Google Calendar, Gmail, and Google Classroom. It also describes the key parts and controls of Google Meet like the meeting code, microphone/camera buttons, presentation sharing features, tile views for multiple participants, and disabling third-party extensions. The document concludes with mentioning a Q&A session on Facebook Live and Google Meet with outputs captured on Padlet.
1. To start using join.me, go to the website and click to accept the invitation email. This allows you to set up your password and personalize your meeting with a link and background.
2. Once set up, you can start sharing your screen with up to 250 people per meeting from a browser, desktop app, or scheduler. Others join by entering the provided code or link in their browser or app.
3. Basic features include sharing your entire screen or specific windows, switching monitors, removing participants, and ending the meeting. Pro subscriptions allow additional options like window sharing and sharing control.
This document provides an overview of the participant and host views in Adobe Acrobat Connect Pro 2008. It describes the various pods/sections that users see, including the presentation pod, chat pod, file share pod, and attendee pod. It also covers features like recording sessions, using breakout rooms, sharing screens, and adjusting audio and microphone settings. The document is intended as a guide for both hosts and participants on navigating and making use of the different tools available in an Acrobat Connect session.
The document provides instructions for using various features in Blackboard Collaborate, including how to send text messages, troubleshoot audio, use built-in or telephone audio, and access session settings. It also includes an agenda for a training on engaging virtual learners using tools like the timer, breakout groups, polling, and accessibility features. The training materials include activities, quizzes, and guides for using the reporting tools to view session attendance and metrics.
This document provides instructions for WebsiteAlive operators to log in, engage with visitors, and use various features like hotkeys. Operators can log in through the website, desktop apps, browser extensions, or mobile apps. The guide covers taking chats, toggling online/away status, viewing chat history, using screen sharing and private/public chat. Hotkeys allow sending pre-written responses and are organized in categories that operators can create, edit and add hotkeys to.
This document provides instructions for operators to log in to the WebsiteAlive platform, engage with website visitors, and use various features like toggling between online and away modes, taking chats, viewing chat history, using screen sharing, sending hotkeys, and managing hotkey categories and keys. Operators can log in through the website, desktop and mobile apps, and log out. The platform allows operators to chat privately or publicly with visitors and other operators.
Support panel desktop user guide ver 4.5ActiveHelper
The document provides a 9-section user guide for the Support Panel Console Multi-Platform. It summarizes the key features and functions of the support panel software, including how to sign in, use the main toolbar, view visitor tracking, accept and transfer visitors, communicate via chat windows, view visitor profiles and transcripts, access offline messages, and manage pre-typed messages.
The document provides an overview of the key features and functionality of the Support Panel Console Multi-Platform user guide. It describes 10 main sections: 1) Signing in, 2) the main toolbar, 3) tracking visitors, 4) the agent and visitor tree view, 5) the chat window, 6) visitor information, 7) transcriptions, 8) offline messages, 9) pre-typed messages, and 10) configuration options. The Support Panel allows agents to manage chat sessions, track
The document describes the current interface of the website Twitlonger.com, which allows users to write tweets longer than Twitter's 140 character limit. It analyzes each page of the site and finds the design to be too simple and lacking identity across pages. A survey of users found the navigation could be improved. The author will redesign the site based on user feedback, with ideas like customizable backgrounds, consolidated account access, and visual elements to represent writing.
For my portfolio. Apparently the portal from school doesnt allow us to upload ppt files, which is REALLY weird, so I have no choice but to use this. =/
Creating accessible modals and autocompletesRuss Weakley
In this two-part presentation, Russ will guide us on a deep dive into how to create accessible modals and accessible autocomplete search functions. Along the way, we will look at the problem for different types of users as well as explore how ARIA can be used to improve these experiences. There will be blood, sweat and tears (Russ' words!) but hopefully a happy outcome for all.
Presentation for the Sydney Web Accessibility & Inclusive Design - 30 August 2019
We interact with websites, applications, and devices. Our productivity depends on the robustness, speed, load tolerance, connectivity… things that we all measure and monitor. Turn your back on these for half an hour, face the soft factor of messaging, and learn how to boost the performance of your product.
Dimiter Simov discusses improving error messages and notifications by following best practices. He recommends:
1) Avoiding messages whenever possible by designing better interactions.
2) If a message is needed, make sure it clearly states who is showing it, what happened, why it happened, and what the user can do.
3) Keeping messages short but complete, framed positively, and easy to understand for users who just want to complete their task.
4) Testing messages with real users to identify issues before widespread release.
The overall goal is to design systems that minimize disruptions and explain issues helpfully, so users can complete their work instead of struggling with unclear notifications.
Front End Frameworks - are they accessibleRuss Weakley
Frameworks like Bootstrap provide accessibility benefits but also risks if not implemented correctly. Common issues include non-semantic elements styled as buttons or headings, confusing screen reader users. Frameworks also may not fully explain interactive elements like dropdowns and modals. Developers must understand fundamentals of accessibility and not rely solely on frameworks being accessible "out of the box".
This document provides an overview of the basic features and functions of the Zoom online meeting platform. It explains how to access features like full screen view, gallery view vs speaker view, microphone and video controls, chat, reactions, screen sharing, and how to end a Zoom session. The summary highlights that the document introduces Zoom's main toolbar, viewing options, audio/video controls, chat, reactions, screen sharing, and how participants can join and exit meetings.
PowerPoint Presentation NetMeeting 3.X and MessengerVideoguy
The document provides information on using NetMeeting and MSN Messenger to conduct online meetings and communicate via instant messaging. It describes how to host and join meetings on NetMeeting, conduct chat sessions, use the whiteboard, share programs and desktops, and request control of shared items. It also outlines features of MSN Messenger like seeing who is online, exchanging instant messages, voice and video calls, file sharing, using the whiteboard, and organizing contacts into groups. The presentation was provided by Microsoft employee Todd Whitlock and includes links to additional resources.
This document provides instructions for using the basic features of a Lenovo K50a40 phone. It describes how to navigate the home screen, manage apps and widgets, change settings like date/time and language, use the camera, browse the internet, and more. Safety information is also provided at the end regarding proper handling, charging, and repairs.
A guideline for using hangouts on air for company collaborationMars Cyrillo
companies are usually scared about using these new tools inside their environments.
at CI&T we've been trying HOAs with great success so I decided to put together this quick guide.
The document provides steps for using the Zoho ShowTime presentation platform, which allows teachers to give interactive presentations that engage students. It explains how to set up a Zoho account, install the ShowTime plugin in PowerPoint, sync and share presentations, view audience engagement data, conduct polls, and use features like slide tools and chat. The goal of using ShowTime is to make presentations more conversational and enable two-way interaction between presenters and students.
This presentation for AllyCamp 2020, looks at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There is also a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
What are accessible names and why should you care?Russ Weakley
This presentation will look at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There will be a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
This presentation was fro the AllyBtyes event on 21 May 2020. The presentations looks at a pattern for building or reviewing any new UI component – semantics, focusable, keyboard interaction, visible states, accessible name and relationships.
What is WCAG 2 and why should we care?Russ Weakley
A presentation for IAG staff for the "Future is here" event on 6 May 20202. This presentation covers three topics - "What are our legal responsibilities around accessibility?", "What is WCAG?", and "What is inclusive design?"
The document discusses user interface states and provides examples of how states can be systematically defined across different UI components. It defines what states are and provides examples like visited, focus, hover, active, disabled, invalid, checked/selected states. It emphasizes the importance of defining states for all interactive elements, including custom elements, to ensure usability. It also stresses the importance of maintaining consistent state styling across a design system through the use of a state table that defines how each state should appear for different common UI elements like links, buttons, forms, tabs etc. This helps establish visual consistency and maintainability.
Building an accessible progressive loaderRuss Weakley
This presentation for A11y Bytes May 2019, takes you through how to mark up a progress loader using the progress element. Then, eight tips for making the progress loader accessible.
Accessibility in Design systems - the pain and gloryRuss Weakley
Slides from CodeHeart Design 2018: Building a design system is a painful enough, but how do you add accessibility into the mix? Is it an "up-at-dawn, pride-swallowing siege", or can it become part of the normal work flow. We'll look at accessibility for different roles - such as UX, UI and devs, as well as where accessibility should be injected into the process.
This presentation covers; different types of disabilities, assistive technologies, legal and ethical responsibilities as well as a range of terms such as W3C, WAI and WCAG.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
Building an accessible auto-complete - #ID24Russ Weakley
This presentation will take a deep dive into how to create an auto-complete search function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
The document provides guidance on creating accessible autocomplete search functionality. It discusses user experience considerations like clear labeling and instructions. It also covers keyboard support, ensuring all actions can be performed via keyboard. The document outlines how to add appropriate markup for screen readers, including labels, roles, properties to describe interactions and options. Code examples are provided for the overall structure and specific elements.
This presentation for Inclusive Design 24 (#ID24) explores how to create accessible, usable "floating" labels. Floating labels are where the label moves above form controls based on user interaction.
Creating a Simple, Accessible On/Off SwitchRuss Weakley
Have you ever tried to style checkboxes or radio buttons and ended up pulling your hair out? This presentation will explore a few simple tricks that can be used to style checkboxes and radio buttons. In this case, we will make them look like an on/off switch.
Accessible custom radio buttons and checkboxesRuss Weakley
Creating custom-designed radio buttons and checkboxes has never been easy. Many developers have found ways of hacking these elements using CSS and JavaScript. but can they also be accessible. The answer is yes, with a little extra effort. This presentation will walk through some simple examples to show how radio buttons and checkboxes can be semantic as well as keyboard/screen-reader accessible.
At first glance, CSS line-height seems very simple, but there is a lot going on below the surface. Line-height is important for any designer or front end developer to understand as it can impact almost every aspect of our layouts.
This talk will look at a range of common application components and how they can be made accessible - quickly and easily - for all users. We'll look at how to notify users when changing the DOM after page load. We will also look in-depth at accessible form validation, modal windows and adding additional information for screen reader users.
Building accessible web components without tearsRuss Weakley
Slides from #Respond16, Sydney Melbourne 2016
So, you've built an amazing new web application. It uses all the latest frameworks and libraries. It's beautiful to behold.
But is it accessible? Many web applications these days are built on top of pre-existing frameworks or code bases and there is little thought to how well these components will work for different assistive devices.
This talk will look at a range of common application components and how they can be made accessible - quickly and easily - for all users. We'll look at how to notify users when changing the DOM after page load. We will also look in-depth at accessible form validation, modal windows, drop-down menus, in-page tabs and other commonly used we components. You will leave this talk ready and eager to enhance your application, and in the process, make it available to entirely new audiences.
বাংলাদেশের অর্থনৈতিক সমীক্ষা ২০২৪ [Bangladesh Economic Review 2024 Bangla.pdf] কম্পিউটার , ট্যাব ও স্মার্ট ফোন ভার্সন সহ সম্পূর্ণ বাংলা ই-বুক বা pdf বই " সুচিপত্র ...বুকমার্ক মেনু 🔖 ও হাইপার লিংক মেনু 📝👆 যুক্ত ..
আমাদের সবার জন্য খুব খুব গুরুত্বপূর্ণ একটি বই ..বিসিএস, ব্যাংক, ইউনিভার্সিটি ভর্তি ও যে কোন প্রতিযোগিতা মূলক পরীক্ষার জন্য এর খুব ইম্পরট্যান্ট একটি বিষয় ...তাছাড়া বাংলাদেশের সাম্প্রতিক যে কোন ডাটা বা তথ্য এই বইতে পাবেন ...
তাই একজন নাগরিক হিসাবে এই তথ্য গুলো আপনার জানা প্রয়োজন ...।
বিসিএস ও ব্যাংক এর লিখিত পরীক্ষা ...+এছাড়া মাধ্যমিক ও উচ্চমাধ্যমিকের স্টুডেন্টদের জন্য অনেক কাজে আসবে ...
Chapter wise All Notes of First year Basic Civil Engineering.pptxDenish Jangid
Chapter wise All Notes of First year Basic Civil Engineering
Syllabus
Chapter-1
Introduction to objective, scope and outcome the subject
Chapter 2
Introduction: Scope and Specialization of Civil Engineering, Role of civil Engineer in Society, Impact of infrastructural development on economy of country.
Chapter 3
Surveying: Object Principles & Types of Surveying; Site Plans, Plans & Maps; Scales & Unit of different Measurements.
Linear Measurements: Instruments used. Linear Measurement by Tape, Ranging out Survey Lines and overcoming Obstructions; Measurements on sloping ground; Tape corrections, conventional symbols. Angular Measurements: Instruments used; Introduction to Compass Surveying, Bearings and Longitude & Latitude of a Line, Introduction to total station.
Levelling: Instrument used Object of levelling, Methods of levelling in brief, and Contour maps.
Chapter 4
Buildings: Selection of site for Buildings, Layout of Building Plan, Types of buildings, Plinth area, carpet area, floor space index, Introduction to building byelaws, concept of sun light & ventilation. Components of Buildings & their functions, Basic concept of R.C.C., Introduction to types of foundation
Chapter 5
Transportation: Introduction to Transportation Engineering; Traffic and Road Safety: Types and Characteristics of Various Modes of Transportation; Various Road Traffic Signs, Causes of Accidents and Road Safety Measures.
Chapter 6
Environmental Engineering: Environmental Pollution, Environmental Acts and Regulations, Functional Concepts of Ecology, Basics of Species, Biodiversity, Ecosystem, Hydrological Cycle; Chemical Cycles: Carbon, Nitrogen & Phosphorus; Energy Flow in Ecosystems.
Water Pollution: Water Quality standards, Introduction to Treatment & Disposal of Waste Water. Reuse and Saving of Water, Rain Water Harvesting. Solid Waste Management: Classification of Solid Waste, Collection, Transportation and Disposal of Solid. Recycling of Solid Waste: Energy Recovery, Sanitary Landfill, On-Site Sanitation. Air & Noise Pollution: Primary and Secondary air pollutants, Harmful effects of Air Pollution, Control of Air Pollution. . Noise Pollution Harmful Effects of noise pollution, control of noise pollution, Global warming & Climate Change, Ozone depletion, Greenhouse effect
Text Books:
1. Palancharmy, Basic Civil Engineering, McGraw Hill publishers.
2. Satheesh Gopi, Basic Civil Engineering, Pearson Publishers.
3. Ketki Rangwala Dalal, Essentials of Civil Engineering, Charotar Publishing House.
4. BCP, Surveying volume 1
A review of the growth of the Israel Genealogy Research Association Database Collection for the last 12 months. Our collection is now passed the 3 million mark and still growing. See which archives have contributed the most. See the different types of records we have, and which years have had records added. You can also see what we have for the future.
Strategies for Effective Upskilling is a presentation by Chinwendu Peace in a Your Skill Boost Masterclass organisation by the Excellence Foundation for South Sudan on 08th and 09th June 2024 from 1 PM to 3 PM on each day.
This document provides an overview of wound healing, its functions, stages, mechanisms, factors affecting it, and complications.
A wound is a break in the integrity of the skin or tissues, which may be associated with disruption of the structure and function.
Healing is the body’s response to injury in an attempt to restore normal structure and functions.
Healing can occur in two ways: Regeneration and Repair
There are 4 phases of wound healing: hemostasis, inflammation, proliferation, and remodeling. This document also describes the mechanism of wound healing. Factors that affect healing include infection, uncontrolled diabetes, poor nutrition, age, anemia, the presence of foreign bodies, etc.
Complications of wound healing like infection, hyperpigmentation of scar, contractures, and keloid formation.
Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...Diana Rendina
Librarians are leading the way in creating future-ready citizens – now we need to update our spaces to match. In this session, attendees will get inspiration for transforming their library spaces. You’ll learn how to survey students and patrons, create a focus group, and use design thinking to brainstorm ideas for your space. We’ll discuss budget friendly ways to change your space as well as how to find funding. No matter where you’re at, you’ll find ideas for reimagining your space in this session.
This slide is special for master students (MIBS & MIFB) in UUM. Also useful for readers who are interested in the topic of contemporary Islamic banking.
How to Manage Your Lost Opportunities in Odoo 17 CRMCeline George
Odoo 17 CRM allows us to track why we lose sales opportunities with "Lost Reasons." This helps analyze our sales process and identify areas for improvement. Here's how to configure lost reasons in Odoo 17 CRM
A workshop hosted by the South African Journal of Science aimed at postgraduate students and early career researchers with little or no experience in writing and publishing journal articles.
32. Welcome to live chat
Type your message here…
Chat window
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
33. Welcome to live chat
Type your message here…
Chat title
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
34. Welcome to live chat
Hi!
How may I help you?
Type your message here…
Can I ask about costs?
Close button
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
35. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Optional collapse button
Message:
36. Welcome to live chat
Type your message here…
Conversation window
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
37. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Operator name and time
Operator messages
Message:
38. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm User name and time
User message
Message:
39. Welcome to live chat
Type your message here…
Form label
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
40. Welcome to live chat
Type your message here…
Form input
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
41. Welcome to live chat
Type your message here… Submit button
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
42. Welcome to live chat
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Type your message here…
Optional add attachments
Message:
59. We’ll now look at how chat
windows can affect four different
people.
60. These example user pro
fi
les are
taken from the Gov.UK disabilities
and impairments user pro
fi
les.
https://www.gov.uk/government/publications/
understanding-disabilities-and-impairments-user-pro
fi
les
62. Claudia is a person who is partially
sighted. She uses a screen magni
fi
er
so that she can enlarge the overall
display.
63. Claudia has her magni
fi
cation set to
an extreme setting, which means she
can only see a small section of the
screen at a time.
64. Problem 1:
If Claudia triggers the <button> and
focus doesn’t shift to the chat
window, she may not be aware that
the chat window has been activated.
65. Problem 2:
Claudia may not see messages from
the operator if actions take place
off-screen.
66. Things to consider:
For Claudia, proximity is the key. If
she triggers an action, the result
should appear in close proximity to
the trigger.
68. Christopher is a person with
rheumatoid arthritis. He prefers to
use a keyboard to avoid mouse
movements which can impact his
condition.
69. Problem 1:
If the <button> is one of the last
items in tabindex order, it may take
many keystrokes for Christoper to
navigate to this element.
70. Problem 2:
If focus doesn’t shift from the
<button> to the chat window when
it has been triggered, Christopher
may not be able to interact with the
chat window at all.
71. Problem 3:
If interactive functions within the
chat window are not accessible via
keystrokes, Christopher will not be
able to interact with them.
72. Things to consider 1:
Christopher should be able to bypass
blocks of content to access the chat
window trigger.
73. Things to consider 2:
All interactive elements in the chat
window must be completely
keyboard accessible without a
mouse.
74. Things to consider 3:
Focus must be visible on every
focusable element so that
Christopher can track what is
currently in focus.
76. Ashleigh is a person who is legally
blind. She uses a screen reader to
navigate websites.
77. Ashleigh is also a keyboard-only
user, as she does not use a mouse. So,
many of the issues mentioned for
Christopher also apply to Ashleigh.
78. Problem 1:
Ashleigh needs to know that the page
contains a chat function. Otherwise,
she may not even know that it exists.
79. Problem 2:
The purpose of the <button> needs
to be clearly de
fi
ned. For example, if
it just says “Chat”, this may not
provide enough context for Ashleigh.
80. Problem 3:
When focus shifts to the chat
window, Ashleigh may not know
what has happened. All she knows is
that focus has shifted somewhere
else on the page.
81. Problem 4:
If interactive elements within the
chat window don’t have clear labels,
Ashleigh may not understand their
purpose.
82. Problem 5:
If the operator submitting a new
message, Ashleigh may not be
informed that this has occurred.
83. Problem 6:
If Ashleigh closes the chat window
and focus does not return to the
<button>, Ashleigh may become
disorientated within the overall page.
84. Things to consider 1:
Ashleigh should be informed that the
page contains a chat function. And
she should be able to bypass blocks
of content to access the chat
window trigger.
85. Things to consider 2:
The <button> needs to have a label
that is meaningful for Ashleigh.
86. Things to consider 3:
When the chat window receives
focus, its name and role need to be
announced so that Ashleigh
understands its purpose.
87. Things to consider 4:
All interactive elements needs to
have clear labels so that Ashleigh
understands their purpose.
88. Things to consider 5:
Ashleigh needs to be informed about
all dynamic changes within the chat
window - such as newly added
messages from the operator.
89. Things to consider 6:
When the chat window is closed,
focus needs to return to the
<button> so Ashleigh can orientate
herself within the overall page.
102. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
"chat"
104. The container for the heading and
“Close” button can be given a class
name of "chat-header".
105. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
"chat-header"
107. The container for the messages
can be given a class name of
"chat-content".
108. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
"chat-content"
110. The container for the label, user
input and submit button can be
given a class name of "chat-
submission".
111. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
"chat-submission"
114. The overall container needs to be
given a role so that assistive
technology users understand its
purpose.
115. As there is no speci
fi
c role for
chat windows, we could use
role="group".
116. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
role="group"
130. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
role="log"
138. <div class="chat-content" role="log">
<ul>
<li class="chat-message-operator">
<span class="chat-details">Sandy at 2:15pm</span>
<span>How can I help you?</span>
</li>
<li class="chat-message-user">
<span class="chat-details">You at 2:17pm</span>
<span>What does it cost?</span>
</li>
</ul>
</div>
139. <div class="chat-content" role="log">
<ul>
<li class="chat-message-operator">
<span class="chat-details">Sandy at 2:15pm</span>
<span>How can I help you?</span>
</li>
<li class="chat-message-user">
<span class="chat-details">You at 2:17pm</span>
<span>What does it cost?</span>
</li>
</ul>
</div>
142. Welcome to live chat
Type your message here…
Hi!
How may I help you?
Can I ask about costs?
Sandy at 2:15pm
Sandy at 2:15pm
You at 2:17pm
Message:
form