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="row align-items-center">
<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 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 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 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>

View File

@ -223,33 +223,33 @@ html(lang='en')
img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='...')
h4 Parveen Anand
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
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
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
.col-lg-4
.team-member
img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='...')
h4 Diana Petersen
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
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
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
.col-lg-4
.team-member
img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='...')
h4 Larry Parker
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
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
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
.row
.col-lg-8.mx-auto.text-center
@ -262,16 +262,16 @@ html(lang='en')
.row.align-items-center
.col-md-3.col-sm-6.my-3
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
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
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
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
section#contact.page-section
@ -369,11 +369,11 @@ html(lang='en')
.col-lg-4.text-lg-start
| Copyright &copy; Your Website 2022
.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
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
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
.col-lg-4.text-lg-end
a.link-dark.text-decoration-none.me-3(href='#!') Privacy Policy