DEV Community

Pamela Torres-Rocca
Pamela Torres-Rocca

Posted on

2

# 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> 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️