|
<!DOCTYPE html> |
|
<!-- You can probably remove all of these conditional comments for IE. I don't |
|
use these anymore, as IE is no longer supported by Microsoft. For a |
|
non-essential website like a personal site, I think it's fine to target |
|
modern browsers. Especially with a site like this where it's mostly |
|
non-interactive content, an old browser that doesn't support your CSS or JS |
|
will still display all of the text pretty well if you have good HTML. |
|
--> |
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> |
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> |
|
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> |
|
<!--[if gt IE 8]><!--> |
|
<html class="no-js" lang="en"> |
|
<!--<![endif]--> |
|
|
|
<head> |
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
|
<!-- Global site tag (gtag.js) - Google Analytics --> |
|
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-155633765-1"></script> |
|
<script> |
|
window.dataLayer = window.dataLayer || []; |
|
function gtag() { |
|
dataLayer.push(arguments); |
|
} |
|
gtag("js", new Date()); |
|
|
|
gtag("config", "UA-155633765-1"); |
|
</script> |
|
|
|
<!-- Replace "Home" with "Ed Yother" |
|
|
|
This is a more useful title for when people have many tabs open and for |
|
assistive technology to identify the page. It's a good idea to have the site |
|
name in all of the page titles, so on subpages, you can do something like |
|
"Gigs - Ed Yother" |
|
--> |
|
<title>Ed Yother</title> |
|
|
|
<meta name="viewport" content="width=device-width" /> |
|
<link rel="stylesheet" href="stylesheets/foundation.min.css" /> |
|
<link rel="stylesheet" href="stylesheets/main.css" /> |
|
<link rel="stylesheet" href="stylesheets/app.css" /> |
|
<script src="javascripts/modernizr.foundation.js"></script> |
|
<!-- Google fonts --> |
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300%7CPlayfair+Display:400italic" |
|
rel="stylesheet" type="text/css" /> |
|
<!-- IE Fix for HTML5 Tags --> |
|
<!--[if lt IE 9]> |
|
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script |
|
><![endif]--> |
|
</head> |
|
|
|
<body> |
|
<!-- Remove this empty div |
|
|
|
It looks to me like this is just creating some space between the top of the |
|
page and your header. Rather than using empty markup, set a margin on your |
|
<header> or add padding to the <body> with CSS. |
|
|
|
<div class="row"><br /></div> |
|
--> |
|
|
|
<!-- Replace this <div> with a <header> |
|
|
|
<header> is a landmark section that helps users of assistive technology |
|
such as a screen reader identify different sections of the page. |
|
|
|
Changed the margin-top from -2px to 0.75rem. A rem is equivalent to the |
|
font size the user has set in their browser. It's generally preferable to |
|
use relative units like rem and em instead of px because rem and em will |
|
scale according to the user's preferred font size. The default font size in |
|
browsers is 16px, so 0.75rem si probably going to work out to be 12px. |
|
Between the empty div (removed above) which was 14px high, and the -2px |
|
margin here, you had about 12px of space before this element, so 0.75rem |
|
ought to recreate roughly the same layout. Generally speaking I'd try to |
|
avoid defining inline styles like this and add something like this to your |
|
CSS instead. This way it applies on all of your pages and you don't have to |
|
remember to keep adding the style="" attribute on all pages. |
|
|
|
body > header { |
|
margin-top: 0.75rem; |
|
} |
|
--> |
|
<header class="row page_wrap" style="margin-top: 0.75rem"> |
|
<!-- page wrap --> |
|
<div class="twelve columns"> |
|
<div class="row"> |
|
<div class="twelve columns header_nav" style="margin-bottom: 0; box-shadow: none"> |
|
<!-- Replace this <div> with a <nav>, another landmark element --> |
|
<nav class="twelve columns"> |
|
<ul id="menu-header" class="nav-bar horizontal"> |
|
<!-- Add aria-current |
|
|
|
ARIA is a standard that provides additional HTML attributes for |
|
assistive technology. aria-current signals to the assistive technology |
|
that this link is a link to the page the user is currently on. |
|
In your CSS, if you like, you can replace the .active selector |
|
that styles your currently active list item and instead use this |
|
selector: |
|
|
|
[aria-current="page"] { |
|
/* Styles go here */ |
|
} |
|
--> |
|
<li class="active" aria-current="page"> |
|
<a href="index.html">Home</a> |
|
</li> |
|
<li><a href="gigs.html">Gigs</a></li> |
|
<li><a href="tunebook.html">Tunebook</a></li> |
|
<li><a href="videos.html">Videos</a></li> |
|
<li> |
|
<a href="https://edyother.github.io/AlbumSite">Album Project</a> |
|
</li> |
|
</ul> |
|
<script> |
|
$("ul#menu-header").nav - bar(); |
|
</script> |
|
</nav> |
|
</div> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
<!-- <main> is another landmark that is used to identify the main content on a |
|
page. It's useful to assistive technology to ensure that all content is |
|
contained in a landmark. |
|
--> |
|
<main> |
|
<div class="row page_wrap"> |
|
<div class="twelve columns"> |
|
<div class="row"> |
|
<div class="twelve columns"> |
|
<h1 class="heading_supersize"> |
|
<span class="heading_center_bg">Ed Yother</span> |
|
</h1> |
|
<p class="welcome_text"> |
|
Mostly Irish Traditional Music from West Lafayette Indiana |
|
</p> |
|
</div> |
|
<div id="featured"> |
|
<!-- Changed the alt text for the image |
|
|
|
For anyone using a screen reader, the alt text is how they |
|
experience the image, since they likely can't see it well if at |
|
all. "Banner image" tells them what the image *is* but it doesn't |
|
tell them what's in the image. They don't get the same experience |
|
as a sighted visitor who can see the picture. What constitutes |
|
good alt text changes depending on context and can be subjective, |
|
but in this case, I'd recommend describing the image literally for |
|
people. You don't have to keep this alt text, you can write it in |
|
your own voice and highlight the elements that you think are |
|
important. |
|
--> |
|
<img src="images/MollysBanner.png" |
|
alt="Me in a striped shirt seated on a bench at a pub between two other musicians holding my banjo" |
|
class="center" /> |
|
</div> |
|
<!-- Remove the h3 |
|
|
|
Headings aren't allowed inside of <p> tags. The best way to style |
|
the text so that it looks the way you want is with CSS. You could |
|
create another class like the paragraph above and apply styles to |
|
that. |
|
--> |
|
<p> |
|
I am a musician living in West Lafayette Indiana. I focus mostly |
|
on Irish traditional music. I sing and play flute, Irish tenor |
|
banjo, guitar, mandolin, and octave mandolin |
|
</p> |
|
</div> |
|
<div> |
|
<!-- Add a title |
|
|
|
I believe the title attribute is useful for assistive technologies |
|
to provide an accessible name for iframes. |
|
|
|
You may also want to add a rule like this to your CSS to prevent |
|
horizontal scrolling on mobile devices: |
|
|
|
iframe { |
|
max-width: 100%; |
|
} |
|
--> |
|
<iframe title="Where I Told Her I Loved Her and Sprained Her Ankle on Bandcamp" |
|
style="border: 0; width: 380px; height: 651px" |
|
src="https://bandcamp.com/EmbeddedPlayer/album=4214766066/size=large/bgcol=ffffff/linkcol=0687f5/transparent=true/" |
|
seamless><a |
|
href="https://edyother.bandcamp.com/album/where-i-told-her-i-loved-her-and-sprained-her-ankle-2">Where I |
|
Told Her I Loved Her and Sprained Her Ankle by Ed |
|
Yother</a></iframe> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Remove this empty <div> |
|
|
|
<<div class="row"></div> |
|
|
|
--> |
|
|
|
<script> |
|
$("ul#menu3").nav - bar(); |
|
</script> |
|
|
|
<!-- end page wrap) --> |
|
<!-- Included JS Files (Compressed) --> |
|
<script src="javascripts/foundation.min.js"></script> |
|
<!-- Initialize JS Plugins --> |
|
<script src="javascripts/app.js"></script> |
|
<script src="audiojs/audio.js"></script> |
|
<script> |
|
audiojs.events.ready(function () { |
|
var as = audiojs.createAll(); |
|
}); |
|
</script> |
|
|
|
<div class="row"> |
|
<div class="twelve columns"> |
|
<!-- Changed the <p> to an <h2> |
|
|
|
Often users of assistive technology will use headings to get an overview |
|
of what's on the page and to jump to the sections of interest to them. |
|
Using an <h2> here will make it easier for them to find this |
|
information. You can still apply your welcome_text class here to |
|
maintain the appearance of the text, though it may require some |
|
adjustment to override some of the <h2> styles. |
|
|
|
It's also important not to skip heading levels. Since the only heading |
|
level we have is the <h1> for the page title, the next is an <h2>. It |
|
can be confusing for users of assistive technology to jump from an |
|
<h1> to an <h3>, for example. |
|
--> |
|
<h2 class="welcome_text">Where you can find me</h2> |
|
</div> |
|
|
|
<!-- You have three elements with id="container", but ids need to be |
|
unique within a page. So these should either be removed, or if |
|
they're needed for styling, you can convert them to a class instead |
|
of an ID. |
|
--> |
|
<div id="container"> |
|
<div class="col_fluid box_fluid"> |
|
<!-- |
|
Remove this <a> tag, it's not doing anything as far as I can tell and |
|
may confuse users of assistive technology. |
|
|
|
Empty alt text on this image seems like a valid choice to me, but |
|
you could also choose to describe the facade of Nine Irish Brothers. |
|
Empty alt text indicates that an image is decorative and assistive |
|
technology will just ignore the image (which is better than having |
|
no alt text, in which case the assistive technology will probably |
|
use the filename to announce the image). I don't think anything is |
|
lost by treating this image as decorative, but it could be nice to |
|
describe it for people anyway. |
|
--> |
|
<img src="images/NIBW.jpg" alt="" /> |
|
<div class="box_fluid_inner"> |
|
<!-- Remove the <h5> |
|
|
|
This isn't really a heading, and as I mentioned above, skipping |
|
heading levels like this can be confusing. The <strong> tag is |
|
enough, I think, and you can add additional CSS with a class to |
|
style it further. Since it was no longer in a heading, I moved it |
|
into the <p> tag so that it is grouped with the rest of the |
|
information about the session. |
|
--> |
|
<p> |
|
<strong>Nine Irish Brothers<br />West Lafayette</strong><br /> |
|
Every Wednesday<br /> |
|
7pm to 10pm<br /> |
|
119 Howard Ave,<br /> |
|
West Lafayette, IN 47908 |
|
</p> |
|
|
|
<!-- Not sure if this empty paragraph was always here, or if my |
|
formatter added it because of some unclosed tags earlier in the |
|
document, but this should be removed |
|
<p /> |
|
--> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
|
|
<!-- Replace the <div> with another landmark element: <footer> |
|
|
|
You may be able to replace the .footer selector in your CSS with just an |
|
element selector: footer element selector: footer. |
|
--> |
|
<footer class="footer"> |
|
<div class="row"> |
|
<!-- Missing a quote on this id, which was messing up parsing a bit. |
|
|
|
It was id=container" |
|
|
|
It should be id="container" |
|
--> |
|
<div id="container"> |
|
<div class="footer_col_fluid"> |
|
<!-- Change the <h3> to an <h2> to avoid skipping heading levels. |
|
|
|
Instead of using the <h3> to achieve the style you want, you can |
|
style it with CSS by either giving it a class, or applying a style |
|
to all <h2> elements in a footer like this: |
|
|
|
footer h2 { |
|
/* Styles go here */ |
|
} |
|
--> |
|
<h2>Follow Me</h2> |
|
<!-- Wrap all of your social links with an unordered list |
|
|
|
Lists offer some nice semantics for assistive technology; for |
|
example, a screen reader will announce how many items are in the |
|
list for people. So you're doing folks a favor by using a list here. |
|
The gotcha is that you're formatting your list in a horizontal row, |
|
and Safari will strip the list semantics when you remove the default |
|
list styles, so we have to use an ARIA role to add them back in for |
|
Safari. That's what the role="list" is doing. |
|
|
|
I added the social-links class so that you can easily style the list |
|
in your CSS with a rule something like this: |
|
|
|
.social-links { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 1ch; |
|
justify-content: center; |
|
list-style: none; |
|
padding: 0; |
|
} |
|
--> |
|
<ul class="social-links" role="list"> |
|
<li> |
|
<!-- |
|
Remove the title attribute from all of the anchors. It's |
|
unnecessary as the links will get their labels from the alt |
|
text on the images. |
|
--> |
|
<a href="https://edyother.bandcamp.com"> |
|
<!-- |
|
Make sure to close these img tags. They weren't being |
|
closed properly, which can lead to some unusual parsing of |
|
your document. |
|
|
|
You might also consider creating an icon class to style all of |
|
your images, instead of usng the inline style attribute. |
|
|
|
.icon { |
|
height: 2em; |
|
width: 2em; |
|
} |
|
--> |
|
<img src="./icons/bandcamp.svg" alt="bandcamp" style="width: 2em; height: 2em" /> |
|
</a> |
|
</li> |
|
<li> |
|
<a rel="me" title="mastodon" href="https://tech.lgbt/@edyother"> |
|
<img src="./icons/mastodon.svg" alt="mastodon" style="width: 2em; height: 2em" /> |
|
</a> |
|
</li> |
|
<li> |
|
<a title="twitter" href="https://twitter.com/edyother"> |
|
<img src="./icons/twitter.svg" alt="twitter" style="width: 2em; height: 2em" /> |
|
</a> |
|
</li> |
|
<li> |
|
<a title="instagram" href="https://instagram.com/edyother"> |
|
<img src="./icons/insta.svg" alt="instagram" style="width: 2em; height: 2em" /> |
|
</a> |
|
</li> |
|
<li> |
|
<a title="youtube" href="https://www.youtube.com/edyother"> |
|
<img src="./icons/youtube.svg" alt="youtube" style="width: 2em; height: 2em" /> |
|
</a> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<!-- Missing a quote on this id, which was messing up parsing a bit. |
|
|
|
It was id=container" |
|
|
|
It should be id="container" |
|
--> |
|
<div id="container"> |
|
<div class="footer_col_fluid"> |
|
<!-- Changed <h3> to an <h2> for the same reason as mentioned above |
|
--> |
|
<h2>Contact Me</h2> |
|
<!-- Remove h4 --> |
|
<a href="mailto:[email protected]">[email protected]</a> |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
</body> |
|
|
|
</html> |
