Skip to content

GitLab

Commit 17e5d137 authored by Aral Balkan's avatar Aral Balkan
Browse files

Added accessibility improvements for screenreader users.

parent bd6da539
Hide whitespace changes
Inline Side-by-side
Showing with 21 additions and 15 deletions
public/css/index.css
View file @ 17e5d137
......@@ -17,6 +17,13 @@ a
color:#191919;
}
/* Reading hints for accessibility are positioned off-screen */
#love:after
{
content: '♥';
}
@media (max-width: 320px) {
body {
padding: 0px 10px;
......
public/index.html
View file @ 17e5d137
......@@ -7,17 +7,17 @@
<link rel='stylesheet' type='text/css' href='css/index.css'>
</head>
<body>
<a href='https://ind.ie'><img id='indie-logo' src='images/hope.png' alt='ind.ie'></a>
<a href='https://ind.ie'><img id='indie-logo' src='images/hope.png' alt='Indie'></a>
<h1>Thirty seconds for freedom.</h1>
<h2>#i<em>am</em>indie because…</h2>
<h2><span aria-hidden='true'>#</span>i<em>am</em>indie</span> because…</h2>
<p id='mobile-notice' class='warning'>(On a mobile device you can record a video directly from your device by tapping the button below. On desktop/notebook computers, please record a video in your favourite video app and select it using the button below.)</p>
<form>
<label class='button-general fileContainer' id='video-button'>
<img id='camera-icon' src='images/camera.png'>
<img id='camera-icon' src='images/camera.png' alt=''>
<br>
<span id='first-button-label'>1. Record a video</span>
......@@ -36,11 +36,10 @@
</button>
</form>
<div id="message">A message goes here. Is it a message in a bottle? No, it’s a message in a div, silly.</div>
<div id='message' aria-live='assertive'>A message goes here. Is it a message in a bottle? No, it’s a message in a div, silly.</div>
<h2>Share the &hearts;</h2>
<p>Record a short 30 second video to tell us why you support <a href='https://ind.ie'>Ind.ie</a> and why others should also <a href='https://ind.ie/launch'>at our launch on November 8th</a>.</p>
<h2>Share the <img src='/images/1-pixel-transparent.png' alt='love'><span aria-hidden='true'>&hearts;</span></h2>
a short 30 second video to tell us why you support <a href='https://ind.ie'>Indie</a> and why others should also <a href='https://ind.ie/launch'>at our launch on November 8th</a>.</p>
<p>Tell us in your own words, in your own language, in your own unique creative way…</p>
......@@ -54,7 +53,7 @@
<p><strong>Thank you!</strong></p>
<p><a href='https://ind.ie/team'>The Ind.ie Team</a><br><em>(Aral, Laura, Jo, Andy, and Victor)</em></p>
<p><a href='https://ind.ie/team'>The Indie Team</a><br><em>(Aral, Laura, Jo, Andy, and Victor)</em></p>
<img id='the-long-road-to-freedom' src='https://ind.ie/assets/images/long-road-to-freedom.png' alt='The long road to freedom.'>
......
public/js/index.js
View file @ 17e5d137
......@@ -281,8 +281,8 @@ uploadItButton.addEventListener('click', function(evt) {
message = '<h2>Uploaded. Thank you!</h2>'
+ '<p>Here’s the link to your video:</p>'
+ '<p style="text-align:center;"><a href="/video/'+ videoName +'">iam.ind.ie/video/' + videoName +'</a></p>'
+ '<p>Please share your video with the #iamindie hashtag to help us spread the word.</p>'
+ '<p style="text-align:center;"><a href="/video/'+ videoName +'" title="Your I am Indie video">iam.ind.ie/video/' + videoName +'</a></p>'
+ '<p>Please share your video with the <span aria-hidden="true">#</span>iamindie hashtag to help us spread the word.</p>'
+ '<a href="'+ tweetLink +'" style="text-decoration:none; font-size: 20px; color:black;">'
+ '<p style="text-align:center; margin-top:24px; display:block; background-color: #ddd; padding:12px; border-radius: 8px;"><img src="/images/twitter-bird-blue-48.png" style="width:24px;"> Tweet it</p>'
+ '</a>'
......
templates/video.html
View file @ 17e5d137
......@@ -5,8 +5,8 @@
<meta name='twitter:card' content='photo' />
<meta name='twitter:site' content='@indie' />
<meta name='twitter:title' content='Ind.ie — Designing Hope' />
<meta name='twitter:description' content='At Ind.ie we are designing independent technologies that protect fundamental freedoms, human rights, and democracy.' />
<meta name='twitter:title' content='Indie — Designing Hope' />
<meta name='twitter:description' content='At Indie we are designing independent technologies that protect fundamental freedoms, human rights, and democracy.' />
<meta name='twitter:image' content='https://ind.ie/assets/images/hope.png' />
<meta name='twitter:url' content='https://iam.ind.ie/videos/{{VIDEO}}' />
......@@ -16,9 +16,9 @@
</head>
<body>
<a href='https://ind.ie'><img id='indie-logo' src='/images/hope.png' alt='ind.ie'></a>
<a href='https://ind.ie'><img id='indie-logo' src='/images/hope.png' alt='Indie'></a>
<h1><a href='/' style='color:black;'>#i<em>am</em>indie</a></h1>
<h1><a href='/' style='color:black;'><span aria-hidden='true'>#</span>i<em>am</em>indie</a></h1>
<video id='video' src='/videos/{{VIDEO}}' preload='auto' controls></video>
......@@ -28,7 +28,7 @@
<div id='message'>
<h2>Lend us your voice</h2>
<p class='record-your-own-video'><a href='/'>Record your own video</a></p>
<p>Please share this video with the #iamindie hashtag to help us spread the word about Ind.ie.</p>
<p>Please share this video with the <span aria-hidden='true'>#</span>iamindie hashtag to help us spread the word about Indie.</p>
<a href='https://twitter.com/intent/tweet?text=I%20am%20indie.&amp;url=https://iam.ind.ie/video/{{VIDEO}}&amp;hashtags=iamindie&amp;related=indie:For%20Ind.ie%20updates,aral:For%20thoughts%20from%20the%20founder%20and%20lead%20designer,laurakalbag:For%20design%20and%20accessibility,jo_annap:For%20updates%20on%20operations,ridiculousgnome:For%20development,victordons:%20For%20industrial%20design' class='tweet-link'><p class='tweet-button'><img src='/images/twitter-bird-blue-48.png'> Tweet this</p></a>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Like this? Fund us! Your patronage helps keep us independent and going.