Tricks for Making Your Website Accessible

What is Website Accessibility?

Are you in the dark when it comes to website accessibility? The World Wide Web Consortium (W3C for short) defines website accessibility as follows:

To summarize, website accessibility strives to give the ability to browse and interact with the Internet to those with limited abilities.

How Do I Make My Site More Accessible?

It can be easy, depending on how you develop your sites. If you like to code your pages from scratch, like I do, then it should be very easy. If you use a Content Management System like Drupal or WordPress, making your site more accessible might be a little more difficult. I did find a few tips in an article by UC Berkeley:

• Choose a template or theme that supports accessibility. Check its manual for tips.
• Make sure editing tables have options for headers and accessible tables.
• Video players should include closed captioning.

Unfortunately, I have not had any experience with either CMS (Content Management System), so please don’t take my word for it. I prefer to use Microsoft® Visual Studio when I develop my sites.

“Once you’ve chosen a CMS that suits your needs, make sure to choose a theme/template that is accessible. Consult the theme’s documentation for notes on accessibility and tips for creating accessible content and layouts for that theme. Be sure to follow the same guidelines when selecting modules, plugins, or widgets.”2

1. Headers: Structuring Your Page

Headings are used to split up pages with a lot of content. They have another use besides appearance, however; people who use screen reading software (TalkBack for Android devices4, VoiceOver for Apple devices5, and JAWS6 or ZoomText7 for Mac and Windows computers, for example) can use them to more easily navigate through the webpage. Therefore, it is important to use them and use them well. Don’t simply style paragraph text to look like a heading, use a heading and style it to your liking. Also, be sure to use proper heading structure. The <h2> tag should come after the <h1> tag in your document, <h3> should come after <h2> and vice versa. It is not a good idea to skip headings; i.e. place a third degree heading (<h3>) after a first-degree (<h1>) heading. In short, your page should be structured in a “hierarchical manner”, according to WebAIM’s article “Semantic Structure”.

While we are on the subject of hierarchical structuring, let’s talk about HTML lists: <dl>, or description list; <ol>, or ordered list; and <ul>, or unordered list. There are only three simple rules for using them:

• <dl> Description Lists should be used only for stucturing definitions. They contain two parts;
  • <dt> - definition term; and
  • <dd> - definition description
• <ol> Ordered Lists should be used to convey a progression or sequence, such as steps to follow a recipe.
• <ul> Unordered Lists should be used when a specific sequence is not required, or if the order in which the items are written simply does not matter. For example, you might use the <ul> tag when creating your site’s navigation menu.

Both ordered and unordered lists are composed of <li>, or list item tags.

Now that you’ve double-checked your heading and list structure, let’s go on to accessible images.

2. Images: Alt Text & Other Considerations

Every developer by now should know that alt text, or alternative text, is important, but why is it important? Are there any other ways to make images accessible? The answer is yes!

First, let me ask you a question: do you think your site’s images could enhance the comprehension of some of your site’s content? A good technical illustration would make a long paragraph with many vocabulary terms easier to understand, especially for those with learning disabilities or reading disorders. I think good alternate text would describe the image well and contain any text on that image, usually written from left to right or clockwise if the terms are written around an object.

Animations can often be annoying to a website user because they are too distracting. If you want to use animations in your site, WebAIM recommends that your animations be user-activated (that is, started and stopped by the user), and last for only a short time. The best animations can present content or draw the user’s focus upon important content. A good example of presenting content is a slideshow; it presents a series of images that would not be adequately described by simple text, though it would still be smart to use alt text on your slideshow images. A slowly blinking red error message that appears after the user skips a required field or enters the wrong input in a textbox would be an example of using animation to shift the user’s attention from a form to more important information.

Icons are symbols that may be used to either supplement text or in place of text altogether. A website’s favicon (the icon beside the page title in your browser’s tab or at the top of your browser’s window) is a good example of an icon that supplements text. It is usually a miniature version of your site’s logo. If you use icons in your site, make sure they are easy to see and understand; if you even suspect a user might have difficulty using them, place some text under them. If that doesn’t clarify their meaning, you may need to redesign or remove them altogether.

3. Links: For Keyboard as Well as Mouse Use

Links are the most basic elements of HTML, thus an important part of web accessibility. A good link must be accessible using other means than a mouse, such as a keyboard.

That is why it’s a good idea to set your page’s tab order if your development software doesn’t do it automatically, though to be completely honest, I don’t know if the browser sets the tab order or if the development software sets it. When a visitor who uses a keyboard instead of a mouse enters your site, they can select a link using the Tab key and follow a link by pressing Enter. If many of your links are created using JavaScript, you may want to consider implementing keyboard functionality as well as mouse functionality.

One of the worst barriers to creating an accessible website is having a link that goes nowhere. Dropdown menus created using JavaScript are a good example. While those who use a mouse can hover over a parent link to see its nested options, keyboard users do not have that luxury. A common convention for creating these “parent links” is to put a pound or number sign (#) in the destination. Clicking on any link with # in its destination will simply reload the page; it doesn’t matter if you use a mouse or a keyboard.

Getting back to the JavaScript dropdown menu, a mouse user can click on the menu’s links to nowhere, but a keyboard user cannot access them at all. This in turn makes all of the dropdown menu’s links inaccessible. If you really want a dropdown menu, you should enter an actual destination in the parent links. If a dropdown menu is not necessary, it may be better to replace it with standard hyperlinks.

4. Colors & CSS: Clearly Presenting Your Content

There are four types of CSS—Cascading Style Sheets:

1. External Styles - separate .css files linked to your HTML document, usually by utilizing the <link> tag.
2. Internal Styles - style sheets written inside your HTML document and enclosed in the <style> tag.
3. Element Styles - styles written directly in an element’s tag. Here is a simple example: “>b style="color: red;">Header>b<".
4. End User Styles - styles usually defined in the browser’s Appearance settings. These will always override any other CSS.

End user styles include anything from larger text to high-contrast color schemes for color-blind or visually-impaired users; and font faces, images, positioning, etc. may be modified to help those with learning disorders. There are many reasons to override a site’s default styling, but it is still essential to create accessible styles.

CSS allows developers to separate content from presentation. WebAIM defines Content as “text, images and other elements that make up the core of the document” and Presentation as “the way in which content is displayed”. Therefore, content is in the HTML of the page, and Presentation is in the CSS. If this is done right, content should still be fully accessible regardless of the user’s modifications.

5. Web Forms: Required Fields and More
6. Tables: Data Tables Vs. Layout Tables &
7. Logical Tab Order

I am combining these next three steps because they are tied a too closely together to describe them individually. Users with mobility disorders often use the "tab" key, arrow keys, or other input device. They can easily jump from link to link of your menu. They will be able to navigate dropdown menus in this way as long as you make them accessible using the keyboard.

Using "Skip To..." links to navigate the parts of your page; for example, if your page has three columns, you can use "Skip to Right Column" to easily jump from the header of your page to the right column of your page. For an example you can see, check out the National Federation of the Blind of Iowa's website or check out the NFB of South Dakota's website.

Also use "Back to Top" links if your page contains a large amount of text. These should be paired with an anchor—that's what the <a> tag in HTML stands for— with the id "Top". This anchor should be located at the top of the main content of your page. Here is a simplified example of a "Back to Top" link:

<!DOCTYPE html>
<html>
<head>
<title>Back to Top & SkipTo Links</title>
</head>
<body>
<div id="Wrapper">
<header id="Header">
<a href="test.html#LeftCol">Skip to Left Column</a>
</header>
<div id="LeftCol">
<a href="test.html#Main">Skip to Main Content</a>
</div>
<div id="Main">
<a id="Top"></a>
<a href="test.html#RightCol">Skip to Right Column</a>
<h1>Header</h1>
<p>Lots of text......</p>
<a href="Top">Back to Top</a>
<h2>Header 2</h2>
<p>A whole lot more text......</p>
<a href="Top">Back to Top</a>
<h2>Header 3</h2>
<p>A whole book......</p>
<a href="Top">Back to Top</a>
</div>
<div id="RightCol">
<a href="test.html#Footer">Skip to Footer</a>
</div>
<footer id="Footer">
<a href="test.html#Header">Skip to Header</a>
</footer>
</div>
</body>
<html>


I hope that piece of code gives you an idea about how to use "Back to Top" ans "Skip To..." links. If not, check out the National Federation of the Blind of Iowa's website or check out the NFB of South Dakota's website

Web Forms

Everybody benefits from an easily understood, well-organized form! If all forms are supposed to be logical and well-organized, aren’t forms accessible enough? Maybe, but there are a few things you can double-check to make them even better.

Include instructions about what information is wanted, error messages for required form fields, and utilize HTML5’s new input types to make sure the wrong type of data is not entered; a textbox is not just a textbox anymore. If you have required fields, make sure the user knows it. Most developers use a red asterisk (*) or star sign. Make sure your fields can be tabbed through in the order in which they appear to enhance the form’s accessibility for those who use a keyboard instead of a mouse or screen reader. This is why I do not set the tab order in Visual Studio; I leave it up to the browser/development software to automatically set the tabs when I test the page. Finally, when writing labels for your form controls, make sure they adequately describe what data they represent. It doesn’t have to be long; “Phone Number” would suffice for a standard or tel—short for telephone, of course—textbox, or “Gender” for a pair of radio buttons labeled “Male” and “Female”.

Grouping form fields can also enhance form accessibility. For example, your website is a shopping site where people can sign up for an account. If you have a series of fields labeled “First Name”, “Last Name”, “Address”, “Apt., Ste., etc.”, “City”, “State”, “ZIP Code”, “Phone”, and “Email”. You can group them all in a <fieldset> tag with the <legend>—or caption tag—”Billing and Personal Information”. Below this <fieldset> is another, labeled “General Information” that will be used to customize their experience on the site. Using the <fieldset> and <legend> tags ensures that the grouping’s description is read to those using assistive technology.

Layout Tables

I am guilty of using tables for layout in most of my websites; I use them in the headers of the Eagles Club's, the NFB of Iowa's, the NFB of SD's website, as well as my own. Until recently, I found it very difficult to line up three columns and keep them lined up on the same row. I finally accomplished the three column layout of the Eagles site's homepage by using DreamWeaver's responsive CSS and customizing it to my own liking. I'm not quite ready to give up header tables yet, but I will be soon. Avoid using layout tables when you can; screen readers tell the user how many columns and rows the table has and content may not be read in the correct order if a table is used for layout.

There is more you can do to improve the accessibility of your data tables. Use the scope attribute of your <th> tabs to specify whether it pertains to the col, row, colgroup, and rowgroup below or beside it. Also add a table <caption> if necessary. Say, for example, the table is related to the text on your page, but not mentioned directly.

8. ARIA: Accessibile Rich Text Applications

I don't know much about ARIA; I only learned of it when I started using Visual Studio 2013 and the .NET Framework 4.5 because it is in the Intellisense. There are over thirty ARIA attributes. All of them begin with the suffix aria- I am going to use an ordered list to list them because I tried counting them while writing this tutorial, but I lost track of my count; I think there are between thirty-two and thirty-six attributes:

1. activedescendant
2. atomic
3. autocomplete
4. busy
5. checked
6. controls
7. describedby
8. disabled
9. dropeffect
10. expanded
11. flowto
12. grabbed
13. haspopup
14. hidden
15. invalid
16. label
17. labeledby
18. level
19. live
20. multiline
21. multiselectable
22. orientation
23. owns
24. posinset
25. pressed
26. readonly
27. relevant
28. required
29. selected
30. setsize
31. sort
32. valuemax
33. valuemin
34. valuenow
35. valuetext

I was almost right! There are thirty-five ARIA attributes! There are also ARIA roles, represented by the role attribute in HTML5. Thre are many more of them than there are ARIA attributes. You can find out more about them in the ARIA in HTML article by the World Wide Web Consortium.

From what little I have read about it in UC Berkeley's article, ARIA helps to ensure that your site is accessible and makes it even easier for screen readers to browse your site. There are several rules to follow in order to use ARIA properly:

1. Decide whether or not you need to use ARIA
2. Do not transform one element into another using ARIA. For example, if you want to make one of your headings a button, use the <button> element inside of the <h1> tag instead of <h1 role=button>Click Here to Go There</h1>
3. All interactive ARIA controls must be accessible via the keyboard
4. Do not use role="presentation" or aria-hidden="true" on an element that can be focused upon (a link, for example) and is clearly visible
5. All interactive elements must have an accessible name - an ID. This should be automatic if you're collecting and sending the data from that element using Javascript or any other web programming language

You can learn more about ARIA and its roles in the Notes for Using ARIA in HTML article.

9. Accessible Dynamic Content

Dynamic content is defined as content that changes without refreshing the page. Berkeley didn't have much to say about making it accessible and I don't know much about it, either. Luckily, the article had a couple good tips:

• Video players should not play automatically and can be used with a keyboard.
• Test your custom controls or widgets for accessibility.