accessibility features for links and brand logos

This commit is contained in:
David Miller 2022-03-22 16:27:52 -04:00
parent 5d6e817e0c
commit 51bec33d75
2 changed files with 20 additions and 20 deletions

8
dist/index.html vendored
View File

@ -291,16 +291,16 @@
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-md-3 col-sm-6 my-3"> <div class="col-md-3 col-sm-6 my-3">
<a href="#!" aria-label="Microsoft"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/microsoft.svg" alt="..." /></a> <a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/microsoft.svg" alt="..." aria-label="Microsoft Logo" /></a>
</div> </div>
<div class="col-md-3 col-sm-6 my-3"> <div class="col-md-3 col-sm-6 my-3">
<a href="#!" aria-label="Google"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/google.svg" alt="..." /></a> <a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/google.svg" alt="..." aria-label="Google Logo" /></a>
</div> </div>
<div class="col-md-3 col-sm-6 my-3"> <div class="col-md-3 col-sm-6 my-3">
<a href="#!" aria-label="Facebook"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/facebook.svg" alt="..." /></a> <a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/facebook.svg" alt="..." aria-label="Facebook Logo" /></a>
</div> </div>
<div class="col-md-3 col-sm-6 my-3"> <div class="col-md-3 col-sm-6 my-3">
<a href="#!" aria-label="IBM"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/ibm.svg" alt="..." /></a> <a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/ibm.svg" alt="..." aria-label="IBM Logo" /></a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -223,33 +223,33 @@ html(lang='en')
img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='...') img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='...')
h4 Parveen Anand h4 Parveen Anand
p.text-muted Lead Designer p.text-muted Lead Designer
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Parveen Anand Twitter Profile')
i.fab.fa-twitter i.fab.fa-twitter
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Parveen Anand Facebook Profile')
i.fab.fa-facebook-f i.fab.fa-facebook-f
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Parveen Anand LinkedIn Profile')
i.fab.fa-linkedin-in i.fab.fa-linkedin-in
.col-lg-4 .col-lg-4
.team-member .team-member
img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='...') img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='...')
h4 Diana Petersen h4 Diana Petersen
p.text-muted Lead Marketer p.text-muted Lead Marketer
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Diana Petersen Twitter Profile')
i.fab.fa-twitter i.fab.fa-twitter
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Diana Petersen Facebook Profile')
i.fab.fa-facebook-f i.fab.fa-facebook-f
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Diana Petersen LinkedIn Profile')
i.fab.fa-linkedin-in i.fab.fa-linkedin-in
.col-lg-4 .col-lg-4
.team-member .team-member
img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='...') img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='...')
h4 Larry Parker h4 Larry Parker
p.text-muted Lead Developer p.text-muted Lead Developer
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Larry Parker Twitter Profile')
i.fab.fa-twitter i.fab.fa-twitter
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Larry Parker Facebook Profile')
i.fab.fa-facebook-f i.fab.fa-facebook-f
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Larry Parker LinkedIn Profile')
i.fab.fa-linkedin-in i.fab.fa-linkedin-in
.row .row
.col-lg-8.mx-auto.text-center .col-lg-8.mx-auto.text-center
@ -262,16 +262,16 @@ html(lang='en')
.row.align-items-center .row.align-items-center
.col-md-3.col-sm-6.my-3 .col-md-3.col-sm-6.my-3
a(href='#!') a(href='#!')
img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/microsoft.svg', alt='...') img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/microsoft.svg', alt='...', aria-label='Microsoft Logo')
.col-md-3.col-sm-6.my-3 .col-md-3.col-sm-6.my-3
a(href='#!') a(href='#!')
img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/google.svg', alt='...') img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/google.svg', alt='...', aria-label='Google Logo')
.col-md-3.col-sm-6.my-3 .col-md-3.col-sm-6.my-3
a(href='#!') a(href='#!')
img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/facebook.svg', alt='...') img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/facebook.svg', alt='...', aria-label='Facebook Logo')
.col-md-3.col-sm-6.my-3 .col-md-3.col-sm-6.my-3
a(href='#!') a(href='#!')
img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/ibm.svg', alt='...') img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/ibm.svg', alt='...', aria-label='IBM Logo')
// Contact // Contact
section#contact.page-section section#contact.page-section
@ -369,11 +369,11 @@ html(lang='en')
.col-lg-4.text-lg-start .col-lg-4.text-lg-start
| Copyright &copy; Your Website 2022 | Copyright &copy; Your Website 2022
.col-lg-4.my-3.my-lg-0 .col-lg-4.my-3.my-lg-0
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Twitter')
i.fab.fa-twitter i.fab.fa-twitter
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Facebook')
i.fab.fa-facebook-f i.fab.fa-facebook-f
a.btn.btn-dark.btn-social.mx-2(href='#!') a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='LinkedIn')
i.fab.fa-linkedin-in i.fab.fa-linkedin-in
.col-lg-4.text-lg-end .col-lg-4.text-lg-end
a.link-dark.text-decoration-none.me-3(href='#!') Privacy Policy a.link-dark.text-decoration-none.me-3(href='#!') Privacy Policy