Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

  • learn the idea of design-for-all
  • learn some simple techniques for improving accessibility
  • learn some simple techniques for improving cross-browser compatibility

Design-for-All

Can everyone access your web content?

A diagram of different levels of sensory limitations, permanent, temporary and situational.
By Microsoft Inclusive Design.

Web Sites Should Be Usable…

  • …no matter who is visiting them
    • people with visual, auditory, physical, speech, cognitive, and neurological disabilities
    • people whose capabilities are modified by a medical condition
    • people of different ages
    • people with different first languages
    • things other than people (e.g. search engine crawlers)

Web Sites Should Be Usable…

  • …no matter when and where they are visiting them
    • whether stationary or on the move
    • no matter the environmental conditions (bright/dark, quiet/noisy)
    • no matter where in the world (developed/developing, rural/urban, …)

Web Sites Should Be Usable…

  • …no matter what network connection, device or client software they are using
    • connections of different bandwidths and speeds (cable, wireless, mobile, …)
    • different screens (resolution, dimensions, colour)
    • different I/O modalities (keyboard/ mouse/ stylus/ touchpad/ touchscreen/ speech for input; screen/ print/ speech/ etc. for output)
    • different Web browsers, different versions of browsers, different OS

Web Sites Should Be Usable…

  • …now and in the future

Objectives

We want to build web sites that:
are usable by all users;
are usable on all devices;
are usable in all browsers;
rank highly in search engine results;
load quickly;
are maintainable.

Simple Advice

Don't assume anything!

Accessibility

Unusable emergency phone.
Photo by Benedict Evans

Objectives

are usable by all users;
are usable on all devices;
are usable in all browsers;
rank highly in search engine results;
load quickly;
are maintainable.

Web Accessibility

Reasons to care:

The moral argument:
Simply, it's the right thing to do.

The business argument:
Directly and indirectly, it may bring more customers.

The legal argument:
There is national and international law.

The Web Accessibility Initiative

The Web Accessibility Initiative (WAI) publishes the Web Content Accessibility Guidelines (WCAG).
Three levels of compliance: A, AA, AAA.

Testing for Compliance

You can even automatically validate for WAI compliance, e.g.:
in Chrome, use Lighthouse.

But this is no substitute for testing with real users.

Things You Can Do

The most important things you can do are also the easiest.

  • Spell-check;
  • Check grammar;
  • Check punctuation;
  • Give the content a logical order;
  • Use the right HTML markup;
  • Validate.

Use the Right Markup

E.g.

good: use h1-h6 correctly
bad: use <p id="heading"> for headings and make them big and bold in CSS
bad: skip levels, e.g. h1, h3 but no h2

Use the Right Markup

E.g.

good: use alt="" for images that are purely presentational
good: use descriptive alt-text on all other images
bad: omit alt altogether

Include ARIA Roles

ARIA roles:
similar to HTML attributes but only one role per element;
suggest the purpose of an element in a web page, for use by assistive technologies such as screen readers;

E.g. 


<div role="presentation">
    …
</div>

Don't Rely on Visual Effects

  • Don't rely on knowing where the cursor is;
  • Ensure proper contrast between foreground and background colours;
  • Avoid certain combinations.
  • Ensure information is not conveyed through colour alone.

Accessibility

And so on!

Objectives

are usable by all users;
are usable on all devices;
are usable in all browsers;
rank highly in search engine results;
load quickly;
are maintainable.

Browsers

There are numerous browsers and many different versions of each browser.

Chrome, Firefox, Internet Explorer, Safari, Opera, Edge,…

Chrome for Android, iOS Safari, UC Browser for Android, Opera Mini, Android Browser, Opera Mobile, Firefox for Android,…

Incompatibilities

The 'browser wars' are long over.
So why might one browser differ from another?

HTML5 and CSS3 are constantly being improved and browsers may differ in their support for the latest features.

caniuse.com

Cross-Browser Compatibility

Achieve cross-browser compatibility using the following techniques:

Least-capable-clients-first and progressive enhancement;
Feature detection;
Fallbacks;
Polyfills (not covered in this module).

Least-Capable-Clients-First and Progressive Enhancement

  • Write nice HTML so everyone can access your content.
  • Add layers of CSS:
    • first simple stuff that every browser will understand;
    • then, if needed, more and more layers of fancier stuff (ignored by older browsers).
  • Similarly with any JavaScript that you need.

Feature Detection

In the CSS, check whether the browser supports a feature or not, e.g.: 


@supports not (display: flex) {
    …
}
    
@supports (display: flex) {
    …
}

But, ironically, @supports is not supported in early browsers!

Should my Web Site Look the Same in All Browsers?

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

It must be usable in the browsers that your users use.

G'luck!