(Note from the editor: The axe for Android mobile app is no longer available.)

Quickly determines if an Android app is accessible by people with disabilities

Herndon, VA –  April 9, 2019 – Deque Systems, a leading accessibility software company specializing in digital equality, announces axe for Android, a free mobile app that analyzes any Android application to determine how accessible it is to people with disabilities.

Android developers and other stakeholders now have a solution that automatically assesses the usability of an application early in the development process, so common issues can be addressed before impacting users. People relying on assistive technology, such as Android TalkBack, often experience a range of difficulties when attempting  to use Android apps developed without accessibility in mind.

Axe for Android is the newest addition to the axe family. Axe, well-known as a Chrome and Firefox extension for web accessibility testing, uses Deque’s industry-standard, open source rules libraries for Web, Android, iOS and Windows. Deque recently open-sourced its Windows accessibility rules library in conjunction with Microsoft.

“As often as you reach for your smartphone, so do hundreds of millions of people with disabilities worldwide. Accessibility is emerging as an essential development concern, but many developers don’t know where to begin,” comments Dylan Barrell, CTO of Deque Systems. “Axe for Android automates the testing of native and hybrid application code against our rules library and gets that process started in minutes, allowing them to build content that reaches this large, untapped market.”

Axe for Android is available now at the Google Play App Store: (this link is no longer available)

What is Digital Accessibility? There are over 55 million people with severe disabilities in the United States. People with visual, auditory, motor, speech and cognitive disabilities rely on various assistive technologies and alternate methods of interaction to use digital documents, web and mobile apps. By testing against the W3C’s Web Content Accessibility Guidelines (WCAG,) – which are fully integrated into Deque’s rules library – organizations can make documents, web and mobile apps accessible to everyone, including those with disabilities.

To learn more visit: https://www.deque.com/axe/axe-for-android/

ABOUT DEQUE:

Deque (pronounced dee-cue) is a web accessibility software and services company, and our mission is Digital Equality.  We believe everyone, regardless of their ability, should have equal access to the information, services, applications, and everything else on the web.

We work with enterprise-level businesses and organizations to ensure that their sites and mobile apps are accessible. Installed in over 250,000 browsers and with over 1,000 audit projects completed, Deque is the industry standard.

News Media Contacts

At Deque:
Ryan Bateman, 703-225-0380, marketing@deque.com
Kristina LeBlanc, 508-930-5636, kristinawleblanc@gmail.com
Frank Cioffi, 415-893-1570, frankc@medialinkgroup.com

Deque Systems

Deque Systems

Deque is the global leader in digital accessibility, helping the world’s top enterprises build inclusive products, services, and experiences and achieve lasting compliance. Recognized by leading industry analysts for its AI-powered tools, comprehensive services, and developer-trusted solutions, Deque delivers the industry’s most complete accessibility offering. The Axe platform, anchored by Axe-core, has more than 3 billion downloads and 875,000 installed extensions, making it the global standard for accessibility testing. As a pioneer of people-first accessibility, Deque applies a human-in-the-loop approach that blends expert insight with AI innovation to advance its mission of digital equality for all.

All Posts by Deque Systems Website
Tags:  axe ,  mobile ,  mobile accessibility ,  mobile apps

I’m writing this post to provide some added color and personal opinions you may have missed in our recent joint press release with Microsoft titled “Deque Systems to expand open source accessibility tools in collaboration with Microsoft.”

As someone who got into the accessibility industry before there was such a thing, I find Microsoft’s commitment to accessibility very exciting. It isn’t everyday that a software giant like Microsoft champions inclusivity at the level they are doing.

Deque’s journey with Microsoft began several years ago when Microsoft decided to use our library of accessibility courses to train internal Microsoft employees. At the time, we were very impressed by the planned widespread deployment of our coursework, little did we know it was only the beginning of the journey together. Soon thereafter, Microsoft decided to adopt Deque’s open source rule engine, “axe-core” for use by developers internally and eventually power the automated checker for their new Accessibility Insights tools. If you read the press release already, you know that this brings us up to today. Microsoft joining the axe community and open sourcing their Windows rules as axe for Windows is a further crucial step in strengthening the community that has been strengthening axe since its release. The community can now contribute on accessibility tests for their Windows-based applications.

We are also thrilled that this decision coincides with Deque’s commitment to expand our contribution to the community by open sourcing axe rules libraries for iOS (coming soon) and Android and releasing free applications based on these rules.

I believe that accessibility testing will be a core responsibility of every front-end developer. Today is a milestone that allows us to expand the community of axe users and contributors, enabling everyone to automate more accessibility testing than ever before, using a common testing ruleset across platforms.

What this means for accessibility

The Microsoft and Deque collaboration on the open sourcing of accessibility tools is a game changer for the world of accessibility. Before axe, accessibility rules were like black magic. Most rules were subject to personal interpretation, lacking transparency and collective community support to help to improve and to use. There was precious time being wasted on comparing results from different implementations of WCAG standards rather than focusing on what really matters – making the digital world live up to its promise of being the greatest equalizer since the printing press , allowing every person in the world, regardless of ability to tap into the knowledge, convenience and ever increasing innovations of the computers and Internet. Weeks were being spent on arguing over which tool was providing the right or wrong answer. I also saw a dismissal of accessibility from developers, the audience which I know will have the ultimate impact, because they simply didn’t have the time for the endless arguments over standards and their flawed implementation.

Axe invited a “million eyeballs” to scrutinize our rules it invited contributions and these contributions have made it what it is today – the de-facto standard for automated accessibility testing. Deque devoted a team of brilliant developers to nurture this project in coordination with the community. The community responded and we saw contributions from Google, Facebook, eBay and many other companies

While each organization might have different reasons for starting on the accessibility journey, it is ultimately about a great customer experience for users of all abilities.

Ask yourself a question: would you rather work for a company that was focused on short term profits or one that recognizes the moral importance and long-term revenue opportunity of making their online experience as widely available as possible? There are 1 Billion people with disabilities around the world, each and every one of them has the same right to access your digital services. Excuses to ignore them are running out.

What this means for Deque customers

Open sourcing our web rules engine under the axe banner and seeing it become the de-facto standard is instrumental to our mission of “digital equality” at Deque. Yet, this is not the whole story. Our enterprise customers have many requirements that we strive to meet with our WorldSpace suite. Powered by the axe rules library, our customers can now benefit from the expansion of the axe projects and the strengthening of the community. They also can be sure to get their support, security and enterprise requirements met with our commercial tools while seeing rapid benefits of increasing automation in our axe rules engines.

You all probably have tons of great questions, please feel free to leave them in the comments or contact us directly and we’ll work to answer them.

Where to find the tools & projects to join in the effort

If you’re looking to contribute to the open source efforts, he’s where you can find all the relevant projects. Each of them are opening up soon.

Preety Kumar

Preety Kumar

Preety is the CEO of Deque Systems and co-founded Deque in 1999 with the vision of unifying Web access, both from the user and the technology perspective. Under Preety's leadership, Deque has grown to be a market leader in the field of information accessibility, serving corporate and government clients with the highest standards in information technology such as Veteran Affairs, Department of Education, Humana, Intuit, HSBC, Target, and others. She collaborated with the W3C Web Accessibility Initiative and is a nominated member of the Accessibility Forum's Strategic Management Council: a GSA sponsored group with representatives from the IT industry, academia, Government Agencies, and disabled user groups that fosters information accessibility through mutual cooperation.

All Posts by Preety Kumar Website
Tags:  axe ,  digital accessibility

Deque’s axe accessibility engine is bolstered by Microsoft collaboration, addition of new Windows rules, and the release of Deque’s open source Android and iOS rules.

ANAHEIM – March 12, 2019 – Deque Systems, a leading accessibility software company specializing in digital equality, announced at CSUN 2019 that it is working with Microsoft to add Windows platform support to the axe accessibility rules engine.

Axe has the world’s most widely deployed Web accessibility rules engine, currently deployed to 25 million devices. Microsoft’s new and significant Windows contributions to axe, extend this widely adopted de facto Web accessibility ruleset standard.

Now developers across Web, Windows, Android and iOS platforms can all test their code in development using a common, unified approach, allowing them to prevent critical issues from impacting people with disabilities around the world.

 “We’ve been working for 20 years building up to this moment,” comments Preety Kumar, CEO of Deque Systems. “Deque’s core mission has been to make accessibility a daily responsibility of every development and design team in the world. This collaboration is a huge step toward making that a reality.”

Keith Ballinger, General Manager, Developer Services, Microsoft said, “Microsoft and Deque share a common vision of a more inclusive digital future. We are excited to expand our collaboration with Deque as it is an essential part of our journey to design, build, and launch more accessible products.”

In addition to the axe contributions, Microsoft is announcing the open sourcing of Accessibility Insights, a set of tools that empowers developers to build more inclusive solutions.

We invite developers across the world to be part of the movement to shift accessibility left by integrating these open source tools into their inner dev loop. Together, we can achieve digital equality, making the digital world accessible to everyone.

To learn more visit https://www.deque.com/axe/.

ABOUT DEQUE:

Deque (pronounced dee-cue) is a web accessibility software and services company, and our mission is Digital Equality.  We believe everyone, regardless of their ability, should have equal access to the information, services, applications, and everything else on the web.

We work with enterprise-level businesses and organizations to ensure that their sites and mobile apps are accessible. Installed in over 250,000 browsers and with over 1,000 audit projects completed, Deque is the industry standard.

News Media Contacts

At Deque:
Ryan Bateman, 703-225-0380, marketing@deque.com

Deque Systems

Deque Systems

Deque is the global leader in digital accessibility, helping the world’s top enterprises build inclusive products, services, and experiences and achieve lasting compliance. Recognized by leading industry analysts for its AI-powered tools, comprehensive services, and developer-trusted solutions, Deque delivers the industry’s most complete accessibility offering. The Axe platform, anchored by Axe-core, has more than 3 billion downloads and 875,000 installed extensions, making it the global standard for accessibility testing. As a pioneer of people-first accessibility, Deque applies a human-in-the-loop approach that blends expert insight with AI innovation to advance its mission of digital equality for all.

All Posts by Deque Systems Website
Tags:  accessibility tools ,  axe ,  developers ,  news

The first axe release of 2019 is nearly here! We’re introducing some new rules, enhanced reporting capabilities and a variety of bug fixes. We are very excited to be able to share all of these new features with our users. We have big plans for axe-core this year, and axe-core 3.2 sets us up strong and ready for another excellent year of accessibility. We will be updating all axe and Attest HTML tools over the month of March to include axe-core version 3.2. For how this release affects other Deque tools, please contact your account representative for more information.

New Rules

Rule 1:<aria-label>; values match the content of widgets

This new WCAG 2.1-based rule is specifically designed to support users of dictation software. By ensuring that the text that is visible on the screen matches the accessible name, dictation software knows what buttons, links and other widgets with “name from content” to activate.

Failure Example:

<a href=”page2.html” aria-label=”Page 2”>Next ?</a>

Passing Example:

<a href=”page2.html” aria-label=”Next page”>Next ?</a>
Note: To enable this rule, users should enable the “experimental” tag. Users of the axe browser extension can use axe-coconut, which has experimental rules enabled.

Rule 2: Form fields do not have duplicate labels

This rule was taken out of the form field labels rule and turned into a separate best practice rule. A common mistake when marking up forms is that authors accidentally assign two labels to a single form field. Intentionally assigning multiple labels is not a common practice; it creates code that is difficult to maintain.

Failure Example:

<label class="sr-only" for="nmr">Number of products</label>

<label><input type="text" id="nmr" /> pizza’s</label>

Passing Example:

<input type="text" id="nmr" aria-label="number of pizza's" /> pizza's

Rule 3: Complementary landmarks are at the top level

This best practice rule ensures that aside elements or elements with role=complementary are not an internal part  of another ARIA landmark. Nesting landmarks create confusing document structures. This rule is similar to existing rules that test this same ARIA requirement for the banner, contentinfo, and main roles.

Failure Example:

<main>

<p>Some text</p>

<aside><p>An aside</p></aside>

</main>

Passing Example:

<main><p>Some text</p></main>

<aside>An aside</aside>

Other New Features

Feature 1: Test environment details included in analysis results

A common question when using axe-core, and indeed most accessibility testing tools is that it can be challenging to reproduce specific issues. Why were there no issues yesterday, but when I run axe today, do I get 5 issues? Almost always the answer is one of the following:

  1. The page has changed.
  2. Axe-core has updated, or its configuration is different.
  3. The browser setup is different.

While axe cannot tell you if the page has changed, as of version 3.2, the axe-core analysis includes information in its results enabling you to work out all of the other variables. Axe-core now reports the following properties:

  • Test engine:
    • name: axe-core
    • version: 3.2.0
  • Test runner:
    • name: The test runner used in the analysis (e.g.,: Axe Devtools Chrome, Axe CLI)
  • Test environment:
    • Window width & height: Used to indicate which media queries were applied
    • User Agent: The browser, browser version, and operating system used in analysis
    • Orientation angle & type: If available, axe-core reports the screen rotation

Once these properties are available in axe-core, we add the individual properties into the different axe-core test runners and reporters.

Feature 2: More granular accessibility support feedback

In axe-core 3.1 we started individually notifying users when they were using roles that were not widely supported by assistive technologies. This allows users to distinguish mistyped / non-existing roles from roles less widely supported. Axe-core 3.2 now also reports such issues for ARIA properties and states that are less supported. Less supported ARIA properties include the following attributes:

  • aria-details
  • aria-roledescription
  • aria-describedat (non-standard)

Feature 3: New accessible name computation

A key component to axe-core is its accessible name computation algorithm. It is used to determine how screen readers and other assistive technologies name the various headings, links, and other components on a page. Late last year, the W3C published version 1.1 of the Accessible Name Computation. We took that opportunity to rebuild our implementation not just to give a reasonable indication of whether or not an element has an accessible name, but to calculate it accurately.

With this new accessible name computation method, tools build on top of axe-core can now accurately represent the most likely accessible name that different browsers give to a component. It is built to find the smallest denominator between Chrome, Firefox, and Safari. Additionally, it can be configured to report the accessible name of a specific browser accurately.

Noteworthy Bug Fixes

  • Allow off screen labels for form fields (#1187)
  • Allow <div> groups in definition lists (#1284)
  • Prevent th-has-data-cells from crashing on empty rows (#1285)
  • Prevent TypeErrors in color-contrast checks(#1320)
  • Deprecate axe.commons.utils namespace (#1330)

Known Issues

  • Axe-core does not work under strict content security policy (#1175)
  • Using maximum-scale in viewport meta element should not be flagged as an issue (#694)
  • Do not check color contrast of non-printable characters (#315)
  • Heading order rule can produce false positives when using context.exclude (#278)
  • … see the complete bug list.
Wilco Fiers

Wilco Fiers

Wilco is the principal product owner of axe-core and axe DevTools at Deque Systems. He is based in the Netherlands and has worked in accessibility for over 18 years. During this time, Wilco has worked in auditing, consulting, standards authoring, and accessibility tool development. Notable work includes being project manager of WCAG 3, founding chair of ACT Rules Community, lead developer of axe Linter and WCAG-EM report tool, and industry advisor to the EU's Web Accessibility Directive Expert Group.

All Posts by Wilco Fiers
Tags:  axe-core

I had the opportunity to chat with Shadi Abou-Zahra, the Accessibility Strategy and Technology Specialist at W3C, to discuss EN 301 549. If you’re unfamiliar, the W3C or World Wide Web Consortium, is the international standards body that develops web standards. Shadi works in a part of the W3C that that focuses on making the web accessible to people with different kinds of disabilities, the WAI or Web Accessibility Initiative. He’s one of the top accessibility minds in the world and has spent considerable time contributing to the European accessibility standard EN 301 549. In the video below I asked him a series of high-level questions to help those of us who work for US organizations. If video ain’t your thing, continue reading to follow our conversation.

What is Digital Accessibility?

Digital accessibility is basically making all the electronic products accessible. I often compare it to physical accessibility, it’s the electronic version of a curb cut or a ramp. It’s the practice of making software, web content, documents and hardware in a way that people with different kinds of disabilities can use them. One example may be providing text alternatives for images so that these can be read out loud by people using screen readers who cannot see the screen. Another is including captions to provide an audio alternative for people who cannot hear the content. As we continue having more digital content and digital products, digital accessibility is becoming immensely important to include people disabilities in addition to providing benefits for everyone else.

What is EN 301 549?

Let’s get this out of the way first. There is no nickname or shorthand for saying EN 301 549, the actual title of the document is even longer! Ok, let’s talk about what it means. In a nutshell, EN 301 549 is an accessibility standard that covers all ICT (Information and Communication Technology). This includes pretty much every digital product you can think of, cell phones, printers, ATMs, electronic documents, software, web content and more.

Our interest at W3C is to make sure that there are “harmonized standards for digital accessibility.” It really doesn’t make sense to have a set of standards in Europe and a set of standards in the US and the set of standards in other individual countries. By nature, we all know the Internet is global and knows now boundaries, we need a common set of accessibility requirements to make it easier to practice. And this is where W3C comes in.

The W3C’s web content accessibility guidelines (WCAG) has really become the international standard, which is why it became part of EN 301 549. EN 301 549 are technical requirements for digital accessibility. The part of EN 301 549 that covers web is actually WCAG version 2.1. One key difference is additive sections in the European standard for electronic documents. A document that is not available on the web, maybe on a USB Drive or stored locally on your computer, also follow WCAG using a W3C working group note called “WCAG2ICT.” It’s basically an interpretation of WCAG for this context. For example, if you have a requirement for color contrast, you need to make sure that there is sufficient contrast between the foreground and background between of text and the background it rests upon. It really makes sense to apply that requirement to websites but it’s also required for software and documents you use locally, on your personal devices. It doesn’t make sense to suddenly have a set of requirements to publish your document online but if you have it on your hard disk or if you share it you know with your colleagues via the intranet, that you then have a separate set of accessibility requirements. The boundaries between the areas of software, web and content is diminishing, we now have more Universal requirements that apply to all these different types of content.

What does EN 301 549 mean from a legal compliance standpoint?

Let’s compare this European standard to some you may be familiar with in the US.

The technical requirements of the Section 508 procurement law in the US refer to WCAG for web content, documents, and software. There are various policies across the European member states that rely on EN 301 549 in this same capacity. EN 301 549 is the technical standard that allows the European Commission to enforce certain policies in various contexts across Europe.

What next steps I think would you recommend that US businesses take?

There is a lot of policy progress and development happening in Europe right now. For example, EN 301 549 is being used right now by the so-called Web Accessibility Directive. This is a European legislation, so it applies across all European Member states. They are required to adopt that European policy into their national legislative framework, so that public bodies adhere to that technical standard. This is a pretty major change right now, having a common set of requirements to fuel different kinds of accessibility laws across Europe. At the same time right now in the European Parliament, there’s progress on the so-called European Accessibility Act, or the EAA, which could be compared to the ADA in the United States. The EAA is an anti-discrimination law that would apply to public services and products from private businesses. Banks, Airlines and retail shops would be good examples of this. So, as you can tell from all the activity in the policy space, accessibility is becoming more-so important in Europe just like it is in the US.

I have to say though, it’s really important to remember that we all move away from legal motivations for accessibility. We can’t forget to recognize that access for people with disabilities is a right under the UN Convention on the Rights of persons with disabilities.

At the same time, we also need to recognize the business benefits of accessibility. If I make my curb cut analogy again, many of us know that the more often you implement a curb cut, the cost of implementation becomes much less. In addition to the cost savings over time, you’re creating additional benefits for the rest of the population, like people using a bicycle, people pushing trollies and so on. It’s the same with digital accessibility. When I’m able to use something using only my voice because I have a physical disability, it prompts creators of digital products to consider additional use cases. The resulting action for the market are hands-free devices, home automation products and more, that benefit us all. Things like this they’re becoming part of everyday and very often start off as assistive technologies. Accessibility is innovation. It provides universal benefits while improving usability and appeal to much broader audiences. These benefits are critical to keep in mind, beyond any legal requirements you may encounter around the world.

Special thanks to Shadi for taking the time to help explain all this for us!

Ryan Bateman

Ryan Bateman

Ryan is a Marketing leader at Deque. He's worked in the telecommunications and performance monitoring industries for over ten years and cares deeply about improving the web for everyone.

All Posts by Ryan Bateman
Tags:  web standards ,  Website Compliance

Caveat #1: This blog post assumes you are familiar with the language and practices of usability testing. If you are not, here are some great resources:

Caveat #2: While this blog post covers usability test considerations for accessibility as a whole, the majority of examples are related to assistive technology (AT) users.

Accessibility is a sub-discipline of Usability. If accessibility is a consideration for the application you are creating, then your usability test should reflect that. You’re probably familiar with running usability tests for sighted/mouse users, this post will discuss considerations for accessibility for non-sighted/AT users when conducting a usability test.

Considerations for accessibility when designing a usability test

1) Create a recruitment plan

Having the right users for your usability study is crucial to its success. Recruiting can be tedious, but it is foundational to conducting a usability study. When recruiting for an accessibility usability test, it is imperative to consider the following types of participants to holistically test for accessibility.

Here is an example of a usability test for accessibility that includes the following disability types:

  • Visual – legally blind and low vision
  • Auditory – legally deaf
  • Motor – heavy usage of keyboard and/or other peripherals.
  • Cognitive – focus, perception.
  • Speech – unable to use voice

When you’re choosing the number of participants for your test, it is important to have an appropriately representative sample based on the medium or artifact you are testing (i.e. the number is a sliding scale). Below is a sample recruitment plan illustrating which categories of disability to include in your usability test depending on the medium or artifact you are testing:

Examples:

  1. Testing a media application (e.g. YouTube) – Visual, Low Vision, Cognitive (focus), Cognitive (perception), Motor & Auditory.
  2. Online Retail (e.g. Target) – Visual, Low Vision, Cognitive (focus), Cognitive (perception), Motor & Auditory.
  3. Gaming company (e.g. Nintendo) – Motor, Visual, Low Vision, Cognitive (focus), Cognitive (perception), Auditory. For example, if you are designing a/for a rumble pad and the game itself (i.e. you are testing both hardware and software).
Category Test Subject Parameters Disability Notes
Visual (Blind) Screen reader only (does not use vision for tasks)
  • No Light perception
  • Light perception
  • Legally Blind
 By testing with a screen reader who does not use vision for these tasks, we efficiently and effectively cover all three of these use cases.
Low Vision Screen Magnifier User (with visual acuity between 20/70 and 20/200) that uses 4x to 6x magnification. Visual acuity between 20/70 and 20/200 in the better-seeing eye with best conventional correction.
Auditory User who relies on captions/transcripts (not audio)
  • Deaf
  • Hard of hearing
 Only required if there is audio content
Motor Sighted user who only uses a keyboard.
User with a tremor frequency of multiple tremors per second in the body part that is used to interact with technology
  • No hands
  • Paralysis
  • Reduced dexterity
  • Tremors
Cognitive (Perception) User has documented diagnosis for dyslexia that took regular courses in K12 or Higher Ed. Dyslexia A single user may have multiple cognitive disabilities. That user may be counted as filling multiple categories.
Cognitive (Focus) User that has/had a documented 504 plan (or doctor’s diagnosis) for focus issues that took regular courses in K12 or Higher Ed. Attention disorders A single user may have multiple cognitive disabilities. That user may be counted as filling multiple categories.

When conducting usability tests, it is not recommended to conduct tasks with the following disability types:

  • Colorblind – use trusted scientific methods/tools to reliably ensure that the content meets the needs of the colorblind.
  • Cognitive (seizure) – use trusted scientific methods/tools to reliably ensure that the content does not cause seizures. Instead, use trusted scientific methods/tools to reliably ensure that the content does not cause seizures.
  • Speech – Only required if voice control is the only method of computer interaction.

Use Caution when including the following disability types:

  • Cognitive (memory) – CAUTION: Some complex online tasks or complex interfaces may be overwhelming. If you conduct usability studies for for people with memory issues there is a risk that some complex tasks could cause cognitive overload problems.
  • Cognitive (executive function) – CAUTION: Some complex online tasks or complex interfaces may be overwhelming. If you conduct usability studies for for people with executive function disorders there is a risk that some complex tasks could cause cognitive overload problems.

After your company screens, validates, and recruits for the following disability types and schedule the participants, note that the average no-show rate is around 11%. To minimize this rate, you may want to offer a monetary incentive to participants for their participation.

2) The script is the same

The goal-oriented script you will be writing to test whatever path, narrative, or functionality in the system is the same regardless of the user performing the test. Like all good usability test scripts, it should be devoid of leading language.

3) Considerations when conducting the usability test

When setting up your test with for a user who uses AT, consider a couple extra steps before getting started:

  • Ask them what assistive technology they use.
  • See if they are willing to turn the speed of the AT down (odds are it will be really fast!).
  • See if they are willing to turn the volume of the AT up.
  • It is a good idea to have a quick test page to make sure everything is coming through clearly on your end.

In general, we recommend sticking with moderated testing as the feedback you will get from the user’s AT and watching their keyboard pathing in real time yield critical data in understanding usage.

**TIP: When conducting usability tests for people with disabilities, follow the proper etiquette:

  • Don’t make assumptions
  • Ask before you help
  • Talk directly to the person
  • Speak as you usually would
  • Use “people first” language (i.e. “people with disabilities”, “people with low vision,” or “people who are blind” NOT “blind man”, “disabled”, etc.)
  • Avoid potentially offensive terms or euphemisms (i.e. “lame”)
  • Be aware of personal space

Final Important Note: Many prototyping software and applications do not have a lot of affordance for accessibility, meaning the artifact you create and ultimately test with may not be able to support the level of accessibility that would merit a proper test. A shadow system or working software may be the only option for being able to test with users with some disabilities such as AT users.

4) How to analyze your test results when considering accessibility

It’s important to note the goal of the analysis is the same for accessibility as it is for all other usability tests: make your software usable. When looking at the data from users with disabilities, the most important question to answer during the analysis process is the same for any other user: did the user accomplish the goal of the test?

If no, like any other usability test, you will need to determine to what degree there was a failure, what caused it, and ultimately what is needed to remedy the issue for subsequent testing. The second question to consider is to what degree of friction your user encountered when trying to complete the task or test. Below are a few examples of uniques accessibility factors to consider when doing your analysis:

  • How many tab stops did it take to get to the element the user needed to advance in the narrative? (Issue might be Reading order or Tab order)
  • Did they end up cycling through? Did they use any shortcuts such as Skip Links. (Functionality may not be marked up for AT properly. Tooltips not available or clear. Might just be a Discoverability issue.)
  • Did they get into a keyboard trap? (That’s not good)
  • Were the live region readouts clear as to what the information presented was or with how it was supposed to be engaged? (Functionality should be accurately described for AT)
  • General understanding as to how certain pieces of functionality work. (Basic workflow and usability)

Conclusion

Conducting usability tests while considering accessibility will not have a major impact or change on your usual process. The script will be the same, the way you conduct the test will be largely the same, the follow-up and post qualitative questions will be the same. Ultimately, your litmus for what is a successful usability test from a macro standpoint is the same, on a micro level there are unique accessibility measurements to consider.

Aaron Pearlman

Aaron Pearlman

Aaron is Deque's Principal UX Designer. In addition to leading both strategic and tactical UX efforts, Aaron works on creating accessibility centric standards around user research, ideation, sketching, wireframing, prototyping, and usability testing.

All Posts by Aaron Pearlman
Tags:  accessibility and ux ,  accessibility usability test ,  accessible UX ,  inclusive design ,  usability test ,  ux testing

As a key event helping fuel the growing accessibility community, Deque is thrilled to attend and be a showcase sponsor at the 34th Annual CSUN Conference. This year’s conference is taking place March 11th-15th at the Anaheim Marriott in Anaheim. Come find us at booths 315 and 317 in the exhibit hall. We’ll be performing product demonstrations and can answer any questions you have about any of our products and services. Members of the Deque sales team will also be available for one-on-one meetings if you have specific questions about getting started.

Deque Hospitality & Accessibility Awareness (Empathy) Lab Event

On Wednesday, March 13th starting at 6:30pm, Deque will be hosting its hospitality and Awareness Lab event on the Platinum Patio. Space will be limited for our invite-only event featuring the Deque Awareness (Empathy) Lab. Network with Deque experts and product owners while enjoying heavy h’dourves, dessert and drinks.

4th-Annual Axe-hackathon!

Deque is proud to be hosting its 4th-annual hackathon on Saturday, March 16th 10:00AM–3:00PM (after CSUN). The hackathon will be lead by Wilco Fiers and other members of the axe team. We will be onsite at the Anaheim Marriott (conference hotel) in Platinum Ballroom 1.

What Will We Be Doing At the aXe Hackathon?

  • Testing open source component libraries and logging accessibility issues
  • Building new axe integrations
  • Sharing knowledge and solutions with our fellow accessibility devotees
  • Working on personal accessibility projects
  • Hanging out with awesome people and making the web a better place

Who Should Come?

You should come. And bring your friends. This hackathon is open to all experience levels. If you can download a browser extension, you can test for accessibility. We’ll also have some advanced project opportunities for our more seasoned a11y friends.

Will There Be food?

Yes! We will provide lunch and a coffee break. We’ll email everyone for dietary restrictions closer to the event.

Will There Be Accessibility Accommodations?

We will provide captioning for the opening and closing of the hackathon. The event will mostly consist of people working independently and in small groups on various projects, so it won’t be possible to caption absolutely everything said at the event. If you need ASL interpretation or other forms of accommodation, please send an email to caitlin.cashin@deque.com.

More Announcements to Come…

Keep an eye on our blog as we announce our Showcase Sessions and other networking events we will be hosting at CSUN!

Deque Systems

Deque Systems

Deque is the global leader in digital accessibility, helping the world’s top enterprises build inclusive products, services, and experiences and achieve lasting compliance. Recognized by leading industry analysts for its AI-powered tools, comprehensive services, and developer-trusted solutions, Deque delivers the industry’s most complete accessibility offering. The Axe platform, anchored by Axe-core, has more than 3 billion downloads and 875,000 installed extensions, making it the global standard for accessibility testing. As a pioneer of people-first accessibility, Deque applies a human-in-the-loop approach that blends expert insight with AI innovation to advance its mission of digital equality for all.

All Posts by Deque Systems Website
Tags:  accessibility conference ,  axe Hackathon ,  CSUN 2019

Automation is the key to efficient and affordable accessibility testing. By enabling development teams to automate much of their accessibility, we can empower them to find issues faster and resolve them before they ever make it into the codebase. Not only does this require a tool that is accurate and fast, it requires a tool that can keep up with the speed at which dev teams adopt new and better tools and testing environments.  On that note, the Deque team is pleased to announce our latest integrations: axe-puppeteer and attest-puppeteer.

Puppeteer is a NodeJS library used to control Google Chrome. With Puppeteer, developers can create scripts to open pages, trigger events, run tests, and lots more. This is great for automated testing and is an increasingly popular alternative to Webdriver.

Axe-puppeteer

Axe-puppeteer is an integration for Puppeteer that uses the latest version of axe-core. It is available on NPM, and can be installed by running npm install axe-puppeteer from the command line.

Usage:

const { AxePuppeteer } = require('axe-puppeteer')
const puppeteer = require('puppeteer')

(async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.setBypassCSP(true)
    await page.goto('https://dequeuniversity.com/demo/mars/')

    const results = await new AxePuppeteer(page).analyze()
    console.log(results)

    await page.close()
    await browser.close()
})()

You can find other available integrations on our axe integrations page and our list of projects using axe-core on Github.

Attest-puppeteer

Attest-puppeteer is built on top of axe-puppeteer and comes with the usual features you have come to expect from Attest, including:

  • Multiple rulesets such as WCAG 2.0, Section 508, Dev-min.
  • Support for ruleset customization and augmentation.
  • Various reporting capabilities such as HTML, JUnit XML, SonarQube**.

Attest-puppeteer is available for customers of WorldSpace Attest and requires access from Agora, Deque’s package registry. Attest-puppeteer will be released along with updates to other Attest Node projects under version 2.6.0. Customer documentation for Attest-puppeteer can be found in the Attest HTMl 2.6 user guide (login required).

To learn more about WorldSpace Attest, see deque.com/tools/worldspace-attest/. For questions about WorldSpace Attest, you can email support@deque.com.

**SonarQube has removed essential components that are integral to the function of the Attest SonarQube Plugin. Deque has no plans to rework the SonarQube Plugin in the foreseeable future. As of July 23, 2019, Deque will no longer distribute or provide support for the Attest SonarQube Plugin

Wilco Fiers

Wilco Fiers

Wilco is the principal product owner of axe-core and axe DevTools at Deque Systems. He is based in the Netherlands and has worked in accessibility for over 18 years. During this time, Wilco has worked in auditing, consulting, standards authoring, and accessibility tool development. Notable work includes being project manager of WCAG 3, founding chair of ACT Rules Community, lead developer of axe Linter and WCAG-EM report tool, and industry advisor to the EU's Web Accessibility Directive Expert Group.

All Posts by Wilco Fiers
Tags:  automated testing ,  axe-core ,  developers

Pause: before you read this blog post it is important to understand what an accessibility false positive is. It will also be helpful to play around with Deque’s False Positive Calculator to see the impact of false positives. However, if you want a quick definition, a false positive is defined as:

Ac·ces·si·bil·i·ty False Pos·i·tive (noun) – an accessibility issue result that is mistaken result or is a duplicate issue that is created from a faulty automated accessibility tool.
“The false positives resulting from Karen’s automated accessibility testing tool can be attributed to her inexperience in interpreting WCAG violations. Karen should probably stick to creating hilarious Birdbox memes instead.”

Proceed: now that you have a solid understanding of accessibility false positives and have tested out the false positive calculator, let’s discuss the backstory and the importance of why it was made. I’ll also discuss my experience as an owner and leader of  digital accessibility and why choosing the right automated tool was critical to creating a sustainable and scalable digital accessibility practice.

The Need for Automation in Enterprise Accessibility

As the owner and leader of an extensive, complex digital accessibility program at a Fortune 50 company, I was constantly challenged to do more with less. Indeed not an uncommon problem, but one – with the quick evolution of digital accessibility over the past few years – that can be a difficult nut to crack.

I started as many do, throwing bodies at the problem. My organization hired many highly trained and expensive subject matter experts to test the large number of pages and apps we had. This approach was sustainable to a certain point until – you guessed it – the “agile revolution” hit us, and everyone was urgently moving from a waterfall to an agile development approach. Waterfall had always given us plenty of time between production pushes. And, while not full-fledged agile – we moved to incremental updates, small focused teams, and much more frequent pushes to production.

As we progressed from 5 or 10 teams running agile to then 20, 30, and then exceeding 100, the old method of using subject matter expertise assessments during the software development life cycle was falling apart. The heavy realization hit that even if we had the funding, it was not feasible to staff an accessibility expert team of 100+ people. Even simple logistical questions such as “where the heck will they all sit” were impossible to solve.

Having had experience in other non-functional spaces including performance and security, I decided to learn from my experience (and mistakes) and use the tried and proven solution – software and automation! Luckily, about this time Deque and other companies were developing and marketing some outstanding automated accessibility products, and at least one by Deque was even provided as open source – the axe-core engine library.

Jumping headlong into software and automation, we were determined to move as far to the left as possible in the software development life cycle – concept and design were big targets. Automation came in early during the development process, our developers had access to axe and other paid automated tools that allowed for continuous build integration.

Not All Automated Tools Are Created Equal

Now with the simple push of a button or the integration of a build, we were provided with truckloads of information on accessibility defects – sometimes with up to 50% of the total defects we typically experienced were covered by the axe rules engine. With developers using the browser extension and API integration the goal was to address everything. When we conducted an automated scan of our website, we expected to get -zero- defect returns.

However, as we were making this light speed progress, we noticed that some entities – who will remain unnamed in this blog – were scanning our website and still reporting we had issues. What was the delta?  It turns out that all automated scanning engines are not created equal.  Whether you are using an open source solution or purchasing a product from a vendor, the thought and diligence put into the rules engine matters. It matters a lot.

In the ecstasy of automated testing, you can get a lot of data on defects, and that data can become overwhelming. What is required at this stage is an industry leading rules engine that strives for zero false positives. We do not want anyone on our teams wasting time.  In fact if developers are working issues that they must “undo” because of false positive information, you will lose their trust. So be careful what you pick when looking to automation for scaling of your accessibility program.

Luckily for us, we already had the industry-leading solution axe-core throughout all of the products we used – zero false positives (bugs notwithstanding)!  Those entities I spoke of earlier were obviously not using axe, and eventually, we were able to determine what they were using and replicate their error-prone results. Had we used that engine or many others that lack “zero false positives” as a goal, we would have been wasting valuable time, resources, and money.

Creation of the False Positive Calculator

To illustrate how significant false positive information can be for your organization, I have provided a quick and easy to use web calculator to use for estimating. Taking some industry average numbers for exercises such as running an automated scan (30 seconds), discussing defects as a team (5 minutes), fixing defects (10 minutes), validating defects (5 minutes), and then possibly revert (because it wasn’t really a defect – it was a false positive!) you can demonstrate to your senior leadership in concrete dollars the importance of picking the best accessibility scanning engine possible.

Simply pop your company numbers into the calculator – blended hourly rate, number of team members in triage, average false positive rate, and the number of pages in scope for the effort to see the difference – tailored for your organization.

With some available products running 20% or more in false positives, that’s a great place to start in your calculations.  Play with the numbers and move them around – but even if you push down to 5% false positives, it is still a materially significant number – and represents money, time, and resources that must move to other valuable work.

Deque is committed to continual improvement of axe-core and aligning it to the Web Content Accessibility Guidelines (WCAG), especially as WCAG evolves.  Major IT organizations like Microsoft and Google have chosen axe-core as the best engine on the market today.  Don’t let automation drive you into expensive and unnecessary work – pick the rules engine that does not lie – axe-core.

Greg Williams

Greg Williams

Greg Williams is the Senior Vice President & Chief Architect at Deque Systems, Inc. He oversees program development and operations for some of Deque’s largest customers, helping them to build mature, sustainable accessibility programs.

Prior to joining Deque, Greg spent more than 30 years in the information technology field focusing on large, complex program operations for Fortune 40 companies and before that served in the United States Navy for a number of years. He had great success as the founder and owner of the Digital Accessibility Program Office for State Farm Insurance, building their practice from the ground up into one of the highest maturity level programs in the world between 2013 and 2018.

Greg has always been passionate about diversity and inclusion and has extended this passion to the disability and accessibility community - joining Deque Systems in 2018 to help launch and mature similarly successful programs across the globe.

All Posts by Greg Williams Website
Tags:  accessibility false positives ,  automated accessibility checker

Scalable Vector Graphics (SVGs) have been around since 1999, but they have seen a real resurgence in use as design interactions have become more complex and CSS/JavaScript have replaced antiquated animation programs such as Adobe Flash. There are plenty of reasons to use SVGs today including:

  • Browser support – Increased native browser support of SVGs means better consistency and higher fidelity of images.
  • Code control – Advancements in CSS and JavaScript functionality to style and animate images.
  • File size – The relative “lightness” of SVG code in a world where bandwidth and performance matter more than ever.
  • Accessibility – Markup can be added to the SVGs directly so more information can be added within the image itself – which is helpful for people using assistive technology devices such as screen readers.

Of course, this article will be focusing on accessibility, but it is good to know there are a lot of other benefits to using SVGs (just in case someone needs more convincing).

Basic Accessibility Rules for Images

Before we get to SVG accessibility you need to think about the purpose of your image. Is it to inform a user? Set the “mood” of the site? Enhance a call-to-action button? It is important to identify which of your images are decorative and which are informative. This is not always an easy task.

If an image is decorative, it needs to have an empty/null alternative text attribute. This sends a signal to the assistive technology devices (ATs) to ignore this image as it is not necessary for understanding the content or action on the page. An empty/null alternative text attribute is not the same as a missing alternative text attribute. If the alternative text attribute is missing, the AT might read out the file name or surrounding content in an attempt to give the user more information about the image.

If an image is informative, first make sure it meets WCAG standards for color contrast. There are many color contrast tools out there to help you with this task. Next, make sure you include alternative information about the image. As a reminder, alternative content needs to be meaningful and descriptive, should not exceed 250 characters, and should be unique. Make sure you avoid phrases like “image of” or “graphic of” to describe an image. A screen reader already tells the user this information.

In addition to the basic image rules, there are some SVG specific things to consider:

  • SVGs cannot flash or blink at a rate of three times per second or more. For some users, flashing or blinking content can trigger a seizure. This is serious stuff. Use the free Photosensitive Epilepsy Analysis Tool (PEAT) to test any content that could be problematic.
  • SVG animations must not auto-play for more than five seconds. If you plan to have SVG animations go on longer than 5 seconds or play on an infinite loop, you must create a way for users to pause the animation. An animation that cannot be paused can be extremely distracting for people with cognitive disabilities.
  • Not all SVGs are created equal. There are a few older/mobile browsers have issues with some SVG specific elements like <use>. And elements such as <iframe> or <object> may render fine in most browsers but may have poor AT support. But have no fear –  there are always fallback options, workarounds, and polyfills available if needed.

Accessible Patterns for SVGs

Now that we have some basics out of the way, let’s talk patterns! Over the years I have seen and used a lot of different patterns to add additional descriptive content to SVGs. But it was unclear which of these options was the best to use for the most coverage of browsers and screen readers. There are articles that touch on the subject, but many are dated or do not cover all of the patterns available, so I decided to do my own high-level browser/screen reader testing.

The methodology was straight-forward. First, I researched some popular patterns and recreated them using a non-animated open-source SVG from WikiCommons. For each SVG pattern, I added the phrase “Lightbulb moment!” as the main alternative content for the image, followed by the phrase “I have a great idea” in the patterns that allowed for more descriptive content. Then I tested each pattern using the specific browser/screen reader combinations recommended by Deque. The final results are shown in the tables below.

Note: Due to formatting restraints, I had to break up the results into multiple tables for this article. To see all of the patterns and results in one place, see the complete CodePen here: (https://codepen.io/cariefisher/pen/bOKEVQ).

Using the <img> Tag

For basic, uncomplicated, or decorative images, use the <img> tag and reference the SVG as a file. This pattern should render lighter and faster pages overall (versus inline SVGs) and allow for easier maintenance on SVGs that you use in multiple places.

SVG Pattern 1

<img> + alt="[words]"

Code:

<img class="lightbulb" alt="Lightbulb moment!" src="https://upload.wikimedia.org/wikipedia/commons/2/2b/BulbIcon.svg">

SVG pattern 2

<img> + role="img" + alt="[words]"

Code:

Lightbulb moment!

SVG pattern 3

<img> + role="img" + aria-label="[words]"

Code:

SVG pattern 4

<img> + role="img" + aria-labelledby="[ID]"

Code:

<p id="caption1" class="visually-hidden">Lightbulb moment!</p>
<img class="lightbulb" role="img" src="https://upload.wikimedia.org/wikipedia/commons/2/2b/BulbIcon.svg" aria-labelledby="caption1" />

Results for SVG Patterns using <img>
Screen Reader + Browser Pattern 1 Pattern 2 Pattern 3 Pattern 4
Mac: Safari + VoiceOver
(v 12.0.2)		 Lightbulb Moment! (group) Lightbulb Moment! (image) Lightbulb Moment! (image) Lightbulb Moment! Lightbulb Moment! (image)
Windows: Firefox + NVDA
(FF v63.0.1 + NVDA v2018.4)		 (graphic) Lightbulb moment! (graphic) Lightbulb moment! (graphic) Lightbulb moment! Lightbulb moment! (graphic) Lightbulb moment!
Windows: Chrome + NVDA
(Chrome v71.0 + NVDA v2018.1.1)		 (graphic) Lightbulb moment! (graphic) Lightbulb moment! (graphic) Lightbulb moment! Lightbulb moment! (graphic) Lightbulb moment!
Windows: Edge + Narrator
(v42.17134)		 (image) Lightbulb moment! (image) Lightbulb moment! (image) Lightbulb moment! Lightbulb moment! (image) Lightbulb moment!
Windows: IE11 + JAWS
(IE 11 v11.111 + JAWS Prof 2018)		 (graphic) Lightbulb moment! (graphic) Lightbulb moment! (graphic) Lightbulb moment! Lightbulb moment! (graphic) Lightbulb moment!
Mobile (iOS): Safari + VoiceOver
(v12.1.2)		 Not focusable Lightbulb Moment! (image) Lightbulb Moment! (image) Lightbulb Moment! Lightbulb Moment! (image)
Mobile (Android): Chrome + TalkBack
(Google Pixel 2 + Android v9)		 Lightbulb moment! (graphic) Lightbulb moment! (graphic) Lightbulb moment! (graphic) Lightbulb moment! Lightbulb moment! (graphic)
Mobile (Android): Firefox + TalkBack
(Google Pixel 2 + Android v9)		 Lightbulb moment! (graphic) Lightbulb moment! (graphic) Lightbulb moment! (graphic) Lightbulb moment! (graphic)

 

Using the <svg> Tag

For more complex or essential SVGs, you should consider adding the SVG as markup into the HTML. Although adding the SVG into the markup makes the page potentially heavier and slower, you have more options with JavaScript and CSS to manipulate the styles and animations of the images.

SVG pattern 5

<svg> + role="img" + <title>

Code:

<svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title>Lightbulb moment!</title>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
	c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
	V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
	h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
	C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
	c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
	s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
	c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
	l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
	c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
	c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
	L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
	c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
	c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
	c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>

 

SVG pattern 6

<svg> + role="img" + <text>

Code:

<svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <text>Lightbulb moment!</text>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
	c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
	V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
	h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
	C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
	c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
	s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
	c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
	l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
	c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
	c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
	L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
	c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
	c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
	c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>

 

SVG pattern 7

<svg> + role="img" + <title> + <text>

Code:

<svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title>Lightbulb moment!</title>
      <text class="visually-hidden" font-size="0">I have a great idea.</text>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
	c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
	V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
	h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
	C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
	c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
	s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
	c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
	l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
	c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
	c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
	L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
	c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
	c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
	c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>

 

SVG pattern 8

<svg> + role="img" + <title> + aria-labelledby="[ID]"

Code:

<svg role="img" aria-labelledby="lightbulb8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title id="lightbulb8">Lightbulb moment!</title>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
	c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
	V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
	h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
	C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
	c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
	s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
	c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
	l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
	c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
	c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
	L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
	c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
	c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
	c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>

 

SVG pattern 9

<svg> + role="img" + <title> + aria-describedby="[ID]"

Code:

<svg role="img" aria-describedby="lightbulb9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title id="lightbulb9">Lightbulb moment!</title>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
	c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
	V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
	h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
	C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
	c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
	s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
	c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
	l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
	c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
	c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
	L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
	c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
	c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
	c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>

 

SVG pattern 10

<svg> + role="img" + <title> + <desc>

Code:

<svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title>Lightbulb moment!</title>
      <desc>I have a great idea.</desc>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
	c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
	V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
	h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
	C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
	c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
	s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
	c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
	l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
	c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
	c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
	L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
	c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
	c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
	c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>

 

SVG pattern 11

<svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

Code:

<svg role="img" aria-labelledby="lightbulb11 description11" version="1.1" class="hotpink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title id="lightbulb11">Lightbulb moment!</title>
      <desc id="description11">I have a great idea.</desc>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
	c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
	V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
	h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
	C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
	c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
	s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
	c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
	l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
	c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
	c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
	L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
	c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
	c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
	c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>

 

SVG pattern 12

<svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

Code:

<svg role="img" aria-describedby="lightbulb12 description12" version="1.1" class="ltgray" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title id="lightbulb12">Lightbulb moment!</title>
      <desc id="description12">I have a great idea.</desc>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
	c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
	V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
	h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
	C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
	c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
	s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
	c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
	l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
	c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
	c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
	L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
	c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
	c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
	c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>

 

Results for SVG Patterns using <svg>
Screen Reader + Browser Pattern 5 Pattern 6 Pattern 7 Pattern 8
Mac: Safari + VoiceOver (v 12.0.2) Lightbulb Moment! (image) Lightbulb Moment! I have a great idea.

<title> ignored

 Lightbulb Moment! (image)
Windows: Firefox + NVDA (FF v63.0.1 + NVDA v2018.4) Lightbulb moment! (graphic) Lightbulb moment! Not focusable Lightbulb moment! (graphic) Lightbulb moment!

<text> ignored

 Lightbulb moment! (graphic) Lightbulb moment!
Windows: Chrome + NVDA (Chrome v71.0 + NVDA v2018.1.1) (graphic) Lightbulb moment! Not focusable (graphic) Lightbulb moment!

<text> ignored

 (graphic) Lightbulb moment!
Windows: Edge + Narrator (v42.17134) (image) Lightbulb moment! (image) Lightbulb moment! (image) Lightbulb moment! I have a great idea. (image) Lightbulb moment!
Windows: IE11 + JAWS (IE 11 v11.111 + JAWS Prof 2018) (graphic) Lightbulb moment! (graphic) Lightbulb moment! (graphic) Lightbulb moment! (graphic) I have a great idea. (graphic) Lightbulb moment!
Mobile (iOS): Safari + VoiceOver (v12.1.2) Lightbulb Moment! (image) (image) Lightbulb Moment! (image)

<text> ignored

 Lightbulb Moment! (image)
Mobile (Android): Chrome + TalkBack (Google Pixel 2 + Android v9) Lightbulb moment! (graphic) Not focusable Lightbulb moment! (graphic)

<text> ignored

 Lightbulb moment! (graphic)
Mobile (Android): Firefox + TalkBack (Google Pixel 2 + Android v9) Lightbulb moment! (graphic) (graphic) (graphic) Lightbulb moment! (graphic) Lightbulb moment! (graphic) I have a great idea. (graphic) Lightbulb moment! (graphic) (graphic)
Screen Reader + Browser Pattern 9 Pattern 10 Pattern 11 Pattern 12
Mac: Safari + VoiceOver (v 12.0.2) Lightbulb Moment! (image) Lightbulb Moment! (image) I have a great idea. Lightbulb Moment! I have a great idea. (image) I have a great idea. Lightbulb Moment! (image) Lightbulb Moment! I have a great idea.
Windows: Firefox + NVDA (FF v63.0.1 + NVDA v2018.4) Lightbulb moment! (graphic) Lightbulb moment! Lightbulb moment! (graphic) Lightbulb moment!

<desc> ignored

 Lightbulb Moment! I have a great idea. (graphic) Lightbulb Moment! I have a great idea. Lightbulb moment! (graphic) Lightbulb moment!

<desc> ignored
Windows: Chrome + NVDA (Chrome v71.0 + NVDA v2018.1.1) (graphic) Lightbulb moment! (graphic) Lightbulb moment!

<desc> ignored

 (graphic) Lightbulb Moment! I have a great idea. (graphic) Lightbulb moment!

<desc> ignored
Windows: Edge + Narrator (v42.17134) (image) Lightbulb moment! (image) Lightbulb moment!

<desc> ignored

 (image) Lightbulb moment!

<desc> ignored

 (image) Lightbulb moment!

<desc> ignored
Windows: IE11 + JAWS (IE 11 v11.111 + JAWS Prof 2018) (graphic) Lightbulb moment! (graphic) Lightbulb moment! (graphic) I have a great idea. (graphic) Lightbulb moment! (graphic) I have a great idea. (graphic) Lightbulb moment! (graphic) I have a great idea.
Mobile (iOS): Safari + VoiceOver (v12.1.2) Lightbulb Moment! (image) Lightbulb Moment! (image) I have a great idea. Lightbulb Moment! I have a great idea. (image) I have a great idea. Lightbulb Moment! (image) Lightbulb Moment! I have a great idea.
Mobile (Android): Chrome + TalkBack (Google Pixel 2 + Android v9) Lightbulb moment! (graphic) Lightbulb moment! Lightbulb moment! (graphic)

<desc> ignored

 Lightbulb moment! I have a great idea. (graphic) Lightbulb moment! (graphic) Lightbulb moment! I have a great idea.
Mobile (Android): Firefox + TalkBack (Google Pixel 2 + Android v9) Lightbulb moment! (graphic) (graphic) Lightbulb moment! (graphic) (graphic)

<desc> ignored

 Lightbulb moment! I have a great idea. (graphic) (graphic) Lightbulb moment! (graphic) (graphic)

<desc> ignored

SVG Pattern Test Results

Results time! As shown in the tables, there were a few patterns that were not clean and caused the screen reader to repeat the alternative content. And while certainly annoying to users, it is better to hear duplicate content than none at all. Other patterns were much more problematic. For example, pattern 7 was missing the <title> or the <text> element for many browser/screen reader combinations. Likewise, pattern 10 was often missing the <desc> element. Worse still was pattern 6 which caused major issues, like not being able to even focus on the image, with NVDA and some mobile screen readers. For best AT coverage, it is probably best to avoid those three patterns until there is more support for them.

On the flip side, there was no clear frontrunner for “best in show” for the different patterns when relaying basic alternative content. This is actually good news! Since many of the patterns were able to render the alt content, that equates to more pattern choices for designers and developers. For SVGs needing more descriptive alternative content, pattern 11 <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]" was the most reliable choice for the different browser and screen readers that were tested.

Based on these results, it is clear that not all SVG patterns are created equal when it comes to accessibility. Which pattern you choose to implement depends on many factors like how difficult it is to modify baked-in framework code and which browsers/screen readers you are targeting. But no matter which pattern you choose to use, be sure to set aside some time to do your own accessibility/user testing. As SVGs continue to dominate the visual world, it is important not to leave AT users in the dark!

Carie Fisher

Carie Fisher

Carie Fisher is a Senior Accessibility Instructor and Developer at Deque. She has been building websites professionally since 2005 and is passionate about accessibility and promoting diversity in the tech world. She founded both the A11y Style Guide and the YouTube series Accessibility Talks to help educate others on website accessibility.

All Posts by Carie Fisher
Tags:  accessible scalable graphics ,  accessible svg ,  img tag ,  svg tag