Skip to content

Commit 72ca614

Browse files
LiemineLiemine
authored
Merge pull request #1182 from OpenConext/feature/#1062-a11y-incorrect-or-missing-text-alternative
#1063 Improve image alt text
2 parents 586591e + 1d7c61b commit 72ca614

8 files changed

Lines changed: 47 additions & 26 deletions

File tree

‎public-gui/src/components/Footer.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const Footer = () => {
1212
<div className="sds--page-container">
1313
<div className="sds--footer--inner">
1414
<div className="sds--branding mobile">
15-
<img src={eu_logo} className="eu-logo mobile" alt="EU"/>
15+
<img src={eu_logo} className="eu-logo mobile" alt={I18n.t("footer.euLogoAlt")}/>
1616
</div>
1717
<nav className="menu sds--text--body--small">
1818
<ul>
@@ -31,8 +31,9 @@ export const Footer = () => {
3131
<LanguageSelector/>
3232
<div className="sds--branding">
3333
<a href={I18n.t("footer.surfLink")} target="_blank"
34-
rel="noopener noreferrer">{<Logo label={""} position={LogoType.Bottom}/>}</a>
35-
<img src={eu_logo} className="eu-logo" alt="EU"/>
34+
rel="noopener noreferrer"
35+
aria-label={I18n.t("footer.surfLogoLabel")}>{<Logo label={""} position={LogoType.Bottom}/>}</a>
36+
<img src={eu_logo} className="eu-logo" alt={I18n.t("footer.euLogoAlt")}/>
3637
</div>
3738
</div>
3839
</div>

‎public-gui/src/components/Header.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {stopEvent} from "../utils/Utils.js";
66
import "./Header.scss";
77
import {Navigation} from "./Navigation.jsx";
88
import {useEffect} from "react";
9+
import I18n from "../locale/I18n.js";
910

1011
export const Header = ({currentLocation}) => {
1112

@@ -23,23 +24,22 @@ export const Header = ({currentLocation}) => {
2324
return (
2425
<div className="header-container">
2526
<div className="header-inner">
26-
<Link className="logo" to={"/"}>
27-
<img src={eduIDLogo} className="logo" alt="eduID logo"/>
27+
<Link className="logo" to={"/"} aria-label={I18n.t("header.home")}>
28+
<img src={eduIDLogo} className="logo" alt=""/>
2829
</Link>
2930
<Navigation mobile={false} path={currentLocation.pathname}/>
3031
<div className="mobile-navigation">
3132
{currentLocation.pathname === "/nav" &&
32-
<Link className="close" to={".."}
33+
<Link className="close" to={".."} aria-label={I18n.t("header.closeMenu")}
3334
onClick={e => navigateBack(e)}>
34-
<img src={close} className="close" alt="close"/>
35+
<img src={close} className="close" alt=""/>
3536
</Link>}
3637
{currentLocation.pathname !== "/nav" &&
37-
<Link className="hamburger" to={"/nav"}>
38-
<img src={hamburger} className="hamburger" alt="hamburger"/>
38+
<Link className="hamburger" to={"/nav"} aria-label={I18n.t("header.menu")}>
39+
<img src={hamburger} className="hamburger" alt=""/>
3940
</Link>}
4041
</div>
4142
</div>
4243
</div>
4344
);
4445
}
45-

‎public-gui/src/locale/en.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ const en = {
99
},
1010
header: {
1111
mineEduID: "My eduID",
12-
register: "Create an eduID"
12+
register: "Create an eduID",
13+
menu: "Menu",
14+
closeMenu: "Close menu",
15+
home: "eduID home"
1316
},
1417
home: {
1518
eduID: "eduID",
@@ -23,6 +26,8 @@ const en = {
2326
appInfo: "With the <strong>eduID app</strong>, you can log in without a password or checking your email. Installation is quick and easy.",
2427
google: "https://play.google.com/store/apps/details?id=nl.eduid",
2528
apple: "https://apps.apple.com/us/app/eduid/id1600756434",
29+
appStoreAlt: "Download on the App Store",
30+
googlePlayAlt: "Get it on Google Play",
2631
},
2732
about: {
2833
eduID: "About eduID",
@@ -60,6 +65,7 @@ const en = {
6065
informationBullet2: "Proof that you are a student",
6166
informationBullet3: "Your current institutionValidation of your full name by a third party",
6267
allAtOnce: "You can add this information all at once by connecting your educational institution to eduID. To do this, press <strong>Add an institution</strong> in the eduID app or <a href='{{url}}'>My eduID</a>.",
68+
mobileScreenshotAlt: "Screenshot of the eduID app showing where to add an institution",
6369
note: "<strong>Note</strong>: did you create an eduID last school year? You may need to connect your institution again.",
6470
help: "Need more help?",
6571
helpInfo: "Have a look at the <a href=\"https://servicedesk.surf.nl/wiki/x/MIJsB\">eduID documentation</a> and the <a href=\"https://servicedesk.surf.nl/wiki/x/ToJsB\">FAQ</a>, or send an email to <a href='mailto:help@eduid.nl'>help@eduid.nl</a>. We’ll get back to you as soon as possible."
@@ -83,6 +89,8 @@ const en = {
8389
privacy: "Privacy Policy",
8490
privacyLink: "https://support.surfconext.nl/privacy-en",
8591
surfLink: "https://surf.nl",
92+
surfLogoLabel: "SURF",
93+
euLogoAlt: "Funded by the European Union. NextGenerationEU."
8694
},
8795
}
8896
export default en;

‎public-gui/src/locale/nl.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ const nl = {
99
},
1010
header: {
1111
mineEduID: "Mijn eduID",
12-
register: "eduID aanmaken"
12+
register: "eduID aanmaken",
13+
menu: "Menu",
14+
closeMenu: "Menu sluiten",
15+
home: "eduID homepagina"
1316
},
1417
home: {
1518
eduID: "eduID",
@@ -23,6 +26,8 @@ const nl = {
2326
appInfo: "Met de <strong>eduID app</strong> log je in zonder wachtwoord of je e-mail te openen. Installeren is zo gebeurd.",
2427
google: "https://play.google.com/store/apps/details?id=nl.eduid",
2528
apple: "https://apps.apple.com/us/app/eduid/id1600756434",
29+
appStoreAlt: "Download in de App Store",
30+
googlePlayAlt: "Ontdek het op Google Play",
2631
},
2732
about: {
2833
eduID: "Over eduID",
@@ -59,6 +64,7 @@ const nl = {
5964
informationBullet2: "Bewijs dat je student bent",
6065
informationBullet3: "Je huidige instelling",
6166
allAtOnce: "Je kunt deze gegevens in één keer toevoegen door je onderwijsinstelling te koppelen met eduID. Druk hiervoor op <strong>Voeg instelling toe</strong> in de eduID app of <a href='{{url}}'>Mijn eduID</a>.",
67+
mobileScreenshotAlt: "Screenshot van de eduID app waarop te zien is waar je een instelling toevoegt",
6268
note: "<strong>Let op:</strong> heb je vorig schooljaar al een eduID gemaakt? Dan moet je misschien opnieuw je instelling koppelen",
6369
help: "Meer hulp nodig?",
6470
helpInfo: "Bekijk de <a href=\"https://servicedesk.surf.nl/wiki/x/L4JsB\">eduID documentatie</a> en de <a href=\"https://servicedesk.surf.nl/wiki/x/UIJsB\">veelgestelde vragen</a>. Als je er niet uit komt kun je een e-mail sturen naar <a href='mailto:help@eduID.nl'>help@eduid.nl</a>. We komen zo snel mogelijk bij je terug."
@@ -82,6 +88,8 @@ const nl = {
8288
privacy: "Privacyverklaring",
8389
privacyLink: "https://eduid.nl/privacy",
8490
surfLink: "https://surf.nl",
91+
surfLogoLabel: "SURF",
92+
euLogoAlt: "Funded by the European Union. NextGenerationEU."
8593
},
8694

8795
}

‎public-gui/src/routes/About.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const About = () => {
1717
<div className="about-container">
1818
<div className="about">
1919
<div className="top">
20-
<img src={about} className="about" alt="about"/>
20+
<img src={about} className="about" alt=""/>
2121
<div className="top-right">
2222
<h1 className="title small">
2323
{I18n.t("about.eduID")}
@@ -96,4 +96,4 @@ export const About = () => {
9696
</Background>
9797
</div>
9898
);
99-
}
99+
}

‎public-gui/src/routes/Home.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const Home = () => {
2626
<div className="home-container">
2727
<div className="home">
2828
<div className="top">
29-
<img src={phone} className="phone" alt="phone"/>
29+
<img src={phone} className="phone" alt=""/>
3030
<div className="top-right">
3131
<h1 className="title">
3232
{I18n.t("home.eduID")}
@@ -39,7 +39,7 @@ export const Home = () => {
3939
</div>
4040
<Background>
4141
<div className="card row">
42-
<img src={cheering} className="cheering" alt="cheering"/>
42+
<img src={cheering} className="cheering" alt=""/>
4343
<div className="top-right middle">
4444
<h2 className="title">
4545
{I18n.t("home.whatCanYouDo")}
@@ -53,7 +53,7 @@ export const Home = () => {
5353
</div>
5454
</div>
5555
<div className="card bottom row">
56-
<img src={app} className="app" alt="app"/>
56+
<img src={app} className="app" alt=""/>
5757
<div className="top-right middle">
5858
<h2 className="title">
5959
{I18n.t("home.eduIdApp")}
@@ -68,10 +68,10 @@ export const Home = () => {
6868
/>}
6969
<div className="inner-store-container">
7070
<a href={I18n.t("home.apple")}>
71-
<img src={appStore} className="appStore" alt="appStore"/>
71+
<img src={appStore} className="appStore" alt={I18n.t("home.appStoreAlt")}/>
7272
</a>
7373
<a href={I18n.t("home.google")}>
74-
<img src={googlePlay} className="googlePlay" alt="googlePlay"/>
74+
<img src={googlePlay} className="googlePlay" alt={I18n.t("home.googlePlayAlt")}/>
7575
</a>
7676
</div>
7777
</div>
@@ -80,4 +80,4 @@ export const Home = () => {
8080
</Background>
8181
</div>
8282
);
83-
}
83+
}

‎public-gui/src/routes/ServiceDesk.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export const ServiceDesk = () => {
2020
<p className="info"
2121
dangerouslySetInnerHTML={{__html: I18n.t("servicedesk.info")}}/>
2222
</div>
23-
<img src={FrontDesk} className="frontdesk" alt="frontdesk"/>
23+
<img src={FrontDesk} className="frontdesk" alt=""/>
2424
</div>
2525
</div>
2626
</div>
2727
);
28-
}
28+
}

‎public-gui/src/routes/Support.jsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const Support = () => {
1919
<div className="support-container">
2020
<div className="support">
2121
<div className="top">
22-
<img src={parachute} className="parachute" alt="parachute"/>
22+
<img src={parachute} className="parachute" alt=""/>
2323
<div className="top-right">
2424
<h1 className="title">
2525
{I18n.t("support.eduID")}
@@ -30,7 +30,7 @@ export const Support = () => {
3030
</div>
3131
<Background>
3232
<div className="card row">
33-
<img src={support} className="support" alt="support"/>
33+
<img src={support} className="support" alt=""/>
3434
<div className="top-right middle">
3535
<h2 className="title">
3636
{I18n.t("support.studying")}
@@ -47,7 +47,11 @@ export const Support = () => {
4747
</ul>
4848
<p className="info"
4949
dangerouslySetInnerHTML={{__html: I18n.t("support.allAtOnce", {url: config.spBaseUrl})}}/>
50-
<img src={mobileScreenshot} className="mobileScreenshot" alt="mobileScreenshot"/>
50+
<img
51+
src={mobileScreenshot}
52+
className="mobileScreenshot"
53+
alt={I18n.t("support.mobileScreenshotAlt")}
54+
/>
5155
<p className="info cursive"
5256
dangerouslySetInnerHTML={{__html: I18n.t("support.note")}}/>
5357
</div>
@@ -61,4 +65,4 @@ export const Support = () => {
6165
</Background>
6266
</div>
6367
);
64-
}
68+
}

0 commit comments

Comments
 (0)