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:
H1
H2
H3
H4
H5
H6
H2
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!
Top comments (0)