Have you ever come across a requirement where you have to create web content that is accessible to people with disabilities? If yes, then you may find this article useful, if not, then the article will help you understand why your websites need to be accessible and how to go about making them accessible. Lets us understand the importance of accessibility and see how to get that in our websites.
Accessibility is a vast topic and there are many aspects to be considered while creating an accessible website. In this article, I have tried to touch upon some important points to be considered while making you website accessible.
What is website accessibility?
There are many definitions of web accessibility. I find this definition simple to understand – ‘a practice to make websites usable to people of all abilities and disabilities’. People with disabilities may be visually impaired so may not be able to see your pages or hearing impaired will not be able to listen to your podcasts or those who are immobile may not be able to use their mouse or keyboard.
When you design a website, you need to consider making your website accessible to all the users especially those with disabilities, so that they can understand and interact with the web.
How to create accessible websites?
To create an accessible website, means to create web content that is accessible for all type of users. First you create the web content and then you test it for accessibility. For better understanding, I have divided this topic into two parts. In this article (Part I) I will show you how to make you content accessible and in the next part of the article, we will see how to check the content for accessibility.
To make you content accessible, follow these tips:
Setting accessibility properties for an image
Whenever you insert an image in your web page, Expression Web prompts you with an Accessibility Properties dialog box as shown below:
Alternate text or alt text is a textual alternative to the image which makes it accessible to the screen reader users. Another usage of alternate text is, if an image is being downloaded on the page or when image cannot be found and user hovers over the placeholder of the image, a small piece of text would explain what the image is about.
This Accessibility Properties dialog box is prompted every time you insert an image on your page, unless you uncheck the option ‘ Show this prompt when inserting images’ (see image above). On the other hand, to add an alternate text to an existing image, you can double click the image in Design view and in the Picture Properties dialog box (shown below) and in the Accessibility section, insert the Alternate text.
Alternatively, you can always set the alt attribute of the <img> tag to describe the image. And similarly, add an alt attribute to any animations on your page.
Setting accessibility properties for text hyperlinks and hotspots
a. Select the text you want to convert into a hyperlink and right click on it.
b. From the menu choose Hyperlink…
c. In the Insert Hyperlink dialog box, click on ScreenTip…
d. Enter the ScreenTip text which acts like the alternate text. This will add a title attribute to the <a> tag.
In addition to above, Hyperlink text should be short meaningful and should make sense when read out of context, either particularly that link or along with other links.
Just as you add screen tips to text hyperlinks to make them accessible, use them to make the hotspots accessible too. Follow these steps:
a. Insert the image onto your web page.
b. In the Pictures toolbar (if not visible, right click on any toolbar and choose Pictures from the menu) choose rectangular or circular hotspot.
c. Draw a hotspot on the image.
d. The Insert Hyperlink dialog box pops up as shown above.
e. Click on the ScreenTip… button to insert the screen tip. This will add a title attribute to the <area> tag.
Creating accessible Tables
Though tables can be used in page layouts, they are best used to organize data. CSS should be used for Page layouts and styles.
NOTE: Expression Web has a set of layout tables that you can use to create page layouts. Using them is quite simple.
Table accessibility is all about adding appropriate headers to data tables. Header tags solve the purpose. Header tags <th> should be descriptive enough to describe what the table is about. Table headers are recognized by most of the browsers and rendered as bold and centered. These cause them to be visually effective to the users.
NOTE: TableHeaders should be used only for data tables and not for layouts.
To create table headers follow these steps:
a. After inserting a table, choose a cell and right click.
b. Choose Cell Properties to open the Cell Properties dialog box.
c. Check the box ‘Header cell’ and click OK.
d. This will convert the <td> tags to <th> tags.
e. Enter a table header.
Creating accessible Forms
Forms are extensively used by websites either as contact forms, search forms; online shopping websites have forms to buy products, or airline booking forms and such other. Accessibility in forms is an extensive area in itself as forms are not very simple to navigate for people with disabilities. I will cover Form accessibility in detail in one of my future articles, however over here I will give you some tips you may find useful in order to make your forms accessible.
1. Labels: Labels are used to assign a label to any form control. Use the ‘for’ attribute to specify which form control is it associated with and ‘id’ attribute to assign a unique id. Make sure labels are close to the form elements.
2. Text fields and areas: It is very difficult for blind users to interpret what to enter in a text field/area. So enter a label for the text fields.
3. Radio buttons and Checkboxes: They are similar to the text fields but the text is displayed on the right hand side. A common example for radio button would be gender. You could use a group box for such examples to group the options to be chosen in a section. Group box is explained further in this list.
4. Input buttons: Input buttons could be a normal button, submit button or reset button. The value attribute for these buttons is important so that when a user hits the tab key to get to this button, when it gets focus, it will be highlighted with a dotted border. In case of a user using a screen reader or a talking browser, it announces the text on the button.
5. Image buttons: Enter an alt attribute for the image button.
6. Group box: A group box enters a set of <fieldset> and <legend> tags. See the code below:
Fieldsets: The fieldset tag helps to group form elements such as address line 1, address line 2 and address line 3. The fieldset tag draws a box around its containing elements and groups them.
Legend tag: is used along with the <fieldset> tag to add a title to the element group and place it within the frame.
7. Select menus or Drop down boxes: The <select> tag allows you to group choices, a drop down. Provide an appropriate label to it.
Creating accessible Frames
Frames are used to display two or more web pages in a single visual space. To be able to make these frames accessible, add a title to each frame. This will help the screen reader users to listen to the title of each of these frames, helping them to know what each frame displays.
The content in the <noframes> tag should be always available to the users. You can use the <noframes> tag to tell the users what is being displayed in the frames and also give them links to the individual pages displayed in frames, in case they want to visit.
Accessibility is a vast topic and there are many aspects to be considered while creating an accessible website. In this article, I have tried to touch upon some important points to be considered while making you website accessible. I hope the article was helpful to you. In the next article we will check the accessibility of the websites using the Accessibility Checker feature available in Expression Web.