Lecture 10

🏛 Department of Computer science, TKD
📅 26/10/2021
📚 DATA1200
© CC BY-NC 4.0
Inclusive Web Design

Lecture 10 - Accessibility and desi n
Carlos Vicient-Monllaó
carlosvi@oslomet.no principles
g
41 8
42 9
10
43
Previously on Lecture 9…
Do you
remember…?
What is the difference between FlexBox and
Grid layout?
Flex: single dimension. Grid: 2 dimension
What CSS properties are used to place grid lines?
grid-template-columns, grid-template-rows, (grid-template)
What CSS properties can be used to add gaps between columns and rows?
grid-column-gap, grid-row-gap and grid-gap.
How can you attach grid elements in the Grid container if you need to
specify the 4 boarders of the CSS box?
grid-row-start, grid-row-end, grid-column-start and grid-column-end
(grid-column and grid-row)
CSS LAYOUT MODULES

BUILDING BLOCKS
CSS3 has di erent layout modules
Lorem Ipsum
•
BLOCK LEVEL
Block, for sections in a webpage Lorem ipsum dolor sit amet, consectetur adipiscing elit.
•
Nullam sodales pretium ipsum. Etiam ut enim augue.
Inline, for text Etiam mi tortor, pulvinar at dictum faucibus, mollis eget
•
nunc. Morbi justo velit, rutrum vel placerat in, adipiscing
Table, for two-dimensional table data vitae sapien.
• Positioned, for explicit position of an • Duis in erat neque.

• Pellentesque habitant morb
element • Praesent ac condimentum neque
• Flex, to design exible responsive Lorem ipsum dolor sit amet, consectetur adipiscing elit.
layout structure without using oat or Nullam sodales pretium ipsum. Etiam ut enim augue.
Etiam mi tortor, pulvinar at dictum faucibus, mollis eget
positioning. Single dimension.

nunc. Morbi justo velit, rutrum vel placerat in, adipiscing
vitae sapien.
INLINE
• Grid, it o ers a grid-based layout
system, with rows and columns Suspendisse potenti. Duis in erat
neque. Pellentesque habitant morbi tristique senectus et
without having to use oats and netus et malesuada fames ac turpis egestas.
positioning. Two dimensions.

ff

ff
i
fl
fl

fl

Grid Layout
• Grid layout is a generalised layout system
(2 dimensions).
• rows
• columns
• Grid allows pieces of the design:
• to be laid out independently of
their document source order
• to overlap pieces of the layout
GRID LAYOUT TERMINOLOGY

The most
fundamental unit is
the grid line.
By de ning the
placement of one or
more grid lines, you
implicitly create the
rest of the grid’s
components
Image from: CSS The de nitive Guide, 4th Edition. Chapter 13

fi

fi
GRID PROPERTIES
Properties for the Grid Container Properties for the Grid Item
• display • grid-column-start
• grid-template-columns place
Create
• grid-template-rows • grid-column-end elements
grids
• grid-template-areas • grid-row-start
• grid-template • grid-row-end
• grid-column-gap • grid-column
• grid-row-gap • grid-row
• grid-gap • grid-area
• justify-items
• align-items • justify-self override
Style grids • place-items • align-self parent
• justify-content • place-self styles

grid-template-areas
Used to de ne template areas
• Repeating the name of a grid area causes the

content to span those cells.
• A period signi es an empty cell.
• The syntax itself provides a visualization of the
structure of the grid.
• It can be named using a square bracket notation
fi
fi

A complete guide to Grid layout
A css tricks uide…
• A guide that explains everything

about grid layout
https://css-tricks.com/snippets/css/a-guide-to- exbox/
g
fl
grid-template-areas
By MDN docs
• Use the CSS Demo to see di erent

template areas
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
ff
Introduction to CSS Grid Layout
By Firefox devtools
• Another good online resource to

learn grid
https://mozilladevelopers.github.io/playground/css-grid/08-template-areas/
grid-template-areas
A codepen example…
• You can play with this example to

make changes and see how elements
are rendered
• TRY this:
• Add a new row (“Content-4”) and
add it between the 3rd and the
4th rows
• Content-4 will have
the same size as
content-1
https://codepen.io/mozilladevelopers/pen/Xejyed
grid-template-areas
A codepen example…
• Solution here
https://codepen.io/carlosvicient/pen/zYdZvxL
Background
Literature
Just some books…
• General purpose book that o ers a

good combination of background
information on inclusive design as
well as some practical advice for
ff
implementing digital solutions
Literature
Just some books…
• Research interests: Interaction Design,

Human-Computer Interaction, Usability,
User Experience, Digital Accessibility,
Game Studies, Player Experience, Health
Informatics, Learning Technologies
• Teaching: IDG2012 - Web
Accessibility, Usability and
Ethics (some slides in this
lecture are taken from
that course)
https://www.ntnu.edu/employees/yavuz.inal

Oh! I am lost!
Too many terms related to this topic…
• Universal design
• Inclusive design
• Accessibility
• Web accessibility
• WCAG
• WAI
• etc.
“Universal design is design that’s usable by all

people, to the greatest extent possible, without
the need for adaptation or specialized design.”
– Ron M ce, 1985

a
Universal design
Also referred as UD…
Usable by all people:

• Challenge: de ne all people (how to make sure it’s functional for people with any type of impairment?)
• UD is for everyone!
To the greatest extend possible:
• Must work for as many people as possible regardless of struggles with: (1) upper body movement,
strength, and/or sensation, (2) lower body movement strength, and/or sensation, (3) balance, (4)
vision, (5) hearing, (6) cognition and memory, (7) activity tolerances, (8) speech and/or
communication, (9) chemical sensitivities, (10) sensory tolerance, (11) needs for caregiver
assistance, and (12) extremes in height and weight.
Without need for adaptation or specialisation
• Individuals do not have to change the way their typically interacts with something
• Some people may still have signi cant functional needs that require specialized
design. In those cases, UD is the foundation but further development is needed
Read more here: https://universaldesign.org/de nition
fi

fi

fi

Universal design
Also referred as UD…
• Originally created for architecture and industrial design but expanded to

include digital products and services
• Based on seven universal design principles:
1. equitable use;
2. exibility in use;
3. simple and intuitive use;
4. perceptible information;
5. tolerance for error;
6. low physical e ort;
7. size and space for approach and use.
fl
ff

– There is no typical,
average, normal
user.
– User context will

vary widely based on
circumstances.
22
Image from: From the Interaction Design Foundation. © Center for Universal Design, NC State, 2011. All rights reserved.

Solutions needs to be:

• designed with the user at
Universal design
the centre (design An example…
thinking, user centred
design, etc.)
• Tested with users • Photo of stairs with:
• a ramp
• handrails on the stairs
Is it accessible?
• Not really
• Steepness of the ramp
• No rails where the
ramps are

Inclusive design
What is it?
• Design methodology that enables and draws on the full range of human
diversity
• Inclusive design means making your product available to as many users as
possible (like UD, right?)
• Focuses on the process of diversity. This is:
• Is about engaging authentically with the diverse people and, therefore,
• it may involve di erent solutions for di erent groups of people
(edge-cases) - One size ts one

ff
fi

ff

UD vs Inclusive design
So what?
Inclusive design is
Universal design is one-size- its-all.
one-size- its-one.
f

f
Accessibility
What is it?
• Goal: ensure there are no barriers (technical, physical or cognitive) to serving

products or services to someone
• It also includes testing usability (usually involving users - user testing)
• It could be seen as one piece of inclusive design
Web accessibility
• The inclusive practice of removing barriers that prevent interaction with, or access
to, websites by people with disabilities
• The degree to which a web system is usable by as many people as
possible
• A quality, - how easily and e ectively a system or service can be
accessed and used

ff

Disabilities and
impairments
Types of Disabilities
Visual impairments Cognitive impairments
Auditory impairments Vestibular disorders and seizures
Motor impairments
28
Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics
1- Visual Impairments
Blindness Low Vision Color Deficiency (e.g., color blindness)
Nearsightedness, Farsightedness, Astigmatism

Blindness
People who are blind access the web via:
– Screen reading software
– Refreshable Braille displays
– CANNOT use pointing devices (e.g., mouse, joystick)
– ONLY keyboard navigation

Low Vision
People with low vision may use those tools or:
- Screen magnification software
- External (larger) displays
- Difficult to magnify graphical text without distortion

Color Blindness
– Inability to perceive differences between some of the colors. 0.5% 8%
– Inability to distinguish red, green, or blue light.
– The deficiency is the result of a mutation in the X-chromosome.

Forms of Color Blindness

The following color combinations should be avoided where possible:
- Green - Red Red-green confusion Blue-yellow Monochromacy
- Green - Brown
- Blue - Purple
- Green - Blue
- Light green - Yellow
- Blue - Grey
- Green - Grey original photo deuteranopia protanopia tritanopia monochromacy
- Green - Black

Examples of Good Practice for Visual Impairments

– Images and controls should have equivalent text alternatives.
– Text, images and page layouts can be resized without losing information.
– Video content has text or audio alternatives, or audio-description track.
– Text and images have sufficient contrast between foreground and background color.
– Provide consistent, predictable navigation.
– Avoid using color alone to identify links or controls.


These lines of text do not meet the color
contrast ratio recommendations and are
difficult to read against their background
colors.
These lines of text follow the color

contrast ratio recommendations and are
legible against their background colors.

http://webaim.org/resources/contrastchecker/
Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics https://www.toptal.com/designers/colorfilter
https://www.google.com/search?q=color+blind+addon&oq=color+blind+addon&aqs=chrome..69i57j0i22i30.6571j0j7&sourceid=chrome&ie=UTF-8
2- Auditory Impairments
– Deafness
- Unable to recognize conversational speech through hearing.
– Hard of hearing
- Some loss of hearing function but still able to use hearing for communication.
- Often requires amplification.
Captions or transcripts
Use a sign language
- American Sign Language (ASL)

- British Sign Language (BSL)
39

Examples of Good Practice for Auditory Impairments

– Audio content, including videos, provide captions or transcripts.
– Media players provide volume controls.
– Media players provide options to adjust caption text size and colors.
– No interactions that rely on using voice only.

3- Motor Impairments
– Inability to use a mouse, slow response time, limited motor control.
- Cerebral palsy, neural-tube defects, muscular dystrophy and arthritis
– They might require:

- Speech-to-text software
- Keyboard-only interactions
– Interactions below are difficult and time consuming:
- Moving a mouse over a small area, selecting text, and right-clicking

Examples of Good Practice for Motor Impairments

– Provide full keyboard support.
– Provide sufficient time to complete tasks.
– Provide consistent, predictable, simple navigation and page functions.
– Link targets, buttons should be of sufficient size.
42

4- Cognitive Impairments
– Learning disabilities, distractibility, inability to focus on large amounts of information.
– Cognitive issues:
- Memory
- Attention
- Problem-solving
- Text processing
- Math processing
- Visual processing
43

Examples of Good Practice for Cognitive Impairments

– Provide simple navigation and page layouts.
– Avoid complex sentences.
– Avoid moving, blinking, or flickering content.
– Video, animations, or audio content can be paused or stopped.
– Simple text.
44

5- Vestibular Disorders and Seizures

– Vestibular disorders (%35 of adults) are caused by damage to the vestibular system.
– It manifests as motion sensitivity on the web.
– Animations, unconventional scrolling and parallax backgrounds.
– Control over the animation and motion experiences.
– Seizures (%10 of people) are triggered by flashing or flickering lights.
45

Web accessibility
International Guidelines
– Web accessibility guidelines for Government websites in place since 1999
– World Wide Web Consortium (W3C) - https://www.w3.org/
– The W3C Web Accessibility Initiative (WAI) - http://www.w3.org/WAI/

- Accessibility guidelines
- Technical specifications
- Educational materials
– International widely adopted standards

https://www.w3.org/TR/WCAG/ https://www.w3.org/TR/ATAG20/ https://www.w3.org/TR/UAAG20/

WCAG
WCAG defines how to make Web content more accessible to people with disabilities.
- visual
- auditory
- physical
- speech
- cognitive
- language
- learning
- neurological disabilities
- older individuals
- users in general

Principles of WCAG

51
53
Levels of WCAG 2.1
(WCAG 2.2 is scheduled to be published in 2021)
Level A
– The lowest (minimum) level of conformance
Level AA
– The middle level of conformance, satisfying both Level A and Level AA criteria
Level AAA
– The highest level of conformance, satisfying Level A, Level AA, and Level AAA criteria

Level A: Minimal compliance

– The most basic web accessibility features. (30 criteria)
– Websites that do not at least meet level A are impossible for people with disabilities to
use.
– Some notable WCAG 2.1 Level A requirements include:

- no keyboard traps
- navigable with a keyboard
- non-text content alternatives
- video captions
- meaning is not conveyed through shape, size, color etc. alone

Level AA: Acceptable compliance

– Deals with the biggest and most common barriers for disabled users. (20 criteria)
– Used in most accessibility rules and regulations around the world.
– Some notable WCAG 2.1 Level AA requirements include:

- color contrast is at least 4.5:1
- alt text or a similar solution is used for images that convey meaning
- navigation elements are consistent throughout the site
- form fields have accurate labels
- status updates can be conveyed through a screen reader
- headings are used in logical order

Level AAA: Optimal compliance

– The highest and most complex level of web accessibility. (28 criteria)
W3C explains, “It is not recommended that Level AAA conformance be required as a
general policy for entire sites because it is not possible to satisfy all Level AAA Success
Criteria for some content.”
Some notable WCAG 2.1 Level AAA requirements include:

- sign language interpretation for audio or video content
- color contrast is at least 7:1 in most instances
- timing is not an essential part of any activity
- context-sensitive help is available

WCAG at a Glance
1.1 Text Alternatives: Provide text alternatives for any non-text content.
1.2 Time-based media: Provide alternatives for time-based media.
1.3 Adaptable: Create content they can be presented in different ways.
1.4 Make It Easier: Ease of use to see and read your content including separating foreground and background.
2.1 Keyboard Accessible: Make off I'm sure nobody available from a keyboard.
2.2 Enough Time: Provide users enough time to read and use content.
2.3 Seizures: Do not designed content in a way that is known to cause seizures.
2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
3.1 Readable: Make text content readable and understandable.
3.2 Predictable: Make web pages appear and operate in predictable ways.
3.3 Input Assistance: Help users avoid and correct mistakes.
4.1 Compatible: Maximize compatibility with current and future user agent including assistive technologies.

60
https://www.w3.org/TR/WCAG/
https://www.w3.org/WAI/policies/norway/
Now Digdir,
not Di
https://www.digdir.no/digdir/velkommen-til-digitaliseringsdirektoratet/860
f
Proper code - Some
examples
Examples
Best practices you want to follow…
• The following slides contain illustrative examples of good practices

• The slides are part of the subject IDG2012 - Web Accessibility, Usability and
Ethics by Yavuz Inal
• Use them as a reference guide or roadmap to learn more about the topic

Design for Complete Blindness

65
Annoyances
– Poorly structured HTML
– Images with no meaningful alt text
– Flash that is inaccessible
– Features that require vision, or
where the fallback is poorly implemented
– Repetitive items that cannot be skipped
– Poorly structured forms
https://animate.style/

Semantic Elements in HTML

Many websites contain HTML code like:
<div id=“nav”> <div class=“header”> <div id=“footer”> to indicate navigation,
header, and footer.
In HTML, there are some semantic elements that can be used to define different
parts of a web page:

Screen Readers
Things screen readers can do:
- Read all text visible on a page
- Read some tags that a sighted user will not be able to see (such as alt tags)
- List all headers and links
Things screen readers cannot do:

- Sometimes, read text based on your CSS layout
- Read text in images
- Detect navigation
Nearly 96% use screen readers
So, how can we do? - Perceive. Whether content is accurately displayed to a user
- Navigate. Whether a user can effectively move through that content
- Interact. Whether a user can freely engage with that content

Using ARIA (Accessible Rich Internet Applications)

A few common roles:
Typically, the “header” of your page <div
A significant part of the site containing content role="banner">
The primary area of content on your site
Used to identify groups or a list of links which are intended to be used for navigation
Typically, the “footer” - containing information such as copyrights and policy documents

Using ARIA (Accessible Rich Internet Applications)

The Lang Attribute
https://www.w3schools.com/tags/ref_language_codes.asp

Title <head>
<!DOCTYPE html> <head
<html lang="en"> <meta charset="utf-8">
<head < t i t l e > Special Pizza NYC
< t i t l e > T i t l e o f the document</title> </title
</head </head
<body <body>
<h1>This i s a heading</h1>
<p>This i s a paragraph.</p>
</body
</html>
These elements can go inside the <head> element:

<title> <style> <base> <link> <meta> <script> <noscript>

>
>
>
>
>
>
>
Navigation

Headings
– Use one H1 per page and have it match the page title.
– Do not skip heading levels when increasing.

– But you can skip levels when decreasing.
(h1, h2, h3, h2, h3, h4, h2, h3, h4)
–The headings taken out of context should logically represent the page content for
screen readers and users who choose this option as a way to scan the page.

Styling Headers
An HTML heading tag, followed by a paragraph tag
A paragraph tag acting as a heading, followed by another paragraph tag

Logical Flow (linear layout)
<div s t y l e = ” f l o a t : l e f t " > This i s a s i t e about who I
am. </div>
<div s t y l e = ” f l o a t : r i g h t " > Welcome t o the s i t e ! </div>
Screen Reader Follows Linear Layout

“Skip to Main Content” Link
1)
2) 3)

Link Placement
It’s usually placed in the top left-hand corner of a web page.

Alt Tags
Alt tags are a property. They help users understand what they are unable to
perceive or interact with.
Examples;

Forms
Tabindex in forms
<div tabindex="1">First name</div>
<div tabindex=”2">Last name</div>
<div tabindex=”3">Date of Birth</div>
Labels in forms
Correct labelling for a submit button

Forms - Errors
Erroring out vocally

Forms - CAPTCHA and Challenge Response
Examples of CAPTCHAS CAPTCHA in a text browser versus a typical browser

Hiding Text
Incorrect way of hiding text (nothing will be read)
Hiding text properly

Tables
Scoping Tables Table with summary and caption
Table with summary stating generalizations
Skipping a table

Images
Replacing headers with images

Images
Using alt tags

Images
Good captioning

Graphs and Diagrams
Captioning a chart Some good rules for a graph:
-If the graph image has a title in it, make certain to
include that title
- State what is being
-If there is a caption for the graph, take care not to
repeat its content in the alt text
- State the trends in the graph as plainly as possible

Large Click Areas
This larger hit area is easier to interact with.

JavaScript
Inline versus external JavaScript

Frames
Frames with titles

Iframes
Iframe DOCTYPE
Bad alternate content for iframes
Linking to frame content
Linking to alternate page

Flash
Text Cues in Flash Alternative page
- Should be an alternative page for screen readers

TIPS
- Should be accessible by keyboard

- Should not automatically play audio
- Should have text cures for screen readers Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

Access Keys
Adding an access key to a page A main menu with access keys
Common access keys

Alerts for Updates

The status role
The alert dialog role

Design for Physical (motor) Accessibility
Annoyances
– Interfaces that require the mouse
– Interfaces that require the keyboard
– Items that need a high level of precision
– Items that trigger easily, but are difficult to close
Potential problems for users who rely on a keyboard for navigation:

– Focus indicators
outline:0 outline:none
– Navigation order
– Items that should not receive keyboard focus
– Inaccessible custom widgets
– Lengthy navigation

Keyboard-only navigation
The most common method of keyboard-only navigation relies on the Tab key.
A picture of a button and then that same button with keyboard focus style applied.

Tabindex
Tab: determines whether an element is “focusable” or not
for a user using the Tab key to navigate.
Index: The order in which focusable content is presented on

a page.
Essential elements that receive focus by default:

<a> A link in HTML. As long as it has somewhere to go, it can be
focused through tabbing
<button> A button
<input> A field inside a form is defined as an input, and they all
have focus set by default
<select> A dropdown
<textarea> A text box, often used for long-form comments and
bigger than a usual input

So why would you need tabindex if interactive elements can be

tabbed to already?
Three values that the tabindex attribute takes:
0 value tabindex="0" It allows elements besides links and form elements to receive keyboard focus.
A diagram showing the tabbing order of buttons.
One <div> tag is ignored, while the other is added to the order as it
has the tabindex attribute added to it.


tabbed to already?
1 or greater value tabindex="1" It defines an explicit tab or keyboard navigation order. This must
always be avoided.
A diagram of a custom tabbing order being dictated by the

tabindex attribute


tabbed to already?
– 1 value tabindex="-1" It allows things besides links and form elements to receive
"programmatic" focus, meaning focus can be set to the element
through scripting.
A picture of an active modal.

Focus styles
A picture of a button currently receiving keyboard focus with

the default focus style.
A picture comparing two menus focused

on the same item – one with a focus style
and one without

Accessible overlays: Changing focus when the overlay appears
A picture of a feedback dialog overlaid on a page, but with keyboard

focus still on the content beneath it

Keyboard traps
It happens when a keyboard-only user is caught within a specific group of content
and then can’t get out of the situation that the page has placed them in.
– a misuse of tabindex
– a misuse or lack of keyboard focus
A picture of a login dialog window, with keyboard

focus on the first form input

Keeping tab focus inside the new content

Those

Allow the user to close the new overlaid content
– A “Close” button
– Clicking outside of the modal content
– Hitting the escape key
107

Allow the user to return to where they were before the

content appeared

Pointer-based gestures

Large hit areas
An illustration of two target areas on two mobile devices - the

first as a 44px x 44px square and the other whose width adapts
to fill the screen

Pointer cancellation
The button becomes active on the down-

event when the user touches it, deactivates
again when the user moves their finger.

Undoing the action
“Users should be able to abort the function before completion or to undo the
function after completion” (W3C)
An example of Google Mail’s “undo sent

message” feature

Short timeouts
WCAG: We should provide the ability to extend the deadline by at least 10 times the
Extended timeout initial time you provided, with a prompt at least 30 seconds before the end of the timer.
<a href="https://webaim.org/" accesskey="w">WebAIM.org</a> 
Provide shortcuts <form action="submit.htm" method="post"> 
<label for="name">Name</label> 
<input type="text" id="name" accesskey="n"> 
<input type="submit"
id="submitform" accesskey="s" value="Submit"> 
</form>

Autofill
An example of Google Chrome’s autofill feature, as a user logging into Twitter
<input type="text" name="address-line-1" autocomplete="off" />

Forms - design
A bad form has fields on the same line A good form has one field per line
Form elements should

- be tab- and arrow-friendly, and
- allow the user to click on the text of an item to make a selection.

Forms - tabindex
TABINDEX TABINDEX and radio buttons
TABINDEX and check boxes

Pop-ups
In-page pop-up advertising Code sample: hitting ESC to close a pop-up

Design for Audio Accessibility
Annoyances
– Videos with no captioning
– Videos with poor captioning
– Interactive features with no visual alerts
– Poor quality live feeds

Subtitles vs. closed captioning

Subtitles provide a text alternative for the dialogue
of video footage
- the spoken words of characters
- narrators and other vocal participants
Closed captions supplement for dialogue and

relevant parts of the soundtrack
- describing background noises
- phones ringing
- other audio cues that need describing

<track> element
<video> The “parent” element that wraps the other tags. It tells the page that it will be displaying a video.
This tag holds the path to the actual video file that the page will display. A video can have
multiple sources to account for different video formats, because some browsers will only display
<source>
videos with a certain format.
The tag we’re most interested in. This is what allows us to add our own subtitles and captions.
<track>
121

WebVTT files
– It stands for Web Video Text Tracks format.
– The files that contain the actual caption data are simple text files (TextEdit or Notepad).
– Provide them in the following format:
An example of WebVTT captions


WebVTT validator
https://quuz.org/webvtt/

Different formats (.srt)
An example .srt caption
Youtube, Vimeo, and Netflix all support both .srt and .vtt
W3C recommends WebVTT

Styling subtitles - cue
The same caption as the previous example but styled with red text and
a white background

Formatting
<b> (Bold) Allows you to place emphasis on certain words
<i> (Italics) Allows you to italicise parts of text
<u> (Underline) Allows you to underline areas of a sentence

Position and line

– Position is responsible for the X-axis
– Line is responsible for the Y-axis
– Represented using a percentage (0% - 100%).
A diagram showing how the position A visual representation of captions positioned in different
and line attributes affect the positioning places using the position attribute
of captions

Align
It can be
- start (left)
- center (middle)
- end (right)
Captions aligned left, center, and right based on the align

attribute set

Size
– It dictates how much of the screen our
captions take up.
– It’s specified as a percentage (0% - 100%).
A caption displayed as one word per line, due to the size of

the caption being set to 10% of the screen

<audio> tag and captions
A custom audio player using the <video> tag, a fixed height,

and positioned captions

Closed caption buttons
An example of a browser’s default closed caption button

Providing a transcript
Converting a WebVTT file into a transcript

https://subtitletools.com/convert-subtitles-to-plain-text- online
What know?
Design heuristics
And closing thoughts

Use design…
Part
• Design can also convey meaning

• Use it to draw user’s attention
• Use Web typography and heuristics learnt in Lecture 5
• Avoid long text (50-70ch)
• Use appropriate text size
• Use font sizes to create a visual hierarchy
• Use proper headings and subheadings
• Use columns instead of wide areas of horizontal text
• Treat the typeface as another element of the UI
• Pick proper combination of typefaces
I

Use design…
Part
• Read a bit about Information architectures

• Follow the C.R.A.P principles of graphic design (contrast, repetition,
alignment, and proximity)
• Contrast: add visual excitement and draw attention
• Repetition: repeat visual elements throughout design
• Alignment: align elements to create visual unity
• Proximity: group related items
I
I

Use design
Part
• Read about Usability heuristics by

Jacob Nielsen
• Follow the 10 principles (heuristics)
suggested by Jacob Nielsen to
create a usable website
https://media.nngroup.com/media/articles/attachments/Heuristic_Summary1-compressed.pdf
https://www.nngroup.com/articles/ten-usability-heuristics/
I
I
I

Design for accessibility

Part
• Design your web pages and web sites with the Web Content Accessibility Guidelines in
mind (WCAG 2.1)
• Design to comply with Level AA
• Use automatic tools to assess your accessibility but remember that some tasks require
manual inspection
• AChecker Web Accessibility Checker: https://achecker.achecks.ca/checker/index.php
• WAVE Web Accessibility Evaluation Tool: https://wave.webaim.org/
• Use browser extensions to help you when developing:
• Example: Web Developer O ered by: chrispederick.com https://
chrome.google.com/webstore/detail/web-developer/
bfbameneiokkgbdmiekhjnmfkcnldhhm/related
I

ff


Part
• Remember that HTML is used to structure the contents (lectures 1-4)

• Remember that CSS is used to style the contents (presentation layer)
• Never use HTML to style elements
• Never use CSS to show contents (e.g.: if an image is content, don’t use
background-image, use img element instead)
• Check the size of your images
• Always include alt attributes to HTML elements (images,
controls, etc.) that do not have text
I
I


Part
• Plan the structure of your contents before coding (HTML structure)

• Use semantic structural tags (<header>, <nav>, <main>, <article>, etc.)
• Think about the project structure of your site (folder hierarchy)
• Keep the HTML code as simple as possible but remember that atten out
the markup may have an impact on accessibility (when working with
grids, for example)
• Consider SEO guidelines when building the site (this can also
improve accessibility, after all, a search engine is a user with
severe limitations)
I
I
I

fl


Part V
• Design mobile rst when possible

• Design responsive web sites and responsive layouts
• Provide a consistent navigation menu across all your pages
• Test the navigation using the keyboard
• Use ex (1 dimension) or grid (2 dimensions) for your layouts
• Make sure all the HTML elements always t in the parent container
(e.g.: img {max-width:100%;})
• Use media queries when needed but don’t forget responsive
design can be achieved with modern CSS ( min(), max(), calc(),
clam(), etc.). ……………………………………………
fl
I
fi

fi


Part V
• ALWAYS validate your code

• HTML: https://validator.w3.org/
• CSS: https://jigsaw.w3.org/css-validator/
• Include comments in your code for your future “you” as well as your
“team” members
• Include a readme.txt (or readme.md) le in your project to
introduce the goal of the site, include instructions for
deploying, important clari cations, etc.

fi

fi

That’s all
Now focus on the final project…
• That’s all
• You can still contact me during
the semester (OsloMet account)
• NTNU contact information next
slide
• Don't hesitate to say
hello if we stumble
across!
• Good luck! 😀
📇
Contact
Name, rank and role 
information
Dr. Carlos Vicient-Monllaó,  
Associate Professo
Study Program Coordinator —
Bachelor in Web Development / One-Year study program in Web Design
📱
Virtual contact information 
@Carlos Vicient-Monllaó on MS Teams
carlos.vicient@ntnu.no  
🏢 Physical contact information 

Campus Mustad, Building 118, Office 310
 
r

Lecture 10

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 10

Uploaded by

Copyright:

Available Formats

🏛 Department of Computer science, TKD

Inclusive Web Design

CSS LAYOUT MODULES

• Positioned, for explicit position of an • Duis in erat neque.

positioning. Single dimension.

positioning. Two dimensions.

GRID LAYOUT TERMINOLOGY

Image from: CSS The de nitive Guide, 4th Edition. Chapter 13

• Repeating the name of a grid area causes the

A complete guide to Grid layout

A css tricks uide…

• A guide that explains everything

• Use the CSS Demo to see di erent

• Another good online resource to

• You can play with this example to

• General purpose book that o ers a

• Research interests: Interaction Design,

“Universal design is design that’s usable by all

– Ron M ce, 1985

Usable by all people:

• Originally created for architecture and industrial design but expanded to

– User context will

Solutions needs to be:

• Goal: ensure there are no barriers (technical, physical or cognitive) to serving

Visual impairments Cognitive impairments

Auditory impairments Vestibular disorders and seizures

Blindness Low Vision Color Deficiency (e.g., color blindness)

Nearsightedness, Farsightedness, Astigmatism

Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

– Inability to distinguish red, green, or blue light.

– The deficiency is the result of a mutation in the X-chromosome.

Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

Forms of Color Blindness

- Green - Red Red-green confusion Blue-yellow Monochromacy

Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

Examples of Good Practice for Visual Impairments

– Video content has text or audio alternatives, or audio-description track.

– Provide consistent, predictable navigation.

– Avoid using color alone to identify links or controls.

Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

These lines of text follow the color

Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

Use a sign language

- American Sign Language (ASL)

Examples of Good Practice for Auditory Impairments

– Media players provide volume controls.

– No interactions that rely on using voice only.

Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

– They might require:

Yavuz Inal, IDG2012 - Web Accessibility, Usability and Ethics

Examples of Good Practice for Motor Impairments

– Provide sufficient time to complete tasks.

– Provide consistent, predictable, simple navigation and page functions.

– Link targets, buttons should be of sufficient size.

Examples of Good Practice for Cognitive Impairments

– Avoid complex sentences.

– Avoid moving, blinking, or flickering content.

– Video, animations, or audio content can be paused or stopped.

5- Vestibular Disorders and Seizures

– Seizures (%10 of people) are triggered by flashing or flickering lights.

– World Wide Web Consortium (W3C) - https://www.w3.org/