2
\$\begingroup\$

This website has been created for a student organization that is focused on engineering solutions for people with disabilities. With that in mind, I would like this code to be as accessible as possible, so reviews focusing on that will be appreciated. Besides that, optimizations/simplifications to the CSS or HTML that don't change behavior of the page would also be appreciated.

body, html {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  background: #fff;
  line-height: 170%;
  height: 100%;
}

strong,
b {
  font-weight: 600
}

hr {
  border: 0;
  clear:both;
  display:block;
  width: 96%;               
  background-color:#333;
  height: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  line-height: 150%;
}

i.fa {
  color: #333;
  margin-left: 6pt;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/*clearfixes*/

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.main-container {
  background: #fefefe;
  max-width: 1000px;
  margin: 25px auto 25px auto;
  position: relative;
  width: 100%;
}

.container {
  position: relative;
  padding: 0px 25px 0px 25px;
}

/*animation slide left styled for profile*/
.profile {
  float: left;
  width: 100%;
  margin: 0% 0% 3% 0%;
  background: #F5F5F5;
  padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;
}

.profile .header{
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.profile .left{
  float: left;
  margin-right: 15px;
}

.profile .right{
  float: left;
}

.profile img {
  height: 65px;
  border-radius: 10%;
  box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}

.profile h3 {
  margin: 0px 0px 5px 0px;
}

.profile h4 {
  margin: 0px 0px 5px 0px;
}

.profile .content {
  float: left;
  width:100%;
  margin-bottom: 10px;
}

.profile .rating{}

.profile i {
  color: #aaa;
  margin-right: 5px;
}



/*media queries for small devices*/
@media screen and (max-width: 678px){
  /*profile*/
  .profile,
  .profile:nth-of-type(odd),
  .profile:nth-of-type(even){
    width: 100%;
    margin: 0px 0px 20px 0px;
  }
  .profile .right,
  .profile .left,
  .profile .content,
  .profile .rating{
    text-align: center;
    float: none;
  }
  .profile img{
    width: 85px;
    height: 85px;
    margin-bottom: 5px;
  }
  
}

/*animation slide left styled for profile*/

.project {
  float: left;
  width: 100%;
  margin: 0% 0% 3% 0%;
  background: #F5F5F5;
  padding: 15px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;
}

.project .header{
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.project .left{
  float: left;
  margin-right: 15px;
}

.project .right{
  float: left;
}

.project-image-container {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 15px;
  max-height: max-content;
}

.project-image {
  width: 100%;
  border-radius: 10%;
  box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}

.project h3 {
  margin: 0px 0px 5px 0px;
}

.project h4 {
  margin: 0px 0px 5px 0px;
}

.project .content {
  display: flex;
  flex-direction: row;
  width:100%;
  margin-bottom: 10px;
}

.project .inner-content {
  flex: 1;
}

.project .rating{}

.project i {
  color: #aaa;
  margin-right: 5px;
}



/*media queries for small devices*/
@media screen and (max-width: 678px){
  /*profile*/
  .project {
    width: 100%;
    height: auto;
    margin: 0px 0px 20px 0px;
  }

  .project .right,
  .project .left,
  .project .content,
  .project .rating{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .project-image-container {
    flex: 1;
    flex-basis: auto;
  }

  .project-image {
    max-width: max-content;
    max-height: max-content;
    margin-bottom: 5px;
  }

  .project-image-container {
    align-items: center;
    justify-content: center;
  }
  
}
<html lang="en">

<head>
    <title>Organization Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
        crossorigin="anonymous">
    <link href="main.css" type='text/css' rel='stylesheet'>
</head>

<body>
    <div class="main-container">
        <div class="container">
            <h1>Organization Name</h1>
        </div>
        <div class="container">
            <h2>About Us<i class="fa fa-question"></i></h2>
            <div class="content">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, mauris id vestibulum
                pulvinar, turpis magna dapibus arcu, sit amet porta est neque id mi. Morbi ut semper libero. Praesent
                ac tortor nisl. Sed arcu nisl, finibus finibus turpis et, aliquet fringilla lectus. Phasellus in nisl
                nibh. Morbi iaculis ipsum ut purus porttitor congue. Fusce semper tristique justo a efficitur. Donec
                venenatis blandit ante, eu cursus quam finibus eget. In congue convallis dui sed rutrum. Suspendisse in
                metus a magna rutrum suscipit eget vehicula quam.
                </p>
                
                <p>
                Vivamus enim augue, varius et fringilla id, iaculis quis eros. Quisque tincidunt lobortis sem, in
                posuere metus feugiat sed. Aenean ullamcorper eros nibh, vel pellentesque mi blandit in. Ut semper
                interdum nibh, sit amet egestas lorem. Aliquam augue enim, congue tincidunt varius vel, elementum eget
                velit. Aliquam interdum nunc lectus, eu aliquam massa sagittis a. Sed molestie fermentum metus, nec
                viverra dui fringilla quis. Maecenas sit amet nulla tincidunt, maximus est quis, vestibulum risus.
                Aenean lacinia lectus nec lectus eleifend, et congue est tincidunt.
                </p>

                <p>
                Aliquam feugiat nec lectus eget imperdiet. Ut consectetur in ex sed faucibus. Morbi gravida urna non
                enim consequat tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur, quam
                rhoncus interdum feugiat, ipsum ante venenatis ligula, vitae vestibulum enim est in mauris. Vestibulum
                vehicula sit amet ante sit amet hendrerit. Maecenas et eros elit. Vestibulum tempor ac leo ut tempus.
                Nulla vitae turpis mauris.
                </p>
            </div>
        </div>

        <hr>

        <div class="container">
            <h2>Our Executives<i class="fa fa-users"></i></h2>
            <div class="profile">
                <div class="header">
                    <div class="left">
                        <img src="https://via.placeholder.com/150" alt=""/>
                    </div>
                    <div class="right">
                        <h3>Executive One</h3>
                        <h4>Faculty Sponsor</h4>
                    </div>
                </div>
                <div class="content"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Pellentesque et porttitor mi. Sed egestas nunc dui, a convallis tellus blandit
                    eget. Nulla sed elementum nibh. Sed aliquam tellus eu vestibulum aliquam. Ut laoreet libero eget
                    nisi facilisis varius. Nam cursus arcu velit, quis tempor metus scelerisque at. Nulla sed enim
                    Proin feugiat elit ut augue luctus, id interdum ex laoreet. Nunc tempor egestas aliquet.<i class="fa fa-quote-right"></i>
                </div>
            </div>

            <div class="profile">
                <div class="header">
                    <div class="left">
                        <img src="https://via.placeholder.com/150" alt=""/>
                    </div>
                    <div class="right">
                        <h3>Executive Two</h3>
                        <h4>Faculty Sponsor</h4>
                    </div>
                </div>
                <div class="content"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Pellentesque et porttitor mi. Sed egestas nunc dui, a convallis tellus blandit
                    eget. Nulla sed elementum nibh. Sed aliquam tellus eu vestibulum aliquam. Ut laoreet libero eget
                    nisi facilisis varius. Nam cursus arcu velit, quis tempor metus scelerisque at. Nulla sed enim
                    Proin feugiat elit ut augue luctus, id interdum ex laoreet. Nunc tempor egestas aliquet.<i class="fa fa-quote-right"></i>
                </div>
            </div>

            <div class="profile">
                <div class="header">
                    <div class="left">
                        <img src="https://via.placeholder.com/150" alt=""/>
                    </div>
                    <div class="right">
                        <h3>Executive Three</h3>
                        <h4>Student Lead</h4>
                    </div>
                </div>
                <div class="content"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Pellentesque et porttitor mi. Sed egestas nunc dui, a convallis tellus blandit
                    eget. Nulla sed elementum nibh. Sed aliquam tellus eu vestibulum aliquam. Ut laoreet libero eget
                    nisi facilisis varius. Nam cursus arcu velit, quis tempor metus scelerisque at. Nulla sed enim
                    Proin feugiat elit ut augue luctus, id interdum ex laoreet. Nunc tempor egestas aliquet.<i class="fa fa-quote-right"></i>
                </div>
            </div>
        </div>

        <hr>

        <div class="container">
            <h2>
                Our Projects <i class="fa fa-project-diagram"></i></h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique, felis sed blandit
                consequat, odio velit volutpat ligula, eu semper ligula est ac ex. In hac habitasse platea dictumst.
                Curabitur sagittis aliquet elit, ac dictum lacus faucibus sagittis. Vestibulum hendrerit ligula ut ante
                auctor gravida et eget augue. Aenean posuere, dui sit amet finibus tristique, mauris tellus sagittis
                ex, et tempus orci ante vel magna. Vestibulum mollis sollicitudin ex, et scelerisque sapien suscipit
                et. Nullam auctor, diam ac aliquam efficitur, ex nunc viverra odio, sit amet congue lorem lacus eget
                dui. Quisque tellus urna, luctus vitae tincidunt a, eleifend in justo. Nam eget dolor id lacus varius
                facilisis sed sed ex. Ut mattis tortor quis justo egestas, rutrum vehicula augue dictum.
            </p>
            <p>
                Suspendisse a tellus a quam egestas lacinia eu ac lorem. Nam vel tellus urna.
                Etiam ac orci venenatis, posuere libero a, volutpat turpis. Aenean lobortis nec libero in sagittis.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in risus velit. Aliquam dapibus
                imperdiet vehicula. Morbi urna leo, maximus ac viverra nec, dapibus nec mi. Integer quis quam commodo,
                lobortis augue sit amet, molestie est. Integer malesuada tellus commodo, rutrum nunc et, feugiat
                libero. Vestibulum eu sem sed nibh tempus dignissim eget at ligula. Cras et lacus mauris.
            </p>
        </div>
        <div class="container cf">
            <!--
                Project One
            -->
            <div class="project">
                <div class="content">
                    <div class="project-image-container">
                        <img class="project-image" src="https://via.placeholder.com/150" alt=""/>
                    </div>
                    <div class="inner-content">
                        <h2><b>A Project</b></h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod ullamcorper
                            mauris
                            eget scelerisque. Suspendisse leo orci, aliquet at felis sed, tincidunt elementum ligula.
                            Curabitur
                            viverra felis ante, sed posuere mauris consectetur a. Integer interdum odio eleifend
                            interdum
                            rhoncus. Curabitur nec leo ultrices, cursus augue et, rutrum risus. Suspendisse vulputate
                            justo nec
                            sodales tristique. Curabitur sit amet orci lacinia, tincidunt dolor vel, consequat tortor.
                            Sed in
                            lectus vitae tellus pellentesque varius. Quisque a vehicula tellus, eu molestie purus.
                        </p>
                        <p>
                            Phasellus fringilla feugiat augue quis ultrices. Aliquam libero diam, viverra ut varius
                            eget,
                            scelerisque at massa. Etiam sodales sit amet quam eu egestas. Suspendisse sit amet mauris
                            dui.
                            Curabitur a nibh in velit imperdiet dignissim. Sed pulvinar aliquet erat, porta blandit
                            eros
                            rhoncus quis. Phasellus et fermentum odio. Vestibulum condimentum convallis nisl et
                            pellentesque.
                            Praesent vel nibh non leo pulvinar fringilla vel eget dui. Maecenas aliquam magna nec justo
                            pulvinar, fringilla porta augue viverra. Proin ac convallis nisl. Cras eu pharetra lacus,
                            eu
                            convallis mauris. Donec facilisis nisi eget lorem euismod, eget tincidunt purus sodales.
                            Quisque
                            mattis enim ut mauris pretium, id viverra arcu luctus. Duis velit massa, commodo nec
                            lacinia a,
                            malesuada tincidunt lectus. Proin felis nibh, luctus quis volutpat eget, porta a lorem.
                        </p>
                    </div>
                </div>
            </div>

            <!--
                Project Two
            -->
            <div class="project">
                <div class="content">
                    <div class="project-image-container">
                        <img class="project-image" src="https://via.placeholder.com/150" alt=""/>
                    </div>
                    <div class="inner-content">
                        <h2><b>Another Project</b></h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod ullamcorper
                            mauris
                            eget scelerisque. Suspendisse leo orci, aliquet at felis sed, tincidunt elementum ligula.
                            Curabitur
                            viverra felis ante, sed posuere mauris consectetur a. Integer interdum odio eleifend
                            interdum
                            rhoncus. Curabitur nec leo ultrices, cursus augue et, rutrum risus. Suspendisse vulputate
                            justo nec
                            sodales tristique. Curabitur sit amet orci lacinia, tincidunt dolor vel, consequat tortor.
                            Sed in
                            lectus vitae tellus pellentesque varius. Quisque a vehicula tellus, eu molestie purus.
                        </p>
                        <p>
                            Phasellus fringilla feugiat augue quis ultrices. Aliquam libero diam, viverra ut varius
                            eget,
                            scelerisque at massa. Etiam sodales sit amet quam eu egestas. Suspendisse sit amet mauris
                            dui.
                            Curabitur a nibh in velit imperdiet dignissim. Sed pulvinar aliquet erat, porta blandit
                            eros
                            rhoncus quis. Phasellus et fermentum odio. Vestibulum condimentum convallis nisl et
                            pellentesque.
                            Praesent vel nibh non leo pulvinar fringilla vel eget dui. Maecenas aliquam magna nec justo
                            pulvinar, fringilla porta augue viverra. Proin ac convallis nisl. Cras eu pharetra lacus,
                            eu
                            convallis mauris. Donec facilisis nisi eget lorem euismod, eget tincidunt purus sodales.
                            Quisque
                            mattis enim ut mauris pretium, id viverra arcu luctus. Duis velit massa, commodo nec
                            lacinia a,
                            malesuada tincidunt lectus. Proin felis nibh, luctus quis volutpat eget, porta a lorem.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <hr>

        <div class="container">
            <h2>Contact Us<i class="fa fa-broadcast-tower"></i></h2>
            <div class="content">
                <b>Email: </b>email@domain.com<br>
                <b>Phone: </b>(123) 456-7890
            </div>
        </div>

    </div>
        
</body>

</html>

Improve this question
\$\endgroup\$
1
  • 1
    \$\begingroup\$ Run both your HTML and CSS through the W3C validator. \$\endgroup\$
    – Reinderien
    Mar 8, 2019 at 5:53

3 Answers 3

Reset to default
2
\$\begingroup\$

About the HTML

  • (1) You are missing the DOCTYPE (first line of the document):

    <!DOCTYPE html>

  • (2) It’s typically a good idea to set the character encoding (first element in the head):

    <meta charset="utf-8"> <!-- assuming UTF-8 -->

  • (3) The i element should not be used for adding images via CSS. Use a meaningless span element instead:

    <span class="fa fa-question"></span>

  • (4) The hr should not be used between sections (heading elements open implicit sections). Use CSS instead.

  • (5) Don’t use a heading element (h4) for a sub-heading; use p instead:

    <h3>Executive One</h3>
<p>Faculty Sponsor</p>

  • (6) The heading for an individual project should be h3 instead of h2.

  • (7) There is typically no need to use b in a heading (unless you only mark up a part of the heading). Use CSS instead.

  • (8) You can link the email address and telephone number (see below).

  • (9) For a list with name-value pairs, you can use the dl element:

    <dl>
  <dt>Email:</dt> <dd><a href="mailto:email@domain.com">email@domain.com</a></dd>
  <dt>Phone:</dt> <dd><a href="tel:123-456-7890">(123) 456-7890</a></dd>
</dl>
Improve this answer
\$\endgroup\$
2
\$\begingroup\$ 
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  line-height: 150%;
}

having all levels of headers be the same size kind of defeats the purpose of having different levels of headers

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ I agree. Changed it and it looks better and is easier to read! \$\endgroup\$
    – McLemore
    Mar 10, 2019 at 3:58
1
\$\begingroup\$

alt tags should be filled, and the contact email should be a clickable link. You might also want to add a table of contents and link to a tags for the different sections. Which also means you should use semantically loaded HTML5 tags (e.g. section) instead of just divs

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ I didn't fill the alt tags because each of the images will have text next to them that will function as the alt text. If I add it in, screen readers would read it twice. I did take your advice to change over to semantic HTML5 tags and will consider adding a table of contents. \$\endgroup\$
    – McLemore
    Mar 10, 2019 at 4:00
  • \$\begingroup\$ You should still put empty alt attributes, at least, so screen readers don't read the (probably pointless) filename instead. \$\endgroup\$
    – Theoriok
    Mar 13, 2019 at 13:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.