Skip to content

Commit a975b54

Browse files
jackdomleo7jackdomleo7
authored
Merge pull request #120 from tannerdolby/109-add-warning-for-links-to-potentially-non-a11y-content
2 parents a7535b9 + 22514a1 commit a975b54

7 files changed

Lines changed: 163 additions & 0 deletions

File tree

‎checka11y-warnings.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,42 @@ a[href="#"]::after, a[role=button]::after, a[href^="javascript:"]::after {
169169
background-color: var(--checka11y-bg-warning);
170170
}
171171

172+
a[href$=".pdf"]::after, a[href$=".docx"]::after, a[href$=".doc"]::after, a[href$=".xlsx"]::after, a[href$=".xls"]::after, a[href$=".pptx"]::after, a[href$=".pptm"]::after, a[href$=".ppt"]::after, a[href$=".txt"]::after {
173+
display: block;
174+
font-size: 1rem;
175+
font-family: verdana, geneva, tahoma, sans-serif;
176+
font-weight: 700;
177+
font-style: initial;
178+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
179+
border-radius: 0.75rem;
180+
letter-spacing: initial;
181+
text-decoration: none;
182+
text-transform: initial;
183+
text-shadow: none;
184+
content: "WARNING (W0013): Anchor tags that contain a link to a PDF, Word, Excel, or PowerPoint document is present on the page and could be a potential accessibility issue." !important;
185+
color: var(--checka11y-text-warning);
186+
border: 0.4rem solid var(--checka11y-border-warning);
187+
background-color: var(--checka11y-bg-warning);
188+
}
189+
190+
a[href*="https://youtu.be"]::after, a[href*="https://youtube.com"]::after, a[href*="https://spotify.com/"]::after {
191+
display: block;
192+
font-size: 1rem;
193+
font-family: verdana, geneva, tahoma, sans-serif;
194+
font-weight: 700;
195+
font-style: initial;
196+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
197+
border-radius: 0.75rem;
198+
letter-spacing: initial;
199+
text-decoration: none;
200+
text-transform: initial;
201+
text-shadow: none;
202+
content: "WARNING (W0014): Anchor tags that contain a link to content site (Youtube, Spotify etc) is present on the document." !important;
203+
color: var(--checka11y-text-warning);
204+
border: 0.4rem solid var(--checka11y-border-warning);
205+
background-color: var(--checka11y-bg-warning);
206+
}
207+
172208
section:empty::before, section > :not(h1, h2, h3, h4, h5, h6, img):last-child::before {
173209
display: block;
174210
font-size: 1rem;

‎checka11y.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -795,6 +795,42 @@ a[href="#"]::after, a[role=button]::after, a[href^="javascript:"]::after {
795795
background-color: var(--checka11y-bg-warning);
796796
}
797797

798+
a[href$=".pdf"]::after, a[href$=".docx"]::after, a[href$=".doc"]::after, a[href$=".xlsx"]::after, a[href$=".xls"]::after, a[href$=".pptx"]::after, a[href$=".pptm"]::after, a[href$=".ppt"]::after, a[href$=".txt"]::after {
799+
display: block;
800+
font-size: 1rem;
801+
font-family: verdana, geneva, tahoma, sans-serif;
802+
font-weight: 700;
803+
font-style: initial;
804+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
805+
border-radius: 0.75rem;
806+
letter-spacing: initial;
807+
text-decoration: none;
808+
text-transform: initial;
809+
text-shadow: none;
810+
content: "WARNING (W0013): Anchor tags that contain a link to a PDF, Word, Excel, or PowerPoint document is present on the page and could be a potential accessibility issue." !important;
811+
color: var(--checka11y-text-warning);
812+
border: 0.4rem solid var(--checka11y-border-warning);
813+
background-color: var(--checka11y-bg-warning);
814+
}
815+
816+
a[href*="https://youtu.be"]::after, a[href*="https://youtube.com"]::after, a[href*="https://spotify.com/"]::after {
817+
display: block;
818+
font-size: 1rem;
819+
font-family: verdana, geneva, tahoma, sans-serif;
820+
font-weight: 700;
821+
font-style: initial;
822+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
823+
border-radius: 0.75rem;
824+
letter-spacing: initial;
825+
text-decoration: none;
826+
text-transform: initial;
827+
text-shadow: none;
828+
content: "WARNING (W0014): Anchor tags that contain a link to content site (Youtube, Spotify etc) is present on the document." !important;
829+
color: var(--checka11y-text-warning);
830+
border: 0.4rem solid var(--checka11y-border-warning);
831+
background-color: var(--checka11y-bg-warning);
832+
}
833+
798834
section:empty::before, section > :not(h1, h2, h3, h4, h5, h6, img):last-child::before {
799835
display: block;
800836
font-size: 1rem;

‎codes.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,9 @@ A list of every Checka11y.css error & warning code with details on what the issu
127127

128128
- ### W0012
129129
The `<section>` element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. This means `<section>` element should be identified, typically by including a heading (`<h1>`-`<h6>` element) as a child of the `<section>` element. [Read more about this here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
130+
131+
- ### W0013
132+
The highlighted element `<a>` has been detected to have `href=".pdf|.docx|.doc|.xlsx|.xls|.pptx|.pptm|.ppt|.txt"`. Those anchor elements often have accessibility issues and need to be created with accessibility in mind. This can mean sometimes the element will link to non-accessible content since we cannot guarantee the files will be served in an accessible fashion.
133+
134+
- ### W0014
135+
The highlighted element `<a>` has been detected to have `href="https://youtube.com|https://youtu.be|https://spotify.com"`. Those anchor elements often have accessibility issues and need to be created with accessibility in mind. This can mean sometimes the element will link to sites non-accessible content because captioning is often missing or not well generated.

‎cypress/integration/links_spec.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,4 +72,43 @@ describe("<a>", () => {
7272
.should('eq', "WARNING (W0011): Anchor tags should not be used as buttons. Links should redirect to a resource/page, if they don't they probably should be buttons.")
7373
});
7474
});
75+
76+
it('should have an anchor tag with a link to a PDF, Word, Excel, or PowerPoint document is present on the page.', () => {
77+
const fileTypes = [
78+
".pdf",
79+
".docx",
80+
".doc",
81+
".xlsx",
82+
".xls",
83+
".pptx",
84+
".pptm",
85+
".ppt",
86+
".txt"
87+
];
88+
89+
fileTypes.forEach(ext => {
90+
cy.get(`a[href*='${ext}']`)
91+
.each(element => {
92+
cy.get(element)
93+
.after("content")
94+
.should('eq', "WARNING (W0013): Anchor tags that contain a link to a PDF, Word, Excel, or PowerPoint document is present on the page and could be a potential accessibility issue.")
95+
});
96+
});
97+
});
98+
99+
it('should have an anchor tag with link to a content site', () => {
100+
const sites = [
101+
"https://youtu.be",
102+
"https://youtube.com",
103+
"https://spotify.com/"
104+
];
105+
sites.forEach(site => {
106+
cy.get(`a[href*='${site}']`)
107+
.each(element => {
108+
cy.get(element)
109+
.after("content")
110+
.should('eq', "WARNING (W0014): Anchor tags that contain a link to content site (Youtube, Spotify etc) is present on the document.")
111+
});
112+
});
113+
});
75114
});

‎features.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,5 @@ A list of every a11y concern Checka11y.css will check for and highlight with lin
3535
- [W0010](./codes.md#W0010): Checks for heading elements containing `role="text"` attribute.
3636
- [W0011](./codes.md#W0011): Checks for anchor tags that are used as buttons.
3737
- [W0012](./codes.md#W0012): Checks for heading element inside `<section>` element.
38+
- [W0013](./codes.md#W0013): Checks for anchor tags that contain a link to a PDF, Word, Excel, or PowerPoint document.
39+
- [W0014](./codes.md#W0014): Checks for anchor tags that contain a link to content site.

‎src/warnings/features/_links.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,28 @@ a {
1414
@include contentMessage(warning, "W0011", "Anchor tags should not be used as buttons. Links should redirect to a resource/page, if they don't they probably should be buttons.");
1515
}
1616
}
17+
18+
/* W0013: Anchor tags that contain a link to a PDF, Word, Excel, or PowerPoint document is present on the page and could be a potential accessibility issue. */
19+
&[href $= ".pdf"],
20+
&[href $= ".docx"],
21+
&[href $= ".doc"],
22+
&[href $= ".xlsx"],
23+
&[href $= ".xls"],
24+
&[href $= ".pptx"],
25+
&[href $= ".pptm"],
26+
&[href $= ".ppt"],
27+
&[href $= ".txt"] {
28+
&::after {
29+
@include contentMessage(warning, "W0013", "Anchor tags that contain a link to a PDF, Word, Excel, or PowerPoint document is present on the page and could be a potential accessibility issue.");
30+
}
31+
}
32+
33+
/* W0014: Anchor tags that contain a link to content site (Youtube, Spotify etc) is present on the document. */
34+
&[href *= "https://youtu.be"],
35+
&[href *= "https://youtube.com"],
36+
&[href *= "https://spotify.com/"] {
37+
&::after {
38+
@include contentMessage(warning, "W0014", "Anchor tags that contain a link to content site (Youtube, Spotify etc) is present on the document.");
39+
}
40+
}
1741
}

‎test/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -390,5 +390,25 @@ <h2>This is a heading element.</h1>
390390
<p>this is not a heading element, just a cool paragraph.</p>
391391
</section>
392392
</section>
393+
<section>
394+
<h2>A <code>&lt;a&gt;</code> has an <code>href</code> linking to a content site (Youtube, etc)</h2>
395+
<ul>
396+
<li><a href="https://youtube.com/foo">YouTube Link</a></li>
397+
<li><a href="https://youtu.be/bar">YouTube Link</a></li>
398+
<li><a href="https://spotify.com/en/">Spotify Link</a></li>
399+
</ul>
400+
<h2>A <code>&lt;a&gt;</code> has an <code>href</code> linking to a content site (Youtube, etc)</h2>
401+
<ul>
402+
<li><a href="/static/foo.pdf">.pdf (PDF)</a></li>
403+
<li><a href="/static/foo.docx">.docx (Word)</a></li>
404+
<li><a href="/static/foo.doc">.doc (Word)</a></li>
405+
<li><a href="/static/foo.xls">.xls (Excel)</a></li>
406+
<li><a href="/static/foo.xlsx">.xlsx (Excel)</a></li>
407+
<li><a href="/static/foo.pptx">.pptx (PowerPoint)</a></li>
408+
<li><a href="/static/foo.pptm">.pptm (PowerPoint)</a></li>
409+
<li><a href="/static/foo.ppt">.ppt (PowerPoint)</a></li>
410+
<li><a href="/static/foo.txt">.txt (Text)</a></li>
411+
</ul>
412+
</section>
393413
</body>
394414
</html>

0 commit comments

Comments
 (0)