Web Accessibility

Research into web accessibility

Weston Everson 2025-16-2

Web Accessibility Research

Sources:

w3.org Accessibility

Washington.edu Web Accessibility

Developer Modzilla Web Accessability

Developer Modzilla Aria

Developer Modzilla Aria Attributes

With in the world of web design we worry a lot about the functionality of the website. How it looks making sure code runs properly are all important when building a website but what isn't thought of as much is wether or not a website is accessible to all people. Perhaps you might be able to use a website such as this perfectly fine but when it comes to older people, people in rural/developing areas, and most importantly those who may have disabilities. These types of people may not either understand or are unable to use a website properly, which is why web accessibility is not only mandated but also used on many websites.

Web Accessibility just refers to making so anyone is able to use your website. This can be done through many means so here's a list of some ways to make a website accessible.

  1. Changing the language so that people who don't speak english can have text translated to their native language

  2. Adding descriptions to images. While it would be better to not have images, however if you do giving descriptions to images will allow people who normally can see what is on the screen an understanding as to what is on screen.

  3. When creating a form adding labels so that readers will understand which labels are related to which form question. Say you had 2 questions for a from, giving them labels will allow someone to give the correct answers to what the form is asking of them

  4. Making the website readable by not using small text, giving enough space for text to be readable, and using simple languages when writing something out.

While these are important the 5th and final way to make a website accessible is the most important. Using ARIA attributes. ARIA attributes (Accessible Rich Internet Applications) are attributes to make a website more web accessible. There are many ARIA attributes that can be added to a website.

ARIA-Required

How this code sample works is we have an input type text box and a input type submit. With the required aria, in order for the submit to work their needs to be something in the text box.


<label>Comment</label>
<input type="text" required aria-required="true">
<input type="submit" value="SUBMIT">

ARIA-Hidden

How this code works is that it hides wether something should be exposed to any accessibility API. It's mostly used to show wether something important to a website so if you had something not necessary then you can use this Aria to hide it by making it equal to "true".


<button>
  <span class="notImportant" aria-hidden="true"></span>
  <span class="label">Funny Button</span>
</button>

ARIA-Label

This code helps with identifying strings labeled as HTML elements. This helps with visual impaired users identify portions of the site. Say for instance we have a Navbar at the top of the page with a icon. This will show that that their is an Icon on the navbar when the mouse hovers over the Icon


<a class="navbar-brand" href="#" aria-label="Home">
    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-box-seam" viewBox="0 0 16 16" aria-hidden="true">
        <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z"/>
    </svg>
</a>

ARIA-Current

This ARIA indicates what the current element in a container is. For example if I have 3 pages and (Live) is my main page it will show that is the current page you are on.

<nav>

    <ul>

        <li>
            <a href="./" aria-current="page">Live</a>
        </li>
        <li>
            <a href="../../">Laugh</a>
        </li>
        <li>
            <a href="../../../">Love</a>
        </li>

    </ul>

</nav>

ARIA-Keyshortcuts

This aria helps by making an attribute work via a keyboard shortcut. In this example While you can press the button on the screen and it will work, you can also use Shift+Tab on the keyboard to have the button run as well. Having something like this makes it so that a website can be navigated by only using a keyboard which helps those who may have a disability that limits their use of a mouse.


<button class="btn" type="submit" aria-keyshortcuts="Shift+Tab">
    Send
</button>