Watch the video of this session: https://youtu.be/Bw7WsI8FAMk?t=1s
Enable your learning platform to reach more students by utilizing Learnosity’s Accessibility tools. In this session, we’ll explore some of the work we’ve done to remove barriers for students with disabilities, and how designing your product with accessibility in mind improves the experience for every user. We’ll discuss the challenges of making interactive technology accessible, as well as how to utilize specific functionality such as accessible colors, support for screen readers and keyboard usability.
7. Visual disability
Conditions may include:
● Color blindness
● Blurry or weakened vision
● No vision (blind)
Impacts how a student sees and
perceives information.
Affects 3% of the population in the United States
8. Auditory disability
Conditions may include:
● Hearing impairment
● No hearing (deaf)
Impacts how a student hears and
perceives information.
Affects 3% of the population in the United States
9. Motor disability
Conditions may include:
● Chronic fatigue
● Congenital diseases
● Traumatic injuries
Impacts a student’s physical tasks.
Affects 8% of the population in the United States
10. Cognitive disability
Functional cognitive disabilities:
● Memory recall difficulty
● Distractibility (attention)
● Comprehension difficulty
Impacts a student’s mental tasks.
Affects 6% of the population in the United States.
12. Screen reader software
● ChromeVox for Google Chrome
● VoiceOver for Safari on Mac OSX
● NVDA for Firefox on Windows
● JAWS for Internet Explorer on Windows
23. UI component color (in 2015)
Normal vision Protanopia
(blindness to red)
Deuteranopia
(blindness to green)
Fixed in 2016
24. ARIA attributes
● Makes our tools more accessible for users with screen readers
● ARIA states and properties are built in
● LaTeX math content you create generates ARIA attributes
● ARIA live regions update content automatically
28. Authoring accessible content
Supplemental media support:
● Transcripts
● Subtitles
● Closed captions
Tip: stimulus area can be used to house supporting content too.
32. What we saw
● Accessible color themes
● Font size solutions
● UI component color contrast
● UI component color
● Screenreader support
● Third party integration
Reading textual, math
and image content in a
screen reader
33. In closing
● Learnosity has your back with our accessibility solutions
● Most solutions you saw today are ready out of the box
● Your efforts are freed to make sure the content is accessible
● Let’s reach as many students as we can
34. Ask us more about
● Observational testing
● Simulating disabilities
● Learnosity APIs
● Customization
● Third party support
● Best Cheeseburger in New York (or Sydney)
Good afternoon. Welcome everyone to our talk on the topic of accessibility and why it is a priority.
I’m James Santilli, a User Experience Designer at Learnosity.
The design team at Learnosity are the biggest advocate for our customers’ users.
We’re passionate about usability and accessibility.
Hi. I’m Kevin Holloway. I’ve probably worked with a fair number of you in the past.
I’m a Business Development Engineer here at Learnosity.
I help clients with any technical or coding support they may need.
Today we’re going to talk about:
“The challenges of developing an accessible product, both from a business and user point a view.”
“The Advantages of an accessible product focus, including the market you can capture, or the requirements- like WCAG and section 508 of the ADA.”
“Finally we’ll take a look at Learnosity’s solutions, from our design ideas, to actual demos- Where James here will play both Student and Author..”
“We, unfortunately, won’t have time for a Q&A at the end, but please feel free to find James or I after with any questions you might have. We may not know every right answer, but we definitely know the person in the room who does.”
Challenges...
Might be harder and more varied than you think…
Not just good UI design…
There are a huge amount of challenges to face, and it’s worth getting on the same page about them.
Truthfully, when talking with past clients about implementing accessibility, I would always feel a sense of uncertainty loom over the conversation.
And for good reason - accessibility can be a challenging topic to discuss, let alone implement.
And less in Edutech, but I’ve found accessibility is often one of the last development efforts talked about.
So let's talk about why that is:
A lack of awareness can let the quality of solutions down- required tool for each impairment
Accessibility is a non-stop developing effort - both improving on what’s been made and adding new features.
Accessibility is a non-stop testing effort - new features, question types and content have to be tested.
Developing for assistive technologies means supporting more hardware and software - with their own special ways of doing things.
And the stakes are high, because a bad accessibility experience doesn’t just mean a bad user experience for people using your product.
It may also mean the people lose their inability to interact with your product entirely.
That’s where there is a chance at a missed opportunity.
At Learnosity we design solutions for 4 types of disabilities:
Visual, auditory, motor and cognitive.
All four of these together add up to a large range of considerations that each require multiple, unique solutions.
And each of these is a development effort on its own.
We also want to recognize there may be other, more specific medical and injury related disabilities not shown here.
If there are any customers that have persons with disabilities not represented in these categories, we’d love to know.
Please reach out to us after the talk.
Visual disability.
In the United States, visual disability affects 3% of the population,
Conditions may include color blindness, blurry or weak vision, or no vision at all.
This disability impacts how a student sees and perceives information.
Things like content in questions or components in the interface.
At Learnosity, the interface of our APIs has been designed to be high in contrast.
We’ve also designed for scenarios where the interface can’t be seen at all.
We’ll be using a screen reader to read the interface, later in the demo section.
Auditory disability.
This also affects 3% of the population in the United States.
Conditions may include low hearing impairment to severe hearing impairment, or no hearing at all.
This disability impacts how a student hears information.
Things like notification sounds or audio tracks.
Provided your student can see, an auditory disability will not impact the student’s experience with the Learnosity APIs.
It’s important to note, however, that this relies on you to author the content in an accessible way.
We’ll give some tips on how to do this later in the talk.
Motor disability affects 8% of the population in the United States
Conditions may include chronic fatigue, congenital diseases, minor injuries or traumatic ones.
This disability impacts a student’s physical tasks - the dexterity of their hands and body motion for example.
Motor disabilities require the use of assistive technology in order to interact with a product.
Things like adaptive keyboards, switches and touch pads.
At Learnosity, Assess API and Questions APIs has been developed with clear paths for keyboard navigation.
We’ll be using keyboard navigation, later in the demo section.
Cognitive disabilities are quite broad.
At Learnosity we consider functional cognitive disabilities the first priority for web accessibility.
These are conditions such as memory recall difficulty, distractibility and comprehension difficulty.
This disability impacts a student’s mental tasks - their recall, focus and ability to organize for example.
Cognitive disabilities require certain accommodations to be made.
At Learnosity, our APIs use visual clues to highlight important information for students.
We use structural elements to make it easy for students to understand content and identify it again.
We’ve also made it possible for you to create supplemental media for students with comprehension difficulties.
We’ll touch on how to do that later in the talk.
At Learnosity we test with screen reader software.
Screen reader software gives us the necessary coverage for 3 of the types of disabilities we mentioned.
Screen reader technology, in particular, can be quite specialized - and it’s the reason why it’s in the challenges section of our talk ;)
The learning curve for using a screen reader can be intimidating at first.
At Learnosity, we’ve supported employees who have developed an interest in screen readers.
In doing so, we found those employees have become evangelists for the technology.
Those employees have helped the adoption within teams.
When you raise an issue about screen readers, more than one of us will be able to triage the issue for you.
If at this point, some of you are thinking, “what is a screen reader?”.
It is a program that runs on the student’s computer.
It’s not a program in Learnosity’s APIs, and its not a program in your product - it’s installed by the student on their computer.
The screen reader assists the student by describing the contents of the page, and also gives them the ability to interact with controls in the page.
Different screen readers are optimized for specific browsers.
Trying to support all screen readers on the market is just not feasible - testing efforts can quickly multiply, across all screen readers and across all browsers.
At Learnosity, we test with 4 screen readers.
ChromeVox for Google Chrome (cross-platform)
VoiceOver for Safari on Mac OSX
NVDA for Firefox on Windows
JAWS for Internet Explorer on Windows
We’ll be using ChromeVox in a live demo later in this talk.
Accessibility does bring its challenges
the multitude of different tools that’s needed to be built for each disability
The high stakes
The constant development effort
But it has always been part of Learnosity’s goal. Take a look at these two images- this first one on the left was built by Mark and Gavin pre-Learnosity, one
But though we at this time might see the UI as a little outdated, I think you can see many of our basic Accessibility tools right there. Despite the challenges, however, <MOVE TO NEXT SLIDE> we believe
<MOVED TO NEXT SLIDE> we believe that the effort is very rewarding. So why put our collective efforts into accessibility? What exactly are the advantages?
The first is allowing your platform to capture more of the market.
Estimates do vary, but it’s generally found that about one in five people using the web in the US require some kind of accommodation when using the web.
James went through each individual Though each impairment is rare on its own, together they make up a large portion of your userbase. Here is a breakdown of that 20%.
While each of these groups require a different solution, together they make up a large portion of your potential users. We’re here to show you how using Learnosity will ensure you can capture all of it.
It’s also worth talking about requirements.
The ADA:
The Americans with Disabilities Act was updated in 1998 with guidelines for Electronic and Information Technology.
This newly created section, 508, defines the federal requirements for accessibility in the context of the web, including:
What devices should be supported
What information should be available to accessible software, like screen readers
Close Captioning Requirements
Visual Requirements
Just to name a few
WCAG:
WCAG, created by the World Wide Web Consortium, stands for Web Content Accessibility Guidelines
It is one of the most common standards for web content accessibility.
Together these two standards are the rules we constantly test ourselves against.
Learnosity is extensively complaint to both AA-WCAG standards and section 508.
Unfortunately, due to the difficulty of representing some of the content created with our more complex question types, not every question type can claim to have an equal experience with accessible tools.
We will always build our questions to be useable with these tools, but due to technical limitations, sometimes the experience will simply differ to due the nature of the question type.
But that being said, by authoring with accessibility in mind, Learnosity can easily be up to AA-WCAG standards and the requirements of 508.
Other ways we evolve?
Customer feedback
When we hear back from you and your users, we’re able to adapt.
Testing with users
We test our question types with users who have impairments.
“While it’s important to note the standards we hold ourselves to, it’s important to say that our efforts in this area are not to check a box...”
“I truly believe that what draws people to work in education- whether that’s directly, like teaching, or in the education industry like everyone here- is an interest in doing good.” Plenty of other industries to work in. “So though we want to impress upon you the business and technical reasons to always keep accessibility in mind, what I suspect is the greatest and most obvious reason to all of you is that it includes those students who need the most.”
Our primary reason is that making accessibility a priority is simply... the right thing to do.”
Learning opportunities/same mission/help the world.
“We want to allow you to assess students based on their abilities, not their disabilities”
“And this is why we continue to push development of Accessibility- and why Mark and Gav have been doing so from the beginning. Not because it’s easy, by any means- but becau
“So now that we’ve talked about the challenges, and that we’ve talked about the reasons to face these challenges, let's talk about what you’re probably very interested in- the solutions Learnosity has developed and continued to work on today.”
The first accessible solution we have is text color.
Text color is important for persons with visual and cognitive disability.
In Assess API, there are multiple color theme options available with accessible colours within them.
Text color in each theme passes a minimum color contrast ratio of 3:1 as required in the WCAG.
In an assessment, these color themes can be selected by the student, so they can choose the option that suits them best.
In real world testing environments, you may be required to provide students with comprehension difficulties, an assessment that is printed on a different colored paper.
Our accessible color themes are the digital equivalent of your colored paper.
Text size for visual and cognitive disability.
Most modern web browsers can scale text.
Those of us in the room today would be familiar with the shortcut ‘command plus’ (or ‘control plus’) to increase text size in a web page.
However, some user segments are not necessarily aware of this feature.
And some web browsers on tablet and mobile devices don’t provide access to this feature at all.
At Learnosity, we bring this feature forward in our accessibility options.
UI component contrast for visual disability.
On the screen we have a cloze text question.
On the left is how a cloze text question looks under normal conditions.
On the right, we’ve simulated what this question may look like in a low-light environment.
You’ll see the components and text remain legible.
Questions are presented to students in different environments:
On monitors of various shapes, sizes and color profiles.
On low-light display panels of government-issued touchscreen devices.
In front of a class, projected on a wall.
Questions may appear saturated or blurry.
The high contrast of Learnosity’s UI components helps all students, not just those with visual disability, to see and perceive information, in these environments.
UI component color for visual disability.
Accessible colors are present in Questions API too.
This is the simple chart question in histogram mode.
Each colored bar has an accessible color that is high in contrast.
Together, the colours are quite pleasing and students of all abilities will be able to see them.
This question hasn’t always looked this way though.
In 2015, we realised some students were looking at this version of the question and seeing this, and this.
This is a simulation of what persons with color blindness - ‘prott-a-nopia’ and ‘doo-tu-ro-nopia’ - were seeing.
If we were going to ensure that the information was conveyed accurately, to people of all abilities, we had to redesign our color palette.
We explored different color combinations and mocked up new chart designs.
We used online color resources and defined 10 new accessible colors.
We also adjusted the order in which the colors are positioned, to create maximum contrast between each bar color.
With Learnosity’s accessible solutions, you get these colours in this order, by default.
ARIA attributes allow screen readers to easily interpret HTML.
ARIA is used all around the world.
ARIA states and attributes are available out of the box.
We tackle ARIA labeling from three different angles…
So we’re going to take a look at that other side now- instead of looking at the experience from the user’s perspective, lets look at authoring some of the same type of questions we looked at with accessibility in mind.
Mirror first, and then: https://docs.staging.learnosity.com/demos/educate2017/accessibility/qe.php
So on the flip side of the coin, it’s important to note some of the pieces of Accessibility that have little to do with how they’re delivered, and everything to do with how they’re authored.
Some classic examples of this are:
Transcripts
Subtitles
Closed Captions
These require extra content along with more advanced tools to be truly accessible.
This is part of our shared responsibility: Learnosity continues to work on developing tools for accessibility, and you can concentrate on:
What content do people with disabilities need? And this isn’t limited to adding extra content- it’s also about shaping your content. Can you author questions which differentiate themselves clearly for those with low vision? Make it easy to follow for those with cognitive impairments?
So we’re going to take a look at that other side now- instead of looking at the experience from the user’s perspective, lets look at authoring some of the same type of questions we looked at with accessibility in mind.
Mirror first, and then: https://docs.staging.learnosity.com/demos/educate2017/accessibility/qe.php
Sometimes there are third party plugins with features you may want to support your student.
Many screen readers, like our partners at TextHelp, have developed tools specifically to support those students with cognitive disabilities.
Features like highlighting, picture dictionary, definitions and review modes, give context and make clarity.
Though TextHelp is one of my favorite examples, we play nicely with many third party tools, and we will always do what we can to allow you to extend the functionality of your platform by making integration with these third party tools.
<read list>
We also demo’d the experience with screen readers for your students, and some ways of how to use learnosity’s authoring tools to author with accessibility in mind.
So, in essence, we want you to know that when it comes to Accessibility, we have your back. Our extensive testing and constant improvements means you can have confidence our tools can support your student’s needs.
The way we’ve designed for accessibility, purposefully, is to be powerful and ready out of the box. Its useable as soon as you load up your first Assessment.
The relationship between your company and ours is a partnership more than anything else, and accessibility tools are only half the story.
The other half of the story is the content within your own item banks.
When both Learnosity’s tools and your content are designed with accessibility in mind, we will be able to reach that percentage of students who really need it most.