Testing non-descript text or link is only new window phrases

opens new tab

(opens new tab)

new tab.

learn more/

learn more!

- learn more -

Link with ignored substring: You were warned (opens in new window)

Link with new window icon: You were warned (opens in new window)

Example (AnchorJS)

.

Everything here should be stripped away: . (ignore me) (External)

An informative video (opens in new window).

Opens new window

(External link)

Hero Slide 1, and the return of PowerPoint

New placeholder stopword: "test"

Fix contrast suggestion within tooltip

If one colour input is unknown, contrast won't be calculated based on fallback and will continue displaying "Unknown"

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores fuga corrupti explicabo porro. Consequuntur, est minima aspernatur, nisi laudantium et recusandae fuga incidunt excepturi doloribus fugiat numquam obcaecati eaque accusamus.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit nulla, impedit commodi amet, delectus ut quia voluptas sapiente corporis accusantium laboriosam mollitia vero! Rem odit cupiditate amet perspiciatis, cum quaerat?

False positive link that is single char but has title attr

String and selector exclusions extended to visibleTextInAccName check

Blah blah ^

Something (External link)

Blarf download

investigation

Placeholder text

Technically, placeholder is used as accName fallback. Alignment with axe-core too.

Texarea with a label

Test

aria-hidden

button

role='presentation'

learn more

Opens new window

learn more (External link)

(External link)

Testing new `option.altPlaceholder`

This image has an empty alt attribute; its file name is under_construction.gif

Esta imagen tiene un atributo alt vacío; its file name is under_construction.gif

Potentially auto-generated placeholder for alt text

~ai-3a3cb8f0-1554-4e2b-b159-77f7176853d0_

Donaudampfschifffahrtsgesellschaftskapitän

epäjärjestelmällistyttämättömyydellänsäkään!

Same page broken link check will ignore links with ARIA roles

Test

Same link text but different location should ignore links with ARIA roles

Accessibility - Regular link
Accessibility - Regular link
- aria-hidden and negative tabindex
Accessibility - disabled attribute
Accessibility - has tab role

Better sr-only detection.

Invisible contrast error below is ignored because sr-only text.

Off screen element-invisible

Clickable suggested colour

Clicking on suggested colour updates preview and saves hex to clipboard.

#ED7323

Better detection of tracking beacons

Broken link check ignored if within nav

aria-hidden=false on a node within a button

SVG contrast checking refactored

Previously it would through unknown for both foreground and background, despite it being possible to compute svg foreground colour.

Don't flag contrast issues when font size is 0

Test

Underlined text flagging improvements

Undergraduate Student Progressive Discipline

Dr. Jeff XiThe majority of research in this stream is in collaborations with and Bombardier (external link) . Despite rapid advances in smart environments, aircraft interiors and flight experience have been nearly unchanged for many years. With technologies.

Support for anchor positioning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dicta delectus rem alias harum maxime voluptas suscipit impedit, dignissimos, quo officia pariatur sapiente consequatur aperiam? Totam hic beatae doloribus doloremque!

Minimize false positives for underlined content

something

Overflow hidden improvements

With overflow detection

Overflow detection disabled via prop

Non-vocalized characters in alt

SVGs that use <use>

Go to Sa11y Go to Sa11y Go to Sa11y

Testing <pre> within tooltip

Announcement

Lorem ipsum dulce, some really long text passage.

Improve link check

Programs without HTML extension
Programs with HTML extension
Programs with HTML extension and params

Shadow DOM bug

Empty heading & skipped heading level

Empty heading should take precedence over skipped heading error.

Text input with ::placeholder using colour spaces

Sample

SVGs that use unsupported colour spaces

Using CSS variables to override position of toggle and panel


      :root {
      --sa11y-toggle-y-offset: 40px;
      --sa11y-toggle-x-offset: 40px;
      }

Images within an HTML Report export are converted to Base64

Local host

External origin

Accordion

Image is just hidden in a div to simulate an accordion for the purpose of testing Skip-to-issue button.

Existing base64 image on the page

Existing base64 image in a hidden div

outlineIgnore prop

Both items have a class of 'outline-ignore' but the error shouldn't be hidden from the Page Outline.

This should not appear in Outline

This should not appear in the Outline or get a heading label. In iaculis mi in ligula interdum tincidunt. Vestibulum convallis tempus placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam a vehicula nisl, vel fermentum nulla. Donec sed augue non risus rhoncus feugiat id aliquet mi. Vivamus a laoreet nulla. Nunc sit amet dui quis turpis aliquam dapibus. Nam ipsum felis, aliquet in ante at, cursus eleifend ipsum. Cras interdum ligula eget mauris viverra, ultrices tristique sapien iaculis.

Image panel's edit button exclusions

Edit button won't appear if URL or class contained in respective exclusion prop.

Ignores by URL

Ignores by class

Image dimensions in alt text

Regex /\b\d{2,6}\s*x\s*\d{2,6}\b/ matches stuff like 400x800, 400 x 800, 400 X 800, etc.

Alts that should be fine

Error border should take precedence

learn more

Bug fix: multiple warnings for justified text that has anchors

The majority of research in this stream is in collaborations with Dr. Jeff Xi and Bombardier (external link) . Despite rapid advances in smart environments, aircraft interiors and flight experience have been nearly unchanged for many years. With technologies.

Check for "new tab" or file type warning text should bypass `linkIgnoreSpan` prop

These used to incorrectly get a warning for missing "new tab" or file type text because of linkIgnoreSpan prop.

testing (new tab)

Download this folder (archive/zip)

learn more (new tab)

learn more (archive/zip)

New prop: insertAnnotationBefore

Your Content Here

Misc bug fix where the word iclicker would get flagged for using word click.

Learn more about iclicker

Learn more about click here to learn more about stuff and things

Learn more about now click over there

Learn more about cliCk

When an anchor has onclick handler, and is wrapped around <u> elements.

Click me (has onclick handler)

Another slotted example

John Doe A web developer from NYC. Learn more about stuff.

Slotted template

Skipped level in a slot Slot content text filling correctly

This is a slotted heading

Pseudo content

Staff listing

Testing

¹ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dolor libero dignissimos veniam. Testing Totam dolores rem eligendi praesentium harum doloremque ducimus dignissimos, exercitationem, omnis ullam autem, dolor qui numquam. Et!

learn more

350 Victoria Street
Toronto, ON M5B 2K3
P: 416-979-5000

at 50/100

Progress

70 %

Some hidden text

Original: TMU Website

URL Variations

TMU Website - https://www.torontomu.ca/ [Same URL, should not be flagged]

TMU Website - https://torontomu.ca/

TMU Website - http://www.torontomu.ca/

TMU Website - https://www.torontomu.ca

TMU Website - HTTPS://WWW.TORONTOMU.CA/

TMU Website - https://www.torontomu.ca/ with trailing space

TMU Website - https://www.torontomu.ca/ with preceding space

TMU Website - https://www.torontomu.ca/ with trailing tab

Dismiss Bug

Opens in a new tab without warning: TMU Website descriptive link text

Heading too long

Using prop to convert warning to error.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat porro doloribus magnam nobis nisi! Officia earum reiciendis sequi cum voluptate cupiditate eaque asperiores quos, non voluptatum id mollitia, voluptatibus sit!

Example: Instead of Click here to learn more about George Orwell”, you learn more could write “Delve into the life and works of George Orwell at Britannica.

George Orwell at Britannica

Title attribute is same as link text or alt text.

Image

Linked image

Link

Marie Curie Marie Curie

Instead of Learn more about George Orwell.

Next >


<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="./../docs/examples/assets/placeholder.svg" height="200" width="200" />
</svg>

Nature.com upgraded to the HTTPS protocol http.Nature.com upgraded to the HTTPS protocol

Summary of issues

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem unde qui veniam voluptatem, ad sequi rem, temporibus deserunt incidunt dolorum quis soluta ab sapiente nobis atque facilis, nam labore! Quae.

Two SVGs in a link

Linked image contains both alt and link text

Learn more about, Lorem.

asdasdsd

Name:

asdasdsd

HSL Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem ea corporis nulla quidem culpa. Ratione autem nemo atque quam, doloremque libero officiis minima quasi debitis ducimus, nisi molestiae pariatur eveniet.

color() Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem ea corporis nulla quidem culpa. Ratione autem nemo atque quam, doloremque libero officiis minima quasi debitis ducimus, nisi molestiae pariatur eveniet.

Testing rgba... Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione dolores sint atque est accusamus. Saepe laboriosam, ad voluptas porro non enim quam cupiditate eius perferendis nostrum, recusandae quisquam quae illo!

Testing testing

Building a vibrant community of creative and accomplished people from around the world

Top

Slick sr-only class

Empty div contrast?

test

Small font size but no text

Attempt/Threaten Suicide Information on CPIC

learn more...

Link too long

www.example.pt/asdsaasdsadsa/sdsdsdasdasdsddasdasds
www.example.pt/asdsaasdsadsa/dasdasds

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis consequuntur accusamus necessitatibus alias ipsum deleniti delectus at similique animi est? Reiciendis esse corporis saepe fuga modi vero ipsam assumenda libero.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis consequuntur accusamus necessitatibus alias ipsum
      deleniti delectus at similique animi est? Reiciendis esse corporis saepe fuga modi vero ipsam assumenda
      libero.

Sa11y Ignore

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus magnam laudantium enim voluptas tempora libero illo magni aut, voluptatibus laborum placeat, et dolore quaerat? Ullam fugiat iusto illum vero ea.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus magnam laudantium enim voluptas tempora libero illo magni aut, voluptatibus laborum placeat, et dolore quaerat? Ullam fugiat iusto illum vero ea.Lorem ipsum dolor,

Long text

Ignore this container

Some text here

Link too long?

100 characters. consectetur adipisicing elit. Doloribus magnam laudantium enim voluptas tempo libero

200 characters. consectetur adipisicing elit. Doloribus magnam laudantium 100 characters. consectetur adipisicing elit. Lorem ipsum dolor, porem ipsum dolor, sit amet consectetur adipisicing how bouts

300 characters. consectetur adipisicing elit. Doloribus magnam laudantium 100 characters. consectetur adipisicing elit. Lorem ipsum dolor, porem ipsum dolor, sit amet consectetur adipisicing how bouts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet quam tellus, a aliquet arcuc

300 characters. consectetur adipisicing elit. Doloribus magnam laudantium 100 characters. consectetur adipisicing elit. Lorem ipsum dolor, porem ipsum dolor, sit amet consectetur adipisicing how bouts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet quam tellus, a aliquet arcuc

Dismiss all

Testing non-descript text or link is only new window phrases

Example (AnchorJS)

New placeholder stopword: "test"

Fix contrast suggestion within tooltip

False positive link that is single char but has title attr

String and selector exclusions extended to visibleTextInAccName check

Placeholder text

Test

aria-hidden

button

role='presentation'

Testing new option.altPlaceholder

Potentially auto-generated placeholder for alt text

Same page broken link check will ignore links with ARIA roles

Same link text but different location should ignore links with ARIA roles

Better sr-only detection.

Clickable suggested colour

Better detection of tracking beacons

Broken link check ignored if within nav

aria-hidden=false on a node within a button

SVG contrast checking refactored

Don't flag contrast issues when font size is 0

Underlined text flagging improvements

Support for anchor positioning

Minimize false positives for underlined content

Overflow hidden improvements

With overflow detection

Overflow detection disabled via prop

Non-vocalized characters in alt

SVGs that use <use>

Somthing

Testing <pre> within tooltip

Improve link check

Shadow DOM bug

something { .test { color: red } }

Empty heading & skipped heading level

Text input with ::placeholder using colour spaces

SVGs that use unsupported colour spaces

Using CSS variables to override position of toggle and panel

Images within an HTML Report export are converted to Base64

Local host

External origin

Accordion

Existing base64 image on the page

Existing base64 image in a hidden div

outlineIgnore prop

This should not appear in Outline

This should not appear in Outline

Image panel's edit button exclusions

Ignores by URL

Ignores by class

Image dimensions in alt text

Alts that should be fine

Error border should take precedence

Bug fix: multiple warnings for justified text that has anchors

Check for "new tab" or file type warning text should bypass linkIgnoreSpan prop

New prop: insertAnnotationBefore

Another slotted example

Default User

Slotted template

Default slot heading

Default slot description

Should not be displayed in DOM

This is a slotted heading

Pseudo content

Staff listing

Testing

Progress

Some hidden text

URL Variations

Dismiss Bug

Heading too long

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat porro doloribus magnam nobis nisi! Officia earum reiciendis sequi cum voluptate cupiditate eaque asperiores quos, non voluptatum id mollitia, voluptatibus sit!

Title attribute is same as link text or alt text.

Image

Linked image

Link

Two SVGs in a link

Linked image contains both alt and link text

Testing testing

Testing new `option.altPlaceholder`

Check for "new tab" or file type warning text should bypass `linkIgnoreSpan` prop