Starting a new project and selecting from the latest UI frameworks is a challenging experience. How do you know the one you choose is accessible?
Using some basic checks, we review Angular, Bootstrap, Foundation, and jQuery Mobile for some common interactions and patterns including: Documentation, Forms, Tabs, and Dialogs.
Code available at https://github.com/gerardkcohen/choosinga11yuiframework
Thanks to Paul Schantz (https://twitter.com/paulschantz) for providing detailed notes: http://paulschantz.com/2015/03/06/choosing-an-accessible-ui-framework/
ForwardJS 2015: Choosing an Accessible Frameworkgerardkcohen
Starting a new project and selecting from the latest UI frameworks is a challenging experience. How do you know the one you choose is accessible?
Using some basic checks, we review Bootstrap, Foundation, Ionic, and Material Design Lite for some common interactions and patterns including: Forms, Tabs, Dialogs and Toooltips.
Code available at https://github.com/gerardkcohen/choosinga11yuiframework
ARIA is an accessibility standard that provides capabilities such as screen-reader access to application functionality. During this session, we'll take a tour of the latest accessibility enhancements to Ext JS and Ext GWT including improved keyboard navigation, ARIA and focus management. We'll also discuss how government standards like Section 508 may apply to your organization.
ForwardJS 2015: Choosing an Accessible Frameworkgerardkcohen
Starting a new project and selecting from the latest UI frameworks is a challenging experience. How do you know the one you choose is accessible?
Using some basic checks, we review Bootstrap, Foundation, Ionic, and Material Design Lite for some common interactions and patterns including: Forms, Tabs, Dialogs and Toooltips.
Code available at https://github.com/gerardkcohen/choosinga11yuiframework
ARIA is an accessibility standard that provides capabilities such as screen-reader access to application functionality. During this session, we'll take a tour of the latest accessibility enhancements to Ext JS and Ext GWT including improved keyboard navigation, ARIA and focus management. We'll also discuss how government standards like Section 508 may apply to your organization.
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
Lesson on User Experience & User Interface Design.
Information Architecture, Lean UX cycle, NPS, Google Heart, SUPR-Q, Cards, Customer (emotional) journey and other frameworks to evaluate user experiences in websites, mobile websites and applications.
By using the latest Innovative Ideas, Mobile App may be developed for providing some of the important/frequently required useful information like, approved & unapproved institutions, etc.,
SAP ABAP Online Training Institute in Hyderabad - C-Pointcpointss
C-Point Software Solutions is a Leading Training Institute in Hyderabad. We Provide Training on SAP, SAS, Oracle E Business Suite, Informatica, OBIEE, SQL DBA, Hadoop, Cloud Computing, .Net, Testing Tools, Java, Web Designing, PHP.
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
Lesson on User Experience & User Interface Design.
Information Architecture, Lean UX cycle, NPS, Google Heart, SUPR-Q, Cards, Customer (emotional) journey and other frameworks to evaluate user experiences in websites, mobile websites and applications.
By using the latest Innovative Ideas, Mobile App may be developed for providing some of the important/frequently required useful information like, approved & unapproved institutions, etc.,
SAP ABAP Online Training Institute in Hyderabad - C-Pointcpointss
C-Point Software Solutions is a Leading Training Institute in Hyderabad. We Provide Training on SAP, SAS, Oracle E Business Suite, Informatica, OBIEE, SQL DBA, Hadoop, Cloud Computing, .Net, Testing Tools, Java, Web Designing, PHP.
The pleasurable UX behind a form lies in understanding the needs and giving attention to the minute details. Our aim should be to create an effortless interface with clear labels and the most appropriate input field to reduce the effort and cognitive load of the user. Implementing design heuristics like Visibility of status, user’s freedom, consistency; will help you to build a brilliant design and make you understand the reasons behind the form’s UX.
Did you know that you can reduce 30-50% of development efforts to develop any web application using Microsoft .NET MVC Web API, Angular 6, HTML5 and jQuery Ajax?
Code VAUCH is a perfect tool for you. It helps the developers to generate Clean Code with Design Patterns, CRUD Operations, Dashboards, Reports in a single click with database first approach.
If you are currently holding a licensing agreement with Microsoft for Visual Studio 2012 and above, there is pathway to leverage your existing investments in Microsoft licensing resulting in a cost-effective way to migrate the way you develop any Web Applications using our fantastic code generator product, Code VAUCH.
Please go ahead and register with us and get access to our free demo application www.vauchinfotech.com/codevauch
. We will call you or you can reach us at below contact details.
Thanks & Regards,
Umesh Hodar
we@vauchinfotech.com | www.vauchinfotech.com
Better Design Built Faster: Using New UI Technologies to Speed Developmentgoodfriday
Achieving complete separation between visual design, content, and logic has long been the Holy Grail of the Web design world. By keeping these separate layers loosely-coupled, they can be developed and changed independently of one another, resulting in faster, more parallel development and more manageable code
The Salient Process SPARK UI toolkit for IBM BPMDennis Parrott
The Salient Process SPARK UI toolkit provides the next generation UI capabilities for IBM Business Process Manager (BPM). This presentation from IBM InterConnect 2017, takes you through the evolution of BPM UI leading up to the IBM partnership with Salient Process with a view to embed the SPARK UI toolkit in a future IBM BPM release, outlines the benefits of using the SPARK UI toolkit, and provides an overview of the various capabilities and controls that are included within the SPARK UI toolkit.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
12. 12TABS CRITERIA
Choosing an Accessible UI Framework
FOCUS INDICATION
ARIA
KEYBOARD INTERACTION
COLOR CONTRAST
13. 13TABS KEYBOARD INTERACTION
Choosing an Accessible UI Framework
LEFT/ UP FOR PREVIOUS TAB
ARROW KEYS SHOULD CYCLE
TAB KEY FOCUSES ACTIVE TAB
RIGHT/ DOWN FOR NEXT TAB
20. 20FORMS SOLUTION
Choosing an Accessible UI Framework
GROUP RELATED FIELDS WITH
FIELDSET/ LEGEND
EXPLICITLY ASSOCIATE LABELS
WITH INPUTS
CONVEY ERROR STATE AND
DESCRIPTION
24. 23TABS SOLUTION
Choosing an Accessible UI Framework
LEFT/ UP FOR PREVIOUS TAB
ARROW KEYS SHOULD CYCLE
TAB KEY FOCUSES ACTIVE TAB
RIGHT/ DOWN FOR NEXT TAB
27. 27DIALOG SOLUTION
Choosing an Accessible UI Framework
FOCUS SHOULD RETURN TO TRIGGER
CYCLE FOCUS WITHIN DIALOG
ROLE=“DIALOG”, ARIA-HIDDEN,
ARIA-DESCRIBEDBY
How many of you are are actively looking for a framework?
How many of you didn’t make it to Karl Groves and Billy Gregory’s presentation?
How many of you didn’t know Karl Groves and Billy Gregory were presenting at this same time?
I will turn around and count to 10, if you want to leave I will not count it against you…
For those of you here, thank you. You could have chosen to sleep in, or any other presentation, but I am glad you are here.
INTRODUCTIONS
Evaluating UI frameworks and libraries for your latest web development project is no easy task.
Each decision maker has their own set of criteria based on their past experience and overall project or task at hand.
Some common criteria factors are:
ease of use, architecture, opinionated vs non-opinionated, customization, large community, open source, popularity, visual design, 3rd party modules, file size, MV* patterns, etc. Though determining this criteria is not covered in this discussion you need to ask yourself: Where does accessibility rank on your list of things to evaluate?
Using one of these UI frameworks and libraries for your web project makes for rapid and easy development, so picking the right framework or library for your next web development project can have a serious impact on your ability to deliver on time and ensure future maintainability.
Unfortunately, the speed and ease at which these frameworks allow you to develop often means that accessibility can easily be overlooked and taken for granted.
NEXT SLIDE: How do you know the one you choose is accessible?
How? We will go over some basic checks, a starting off point, on what to look for.
It is not my intention to bash any of these frameworks. Building a framework is hard and takes a lot of work.
I am extremely appreciative of these frameworks for the time and effort they have put in in order to make the development of my projects easier.
Does the framework document a11y intentions?
Do code examples exhibit a11y best practices?
Proper labels/ descriptions: Is semantic meaning being conveyed?
Keyboard navigation: Can a user perform tasks without the use of a mouse? Is focus indication defined, can a user know where they are at all times?
Color Contrast: Is the CSS styles of each framework/ theme good for low-vision users? Minimum 4.5:1
If ARIA is needed, are the right roles, states, and properties being used?
We will be using WAI-ARIA 1.0 Authoring Practices as our guide for widgets, i.e tab and dialog.
Google Chrome Accessibility Developer Tools for inspection
Google ChromeVox as screenreader
Angular Doc:
ngAria with code examples (aria-checked not updated?)
Common a11y patterns
Additional Resources
Good info!
Bootstrap Doc
Foundation Doc
Copied from Bootstrap?
JQM Doc:
Slim, mentions accessibly hiding menus
Forms are everywhere!
Extremely easy to get right, extremely easy to get wrong!
Just good, semantic form markup!
Error validation is usually customized, so some aria will be needed.
Visit Angular FORMS
Test keyboard and focus indication
Test via chrome a11y tools, check label associations, check color contrast of validation
ChromeVOX: CONTROL + COMMAND + A + A
Check if error state is always read out loud
Bootstrap forms
Note about using labels for accessibility, Good documentation for a11y
Forms are CSS only, meaning validation state should be handled manually via JS. No grouping, except for disabled groups of fields
Foundation Forms
"Note about labels and accessibility
switches and range use custom elements, switches require strange, markup”
Focus indication does not pass color contrast
No grouping
JQM
Passed all except color contrast for default (blue/ white theme)
Uses native form elements ensuring accessibility will always be supported even though highly stylized
A “tabbed” interface that allows dynamic switching of content
Tab to tabs
Arrow keys?
Focus indicaition
Use a11y dev tools to check aria-roles
Additional key combinations, CTRL + UP/ PAGE UP/DOWN are mentioned but might conflict with browser interactions, ie switching browser tabs.
They are also somewhat Windows keyboard-centric
List of tabs has a role=“tablist”
Tabs have role=“tab”, property aria-controls with id of of content, and communicate selected state via aria-selected
Content containers have role=“tabpanel”
Visit Bootsrap tabs
focus indication and color contrast is good
Keyboard nav is not there
Aria is ok
Check with chromevox CONTROL + COMMAND + A + A
Angular Tabs
No focus indication on selected item
Tab to control and left/ right arrows ok
Not cyclical, no up/down. Navigation does not activate tab, must press enter
Aria is ok
JQM: PERFECT! Keyboard nav, color contrast, aria all perfect
Foundation:
No focus indication makes keyboard nav useless
Tab to control and left/ right arrows ok
Not cyclical, no up/down. Navigation does not activate tab, must press enter
Aria is ok
Overlay that either prompts user for a response or presents additional information
Initial focus should go to either the first focusable element or the dialog container
TAB/ SHIFT-TAB should cycle through focusable elements, never leaving the panel
ESC should close the panel and return focus to the triggering element
ENTER should submit form, if available but care is needed if other elements inside the dialog use ENTER.
Role=dialog
Simple dialogs like alerts/ confirmations should use role=“alertdialog”
Dialog is labelled by either aria-label or aria-labelledby
Additional aria seen later for better use
Foundation Dialog
Docs already note this is not accessible
Tab not restricted to panel
Focus does not return to trigger
Esc and click outside does close dialog
Invalid markup, no aria
Check with Chromevox
Angular Dialog
Focus indication ok, keyboard , Tab not restricted to panel
Focus does not return to trigger
Esc and click outside does close dialog
JQM: Good aria, tab not restriced to keyboard, focus not on trigger, esc and click outside to close
Bootstrap: Tabs restricted, but there is shift-tab keyboard trap. Escape closes dialog
So now we see that there are some things lacking in order to make the use of frameworks in our application more accessible.
What are some of the things we can do?
Again, forms are extremely easy to get right, and just as easy to get wrong.
AFTER, show Angular FORM Code
Add fieldset
Explicitly associated labels with inputs
Used fieldset with visually hidden css
Color contrast of error messages changed
Uses live-region to express error messages, but aria-descibedby might better in addition
Just add js after after bootstrap
Add ARIA roles like tablist, presentation, and tab for tabs UL, LI.
Add tabIndex, aria-expanded, aria-selected, aria-controls for tab.
Add ARIA roles of tabPanel, tabIndex, aria-hidden, and aria-labelledBy for tabPanel.
Add keydown event listener for the tab to work with keyboard.
Dynamically flip tabIndex, aria-selected, and aria-expanded for tab when it is activated and add aria-hidden to hide the previously visible tab.
Wrap body content in container in order to maintain aria-hidden when panel is open
Role=“dialog”
Aria-describedby=“dialog-title”
Aria-hidden
Tabindex=0
Move close trigger to logical order, after title
Change close trigger to button
Close trigger being read as “multiplication”. Add aria-hidden and visually hidden text “close dialog”
Focus close button upon opening
Focus trigger upon closing
Show code for tab cycle
Angular – Marcy Sutton: undoubtedly biased, but Angular Material has some of the best accessibility support around for being a new framework.
Angular 1.x had ngAria as a module, Angular 2.0 will essentially have ngAria built-in.
Material Design won’t release components until a11y is built-in.
Material Design enforces text alternatives via warnings in the console.
Even better, a11y plugin for Protractor (e2e testing for Angular) that uses either Chrome Accessibility Developer Tools or Tenon.io by Karl Groves.
Foundation – Brandon, Foundation Lead – Rafi, Customer Advocate:
Next version of Foundation for web, v6, is being built from the ground up with a11y as a focus.
No component will make build unless it passes a11y.
Fixing docs, keyboard, and color contrast
Bootstrap - Patrick Lauke
V4 is a complete overhaul, with simplification and refactoring of most existing CSS/JS components
Working hard trying to get Paypal a11y plugin back in
Patrick will be overseeing/ triaging all new features/ pull requests
Mostly volunteer basis
This is it. We looked at some popular frameworks, some common interactions and patterns, used a basic checklist to evaluate and came up with some solutions.
So what did we learn?
Frameworks are hard to get completely accessible, implementations can vary.
Ultimately, you need to do what is best for your users. Frameworks should give you the proper tools to do so.
Share the knowledge, be an advocate.
All the frameworks I tallked to said they greatly welcome any contributions/ pull requests to help with a11y. Open source is a community effort.
