Part 4 - An accessible web Flashcards
when audio is present on a web page what should it be accompanied by to achieve accessibility
this should be accompanied by a transcript so that screen readers and even search engines can interpret what is being said
to accompish this we use:
1. <.table></.table> - define a table
2. <.tr></.tr> - define a row in said table
3. <.th></.th> - define that a cell is a table header
4. <.td></.td> - define that a cell contains table data
what 4 html tags can
create a simple table
which users benefit from a website built with accessibility
this places emphasise on those with mental or physical disabilities however. this also provide benefits for:
* the elderly
* those with temporary disabilities (such as a broken arm)
* those who are not disabled (speech recognition)
this can be placed in a html document using
<.audio></.audio>
how is audio placed into a html document
describe the W3C / WAI
Web Content Accessibility Guidelines (WCAG) 2
this defines standards and guidelines about the content of a web page itself including:
* natural information such as text, images, and sounds
* code or markup that defines structure, presentation
* etc.
this html tag creates an unordered (bullet point) list
describe the html tag
<.ul></.ul>
this includes standards and guidelines for implementing accessibility into user agents such as:
* browsers
* browser extensions
* media players
* readers
* other applications that render web content
describe the W3C / WAI
User Agent Accessibility Guidelines (UAAG)
what is
semantic markup
this is markup that desribes what the element actually is and its purpose
example
<.div> - gives no indication of what it could contain
<.nav> - tells the user agent that this is a navigation bar
how is audio placed into a html document
this can be placed in a html document using
<.audio></.audio>
this sets the background color of the selected element(s)
describe the css property
background-color
this defines standards and guidelines that provide accessibility in authoring tools such as html editors so that:
* make the authoring tools themselves accessible, so that people with disabilities can create web content, and
* help authors create more accessible web content.
describe the W3C / WAI
Authoring Tool Accessibility Guidelines (ATAG)
describe the html tag
<.ul></.ul>
this html tag creates an unordered (bullet point) list
describe the <.img> attribute
longdesc
this img attribute provides a hyperlink to a detailed description of the image
describe the
understandable
category from the
Web Content Accessibility Guidelines (WCAG) 2
W3C describes this as:
Information and the operation of user interface must be understandable.
this means that users must be able to understand and interpret any content that is displayed to them as well as understand how to interact with content and functionality
describe the css property
background-color
this sets the background color of the selected element(s)
this img attribute provides a hyperlink to a detailed description of the image
describe the <.img> attribute
longdesc
this can be used to create list items in an unordered list or an ordered list
describe the html tags
<.li></.li>
the World Wide Web Consortium (W3C) answers this by stating:
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.
according to the World Wide Web Consortium (W3C)
what does accessibility mean
this should be accompanied by a transcript so that screen readers and even search engines can interpret what is being said
when audio is present on a web page what should it be accompanied by to achieve accessibility
this is a World Wide Web Consortium (W3C) initiative that develops:
* guidelines which are widely regarded as the international standard for web accessibility
* support materials to help understand and implement web accessibility
* resources, through international collaboration
(source)
what is the
W3C’s Web Accessibility Initiative (WAI)
describe the
operable
category from the
Web Content Accessibility Guidelines (WCAG) 2
W3C describes this as:
User interface components and navigation must be operable.
this means that anything that is rendered must be functional and accessible to all
values for this <.img> attribute include:
* an id to another element
* an absolute URL
* a relative URL
what 3 values can be given to the <.img>
longdesc attribute
what 3 values can be given to the <.img>
longdesc attribute
values for this <.img> attribute include:
* an id to another element
* an absolute URL
* a relative URL
to
meet UK government accessibility requirements
what 4 things must a digital service meet
to meet this a digital service must:
* meet level AA of theWeb Content Accessibility Guidelines (WCAG 2.1)as a minimum
* work on the most commonly usedassistive technologies- including screen magnifiers, screen readers and speech recognition tools
* include disabled people inuser research
* have anaccessibility statementthat explains how accessible the service is - you need to publish this when the service moves into public beta
describe the W3C / WAI
Authoring Tool Accessibility Guidelines (ATAG)
this defines standards and guidelines that provide accessibility in authoring tools such as html editors so that:
* make the authoring tools themselves accessible, so that people with disabilities can create web content, and
* help authors create more accessible web content.
name 5 hints that are given by the W3C that can help increase the websites operability
these include:
* Make all functionality available from akeyboard.
* Give usersenough timeto read and use content.
* Do not use content that causesseizuresor physical reactions.
* Help usersnavigate and find content.
* Make it easier to useinputs other than keyboard.
W3C describes this as:
Content must be robust enough that it can be interpreted by by a wide variety of user agents, including assistive technologies.
this includes past, present and upcoming technologies
describe the
robust
category from the
Web Content Accessibility Guidelines (WCAG) 2
describe the
title attribute
this attribute defines some extra information about an element.
The value of the this attribute will be displayed as a tooltip when you mouse over the element
what 4 html tags can
create a simple table
to accompish this we use:
1. <.table></.table> - define a table
2. <.tr></.tr> - define a row in said table
3. <.th></.th> - define that a cell is a table header
4. <.td></.td> - define that a cell contains table data
this specifies the type of positioning method used for an element
describe the css
position Property
W3C describes this as:
Information and user interface components must be presentable to users in ways they can perceive.
this means that all users must be aware of all content and components that are being rendered
describe the
perceivable
category from the
Web Content Accessibility Guidelines (WCAG) 2
what is the
W3C’s Web Accessibility Initiative (WAI)
this is a World Wide Web Consortium (W3C) initiative that develops:
* guidelines which are widely regarded as the international standard for web accessibility
* support materials to help understand and implement web accessibility
* resources, through international collaboration
(source)
according to the World Wide Web Consortium (W3C)
what does accessibility mean
the World Wide Web Consortium (W3C) answers this by stating:
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.
this is a term that describing that the information and functionality of a website is accessible and understandable by all.
describe
accessibility
in the context of the web
This property sets the width of an element.
The width of an element does not include padding, borders, or margins!
describe the css property
width
this includes:
* * static
* * relative
* * fixed
* * absolute
* * sticky
what are the 5 positioning methods that can be used with the
css position property
this includes:
* Maximizecompatibilitywith current and future user tools.
name 1 hint that are given by the W3C that can help increase the websites robustness
name 1 hint that are given by the W3C that can help increase the websites robustness
this includes:
* Maximizecompatibilitywith current and future user tools.
this is markup that desribes what the element actually is and its purpose
example
<.div> - gives no indication of what it could contain
<.nav> - tells the user agent that this is a navigation bar
what is
semantic markup
describe the html tags
<.li></.li>
this can be used to create list items in an unordered list or an ordered list
these include:
* perceivable
* operable
* understandable
* robust
what are the 4 categories that the (W3C) (WAI)
Web Content Accessibility Guidelines (WCAG) 2
is broken into
describe the html tags
<.ol></.ol>
this html tag creates an ordered (numbered) list
what are the 5 positioning methods that can be used with the
css position property
this includes:
* * static
* * relative
* * fixed
* * absolute
* * sticky
name 3 hints that are given by the W3C that can help increase the websites understandability
these include:
* Make textreadable and understandable.
* Make content appear and operate inpredictableways.
* Help usersavoid and correct mistakes.
this defines standards and guidelines about the content of a web page itself including:
* natural information such as text, images, and sounds
* code or markup that defines structure, presentation
* etc.
describe the W3C / WAI
Web Content Accessibility Guidelines (WCAG) 2
W3C describes this as:
Information and the operation of user interface must be understandable.
this means that users must be able to understand and interpret any content that is displayed to them as well as understand how to interact with content and functionality
describe the
understandable
category from the
Web Content Accessibility Guidelines (WCAG) 2
when creating tables its important this tag is used as screen readers will convey this information making the table perceivable and accessible
for accessibility why is it important to use
<.th></.th> - table haeder tags
these include:
* Make textreadable and understandable.
* Make content appear and operate inpredictableways.
* Help usersavoid and correct mistakes.
name 3 hints that are given by the W3C that can help increase the websites understandability
this html tag creates an ordered (numbered) list
describe the html tags
<.ol></.ol>
what is the syntax for the <.img>
longdesc attribute
syntax for this is:
<.img longdesc=”string”>
the 3 categories this is broken into are:
* Web Content Accessibility Guidelines (WCAG) 2
* Authoring Tool Accessibility Guidelines (ATAG)
* User Agent Accessibility Guidelines (UAAG)
what three categories is the W3C
web accessibility initiative (WAI)
broken into
this attribute defines some extra information about an element.
The value of the this attribute will be displayed as a tooltip when you mouse over the element
describe the
title attribute
describe the
perceivable
category from the
Web Content Accessibility Guidelines (WCAG) 2
W3C describes this as:
Information and user interface components must be presentable to users in ways they can perceive.
this means that all users must be aware of all content and components that are being rendered
describe the css
position Property
this specifies the type of positioning method used for an element
this is important to use because it tells the user agent the structure of the content. a user agent can then use this information so that it can be conveyed in a meningfull way if for exampe a screen reader is in use
why is the use of semantic markup important
name 4 hints that are given by the W3C that can help increase the websites perceivability
these include:
* Providetext alternativesfor non-text content.
* Providecaptions and other alternativesfor multimedia.
* Create content that can bepresented in different ways, including by assistive technologies, without losing meaning.
* Make it easier for users tosee and hear content.
syntax for this is:
<.img longdesc=”string”>
what is the syntax for the <.img>
longdesc attribute
to meet this a digital service must:
* meet level AA of theWeb Content Accessibility Guidelines (WCAG 2.1)as a minimum
* work on the most commonly usedassistive technologies- including screen magnifiers, screen readers and speech recognition tools
* include disabled people inuser research
* have anaccessibility statementthat explains how accessible the service is - you need to publish this when the service moves into public beta
to
meet UK government accessibility requirements
what 4 things must a digital service meet
W3C describes this as:
User interface components and navigation must be operable.
this means that anything that is rendered must be functional and accessible to all
describe the
operable
category from the
Web Content Accessibility Guidelines (WCAG) 2
what are the 4 categories that the (W3C) (WAI)
Web Content Accessibility Guidelines (WCAG) 2
is broken into
these include:
* perceivable
* operable
* understandable
* robust
these include:
* Providetext alternativesfor non-text content.
* Providecaptions and other alternativesfor multimedia.
* Create content that can bepresented in different ways, including by assistive technologies, without losing meaning.
* Make it easier for users tosee and hear content.
name 4 hints that are given by the W3C that can help increase the websites perceivability
describe the css property
width
This property sets the width of an element.
The width of an element does not include padding, borders, or margins!
why is the use of semantic markup important
this is important to use because it tells the user agent the structure of the content. a user agent can then use this information so that it can be conveyed in a meningfull way if for exampe a screen reader is in use
describe the
robust
category from the
Web Content Accessibility Guidelines (WCAG) 2
W3C describes this as:
Content must be robust enough that it can be interpreted by by a wide variety of user agents, including assistive technologies.
this includes past, present and upcoming technologies
these include:
* Make all functionality available from akeyboard.
* Give usersenough timeto read and use content.
* Do not use content that causesseizuresor physical reactions.
* Help usersnavigate and find content.
* Make it easier to useinputs other than keyboard.
name 5 hints that are given by the W3C that can help increase the websites operability
this places emphasise on those with mental or physical disabilities however. this also provide benefits for:
* the elderly
* those with temporary disabilities (such as a broken arm)
* those who are not disabled (speech recognition)
which users benefit from a website built with accessibility
describe
accessibility
in the context of the web
this is a term that describing that the information and functionality of a website is accessible and understandable by all.
for accessibility why is it important to use
<.th></.th> - table haeder tags
when creating tables its important this tag is used as screen readers will convey this information making the table perceivable and accessible
describe the W3C / WAI
User Agent Accessibility Guidelines (UAAG)
this includes standards and guidelines for implementing accessibility into user agents such as:
* browsers
* browser extensions
* media players
* readers
* other applications that render web content
what three categories is the W3C
web accessibility initiative (WAI)
broken into
the 3 categories this is broken into are:
* Web Content Accessibility Guidelines (WCAG) 2
* Authoring Tool Accessibility Guidelines (ATAG)
* User Agent Accessibility Guidelines (UAAG)
