ISTA 230

ISTA 230 - Introduction to Web Design

Accessibility

Accessibility

Accessibility

Accessibility

The goal of making a universally-accessible website is to ensure that every user is able to access and use your website. Accessibility is:

Accessibility

Accessibility

Accessibility

Accessibility

Accessibility

Why should I care?

Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equations. Albert Einstein

I often have students ask why I put so much emphasis on accessibility when a number of larger companies don't. My personal philosophy is that technology should improve people's life, not create additional barriers. To that end, I believe that all websites (including yours) should be designed with ALL users in mind, including those who might have physical or mental disabilities. By creating universally-accessible websites, you will provide a better user experience for all of your users, regardless of what device they are using to access your website.

Additionally, providing a fully accessible website will improve your site's search engine optimization and can help you avoid potential legal repercussions for not providing equal access to your product.

Accessibility

Accessibility

Why should I care?

Accessibility

Accessibility

Why should I care?

Accessibility

Accessibility

Target.com

Accessibility

Accessibility

Why don't people care?

Aside from being lazy, there are often other factors that prevent people from creating accessible websites:

The reality is that, while it is a different experience than the designer might be used to, it does not take much effort to improve your sites accessibility. As Tesco.com found in 2000, creating an accessible website can open up opportunities for profit that were previously untapped.

Accessibility

Accessibility

Tesco.com

Accessibility

Accessibility

Some Accessibility Considerations

Accessibility is aimed at making your website accessible to people with disabilities as well as those without. Disabilities that website accessibility aims to address include:

Accessibility

Accessibility

Some Accessibility Considerations

Users can access your website using a number of non-traditional technologies. These include:

While each of these provide a unique experience, our goal is to provide users with equal access to information and functionality.

Accessibility

Accessibility

Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines are a set of documents that explain how to make the web more accessible to people with disabilities.

These guidelines provide multiple checkpoints for validation. There are three priority levels (A, AA, and AAA) which correlate to the level of compliance. For example, a website which mets all AA success criteria would be labelled a Level AA website.

Accessibility

Accessibility

Web Content Accessibility Guidelines (WCAG)

Accessibility

Accessibility

Web Content Accessibility Guidelines (WCAG)

Accessibility

Accessibility

Web Content Accessibility Guidelines (WCAG)

Note: WCAG compliance is not per page. Your entire website/application is scanned for compliance and the page with the lowest level of compliance determines the compliance of your site/application.

Accessibility

Accessibility

Section 508

In addition to WCAG, there are also other specifications which outline accessibilty requirements. While these usually match up with WCAG, they may include additional requirements.

For example, let's look at Section 508 of the Rehabilitation Act, more commonly referred to as Section 508. Section 508 is:

Non-compliance by government agencies can result in stiff penalties (and may cost a designer his or her job).

Accessibility

Accessibility

WCAG - Four Principles

There are four content principles which drive accessibility criteria within WCAG. Content must be:

Accessibility

Accessibility

Perceivable Content

perceivable
Users can access the content through a medium available to them.

Accessibility

Accessibility

Perceivable Content

Accessibility

Accessibility

Perceivable Content

   <!-- Not perceivable by some users -->
   <img src="image.jpg" />
   <!-- Perceivable -->
   <img src="image.jpg" alt="A man walking with a dog" />

Accessibility

Accessibility

Perceivable Content

   <!-- Perceivable? -->
   <img src="image.jpg" alt="An image" />

Accessibility

Accessibility

Perceivable Content

   <!-- Perceivable? -->
   <img src="background.jpg" alt="Purely a decorative image" />

Accessibility

Accessibility

Perceivable Content

   <!-- Perceivable? -->
   <img src="background.jpg" alt="" />

Accessibility

Accessibility

Perceivable Content

Accessibility

Accessibility

Perceivable Content

<i> This is some italicized text!</i>
<em> This is some emphasized text!</em>

Accessibility

Accessibility

Perceivable Content

To achieve the goal of perceivable content, we should do the following:

It is worth noting that contrast is calculated by using the following formula:

(L1 + 0.05) / (L2 + 0.05)

where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. For Level AA, the ratio should be 4.55 or higher. For AAA, it should be 6.99 or higher.

Accessibility

Accessibility

Perceivable Content

Ishihara Test for Color Blindness

Accessibility

Accessibility

Perceivable Content

Website using poor color contrast

Accessibility

Accessibility

Perceivable Content

Website as seen by someone with protanoptic color blindness

Accessibility

Accessibility

Perceivable Content - Testing

For testing perceivability, use the following:

Accessibility

Accessibility

Operable Content

operable
Users can interact with the web application or content

Accessibility

Accessibility

Operable Content

Accessibility

Accessibility

Operable Content

Accessibility

Accessibility

Operable Content

<a href='file.pdf'>Click here</a>
<a href='file.pdf'>Click here to view the syllabus (PDF)</a>

Accessibility

Accessibility

Understandable Content

understandable
Able to be understood

Accessibility

Accessibility

Understandable Content

Accessibility

Accessibility

Understandable Content - Readability

Accessibility

Accessibility

Understandable Content

Accessibility

Accessibility

Understandable Content - Abbreviations

<abbr title='Cascading Style Sheets'>CSS</abbr>

Accessibility

Accessibility

Understandable Content - Abbreviations

<p>
   This class has spent a lot of time on
   <abbr title="Hypertext Markup Language">HTML</abbr> and
   <abbr title="Cascading Style Sheets">CSS</abbr>.
</p>
   This class has spent a lot of time on
   HTML and
   CSS.

Accessibility

Accessibility

Understandable Content

Accessibility

Accessibility

Robust Content

robust
The content is widely available, regardless of platform or system

Accessibility

Accessibility

Robust Content

Accessibility

Accessibility

Robust Content

The easiest way to ensure that your website will work with both current and future technology is to ensure that your HTML and CSS are valid.

There are additional techniques that we'll discuss later in the semester that touch on this as well.

Accessibility

Accessibility

Compliance isn't everything!

Poor examples of accessibility compliance

There is a difference between meeting compliance and maximizing the accessibility of a website!

Accessibility

Accessibility

Expectations