Skip to content

Commit

Permalink
new_audit: add new accessibility audits (#9798)
Browse files Browse the repository at this point in the history
  • Loading branch information
brendankenny committed Oct 25, 2019
1 parent 4e11bd2 commit c1a5ff5
Show file tree
Hide file tree
Showing 66 changed files with 1,079 additions and 607 deletions.
71 changes: 60 additions & 11 deletions lighthouse-cli/test/cli/__snapshots__/index-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,15 @@ Object {
Object {
"path": "accessibility/aria-allowed-attr",
},
Object {
"path": "accessibility/aria-hidden-body",
},
Object {
"path": "accessibility/aria-hidden-focus",
},
Object {
"path": "accessibility/aria-input-field-name",
},
Object {
"path": "accessibility/aria-required-attr",
},
Expand All @@ -162,6 +171,9 @@ Object {
Object {
"path": "accessibility/aria-roles",
},
Object {
"path": "accessibility/aria-toggle-field-name",
},
Object {
"path": "accessibility/aria-valid-attr-value",
},
Expand Down Expand Up @@ -190,11 +202,20 @@ Object {
"path": "accessibility/document-title",
},
Object {
"path": "accessibility/duplicate-id",
"path": "accessibility/duplicate-id-active",
},
Object {
"path": "accessibility/duplicate-id-aria",
},
Object {
"path": "accessibility/form-field-multiple-labels",
},
Object {
"path": "accessibility/frame-title",
},
Object {
"path": "accessibility/heading-order",
},
Object {
"path": "accessibility/html-has-lang",
},
Expand Down Expand Up @@ -261,9 +282,6 @@ Object {
Object {
"path": "accessibility/manual/focusable-controls",
},
Object {
"path": "accessibility/manual/heading-levels",
},
Object {
"path": "accessibility/manual/interactive-element-affordance",
},
Expand Down Expand Up @@ -401,6 +419,21 @@ Object {
"id": "aria-allowed-attr",
"weight": 10,
},
Object {
"group": "a11y-aria",
"id": "aria-hidden-body",
"weight": 10,
},
Object {
"group": "a11y-aria",
"id": "aria-hidden-focus",
"weight": 3,
},
Object {
"group": "a11y-aria",
"id": "aria-input-field-name",
"weight": 3,
},
Object {
"group": "a11y-aria",
"id": "aria-required-attr",
Expand All @@ -421,6 +454,11 @@ Object {
"id": "aria-roles",
"weight": 10,
},
Object {
"group": "a11y-aria",
"id": "aria-toggle-field-name",
"weight": 3,
},
Object {
"group": "a11y-aria",
"id": "aria-valid-attr-value",
Expand Down Expand Up @@ -467,15 +505,30 @@ Object {
"weight": 3,
},
Object {
"group": "a11y-best-practices",
"id": "duplicate-id",
"weight": 1,
"group": "a11y-navigation",
"id": "duplicate-id-active",
"weight": 3,
},
Object {
"group": "a11y-aria",
"id": "duplicate-id-aria",
"weight": 10,
},
Object {
"group": "a11y-names-labels",
"id": "form-field-multiple-labels",
"weight": 2,
},
Object {
"group": "a11y-names-labels",
"id": "frame-title",
"weight": 3,
},
Object {
"group": "a11y-navigation",
"id": "heading-order",
"weight": 2,
},
Object {
"group": "a11y-language",
"id": "html-has-lang",
Expand Down Expand Up @@ -602,10 +655,6 @@ Object {
"id": "offscreen-content-hidden",
"weight": 0,
},
Object {
"id": "heading-levels",
"weight": 0,
},
Object {
"id": "use-landmarks",
"weight": 0,
Expand Down
33 changes: 30 additions & 3 deletions lighthouse-cli/test/fixtures/a11y/a11y_tester.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@
aria-checked="true">
</div>
</section>
<p>aria-hidden-focus</p>
<section>
<div id="aria-hidden-focus" aria-hidden="true">
<button>Focusable Button</button>
</div>
</section>
<p>aria-input-field-name</p>
<section>
<div id="aria-input-field-name" role="textbox">text-in-a-box</div>
</section>
<p>aria-required-attr</p>
<section>
<div
Expand Down Expand Up @@ -96,15 +106,32 @@
<dd></dd>
</div>
</section>
<p>duplicate-id</p>
<p>duplicate-id-active</p>
<section>
<div id="duplicate-id"></div>
<div id="duplicate-id"></div>
<textarea id="duplicate-id-active" aria-label="text1"></textarea>
<textarea id="duplicate-id-active" aria-label="text2"></textarea>
</section>
<p>duplicate-id-aria</p>
<section>
<div id="duplicate-id-aria" class="duplicate-id-aria"></span>
<div id="duplicate-id-aria"></div>
<div aria-labelledby="duplicate-id-aria"></div>
</section>
<p>form-field-multiple-labels</p>
<section>
<label for="form-field-multiple-labels" id="label1">label1</label>
<label for="form-field-multiple-labels">label2</label>
<input type="checkbox" id="form-field-multiple-labels" />
</section>
<p>frame-title</p>
<section>
<iframe id="frame-title"></iframe>
</section>
<p>heading-order</p>
<section>
<h1>top header</h1>
<h3>sub-sub-header</h3>
</section>
<p>image-alt</p>
<section>
<img
Expand Down
151 changes: 135 additions & 16 deletions lighthouse-cli/test/smokehouse/a11y/expectations.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,46 @@ const expectations = [
],
},
},
'aria-hidden-body': {
score: 1,
details: {
'type': 'table',
'headings': [],
'items': [],
},
},
'aria-hidden-focus': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': '#aria-hidden-focus',
'snippet': '<div id="aria-hidden-focus" aria-hidden="true">\n <button>Focusable Button</button>\n </div>',
'explanation': 'Fix all of the following:\n Focusable content should be disabled or be removed from the DOM',
'nodeLabel': 'Focusable Button',
},
},
],
},
},
'aria-input-field-name': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': '#aria-input-field-name',
'snippet': '<div id="aria-input-field-name" role="textbox">text-in-a-box</div>',
'explanation': 'Fix any of the following:\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute or the title attribute is empty',
'nodeLabel': 'text-in-a-box',
},
},
],
},
},
'aria-required-children': {
score: 0,
details: {
Expand Down Expand Up @@ -81,6 +121,41 @@ const expectations = [
],
},
},
'aria-toggle-field-name': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': '#aria-required-attr',
'path': '2,HTML,1,BODY,9,SECTION,0,DIV',
'snippet': '<div id="aria-required-attr" role="checkbox">\n </div>',
'explanation': 'Fix any of the following:\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute or the title attribute is empty\n Element does not have text that is visible to screen readers',
'nodeLabel': 'div',
},
},
{
node: {
'type': 'node',
'selector': '#aria-valid-attr',
'path': '2,HTML,1,BODY,17,SECTION,0,DIV',
'snippet': '<div id="aria-valid-attr" role="checkbox" aria-chked="true">\n </div>',
'nodeLabel': 'div',
},
},
{
node: {
'type': 'node',
'selector': '#aria-valid-attr-value',
'path': '2,HTML,1,BODY,19,SECTION,0,DIV',
'snippet': '<div id="aria-valid-attr-value" role="checkbox" aria-checked="0">\n </div>',
'nodeLabel': 'div',
},
},
],
},
},
'aria-valid-attr-value': {
score: 0,
details: {
Expand Down Expand Up @@ -130,19 +205,11 @@ const expectations = [
},
},
'bypass': {
score: 0,
score: 1,
details: {
items: [
{
node: {
'type': 'node',
'selector': 'html',
'snippet': '<html>',
'explanation': 'Fix any of the following:\n No valid skip link found\n Page does not have a header\n Page does not have a landmark region',
'nodeLabel': 'html',
},
},
],
type: 'table',
headings: [],
items: [],
},
},
'color-contrast': {
Expand Down Expand Up @@ -211,22 +278,57 @@ const expectations = [

},
},
'duplicate-id': {
'duplicate-id-active': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': 'section:nth-child(28) > div:nth-child(1)',
'snippet': '<div id="duplicate-id"></div>',
'explanation': 'Fix any of the following:\n Document has multiple static elements with the same id attribute',
'selector': 'textarea[aria-label="text1"]',
'path': '2,HTML,1,BODY,31,SECTION,0,TEXTAREA',
'snippet': '<textarea id="duplicate-id-active" aria-label="text1"></textarea>',
'explanation': 'Fix any of the following:\n Document has active elements with the same id attribute: duplicate-id-active',
'nodeLabel': 'text1',
},
},
],
},
},
'duplicate-id-aria': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': '.duplicate-id-aria',
'path': '2,HTML,1,BODY,33,SECTION,0,DIV',
'snippet': '<div id="duplicate-id-aria" class="duplicate-id-aria">\n <div id="duplicate-id-aria"></div>\n <div aria-labelledby="duplicate-id-aria"></div>\n </div>',
'explanation': 'Fix any of the following:\n Document has multiple elements referenced with ARIA with the same id attribute: duplicate-id-aria',
'nodeLabel': 'div',
},
},
],
},
},
'form-field-multiple-labels': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': '#form-field-multiple-labels',
'path': '2,HTML,1,BODY,35,SECTION,2,INPUT',
'snippet': '<input type="checkbox" id="form-field-multiple-labels">',
'explanation': 'Fix all of the following:\n Multiple label elements is not widely supported in assistive technologies',
'nodeLabel': 'input',
},
},
],
},
},
'frame-title': {
score: 0,
details: {
Expand All @@ -243,6 +345,23 @@ const expectations = [
],
},
},
'heading-order': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': 'h3',
'path': '2,HTML,1,BODY,39,SECTION,1,H3',
'snippet': '<h3>sub-sub-header</h3>',
'explanation': 'Fix any of the following:\n Heading order invalid',
'nodeLabel': 'sub-sub-header',
},
},
],
},
},
'html-has-lang': {
score: 0,
details: {
Expand Down
Loading

0 comments on commit c1a5ff5

Please sign in to comment.