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.
Presentation for A11yCamp Melbounre 2018. It all seems so easy, adding a hint or an error to a form field. But what happens when you’re suddenly asked to add pop-up tool tips? Or, even worse, additional information as modals? This presentation will take you through the highs and lows of tool tips and error messages. Along the way, we’ll look at some new ARIA 1.1 attributes like aria-errormessage.
The Figma prototyping hacks will be covering best practices and tips needed to get the best out of prototyping. Some of these can be simple prototyping hacks that when combined with other hacks will create a complex transition or interaction. The hacks can be random and do not have to be sequentially related.
This presentation explores the requirements, roles, and responsibilities of Agile teams working on delivering an accessible digital product, platform or service.
1. What is web accessibility?
2. Why is accessibility important?
• Current global statistics
• Reasons for testing
• Diversity of digital users
• Drivers for accessibility
3. Diverse user experiences
• Examples of assistive technologies
4. Guidelines and standards
• W3C accessibility guidelines
5. Accessibility & Agile
• Accessibility responsibilities in Agile
- Product Owners
- Developers
- Designers
- Content authors
- Testers
• Agile ceremonies
- Sprint planning
- Daily stand-up
- Iteration review
- Retrospective
6. Content examples
7. Case studies
8. What can I do next?
• Challenges to overcome
• How to do it
• Accessibility resources
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
Presentation for A11yCamp Melbounre 2018. It all seems so easy, adding a hint or an error to a form field. But what happens when you’re suddenly asked to add pop-up tool tips? Or, even worse, additional information as modals? This presentation will take you through the highs and lows of tool tips and error messages. Along the way, we’ll look at some new ARIA 1.1 attributes like aria-errormessage.
The Figma prototyping hacks will be covering best practices and tips needed to get the best out of prototyping. Some of these can be simple prototyping hacks that when combined with other hacks will create a complex transition or interaction. The hacks can be random and do not have to be sequentially related.
This presentation explores the requirements, roles, and responsibilities of Agile teams working on delivering an accessible digital product, platform or service.
1. What is web accessibility?
2. Why is accessibility important?
• Current global statistics
• Reasons for testing
• Diversity of digital users
• Drivers for accessibility
3. Diverse user experiences
• Examples of assistive technologies
4. Guidelines and standards
• W3C accessibility guidelines
5. Accessibility & Agile
• Accessibility responsibilities in Agile
- Product Owners
- Developers
- Designers
- Content authors
- Testers
• Agile ceremonies
- Sprint planning
- Daily stand-up
- Iteration review
- Retrospective
6. Content examples
7. Case studies
8. What can I do next?
• Challenges to overcome
• How to do it
• Accessibility resources
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
Web Accessibility: A Shared ResponsibilityJoseph Dolson
This a presentation prepared for a Montana Web Developer's Meetup in December, 2011. The focus is on collaborating with content providers and employers to share the responsibility for web accessibility.
Accessibility is not a rare edge case, it is something that concerns all of us. This is an introduction to Web Accessibility for Web Developers, in context of the German BITV and the international WAI Guidelines (mostly WCAG 2.0). It should raise general awareness of accessibility for Web Development, and shows that accessibility is not an extreme hard to implement requirement, but a matter of care and common sense.
The terms UI and UX (design) are very often and
used as a single term by many people or designers.
The first thing we need to know straight is that UI
and UX are not the same.
Design is a rather broad and huge term. When
someone says “I’m a designer,” it is not that clear
what they actually do. There are a number of
different responsibilities term designer. There are
many aspects of design now a days.
System users often judge a system by its interface rather than its functionality
A poorly designed interface can cause a user to make catastrophic errors
비행기 설계를 왜 통일 해야 할까?
디자인 시스템을 하는 이유
비행기들이 다 용도가 다르다...어떻게 설계하지?
맥락이 다른 페이지와 패턴
경유지까지 아직 멀었다... 언제 수리하지?
디자인 시스템을 적용하는 시점
엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지?
디자인 시스템을 적용하는 프로세스
비행기 설계가 바뀐걸 어떻게 알리지?
디자인 시스템의 전파
AEM Best Practices for Component DevelopmentGabriel Walt
This presentation describes how to easily get started with an efficient development workflow with Adobe Experience Manager 6.1.
The tools and technologies presented are:
* Project Archetype – https://github.com/Adobe-Marketing-Cloud/aem-project-archetype
* AEM Eclipse Extension – https://docs.adobe.com/docs/en/dev-tools/aem-eclipse.html
* AEM Brackets Extension – https://docs.adobe.com/docs/en/dev-tools/aem-brackets.html
* Sightly Template Language – http://www.slideshare.net/GabrielWalt/component-development
* Sightly REPL Tool – https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl
* Sightly TodoMVC Example – https://github.com/Adobe-Marketing-Cloud/aem-sightly-sample-todomvc
Design Systems have reached peak popularity. It seems that every design team has either built one, is building one, or wants to build one. With the release of the incredible Nested Symbols feature followed by Sketch Libraries just a few months ago, Sketch has emerged as an essential part of the Design System workflow.
In this talk we will be covering:
• Best of breed Design Systems out in the wild
• Demo of the Design System from FathomHQ
• Exploring essential Sketch plugins & tools for a seamless workflow
• Handy hacks for getting your Design System project rolling
• Roll out strategies for Design Systems
About Laura
Laura is a Senior Product Designer at Fathom, a B2B SaaS product in the fintech domain. Over the last nine years, she has worked her way through design and UX roles in a variety of environments, from small agencies to corporate giants. Her experience includes creating digital solutions for travel, government, SaaS, health, fintech, real estate and ecommerce. Laura has a natural curiosity for solving 'people problems’, which makes her a passionate advocate for unravelling complexity, measuring UX, and crafting design systems.
NOTE: This presentation is more than 6 years old! This is not the way to do things now. :-) - Stephen
Presentation for Fronteers 2008 conference in Amsterdam.
PHOTO CREDITS:
- slide 2: Andrea at http://indigovalleyphotography.com/
- slide 3: raywal65 @ morguefile (http://www.morguefile.com/forum/profile.php?username=RAYWAL65)
- slide 4: Kevin Connors (http://kconnors.com)
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
Web Accessibility: A Shared ResponsibilityJoseph Dolson
This a presentation prepared for a Montana Web Developer's Meetup in December, 2011. The focus is on collaborating with content providers and employers to share the responsibility for web accessibility.
Accessibility is not a rare edge case, it is something that concerns all of us. This is an introduction to Web Accessibility for Web Developers, in context of the German BITV and the international WAI Guidelines (mostly WCAG 2.0). It should raise general awareness of accessibility for Web Development, and shows that accessibility is not an extreme hard to implement requirement, but a matter of care and common sense.
The terms UI and UX (design) are very often and
used as a single term by many people or designers.
The first thing we need to know straight is that UI
and UX are not the same.
Design is a rather broad and huge term. When
someone says “I’m a designer,” it is not that clear
what they actually do. There are a number of
different responsibilities term designer. There are
many aspects of design now a days.
System users often judge a system by its interface rather than its functionality
A poorly designed interface can cause a user to make catastrophic errors
비행기 설계를 왜 통일 해야 할까?
디자인 시스템을 하는 이유
비행기들이 다 용도가 다르다...어떻게 설계하지?
맥락이 다른 페이지와 패턴
경유지까지 아직 멀었다... 언제 수리하지?
디자인 시스템을 적용하는 시점
엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지?
디자인 시스템을 적용하는 프로세스
비행기 설계가 바뀐걸 어떻게 알리지?
디자인 시스템의 전파
AEM Best Practices for Component DevelopmentGabriel Walt
This presentation describes how to easily get started with an efficient development workflow with Adobe Experience Manager 6.1.
The tools and technologies presented are:
* Project Archetype – https://github.com/Adobe-Marketing-Cloud/aem-project-archetype
* AEM Eclipse Extension – https://docs.adobe.com/docs/en/dev-tools/aem-eclipse.html
* AEM Brackets Extension – https://docs.adobe.com/docs/en/dev-tools/aem-brackets.html
* Sightly Template Language – http://www.slideshare.net/GabrielWalt/component-development
* Sightly REPL Tool – https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl
* Sightly TodoMVC Example – https://github.com/Adobe-Marketing-Cloud/aem-sightly-sample-todomvc
Design Systems have reached peak popularity. It seems that every design team has either built one, is building one, or wants to build one. With the release of the incredible Nested Symbols feature followed by Sketch Libraries just a few months ago, Sketch has emerged as an essential part of the Design System workflow.
In this talk we will be covering:
• Best of breed Design Systems out in the wild
• Demo of the Design System from FathomHQ
• Exploring essential Sketch plugins & tools for a seamless workflow
• Handy hacks for getting your Design System project rolling
• Roll out strategies for Design Systems
About Laura
Laura is a Senior Product Designer at Fathom, a B2B SaaS product in the fintech domain. Over the last nine years, she has worked her way through design and UX roles in a variety of environments, from small agencies to corporate giants. Her experience includes creating digital solutions for travel, government, SaaS, health, fintech, real estate and ecommerce. Laura has a natural curiosity for solving 'people problems’, which makes her a passionate advocate for unravelling complexity, measuring UX, and crafting design systems.
NOTE: This presentation is more than 6 years old! This is not the way to do things now. :-) - Stephen
Presentation for Fronteers 2008 conference in Amsterdam.
PHOTO CREDITS:
- slide 2: Andrea at http://indigovalleyphotography.com/
- slide 3: raywal65 @ morguefile (http://www.morguefile.com/forum/profile.php?username=RAYWAL65)
- slide 4: Kevin Connors (http://kconnors.com)
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
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.
Accessibility microinteractions: better user experience, happier developersAidan Tierney
How to create project-specific guidance on accessibility microinteractions and patterns. Users will benefit from consistent interaction. Developers love clear, achievable and testable requirements.
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.
Lab view pdf of front panel gives information about how to design design the front panel. its completely designed by National instruments and good for beginners.
This heuristic evaluation that I completed for a client to establish an authentic and effective user experience. The evaluation defined problematic areas that decrease their ROI and increase their drop-off rate.
Similar to Accessible states in Design Systems (20)
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 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.
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?"
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
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.
Presentation for OZeWAI Sydney 2018. A walk through of four different methods for making inline error messages programmatically associated. Also covers aria-invalid and aria-live.
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.
This presentation for A11yBytes Camp Sydney 2017 takes 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.
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.
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
Unit 8 - Information and Communication Technology (Paper I).pdfThiyagu K
This slides describes the basic concepts of ICT, basics of Email, Emerging Technology and Digital Initiatives in Education. This presentations aligns with the UGC Paper I syllabus.
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...Levi Shapiro
Letter from the Congress of the United States regarding Anti-Semitism sent June 3rd to MIT President Sally Kornbluth, MIT Corp Chair, Mark Gorenberg
Dear Dr. Kornbluth and Mr. Gorenberg,
The US House of Representatives is deeply concerned by ongoing and pervasive acts of antisemitic
harassment and intimidation at the Massachusetts Institute of Technology (MIT). Failing to act decisively to ensure a safe learning environment for all students would be a grave dereliction of your responsibilities as President of MIT and Chair of the MIT Corporation.
This Congress will not stand idly by and allow an environment hostile to Jewish students to persist. The House believes that your institution is in violation of Title VI of the Civil Rights Act, and the inability or
unwillingness to rectify this violation through action requires accountability.
Postsecondary education is a unique opportunity for students to learn and have their ideas and beliefs challenged. However, universities receiving hundreds of millions of federal funds annually have denied
students that opportunity and have been hijacked to become venues for the promotion of terrorism, antisemitic harassment and intimidation, unlawful encampments, and in some cases, assaults and riots.
The House of Representatives will not countenance the use of federal funds to indoctrinate students into hateful, antisemitic, anti-American supporters of terrorism. Investigations into campus antisemitism by the Committee on Education and the Workforce and the Committee on Ways and Means have been expanded into a Congress-wide probe across all relevant jurisdictions to address this national crisis. The undersigned Committees will conduct oversight into the use of federal funds at MIT and its learning environment under authorities granted to each Committee.
• The Committee on Education and the Workforce has been investigating your institution since December 7, 2023. The Committee has broad jurisdiction over postsecondary education, including its compliance with Title VI of the Civil Rights Act, campus safety concerns over disruptions to the learning environment, and the awarding of federal student aid under the Higher Education Act.
• The Committee on Oversight and Accountability is investigating the sources of funding and other support flowing to groups espousing pro-Hamas propaganda and engaged in antisemitic harassment and intimidation of students. The Committee on Oversight and Accountability is the principal oversight committee of the US House of Representatives and has broad authority to investigate “any matter” at “any time” under House Rule X.
• The Committee on Ways and Means has been investigating several universities since November 15, 2023, when the Committee held a hearing entitled From Ivory Towers to Dark Corners: Investigating the Nexus Between Antisemitism, Tax-Exempt Universities, and Terror Financing. The Committee followed the hearing with letters to those institutions on January 10, 202
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
Read| The latest issue of The Challenger is here! We are thrilled to announce that our school paper has qualified for the NATIONAL SCHOOLS PRESS CONFERENCE (NSPC) 2024. Thank you for your unwavering support and trust. Dive into the stories that made us stand out!
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
Biological screening of herbal drugs: Introduction and Need for
Phyto-Pharmacological Screening, New Strategies for evaluating
Natural Products, In vitro evaluation techniques for Antioxidants, Antimicrobial and Anticancer drugs. In vivo evaluation techniques
for Anti-inflammatory, Antiulcer, Anticancer, Wound healing, Antidiabetic, Hepatoprotective, Cardio protective, Diuretics and
Antifertility, Toxicity studies as per OECD guidelines
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
87. Issue:
Unable to distinguish between
focus and checked state on a
segmented control. Assumed the
form control had been selected
when it was only in focus.