diff --git a/a11y.js b/a11y.js index 9e868f2..19e9de0 100644 --- a/a11y.js +++ b/a11y.js @@ -2,7 +2,7 @@ const a11yChecker = () => { - const getElement = (element) => document.getElementsByTagName(element); + const getElement = (element) => document.querySelectorAll(element); const checkDoctype = (() => { const doctype = document.doctype; @@ -69,10 +69,44 @@ const a11yChecker = () => { const heading = getElement('h1'); const headingLength = heading.length; if (headingLength > 1) { - console.warn('Should h1 exist in page once usually in warno!') + console.warn('Should h1 exist in page once usually in logo!') } })(); + const checkDocumentOutline = (() => { + const allHeadings = [...getElement('h1, h2, h3, h4, h5, h6')]; + const allHeadingNode= allHeadings.map(ele => ele.nodeName); + const uniqueHeadings = allHeadings.filter((item, pos) => allHeadingNode.indexOf(item.nodeName) === pos ); + const headingsLength = uniqueHeadings.length; + + if (headingsLength >= 1) { + if (uniqueHeadings[0].nodeName !== 'H1') { + console.warn('Should heading start with H1:h6') + } + } + if (headingsLength >= 2) { + if (uniqueHeadings[1].nodeName !== 'H2') { + console.warn('Should using H2 after H1 not any heading else.') + } + } + if (headingsLength >= 3) { + if (uniqueHeadings[2].nodeName !== 'H3') { + console.warn('Should using H3 after H2 not any heading else.') + } + } + if (headingsLength >= 4) { + if (uniqueHeadings[3].nodeName !== 'H4') { + console.warn('Should using H4 after H3 not any heading else.') + } + } + if (headingsLength >= 5) { + if (uniqueHeadings[4].nodeName !== 'H5') { + console.warn('Should using H5 after H4 not any heading else.') + } + } + })(); + + const checkImages = (() => { const img = getElement('img'); for (let i = 0; i < img.length; i++) { @@ -419,5 +453,6 @@ code: ${allElements[i].outerHTML}`) } } })(); + } window.addEventListener('load', a11yChecker); \ No newline at end of file diff --git a/a11y.min.js b/a11y.min.js index 85ffe89..d6f0b4a 100644 --- a/a11y.min.js +++ b/a11y.min.js @@ -1,4 +1,4 @@ -"use strict";const a=()=>{const a=a=>document.getElementsByTagName(a);(()=>{const a=document.doctype;if(a){const b=a.name;"html"!==b.toLowerCase()&&console.warn("Should add doctype to document!")}else console.warn("Should add doctype to document!")})(),(()=>{const b=a("html")[0];if(b)if(b.hasAttribute("lang")){const a=b.getAttribute("lang");null!==a&&""!==a||console.warn("Should add lang=value attribute to html element!")}else console.warn("Should add lang attribute to html element!")})(),(()=>{const b=a("meta")[0];b?b.hasAttribute("charset")||console.warn("Should add meta charset=utf-8 to document!"):console.warn("Should add meta charset=utf-8 to document!")})(),(()=>{const a=document.title;null!==a&&""!==a||console.warn("Should add title to describe the page content!")})(),(()=>{const b=a("link");for(let c=0;c=0){const a=b[c].getAttribute("media");"print"!==a&&console.warn("Should add print style file to document.")}else console.warn("Should add print style file to document.")}})(),(()=>{const b=a("h1"),c=b.length;c>1&&console.warn("Should h1 exist in page once usually in warno!")})(),(()=>{const b=a("img");for(let c=0;c{const a=a=>document.querySelectorAll(a);(()=>{const a=document.doctype;if(a){const b=a.name;"html"!==b.toLowerCase()&&console.warn("Should add doctype to document!")}else console.warn("Should add doctype to document!")})(),(()=>{const b=a("html")[0];if(b)if(b.hasAttribute("lang")){const a=b.getAttribute("lang");null!==a&&""!==a||console.warn("Should add lang=value attribute to html element!")}else console.warn("Should add lang attribute to html element!")})(),(()=>{const b=a("meta")[0];b?b.hasAttribute("charset")||console.warn("Should add meta charset=utf-8 to document!"):console.warn("Should add meta charset=utf-8 to document!")})(),(()=>{const a=document.title;null!==a&&""!==a||console.warn("Should add title to describe the page content!")})(),(()=>{const b=a("link");for(let c=0;c=0){const a=b[c].getAttribute("media");"print"!==a&&console.warn("Should add print style file to document.")}else console.warn("Should add print style file to document.")}})(),(()=>{const b=a("h1"),c=b.length;c>1&&console.warn("Should h1 exist in page once usually in logo!")})(),(()=>{const b=[...a("h1, h2, h3, h4, h5, h6")],c=b.map(a=>a.nodeName),d=b.filter((a,b)=>c.indexOf(a.nodeName)===b),e=d.length;e>=1&&"H1"!==d[0].nodeName&&console.warn("Should heading start with H1:h6"),e>=2&&"H2"!==d[1].nodeName&&console.warn("Should using H2 after H1 not any heading else."),e>=3&&"H3"!==d[2].nodeName&&console.warn("Should using H3 after H2 not any heading else."),e>=4&&"H4"!==d[3].nodeName&&console.warn("Should using H4 after H3 not any heading else."),e>=5&&"H5"!==d[4].nodeName&&console.warn("Should using H5 after H4 not any heading else.")})(),(()=>{const b=a("img");for(let c=0;c{const b=a("a"),c=b[0],d=["skip navigation","skip nav","skip to navigation","skip main navigation","skip to content","skip to main content","skip to search","skip to sidebar"];if(c){const a=c.textContent.toLowerCase();d.indexOf(a)<0&&console.warn("Should add skip to main content link!")}for(let e=0;eA11y checker hi

accessability checker!

+

testing issues in HTML code.