Jump to navigation

Tutorial – Web Accessibility

William Clement

Guidelines for Accessible Pages

Structure

Makes sure there is a DOCTYPE and a language code on every page. Validate your HTML, so it is standards compliant. Don’t allow pages to automatically refresh, unless the refresh button is pressed.

  • We need to use DOCTYPE in all webpages so the HTML we write is understood by all browsers. This is where we choose strict, transitional or frameset. We need the language code for browsers and screen readers. Multilingual screen readers can read in many different languages, but without a declared one it does not know which language to use.
  • By validating our websites we are agreeing to W3C standards. Web standards are very highly looked upon on the web and should be followed for a well developed site.
  • When a page refreshes, it returns the pointer to the beginning and scrolls the page back to the top. This confuses a user using a screenreader as they lose their spot on the page and must start at the top again.

Images

Basic - Include alt attributes for every image.

Intermediate - Include titles for images

Advanced- Use longdesc attributes for detailed images.

  • The alt attribute is the most important attribute in making websites accessible. Apply alt attributes to every image on your site. Whether it’s a GIF, JPEG, logo, image navbar, or imagemap make sure it has an alt attribute. This is so users using screenreaders are told what the image is and can visualize it.
  • Titles add a more in-depth explanation of the images. They are useful to add more description to an image.
  • The longdesc attribute is the most in-depth attribute to use for image descriptions. It’s actually a separate file that describes the most intricate images, such as photographs.

Texts and Links

Declare the character encoding of all documents. Use structure tags, like headings and paragraph, rather than presentational tags. Use <abbr></abbr> for abbreviations and <acronym></acronym> for acronyms. Use <blockquote></blockquote> only for block quotes.

  • We need to declare the character encoding.
  • Structure tags obviously make your pages more structured, but also help to make them more accessible. Screen readers are able to skip from heading to heading, or link to link, meaning the more structured you make your pages the more accessible they will be.
  • By using abbr, acronym, and blockquote tags we provide the users with abbrievations and acronyms the user is not aware of. They also help with screenreaders as if the word was just typed out, the screenreader would just try to pronounce it.

Navigation

Use skip-navigation links. Use accesskey and tabindex attributes for important landmarks.

  • The accesskey and tabindex attributes are very important in accessibility. Most screenreader users are just like normal users and don’t like to sit around on a page, they just want to get to their destination. The tabindex attribute allows users to tab from link to link or from link to searchbar, etc. The accesskey attribute functions more like anchor links that you can use with certain keys on the keyboard. Pressing certain keys brings you to a link, searchbar, form, or new page.

Color and Type

Be colorblindness efficient. Specify a generic font family in each font declaration. Always use an alt attribute and/or a title attribute if you use pictures of text.

  • Take into consideration that people with colorblindness are unable to see certain colors. Use colorblindness-safe colors for backgrounds and text.
  • Some fonts are hard to read, especially if you are visually impaired. Using a generic, easy to read font increases the overall accessibility of your website.
  • Just like any other pictures, you should have an alt attribute and also a title attribute, if possible, to describe the image.

Tables and Frames

Basic - Use a table for layout if they make sense when lineraized. Use <th></th> and <caption></caption> elements and summary attributes whenever possible; summary = "" is desirable for layout tables.

Intermediate - Use the scope attribute for complex data-table headers. Use title attributes on every frame. Use <noframes></noframes>

  • Tables act just like a grid on a piece of paper, they make it easy to space things out and line them up. Try not to use nested tables, as they can increase loading time and clog up your page.
  • Captions will either appear on the top or bottom of your table, whichever you prefer, describing the table. We use summaries for the sole purpose of screen readers. Summaries give a short excerpt of what the table is about. The user can then move from summary to summary. Table headers are important because they add structure to our website and, like I said before, better structure equals better accessibility.
  • The scope attribute creates a more defined header that places scope over the column or row it is in.
  • Like title attributes used for images, frame titles describe the frame presenting information to a user using a screen reader.
  • The <noframes> element is for the small amout of Lynx users and users of other browsers who cannot see frames. It typically displays a message indicating that frames are in use or a link to another page not using frames.

Stylesheets

Only use stylesheets to control presentation of documents. Use a generic font family at the end of each font declaration.

  • We only use stylesheets for presentation and design because the use of media presentation sheets are not well used or supported.
  • Like I said above, some font types are hard to read, so its best to keep to generic ones.

Forms and Interactions

Basic - Use <fieldset></fieldset> and <optgroup></optgroup> for group related form options. Do not put lines of text inbetween fields of a form. Include a Go button (or similar function) so the visitor has control over what happens when using the form. Use as many text-equivalent words as possible.

Intermediate and Advanced - Use accesskey and tabindex attributes to improve keyboard navigation. Add title attributes to as many form elements as possible.

  • Use <fieldset> elements to match certain words into groups. The <optgroup> element is used similarly, but only options can be nested inside it.
  • Lines inbetween fields used for description or instruction are usually skipped over by a screenreader, causing error or confusion for the user.
  • Text-equivalent attributes are alt, name, value, id, and title. The more you use, the more benefit it is to users who are disabled.
  • Like I said before, accesskey and tabindex attributes are vital in accessibility. In this case they are used for forms, so a user can tab through buttons or fields. Also a user can use certain keys to jump to certain parts of the field marked by the accesskey attributes.
  • Title attributes provide names for areas to fill out in a form; aka (Last Name, First Name). The screenreader will read this out so the user knows what to type in.

Multimedia

Basic - If you present audio or video, have a transcript of the dialogue and meaningful sound effects of any posted online video or audio. If you use Flash, use the accessibility features in Flash.

Intermediate and Advanced - Provide captioning and audio descriptions for online video.

  • A transcript provides a document of all the sounds and words from an audio or video file.
  • Flash itself is not too accessible, so if applicable use Flash accessibility features.
  • Captioning tells everything about the audio; who is talking, background sounds, type of accents, and words one is saying.