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.
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.
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".
aria-live: the good, the bad and the uglyRuss Weakley
Almost all web sites and web applications today are heavily reliant on JavaScript to provide rich interactions for the user. But how can we make these interactions accessible for assistive technologies such as screen readers? The answer is WAI-ARIA – and in many cases, the aria-live property. The presentation will explore the use of WAI-ARIA and the aria-live property to alert screen readers to changes in the DOM. The presentation will also look at support for aria-live across various screen readers and how the property can be most effectively used today.
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.
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.
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.
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.
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.
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.
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".
aria-live: the good, the bad and the uglyRuss Weakley
Almost all web sites and web applications today are heavily reliant on JavaScript to provide rich interactions for the user. But how can we make these interactions accessible for assistive technologies such as screen readers? The answer is WAI-ARIA – and in many cases, the aria-live property. The presentation will explore the use of WAI-ARIA and the aria-live property to alert screen readers to changes in the DOM. The presentation will also look at support for aria-live across various screen readers and how the property can be most effectively used today.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
The document provides instructions for creating a content-managed Facebook app, including obtaining a Facebook developer API key, setting up a Facebook page, integrating the API key and page into a content management system like DotNetNuke to allow managing Facebook app content, and additional options for features like likes, comments, and advanced OpenGraph implementation. Setting up the app involves configuring settings, designing page templates to Facebook dimensions, and inserting meta tags to identify the app and page.
The document outlines quality standards and requirements, known as the "quality bar", for applications in the Windows Phone Store. It defines requirements in several areas such as user experience, design, performance, and more. Applications must meet all "must fix" requirements, which include things like having no critical bugs, following Windows Phone design guidelines, providing smooth performance, and being localized correctly. The document provides examples of specific issues that would require fixes or improvements.
The whole point of a good GUI (Graphical User Interface) is being able to understand what is going on without reading every single detail. That is why we prefer big red crosses to say "Don't do that you oaf!" instead of a line of text that says "I think you may want to reconsider your options."
The document discusses web accessibility, providing information on the following key points in 3 sentences:
1) It defines 5 main categories of disabilities that can be affected by accessibility barriers: vision, deaf/hard-of-hearing, motor, cognitive, and seizure-related.
2) It summarizes the Web Content Accessibility Guidelines (WCAG) 2.0, which contains principles, guidelines, and success criteria to make web content more accessible to people with disabilities.
3) It provides tips for making web content more accessible, such as using alternative text for images, adding table headers, ensuring sufficient color contrast, and using clear form labels.
The document describes steps to complete common blogging tasks on WordPress, Blogger, and TypePad platforms.
For publishing a new blog post, WordPress has clear and simple steps but navigation to the posting area could be improved. Blogger's process is extremely easy and clear. TypePad has some usability issues finding the "compose" button and distinguishing the "publish" button.
Creating an "About" page is challenging on WordPress due to the low placement of the "Pages" button. It is difficult on Blogger because the information goes in a separate Google profile rather than the blog.
Applying a template is very easy on WordPress but more difficult on Blogger and TypePad
Microsoft Windwos 8 Developer Preview
By Francis Chao
APCUG Virtual Conference
November 12, 2011
The "Windows 8 Developers Preview", which is also known as "Windows 8 Pre-beta" provides us with a look into the rapidly-approaching future of the "Windows" operating system.
"Windows 8" will have both the old, legacy "Desktop" user interface and the new "Metro" "Start" screen. "Metro" is Microsoft's unified user interface that will be inside Microsoft's future operating systems for computers, tablets, cell phones, and PDAs.
This document provides guidelines and specifications for feedback messages in the Redmap UI. It describes five types of messages - informational, warning, error, success, and confirmation - that will be used. Guidelines are given for message text, including being concise, not blaming the user, and using language the user understands. Visual specifications are provided for message dialog boxes, including dimensions, colors, fonts, and positioning of title, icon, text, and buttons. Buttons should generally say "OK" and be right-aligned.
This document provides an overview of how to create interactive PowerPoint presentations using Visual Basic for Applications (VBA). It discusses using ActiveX controls, type-on slides for assessments, and VBA scripting to add interactivity, collect student responses, provide feedback and generate reports. Examples are provided for creating type-on slides, adding input boxes, message boxes, and assigning macros to buttons to create quizzes and get student input. The goal is to transform standard presentations into interactive learning environments.
The document introduces several prototype PowerPoint tools that enable interactive presentations using Twitter. The tools allow incorporating tweets into slides using features like a feedback slide, auto-tweeting, voting polls, a Twitter ticker, mood meters, and more. Instructions are provided for each tool and users are directed to a website for more details on using the tools.
The document introduces several prototype PowerPoint tools that enable interactive presentations using Twitter. The tools allow incorporating tweets into slides through features like a feedback slide, auto-tweeting, voting polls, a Twitter ticker, mood meters, and more. Instructions are provided for each tool and users are directed to a website for more details on using the tools.
SAP is an enterprise resource planning software produced by the company SAP. To access the SAP R/3 system, users must enter a valid username and password. Passwords must be at least 3 characters and cannot be easily guessed versions of the username. If a user exceeds the maximum number of incorrect logon attempts, their account will be locked. Forgotten passwords can be reset by contacting the SAP support team.
This document provides instructions for navigating to and creating a journal voucher (JV) in SAP. It outlines the steps to complete the initial screen, enter debit and credit line items using posting keys and account numbers, add explanatory text, and add/change/delete line items. The instructions include navigation paths, field descriptions, and screenshots to illustrate the process of creating a JV in SAP.
Navigating Inclusivity: Insights from Accessibility ExpertsRiley Claire
Empower your online presence with 'Navigating Inclusivity: Insights from Accessibility Experts' PDF. Expert tips and strategies for creating an inclusive online environment. Download your guide for inclusive design success!
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.
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
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.
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.
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.
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.
The document provides instructions for creating a content-managed Facebook app, including obtaining a Facebook developer API key, setting up a Facebook page, integrating the API key and page into a content management system like DotNetNuke to allow managing Facebook app content, and additional options for features like likes, comments, and advanced OpenGraph implementation. Setting up the app involves configuring settings, designing page templates to Facebook dimensions, and inserting meta tags to identify the app and page.
The document outlines quality standards and requirements, known as the "quality bar", for applications in the Windows Phone Store. It defines requirements in several areas such as user experience, design, performance, and more. Applications must meet all "must fix" requirements, which include things like having no critical bugs, following Windows Phone design guidelines, providing smooth performance, and being localized correctly. The document provides examples of specific issues that would require fixes or improvements.
The whole point of a good GUI (Graphical User Interface) is being able to understand what is going on without reading every single detail. That is why we prefer big red crosses to say "Don't do that you oaf!" instead of a line of text that says "I think you may want to reconsider your options."
The document discusses web accessibility, providing information on the following key points in 3 sentences:
1) It defines 5 main categories of disabilities that can be affected by accessibility barriers: vision, deaf/hard-of-hearing, motor, cognitive, and seizure-related.
2) It summarizes the Web Content Accessibility Guidelines (WCAG) 2.0, which contains principles, guidelines, and success criteria to make web content more accessible to people with disabilities.
3) It provides tips for making web content more accessible, such as using alternative text for images, adding table headers, ensuring sufficient color contrast, and using clear form labels.
The document describes steps to complete common blogging tasks on WordPress, Blogger, and TypePad platforms.
For publishing a new blog post, WordPress has clear and simple steps but navigation to the posting area could be improved. Blogger's process is extremely easy and clear. TypePad has some usability issues finding the "compose" button and distinguishing the "publish" button.
Creating an "About" page is challenging on WordPress due to the low placement of the "Pages" button. It is difficult on Blogger because the information goes in a separate Google profile rather than the blog.
Applying a template is very easy on WordPress but more difficult on Blogger and TypePad
Microsoft Windwos 8 Developer Preview
By Francis Chao
APCUG Virtual Conference
November 12, 2011
The "Windows 8 Developers Preview", which is also known as "Windows 8 Pre-beta" provides us with a look into the rapidly-approaching future of the "Windows" operating system.
"Windows 8" will have both the old, legacy "Desktop" user interface and the new "Metro" "Start" screen. "Metro" is Microsoft's unified user interface that will be inside Microsoft's future operating systems for computers, tablets, cell phones, and PDAs.
This document provides guidelines and specifications for feedback messages in the Redmap UI. It describes five types of messages - informational, warning, error, success, and confirmation - that will be used. Guidelines are given for message text, including being concise, not blaming the user, and using language the user understands. Visual specifications are provided for message dialog boxes, including dimensions, colors, fonts, and positioning of title, icon, text, and buttons. Buttons should generally say "OK" and be right-aligned.
This document provides an overview of how to create interactive PowerPoint presentations using Visual Basic for Applications (VBA). It discusses using ActiveX controls, type-on slides for assessments, and VBA scripting to add interactivity, collect student responses, provide feedback and generate reports. Examples are provided for creating type-on slides, adding input boxes, message boxes, and assigning macros to buttons to create quizzes and get student input. The goal is to transform standard presentations into interactive learning environments.
The document introduces several prototype PowerPoint tools that enable interactive presentations using Twitter. The tools allow incorporating tweets into slides using features like a feedback slide, auto-tweeting, voting polls, a Twitter ticker, mood meters, and more. Instructions are provided for each tool and users are directed to a website for more details on using the tools.
The document introduces several prototype PowerPoint tools that enable interactive presentations using Twitter. The tools allow incorporating tweets into slides through features like a feedback slide, auto-tweeting, voting polls, a Twitter ticker, mood meters, and more. Instructions are provided for each tool and users are directed to a website for more details on using the tools.
SAP is an enterprise resource planning software produced by the company SAP. To access the SAP R/3 system, users must enter a valid username and password. Passwords must be at least 3 characters and cannot be easily guessed versions of the username. If a user exceeds the maximum number of incorrect logon attempts, their account will be locked. Forgotten passwords can be reset by contacting the SAP support team.
This document provides instructions for navigating to and creating a journal voucher (JV) in SAP. It outlines the steps to complete the initial screen, enter debit and credit line items using posting keys and account numbers, add explanatory text, and add/change/delete line items. The instructions include navigation paths, field descriptions, and screenshots to illustrate the process of creating a JV in SAP.
Navigating Inclusivity: Insights from Accessibility ExpertsRiley Claire
Empower your online presence with 'Navigating Inclusivity: Insights from Accessibility Experts' PDF. Expert tips and strategies for creating an inclusive online environment. Download your guide for inclusive design success!
This document provides an overview of S-Controls and the AJAX Toolkit in Salesforce. It defines what S-Controls are, their types and uses, and considerations for developing them. It also introduces the AJAX Toolkit for building S-Controls using asynchronous JavaScript and the Salesforce API. The document demonstrates S-Controls through examples and discusses resources for S-Control development.
Four Principles of Accessibility UK Version Homer Gaines
"The Four Principles of Accessibility" is an informative presentation meant to shine a light on the benefits of building inclusive products and explain the four basic principles that serve as the foundation for accessibility. These four areas specifically target areas where users have the most trouble when accessing digital products and provide guidelines for understanding how to think and approach accessibility.
ASP.NET 04 - Additional Web Server ControlsRandy Connolly
The document discusses additional web server controls in ASP.NET that are less commonly used than basic controls but still useful. It describes container controls like Panel, MultiView, and View that hold other controls and specialized controls like AdRotator for banners, FileUpload for files, and Xml for XML documents. The Wizard control creates a step-by-step wizard interface and PlaceHolder adds controls dynamically at runtime.
This document provides an overview of the Tourism Management System project. It includes 6 sections: Requirement Analysis, Analysis Phase, Design Phase, Development Phase, Testing Phase, and Development & Maintenance Phase. The key aspects covered include the project scope, objectives, languages used (PHP, JavaScript, HTML, CSS, MySQL), system diagrams (flowchart, class diagram, use case diagram), source code explanations, screenshots of the system interfaces (home page, login pages, etc.), problems faced during development, and planned future enhancements. The overall goal of the Tourism Management System is to help tourism companies manage customers and bookings online in an efficient manner.
This presentation by Lucas Korol, Head of Product Development at Code & Pepper, will tell you how to approach UX in FinTech applications in order to create an engaging, trustworthy and performant digital product. Presented during the Rise London meetup in Sept 2019.
Salesforce Summer 19 Release Overview Deck.
This presentation was made by Salesforce.com, Inc. (Release Readiness Team).
For more info please check:
https://success.salesforce.com/_ui/core/chatter/groups/GroupProfilePage?g=0F9300000001oku
The document discusses principles of human-computer interface design proposed by Ben Shneiderman, including recognizing diversity in users, using consistent design, enabling shortcuts for experienced users, providing feedback, and reducing memory load. It also summarizes guidelines for designing dialog boxes, error messages, and preventing errors. Examples are given of how these principles can be applied to web design, such as making navigation fast for repeat users and providing explanations for new users. Consistency in menus, layout, and terminology is recommended.
This document outlines the features and implementation of a Home Management Web Application project. The project aims to create a web tool to help with home management tasks such as creating to-do lists, grocery reminders, bill payments, and storing contacts. It was developed using Angular framework, HTML, CSS, JavaScript, and hosted on WAMP server. The project follows a waterfall development process and addresses the need for an easy to use and free home management solution.
Using Ajax to improve your user experience at Web Directions South 2009Peak Usability
AJAX is changing the way that users interact with websites - it has the potential to provide richer and more interactive online user experiences but also introduces its own set of usability and accessibility problems. This session presents views from leading usability experts from around the world from an experienced practitioner workshop conducted at the Usability Professionals Conference in USA.
We will also discuss key usability issues we have unveiled through our own usability testing of a range of websites using AJAX over the last 2 years. The session highlights some of the pitfalls and user frustrations with AJAX as well as how AJAX can be used to enhance the user experience. We will present usability and accessibility issues and common user behaviours with AJAX applications.
Finally we discuss interaction design guidelines for developing user friendly AJAX designs.
Making RIAs Accessible - Spring Break 2008Andrea Hill
This document discusses making rich internet applications (RIAs) accessible. It explains that RIAs can be either DOM-based or plugin-based, and the challenges each presents for accessibility. DOM-based RIAs can more easily be made accessible by updating the DOM, while plugin-based RIAs require established interfaces to communicate with assistive technologies. The document also covers regulatory compliance standards, best practices like WAI-ARIA, considerations for screen readers, and current accessibility testing suites for different RIA types.
This document describes a Dairy Farm Shop Management System (DFSMS) developed as a university project. The system is a web-based application that allows dairy shop administrators to manage products, categories, companies, invoices, reports, and user profiles. Key features of the system include a dashboard, tools for adding/editing categories, companies, and products, an invoice generator, report generator, and admin profile management. The system was designed using UML diagrams including use case diagrams, class diagrams, sequence diagrams, and ER diagrams. Technologies used include PHP for the backend, MySQL for the database, HTML, CSS, and Bootstrap for the frontend. Screenshots of the system's interfaces are also included.
An e-Commerce Platform for Selling Single Product Reltus for Tinnitus Mike Taylor
Open source E-commerce Platform for Selling a Single Product called Reltus for temporary relief from Tinnitus, Ear Ringing & Ear Buzzing built in open source PHP and MySQL.
In the world of development, accessibility (also known as universal usability) is something that tends to be overlooked in between design iterations, feature implementation, and the rush to meet deadlines. The reality is that larger clients and corporations need developers who are able to meet the needs of all their users -- including ones with disabilities or on mobile devices. At the end of the day, accessibility benefits all users.
In this talk, we’ll cover:
• The different types of users with accessibility needs
• The levels of accessibility compliance and what those entail
• Basic design principles for meeting standards
• Basic HTML structures to meet compliance
• Handling dynamic elements or elements added to the DOM
• Tools for testing your website’s accessibility
About the Speaker:
Sarah Hudson is a UI Developer at Cardinal Solutions. With a background in product development, she has worked with companies big and small to build their projects from sketch to launch. Coding is basically her entire life, but when she's not hacking, she's geeking out over 80's music or scheming her next big adventure.
This document provides an agenda and overview for a training session on how to build a canvas app in Power Apps. The session will cover the basic elements of Power Apps like screens, inputs, galleries and forms. It will demonstrate how to build a sample canvas app by connecting to a data source in Excel and designing the app interface. The session will also cover customizing app elements, using functions, and sharing the completed app. A knowledge check with multiple choice questions is included to assess understanding.
It has become crucial that Web should be accessible to the disabled. For this, websites need to be tested for Web Accessibility. Let us explore how Web Accessibility Testing can be done in a most effective way to maximize the benefits.
This document discusses developing Windows and web applications using Visual Studio .NET. It covers topics like C# versions, LINQ, data access with LINQ, user experience best practices, Windows Forms capabilities and demos. The agenda includes sessions on business applications, user experience, who applications need to please, and Windows Forms best practices. It also discusses prototypes, choosing between rich client and browser-based solutions, and testing.
Ähnlich wie Building accessible web components without tears (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 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?"
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.
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.
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.
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.
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.
Understanding the mysteries of the CSS property value syntaxRuss Weakley
This presentation will reveal the wonders of the W3C CSS property and value syntax. Along the way we will explore the mysterious double pipes, pound signs, double ampersands and more. You will come away a CSS syntax expert, able to understand any CSS property / value syntax no matter how complex... or your money back!
This document discusses the evolution of roles in UX/UI design and development over time. It presents a brief history starting in the 1990s with webmasters and designers focused on HTML. By the late 1990s, developers also worked with HTML and usability/UX emerged. The roles continued to expand and combine skills, with modern practitioners often working across UX research, interaction design, visual design, front-end development, and considerations for accessibility. The document suggests that while specialization can be valuable, it is also beneficial for those in UX to learn some front-end development skills to enable quick prototyping and understand rich interactions and responsive design.
This document discusses best practices for creating CSS pattern libraries. It recommends starting with the smallest reusable components and building up to larger page-level templates. Key aspects covered include using a naming convention based on modules, modifiers and descendants; avoiding overly specific class names; and including utility classes to add single styles without new classes. The document also provides examples of how to structure and name classes for common interface patterns.
Leveraging Generative AI to Drive Nonprofit InnovationTechSoup
In this webinar, participants learned how to utilize Generative AI to streamline operations and elevate member engagement. Amazon Web Service experts provided a customer specific use cases and dived into low/no-code tools that are quick and easy to deploy through Amazon Web Service (AWS.)
Main Java[All of the Base Concepts}.docxadhitya5119
This is part 1 of my Java Learning Journey. This Contains Custom methods, classes, constructors, packages, multithreading , try- catch block, finally block and more.
This presentation includes basic of PCOS their pathology and treatment and also Ayurveda correlation of PCOS and Ayurvedic line of treatment mentioned in classics.
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.
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.
हिंदी वर्णमाला पीपीटी, hindi alphabet PPT presentation, hindi varnamala PPT, Hindi Varnamala pdf, हिंदी स्वर, हिंदी व्यंजन, sikhiye hindi varnmala, dr. mulla adam ali, hindi language and literature, hindi alphabet with drawing, hindi alphabet pdf, hindi varnamala for childrens, hindi language, hindi varnamala practice for kids, https://www.drmullaadamali.com
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.
বাংলাদেশের অর্থনৈতিক সমীক্ষা ২০২৪ [Bangladesh Economic Review 2024 Bangla.pdf] কম্পিউটার , ট্যাব ও স্মার্ট ফোন ভার্সন সহ সম্পূর্ণ বাংলা ই-বুক বা pdf বই " সুচিপত্র ...বুকমার্ক মেনু 🔖 ও হাইপার লিংক মেনু 📝👆 যুক্ত ..
আমাদের সবার জন্য খুব খুব গুরুত্বপূর্ণ একটি বই ..বিসিএস, ব্যাংক, ইউনিভার্সিটি ভর্তি ও যে কোন প্রতিযোগিতা মূলক পরীক্ষার জন্য এর খুব ইম্পরট্যান্ট একটি বিষয় ...তাছাড়া বাংলাদেশের সাম্প্রতিক যে কোন ডাটা বা তথ্য এই বইতে পাবেন ...
তাই একজন নাগরিক হিসাবে এই তথ্য গুলো আপনার জানা প্রয়োজন ...।
বিসিএস ও ব্যাংক এর লিখিত পরীক্ষা ...+এছাড়া মাধ্যমিক ও উচ্চমাধ্যমিকের স্টুডেন্টদের জন্য অনেক কাজে আসবে ...
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPRAHUL
This Dissertation explores the particular circumstances of Mirzapur, a region located in the
core of India. Mirzapur, with its varied terrains and abundant biodiversity, offers an optimal
environment for investigating the changes in vegetation cover dynamics. Our study utilizes
advanced technologies such as GIS (Geographic Information Systems) and Remote sensing to
analyze the transformations that have taken place over the course of a decade.
The complex relationship between human activities and the environment has been the focus
of extensive research and worry. As the global community grapples with swift urbanization,
population expansion, and economic progress, the effects on natural ecosystems are becoming
more evident. A crucial element of this impact is the alteration of vegetation cover, which plays a
significant role in maintaining the ecological equilibrium of our planet.Land serves as the foundation for all human activities and provides the necessary materials for
these activities. As the most crucial natural resource, its utilization by humans results in different
'Land uses,' which are determined by both human activities and the physical characteristics of the
land.
The utilization of land is impacted by human needs and environmental factors. In countries
like India, rapid population growth and the emphasis on extensive resource exploitation can lead
to significant land degradation, adversely affecting the region's land cover.
Therefore, human intervention has significantly influenced land use patterns over many
centuries, evolving its structure over time and space. In the present era, these changes have
accelerated due to factors such as agriculture and urbanization. Information regarding land use and
cover is essential for various planning and management tasks related to the Earth's surface,
providing crucial environmental data for scientific, resource management, policy purposes, and
diverse human activities.
Accurate understanding of land use and cover is imperative for the development planning
of any area. Consequently, a wide range of professionals, including earth system scientists, land
and water managers, and urban planners, are interested in obtaining data on land use and cover
changes, conversion trends, and other related patterns. The spatial dimensions of land use and
cover support policymakers and scientists in making well-informed decisions, as alterations in
these patterns indicate shifts in economic and social conditions. Monitoring such changes with the
help of Advanced technologies like Remote Sensing and Geographic Information Systems is
crucial for coordinated efforts across different administrative levels. Advanced technologies like
Remote Sensing and Geographic Information Systems
9
Changes in vegetation cover refer to variations in the distribution, composition, and overall
structure of plant communities across different temporal and spatial scales. These changes can
occur natural.
How to Fix the Import Error in the Odoo 17Celine George
An import error occurs when a program fails to import a module or library, disrupting its execution. In languages like Python, this issue arises when the specified module cannot be found or accessed, hindering the program's functionality. Resolving import errors is crucial for maintaining smooth software operation and uninterrupted development processes.
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxEduSkills OECD
Iván Bornacelly, Policy Analyst at the OECD Centre for Skills, OECD, presents at the webinar 'Tackling job market gaps with a skills-first approach' on 12 June 2024
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.
26. I have a range of online tests
available, which show how
different assistive technologies
work with application
components.
http://maxdesign.com.au/jobs/sample-accessibility/
40. Well done! Your changes have been saved
Inserted after page load
41. Adding content after the initial
page has loaded can cause
potential issues for screen
readers.
42. Problem 1:
Screen readers “buffer” pages
as they are loaded. Any
content that is added after this
time many not be picked up by
the screen reader.
43. Problem 2:
Screen readers can only focus
on one part of the page at a
time. If something changes on
another area of the page,
screen readers may not pick
this up.
48. If we then use JavaScript to
inject/hide/show content
within this element, screen
readers will be made aware of
any DOM changes within that
element.
49. The aria-live attribute can be
used for any page regions that
are likely to get updates after
the initial page is loaded.
50. Success alerts! Your changes are saved
Info alerts! Some info to be aware of
Warning alerts! Something has changed
Error alerts! Fix the error and try again
Alert messages
63. Should only be used if the
interruption is imperative for
users to know immediately
such as error alerts.
64. Unfortunately, aria-
live=“assertive” is not well
supported at this point, so
the “polite” value may be
preferred.
http://maxdesign.com.au/jobs/sample-accessibility/10-notifications/
index.html
85. If a screen reader is in forms
mode, content that is not
directly associated with form
controls may not be
announced.
86. <!-‐-‐ this error message may not be announced
-‐-‐>
<div>
<label for="email">Email</label>
<input type="email" id="email">
<p class="error">Error</p>
</div>
92. Problem 1:
Form Control Error messages
only appears after a control
has lost focus. For this reason,
it is not immediately presented
to screen reader users.
93. Screen reader users often
have to travel back through the
form to try and find invalid
form controls. If invalid form
controls are not effectively
flagged, users may not be
able to find them.
95. In the worst cases, focus
remains on the form submit
button, even after the form
has been found to be invalid,
and screen reader users have
no idea why the form won’t
submit.
97. 1. When a form control is
defined as invalid, the control
and associated label should be
“flagged” so that users can be
made aware that there is an
error.
98. 2. Flagging form controls and
associated labels should not
use colour alone to signify
errors.
99. 3. An error message should be
displayed in close proximity to
the relevant form control.
112. 4. Each error should ideally be
a link that takes the user to the
relevant form control.
113. The form has two errors that must be completed before it
can be submitted.
1. Error: You must include your first name
2. Error: Email address must include an "@" symbol
114. Optionally, error messages can
be placed inside a hide/show
function that allows users to
choose whether they see the
list of errors or not.
115. The form has two errors that must be completed before it
can be submitted.
View all errors
124. When the error message
needs to be displayed (i.e. the
user has attempted to submit
the form with invalid form
controls) some changes need
to occur dynamically.
125. If present, the tabindex
attribute value needs to be
changed from “-1” to “0” so
that the element will appear in
normal tab order.
132. Problem 1:
Keyboard-only users are often
able to TAB outside of the
modal window while the
modal is still active. This can
be very confusing and
disconcerting.
181. For some important actions
inside the modal window,
Assistive Technologies should
be given additional
information to let them know
what will happen.
182. As screen reader users are
submitting form data, they
should be informed that:
189. When the modal window is
closed, if users are being
taken back to the parent
page:
190. 1. Focus should be placed on
the relevant component of
the parent page. The most
common practice is to move
focus back to the element that
invoked the dialog.
191. The user should not be
thrown back to the top of the
parent page unless there is a
good reason!
192. 2. The user should be
informed where they are and
what change has occurred.
194. Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut laoreet dolore magna aliquam
erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip vel eum iriure dolor in
hendrerit in vulputate.
Accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Heading here
Another thing here
Add your bank balance
Another heading
$1,200.34
Focus
“Bank balance $1200.34 added
to bank information table”
195. Modals are a pain,
but we can make
them less painful
202. The preferred keyboard-only
navigation method for in-
page tabs uses TAB keystrokes
to move onto the active tab
and active panel, and ARROW
keys to move across tabs.
204. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
205. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
206. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
207. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
208. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
210. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
211. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 2
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 2.
This is a link above the tabs
This is a link below the tabs
ARROW
212. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 3.
This is a link above the tabs
This is a link below the tabs
ARROW
213. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 3.
This is a link above the tabs
This is a link below the tabs
TAB
214. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 3.
This is a link above the tabs
This is a link below the tabs
TAB
215. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 3.
This is a link above the tabs
This is a link below the tabs
TAB
217. Ideally, focus should be placed
on the panel itself after
moving off the relevant tab
above. This also allows us to
announce the panel to screen
reader users.
218. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
219. Focus can then move to any
focusable items inside the
panel as needed.
220. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
233. Now, we need to set the
various states for the tabs
using aria-selected=“true” (if
the user has selected this tab)
or aria-selected=“false” (for all
other tabs.
256. Get expert assistance
and conduct a formal
accessibility audit of
your website or web
application and action as
needed.
4
257. When is the best
time to focus on
accessibility?
258. The best time to focus on
accessibility is right at the
beginning of development
process, when creating the
individual components in
your pattern library.