Forem: Andrew Elliott

Web Accessibility and You

Andrew Elliott — Wed, 04 Sep 2019 18:39:48 +0000

What is Web Accessibility?

Web Accessibility is a practice and train of thought that puts the needs of users with disabilities at the forefront when developing a website or application. As an Accessibility Developer, you're tasked with ensuring that the finished product is as seamlessly useable for individuals with disabilities as it is for other users. It can be a tedious task, especially if you have to go back and work through a website that's already finished, but it's an important one and one that millions of users world wide will be grateful for.

Structure
The basic markup for a page consists of something like this:

Language Declaration
Title
Body
Navigation Bar
headers
videos
Images
tables
Other HTML elements
Footer
That's obviously a very rough sketch but you get my point, and with each of these pieces of a page, it determines how a user interacts with that specific code. It may look like a lot to think about, but it's a lot easier than it may seem, I promise!

Semantic Markup - We're Going Deep!

The easiest way to code with accessibility in mind is to use proper HTML semantic markup, and here is where we are going to cover that!

Language Declaration
It may seem kind of a no-brainer, but declaring the language at the top of your webpage is often overlooked, but one of the more important to-dos when coding. Why? Because it tells a screen reader what language to read your page in! After that though, let's say you have a quote or some other information that you want presented in a different language. To do this, you should include a tag with the proper two letter code ('En' for English, 'Fr' for French, etc) for maximum support across all screen readers.

Title Declaration

When coding for accessibility, we have to put ourselves in the place of the user. We need to be thorough, and ensure that their experience is as seamless as our own. So when developing even the most basic of pages, we need to ensure a title is declared and that it accurately represents the page. A well described title(the website/company name is perfect) will allows all users to know they're in the correct place, or tip them off that this isn't the page they intended to navigate to.

The Body

This is the deepest aspect of accessibility as it represents 99% of the content on a webpage, so attention to detail here needs to be top notch. We will begin with the top most element, and work our way through most HTML elements and how we can include accessibility with their creation.

Navigation/Links/Buttons

If we follow proper HTML markup, navigating a page via a screen reader, the tab key or another way should be easier for users with disabilities. When building out a navigation bar (or when using links throughout the web page) ensure that the location makes sense (in regards to the flow of the page) to users. As well, and links should accurately describe what will happen when the link is clicked.

For example, if you're offering more information on a subject, be descriptive with your link text. An example of vague link text would be something similar to these: "read more", "learn more", "view", etc.

As well, if the page opens in a new page have an icon with an alt text similar to "Opens in new page" or some sort of way to let poor sighted/blind users know that an entirely new page is about to open if they click the link.

Headings

First and foremost, headings. Your webpage should roughly follow this heading declaration outline:

Heading declaration needs to follow a logical order. To begin, there should only be one(1) H1 declaration, and should be the pages title.

H2 elements should be the high points of the information and an introduction to that specific aspect of information.

From there on, if applicable, the page should follow the above Heading markup outline.

Why do we do this? Well, it allows for easier page access for users who may be using screen readers and/or need to use the tab key to navigate the page.

Images

For blind or poor sighted users, viewing images is often the most frustrating aspect of visiting a web page, especially if there is vital information depicted in the image. For developers and graphic artists we can make this easier for these users in a variety of ways.

Color Contrast

Some users that we need to account for have color blindness or other issues (cataracts, etc) that hinder how easily they can see an image on a webpage. The first way we can account for this is to ensure that all images have sufficient color contrast.

Per accessibility guidelines, all images need to follow a 4.5 : 1 ratio between the foreground and background. A tool that we can use to check this is the WebAim Color Contrast Checker tool. To use this tool, enter in the hexcode values for the background and foreground and it will give you the ratio of the colors, and tell you whether it will pass or not AA standards.

As well, we can help users get the information they need by ensuring we don't use colors to depict meaning in our images/markup. Using red to express a warning seems fine, but if someone has an aversion to the color red, they won't be able to get that valuable hint.

So, by following the WCAG 2.0 AA standards, we can follow these guidelines to ensure color contrast is sufficient:

A 4.5:1 contrast between the non-link text color and the background.
A 4.5:1 contrast between the link text color and the background.
A 3:1 contrast between the link text color and the surrounding non-link text color

Alternative Text

In the case the web page doesn't fully load, or if an individual with a sight aversion visits the web page, all images should have the proper Alt text needed so the information portrayed is still accessible. This is the aspect of accessibility with the most subjective set of rules, because it really is determined by the image itself.

The basic rules for determining alt text are:

If the image portrays needed information, and that information can be explained in a short sentence, include an alt text for the image.

If the image portrays needed information, and that information can't be explained in a short sentence, can it be explained in a short paragraph? If so, give the image an alt of null, make a new div with the class sr-only and put the information (following typical semantic markup) inside of that div so screen readers can access the information needed without repeating the information for sighted users.

If the image portrays needed information, and that information can't be explained in a short sentence or paragraph, create a new web page to host that information, give the image an alt of null, and add a link below it to so poor sighted individuals can access the needed information.

If an image is decorative and/or provides no information for the webpage, assign it a class of null so screen readers won't pick it up and possibly confuse users.

Is the image a logo? Just add an alt with the companies name.

Tables

When it comes to tables, be sure to use the proper html markup, this will allow the table to be naviagble by tabbing and using Th/TD,etc will allow screen readers to access the information easily.

A perfect example of an HTML table that is accessible is:

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>      
      <th scope="col">#</th>
      <th scope="col">#</th>
      <th scope="col">#</th>
    </tr>
  </thead>
  <tbody>
    <th scope="row">#</th>
    <td>#</td>
    <td>#</td>
    <td>#</td>
  </tbody>
</table>

Videos

All videos on a website need to have the proper captions that accurately describe what is said/happening during a video. If a video is linked

but hosted on a different site (think youtube), it still requires the closed captions.

If you have the required .srt file for a video, follow these instructions on how to add the file to the video: https://www.wikihow.com/Add-Subtitles-to-YouTube-Videos

After the .srt is uploaded, watch the video to ensure there are no spelling/timing errors.

Here is an example of a video that has an srt file uploaded properly and with correct timing: https://www.youtube.com/watch?v=2Q4rORc8NpE

Accessibility Tools

This isn't a comprehensive list, just a list of a few of the more popular tools to better help you with your checks:

WebAim Color Contrast Checker - enter in the hexcodes for two colors and see if they meet proper contrast standards

Axe Chrome Developer Tools - using the developer tools, this plugin will help you pinpoint accessibility issues on your web page

Color Contrast Analyzer - This extension will check a (portion of a) web page to see if it meets accessibility standards

Site Improve - Scrapes all pages and content on pages for your website, and gives back an accessibility score (requires purchase)

Adobe Acrobat Pro DC Accessibility Checker - A feature of Adobe Acrobat, this will help check pdfs to ensure they meet all accessibility guidelines

W3.org - A great on stop shop for all things accessibility, covering all three levels of compliance.

Deque University - A great resource for learning practical applications for accessibility (requires subscription)

Other tools - This is a comprehensive list of tools provided by W3.org that help when developing with accessibility in mind

Fin

All in all though, if you code with accessibility in mind it isn't a very daunting task and it adds immense value to your program.

If I Missed anything or if you've got any questions, please let me know and let's discuss it!

Intro to me, and my goals

Andrew Elliott — Tue, 06 Aug 2019 13:48:14 +0000

Intro To ME!

Hey Everyone, my name is Andrew Elliott and I'm currently a Web Content Specialist with a focus on Accessibility at HCA in Nashville, TN. My journey in coding is relatively new, as I started teaching myself the basics of Front-end devving early in 2018, and moved into the accessibility world a mere 6 months later!

Since then though, I've come to realize that I'm kind of a flag just blowing in the wind. Whipping back and forth, whichever the way the wind takes me, with no real direction to speek of and it shows in my coding. Part of the issue (and what draws me to this career path) is there is just SO MUCH to learn, and you'll never really be able to learn it all! This is an amazing thing, but also my biggest draw back when trying to continue my lessons.

Being self-taught, you have to be hyper focused and learn things in order if you want to get that first job in the devving industry. Early on, I picked up HTML and CSS rather quickly, and thought that the rest of this would fly by just the same. Then came Javascript. I ran face first into this wall going full speed and when I hit that wall, it was really discouraging. SO I switched. To PHP, to Swift, etc and just kinda got lost in it all, mainly because jS intimidated the hell out of me.

Well, no longer. At the start of this year, I decided to take down the beast, and I feel like I've done just that, and have even confidently moved into React to help with getting the job search going! But this time I've run into another wall, something my friend Dave refers to as the "Credibility Gap".

You see, I feel like I have a solid handle on ES6 and React, but I have next to zero professional experience in building with these tools. Sure, I can build super cool projects, such as my Marvel Search Portal, but employers are wanting professional experience, not hobby level stuff.

This all said, is what brings me to this series. I'm new to this platform, so I'm unsure if this is content that's allowed here or not, but I intend to use Dev.to as a sort of diary, a journal that will chronicle my path from Web Content Specialist to Jr Developer and beyond.

Goal Setting

I don't want to revert back to being a flag formlessly flapping in the wind. I want to be hyper focused on my end goal, of being a Developer by the end of the year, and what steps I need to achieve this goal.

My friend Cory recently linked me this awesome article that goes over goal setting and it was honestly the inspiration behind starting this entry series. I'm not going to go over the article itself (hence why I linked it), but the gist is have an end goal and break that down into smaller goals that help to propel you forward to achieving said end goal.

Anyone who knows me personally knows I'm a HUGE Marvel fan, and that I'm a sucker for cosmic level bad guys who are complex and not just pure evil. So naturally, my favorite character in the Marvel Universe is Thanos, whose goal to collect the infinity stones is the perfect analogy here. While I don't want to wipe out half of the universe, I do want to be hyper focused like him and see my end goal realized.

End Goal: Be a Developer by January 1, 2020

The end game is to be a developer by the start of the new year. This may seem ambitious, but I feel it is perfectly attainable. My contract with HCA expires in December of this year, and with that I'll have a year and a half of experience working with HTML, CSS, and Javascript in a dotCMS systems, all with a focus on a11y and WCAG 2.0 compliance. As well, in my freelancing with Scrybe Digital, I help to build websites for clients using those same technologies, but also utilize Content Management Systems such as Wordpress, Wix and Squarespace.

And this is how I'm going to do it.

Goal #1: Learn Advanced React.js Skills

I have to say, I honestly LOVE React. It's easy to pick up, it's clean when written correctly and just makes my projects so much easier. However I really only know the basics and I want to change that. I just finished my first real project written in React (the search portal mentioned above), and I want to utilize sites like Freecodecamp and Pluralsight to dive deeper into this framework and learn as much as possible.

Goal #2: Build out my portfolio

Right now, if you go to my portfolio or my LinkedIn it feels somewhat lacking, though I can't quite put my finger on why. For my portfolio, I feel I need more projects on there, a proper contact form and maybe some color? As for my LinkedIn, I think it may be fine, but I'm unsure, and that's kind of my hang up with most of this process, I'm just so unsure of quite a bit in the field. For every article that says to "DO THIS!", there's two more that says why "DO THIS!" is totally wrong. It's hard to weed through the overgrown brush sometimes, so I'm going to do what I can to put myself out there and distinguish myself from the pack.

How? The best idea I've gotten so far is to cold-contact local non profits and see if I can do any website/application development for them for either free or next to nothing. This would tie in with my feeling of needing to help the community, learn how to use the skills I'm teaching myself, as well as make valuable connections and references. That, actually, starts as soon as I finish this blog post, and if you have any ideas on what else I could, please share!

Goal #3: Establish myself in the dev community

Networking is a big part of this, and I already do it some. I'm an active member of the NashDev slack channel and attend meetups when my schedule allows but I want to do better. I have plans to start a podcast with my friend and mentor, I want to present more at local meetups (which also helps me conquer my fear of public speaking) and I want to make valuable connections with people in this community.

Fin

All things considered, I've accomplished quite a bit in my short amount of time learning, but I'm not one to accept the minimum achievement. I'm ambitious and I don't intend to fail. So all in all, thanks for reading and I hope you stick around as I document my path to being a bonafide developer :D