# Making Your Website More Accessible. What does it mean?

There are modifications that you can make to your website that makes it easier for users with a handicap to access. This is called accessibility. Some of these modifications include using appropriate HTML elements such as Title and Header. These changes often align with better Search Engine Optimization results which enables your page to be found in searches and helps to drive more traffic to the page.
You can test how accessible your website is in order to make the changes that will have the greatest impact on accessibility. One way to do this is using the WebDeveloper extension tool for Chrome, can be downloaded at https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US. Another way to do this specifically for visually impaired users is try out your application using a screen reader. Screen readers read the web content to the user. On a Mac computer this is done using VoiceOver https://support.apple.com/guide/voiceover/browse-webpages-vo27974/10/mac/11.0. On a Windows computer this is done using Narrator https://www.pcmag.com/how-to/how-to-use-windows-10s-narrator-to-read-your-screen-aloud.
Accessibility is particularly important for applications in the healthcare space as everyone needs to access healthcare services. Such an essential service must allow users to locate healthcare services in order to receive the care that they need. One application that I wrote allowed patients to ask a question regarding their healthcare and receive a specialty specific response. I made a few changes to the landing page to make it easier for a screen reader to read the content. The following is what the landing page initially looked like:

Welcome Page Prior to Accessibility Changes:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
      body {
      background-image: url('<%= asset_path 'camilo-jimenez-vGu08RYjO-s-unsplash.jpg' %>');
      background-size: cover;
      }
      .center {
        justify-content: center;
      }
      .navbar-custom {
        background-color: #D8DEEE;
      }
      .sign-in {
        border: 0;
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
        background-color: #D8DEEE;
      }
      .card-signin .card-title {
        margin-bottom: 2rem;
        font-weight: 300;
        font-size: 1.5rem;
      }
      .card-signin .card-body {
        padding: 2rem;
      }

</style>
</head>
<body>
  <div class="text-center center font-weight-bold">
  <nav class="navbar navbar-custom sticky-top center"><h1>Welcome to Ask Your Health Question</h1>
  </div>
<% if flash[:notice] %>
<div class="notice"><h2><%= flash[:notice] %></h2></div>
  <% end %>
 </div>
</nav>
</div>

<div class="container-fluid mx-auto text-nowrap text-dark" style="width: 500px;">
  <table class="table table-striped">
    <thead>
      <tr>

<%= form_for(:session, url: "sessions/create", html: { autocomplete: "new-password" })   do |f| %>
<br>
<div class="col sign-in card-title card-body">
<h3>Sign in if you are a Member</h3>
<div class="field"><%= label :name, "Enter your email"%><br><br>
  <%= f.text_field :email, :class => "span5"  %>
</div><br>

<div class="field"><%= label :password, "Enter your password" %><br><br>
  <%= f.password_field :password, :class => "span5"  %>
</div><br><br>

<div class="actions">
  <%= f.submit "Sign In"  %>
</div>
<% end %><br><br>

<h3>Create a New Account</h3>

<%= link_to('Login with Facebook!', '/auth/facebook') %><br><br>
<%= link_to('Create a New Account as a Patient', 'users/new_patient') %><br><br>
<%= link_to('Create a New Account as a Physician', 'users/new_physician') %><br><br>

  </table>
</div>
</div>
</body>
</html>

With a quick change to include a descriptive title element without an additional header .

Welcome Page After Accessibility Changes

<!DOCTYPE html>
<html lang="en">
<head>
<style>
      body {                     
      background-image: url('<%= asset_path 'camilo-jimenez-vGu08RYjO-s-unsplash.jpg' %>');
      background-size: cover;
      }
      .center {
        justify-content: center;
      }
      .navbar-custom {
        background-color: #D8DEEE;
      }
      .sign-in {
        border: 0;
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
        background-color: #D8DEEE;
      }
      .card-signin .card-title {
        margin-bottom: 2rem;
        font-weight: 300;
        font-size: 1.5rem;
      }
      .card-signin .card-body {
        padding: 2rem;
      }

</style>
</head>
<body>
  <div class="text-center center font-weight-bold">
    <nav class="navbar navbar-custom sticky-top center"></nav>
    <title>Company Name: Welcome to Ask Your Health Question <%= content_for(:title) %></title> <%#changed to a title tag%>
  </div>
<% if flash[:notice] %>
<div class="notice"><h2><%= flash[:notice] %></h2></div>
  <% end %>
 </div>
</div>

<div class="container-fluid mx-auto text-nowrap text-dark" style="width: 500px;">
  <table class="table table-striped">
    <thead>
      <tr>

<%= form_for(:session, url: "sessions/create", html: { autocomplete: "new-password" })   do |f| %>
<div class="col sign-in card-title card-body">
<h3>Sign in if you are a Member</h3>
<br>
<div class="field"><%= label :name, "Enter your email"%><br><br>
  <%= f.text_field :email, :class => "span5"  %>
</div>

<div class="field"><%= label :password, "Enter your password" %><br><br>
  <%= f.password_field :password, :class => "span5"  %>
</div><br><br>

<div class="actions">
  <%= f.submit "Sign In"  %>
</div>
<% end %><br><br>

<h3>Create a New Account</h3>

<%= link_to('Login with Facebook!', '/auth/facebook') %><br><br>
<%= link_to('Create a New Account as a Patient', 'users/new_patient') %><br><br>
<%= link_to('Create a New Account as a Physician', 'users/new_physician') %><br><br>

  </table>
</div>
</div>
</body>
</html>

Blog

# Making Your Website More Accessible. What does it mean?

Pamela Torres-Rocca

Join Our Newsletter. No Spam, Only the good stuff.

Related