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.
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.
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.
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.
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
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.
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.
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.
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
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.
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.
Accessibility in Design systems - the pain and gloryRuss Weakley
Slides from CodeHeart Design 2018: Building a design system is a painful enough, but how do you add accessibility into the mix? Is it an "up-at-dawn, pride-swallowing siege", or can it become part of the normal work flow. We'll look at accessibility for different roles - such as UX, UI and devs, as well as where accessibility should be injected into the process.
This presentation 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.
This ID24 2019 talk will look at a the importance of states (visited, focus, active, checked/selected, open and more) when building design systems. We will explore their relevance, how to maintain consistency and how to systemise when designing at scale.
This presentation covers the basics of how users of screen readers interact with widgets. The goals of this presentation are:
1) Make you comfortable enough with using screen readers so that you have a basic understanding of the types of information users need/expect to hear for widgets.
2) Make you familiar with the common keyboard patterns used for existing widgets on the web and the desktop.
Use the information in this presentation as a foundation for implementing expected keyboard shortcuts for custom widgets as well as for learning how test custom widgets you develop for the web using JavaScript.
5 free tools for web accessibility testingJohn McNabb
This presentation is a walkthrough of 5 tools which complement each other and can be used in combination to thoroughly test a web site. This is a balanced system of testing for WCAG guidelines, and for issues which must be experienced from a user’s point of view.
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility RulesJohn McNabb
Need to settle an argument on when alt text is required? Ever wonder how text size relates to colour contrast? When is link text good enough? Look it up in the official reference – WCAG 2! Don’t rely on opinions – defend your findings by pointing to actual Success Criteria. Learn when to fall back on a Guideline, or even a Principle.
Learn to test a web page for accessibility by using standard industry tools, such as a keyboard, JAWS screen reader, Colour Contrast Analyser, Chrome DevTools (and the Lighthouse audit tool), and Windows Magnifier. Perform a set of basic tests chosen to complement each other to find accessibility issues which would impact users with a variety of disabilities.
Emphasis will be placed on standard, practical tests, and evaluating the results for pass/fail. This includes an accelerated introduction to JAWS, which will focus on a small subset of commands which are most useful for testing web pages.
Trying to learn the WCAG (Web Content Accessibility Guidelines) success criteria directly can seem overwhelming. This workshop will take the approach of the following:
- Understanding basic user types
- Testing on behalf of those users
- Connecting issues found back to 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.
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.
info materials for FakePress and Art is Open Source workshops held in London in occasion of the opening of the REFF, RomaEuropa FakeFactory exhibit
more info here:
http://www.artisopensource.net/2011/02/17/workshops-and-…ware-downloads/
and here:
http://www.artisopensource.net
http://www.fakepress.it
http://reff.romaeuropa.org
http://www.furtherfield.org/exhibitions/reff-remix-world-reinvent-reality
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.
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.
Accessibility in Design systems - the pain and gloryRuss Weakley
Slides from CodeHeart Design 2018: Building a design system is a painful enough, but how do you add accessibility into the mix? Is it an "up-at-dawn, pride-swallowing siege", or can it become part of the normal work flow. We'll look at accessibility for different roles - such as UX, UI and devs, as well as where accessibility should be injected into the process.
This presentation 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.
This ID24 2019 talk will look at a the importance of states (visited, focus, active, checked/selected, open and more) when building design systems. We will explore their relevance, how to maintain consistency and how to systemise when designing at scale.
This presentation covers the basics of how users of screen readers interact with widgets. The goals of this presentation are:
1) Make you comfortable enough with using screen readers so that you have a basic understanding of the types of information users need/expect to hear for widgets.
2) Make you familiar with the common keyboard patterns used for existing widgets on the web and the desktop.
Use the information in this presentation as a foundation for implementing expected keyboard shortcuts for custom widgets as well as for learning how test custom widgets you develop for the web using JavaScript.
5 free tools for web accessibility testingJohn McNabb
This presentation is a walkthrough of 5 tools which complement each other and can be used in combination to thoroughly test a web site. This is a balanced system of testing for WCAG guidelines, and for issues which must be experienced from a user’s point of view.
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility RulesJohn McNabb
Need to settle an argument on when alt text is required? Ever wonder how text size relates to colour contrast? When is link text good enough? Look it up in the official reference – WCAG 2! Don’t rely on opinions – defend your findings by pointing to actual Success Criteria. Learn when to fall back on a Guideline, or even a Principle.
Learn to test a web page for accessibility by using standard industry tools, such as a keyboard, JAWS screen reader, Colour Contrast Analyser, Chrome DevTools (and the Lighthouse audit tool), and Windows Magnifier. Perform a set of basic tests chosen to complement each other to find accessibility issues which would impact users with a variety of disabilities.
Emphasis will be placed on standard, practical tests, and evaluating the results for pass/fail. This includes an accelerated introduction to JAWS, which will focus on a small subset of commands which are most useful for testing web pages.
Trying to learn the WCAG (Web Content Accessibility Guidelines) success criteria directly can seem overwhelming. This workshop will take the approach of the following:
- Understanding basic user types
- Testing on behalf of those users
- Connecting issues found back to 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.
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.
info materials for FakePress and Art is Open Source workshops held in London in occasion of the opening of the REFF, RomaEuropa FakeFactory exhibit
more info here:
http://www.artisopensource.net/2011/02/17/workshops-and-…ware-downloads/
and here:
http://www.artisopensource.net
http://www.fakepress.it
http://reff.romaeuropa.org
http://www.furtherfield.org/exhibitions/reff-remix-world-reinvent-reality
Best And Worst Practices Building Ria with Adobe and MicrosoftJosh Holmes
Come listen to leading Rich Internet Applications (RIA) experts from Microsoft and Adobe discuss many of the best and worst practices when building RIAs. RIAs provide a similar user experience to traditional desktop applications combined with the ease of deployment of web/browser based applications. This produces a fair amount of confusion because there are a number of potentially conflicting practices depending on whether you approach your RIA as a desktop or a web application. This session dives into the definition of RIA and walks through the best and worst practices that have appeared over and over again. We will explore architectural patterns and practices such as state management, fault tolerance, service composition, communications protocols and message formats and goes into details on how RIAs can be developed using runtime environments such as Adobe AIR or Microsoft Silverlight.
For more read our blogs at
http://www.jamesward.com
http://www.joshholmes.com
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.
Mobile Commerce ppt....... Provides a website interface to the customers to b...punita_uttam
*Provides an interface to the customers to buy & get the details about mobiles.
*Contains information of all the upcoming mobiles of different brands in the market.
*Purchase & stock Management.
*All customers will get all important updates via website.
*Website development which would help to buy, order & remain updated in just a click.
On April 11th, 2012, Mat Marquis gave a presentation to the ABCD WWW group on An Introduction to jQuery Mobile.
Learn how to use jQuery Mobile to build dynamic HTML5-based web sites
and apps that work on all popular mobile platforms. We’ll go over the
basics of using the framework and discuss ways we can use it to create
compelling experiences that span smartphone, tablet, and desktop
devices from a single unified codebase.
Mat "Wilto" Marquis is a designer-slash-developer working at Filament
Group in Boston. Mat is a member of the jQuery Mobile team, technical
editor at A List Apart, and an active member of the open source
community. He's probably flipping out about something on Twitter as we
speak.
Windows Presentation Foundation (WPF) allows developers to easily build and create visually enriched UI based applications. The classical UI elements or controls in other UI frameworks are also enhanced in WPF applications.
With third party clients connecting to your service you may find that the assumptions or opinions of a typical rails application are not robust enough. We'll run through some key considerations when building an API that will be consumed by a mobile app.
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."
Similar to Building Accessible Web Components (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.
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.
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!
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!
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
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.
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.
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
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
10. This is where ARIA is used to
provide additional context for
assistive technologies, but the
native elements already have
accessibility APIs available.
18. This is where developers have
copied and pasted components,
often from existing pattern
libraries, without
understanding how the ARIA
attributes work.
19. This can lead to problems such
as aria-labels pointing to non-
existent ID attributes, so the
ARIA does not work.
22. “If you can use a native HTML element
[HTML5] or attribute with the semantics
and behaviour you require already built
in, instead of re-purposing an element and
adding an ARIA role, state or property to
make it accessible, then do so.”
Steve Faulkner:
http://www.paciellogroup.com/blog/2014/10/aria-in-html-there-goes-the-
neighborhood/
24. This should include all major
screen readers in different
browsers. And don’t forget to
test with keyboard only!
25. If possible, work with a range
of real AT users and get their
input/feedback. Make sure your
audience selection includes
different levels of skill.
70. There may be times when you
want to provide different
content for screen readers to
the content that is displayed on-
screen - for links and buttons.
81. More information at “Display
A, announce B - link content”:
http://maxdesign.com.au/jobs/sample-accessibility/06-context/03-different-
content-link.html
85. More information at “Display
A, announce B - button
content”:
http://maxdesign.com.au/jobs/sample-accessibility/06-context/04-different-
content-button.html
92. Adding content after the initial
page has loaded can cause
potential issues for screen
readers.
93. 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.
94. 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.
99. 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.
100. The aria-live attribute can be
used for any page regions that
are likely to get updates after
the initial page is loaded.
101. 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
114. Should only be used if the
interruption is imperative for
users to know immediately
such as error alerts.
115. 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
133. 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.
134. 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.
136. 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.
138. 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.
139. 2. Flagging form controls and
associated labels should not use
colour alone to signify errors.
140. 3. An error message should be
displayed in close proximity to
the relevant form control.
153. 4. Each error should ideally be a
link that takes the user to the
relevant form control.
154. 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
155. 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.
156. The form has two errors that must be completed before it
can be submitted.
View all errors
165. 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.
166. If present, the tabindex attribute
value needs to be changed from
“-1” to “0” so that the element
will appear in normal tab order.
172. 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.
221. For some important actions
inside the modal window,
Assistive Technologies should
be given additional
information to let them know
what will happen.
222. As screen reader users are
submitting form data, they
should be informed that:
229. When the modal window is
closed, if users are being taken
back to the parent page:
230. 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.
231. The user should not be thrown
back to the top of the parent
page unless there is a good
reason!
232. 2. The user should be informed
where they are and what change
has occurred.
234. 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”
236. When is the best
time to focus on
accessibility?
237. The best time to focus on
accessibility is right at the
beginning of development
process, when creating the
individual components in your
pattern library.
253. <a class="btn btn-‐default" href="#"
role="button">
Button using a link
</a>
<button class="btn btn-‐default"
type="button">
Button using a button
</button>
254. The problem with this is that it
can lead to some confusion
about when to use a link or a
button.
255. When the incorrect element is
used, this can confuse Assistive
Technology users who expect
links and buttons to behave in
specific ways.