solex2006 / seliproject Goto Github PK
View Code? Open in Web Editor NEWSELI Project
SELI Project
After video content is created, user must have the option to configure the accessibility resources immediately.
Only the option to configure the accessibility later is enabled for user.
When an activity is rendered, in the student side, it shows some important informations. But when the student clicks to open the activity (a modal), this important information is not presented in the modal. It can created difficulties for students with cognitive disabilities.
All the information must be presented in both of the screens.
The information are only presented in the first screen.
Browser: all
Add the information to both the screens as indicated in the image
See #51
User can use tab to navigate in and away from text editor.
User can use tab to navigate to text editor, but can't navigate away using tab.
Debian OS
Browser: Chrome
Use a11yEditor instead, styleEditor
Use the a11yTextEditor
1.2.7
1.2.3(#11), 1.2.5(#12), and 1.2.8 overlap somewhat with each other. This is to give the author some choice at the minimum conformance level, and to provide additional requirements at higher levels. At Level A in Success Criterion 1.2.3, authors do have the choice of providing either an audio description or a full text alternative. If they wish to conform at Level AA, under Success Criterion 1.2.5 authors must provide an audio description - a requirement already met if they chose that alternative for 1.2.3, otherwise an additional requirement. At Level AAA under Success Criterion 1.2.8 they must provide an extended text description. This is an additional requirement if both 1.2.3 and 1.2.5 were met by providing an audio description only. If 1.2.3 was met, however, by providing a text description, and the 1.2.5 requirement for an audio description was met, then 1.2.8 does not add new requirements.
Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.
provide people who are blind or visually impaired access to a synchronized media presentation beyond that which can be provided by standard audio description. This is done by periodically freezing the synchronized media presentation and playing additional audio description. The synchronized media presentation is then resumed.
Because it disrupts viewing for those who do not need the additional description, techniques that allow you to turn the feature on and off are often provided. Alternately, versions with and without the additional description can be provided
information_source For 1.2.3(#11), 1.2.5(#12) , and 1.2.7(#13), if all of the information in the video track is already provided in the audio track, no audio description is necessary.
1.Video of a lecture. A physics professor is giving a lecture. He makes freehand sketches on the whiteboard, speaking rapidly as he draws. As soon as he has finished discussing one problem, he erases the drawing and makes another sketch while continuing to speak and gesture with his other hand. The video is paused between problems, and extended audio description of the professor's drawings and gestures is provided; the video is then resumed.
- MUST This word, or the terms "REQUIRED" or "SHALL", mean that the definition is an absolute requirement of the specification.
- MUST NOT This phrase, or the phrase "SHALL NOT", mean that the definition is an absolute prohibition of the specification.
- SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.
- SHOULD NOT This phrase, or the phrase "NOT RECOMMENDED" mean that there may exist valid reasons in particular circumstances when the particular behavior is acceptable or even useful, but the full implications should be understood and the case carefully weighed before implementing any behavior described with this label.
- MAY This word, or the adjective "OPTIONAL", mean that an item is truly optional. An implementation which does not include a particular option MUST be prepared to interoperate with another implementation which does include the option, though perhaps with reduced functionality. In the same vein an implementation which does include a particular option MUST be prepared to interoperate with another implementation which does not include the option (except, of course, for the feature the option provides.)
A button activates functionality (e.g., shows or hides content, toggles a state on or off).
A link navigates to new content.
Check https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
From material-ui
An app can show more than one button in a layout at a time, so a high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions.
When using multiple buttons, ensure the available state of one button doesn’t look like the disabled state of another.
In a bottom bar, when using multiple buttons, indicate the more important action by placing it in a contained button (next to a text button).
Avoid using two contained buttons next to one another if they don’t have the same fill color.
See live demo using react components
https://codesandbox.io/s/upload-form-4vtjg?file=/demo.js
Button preceded by an icon that represents the source type. The button label (“what is going to be selected?”) should be:
Description:
After file is selected, replace the icon by a preview of the file (ie: the image selected). In case isn’t possible to a preview, like in a pdf file, replace by an icon/image that represent the type of file
Validation status should be calculated when accessibility form is opened to edit previous configuration
Validation status is not calculated
Instead of load isA11y variable from database, try to call the function to calculate it.
Also, check if isA11y is being persisted correctly.
Informe at the beginning of every form that * is for required fields or [BEST] replace *
for (required)
On error:
/*Using ARIA Live Regions or role=alert to Identify Errors*/
//OR <span id="errors" role="alert" aria-atomic="true"> /*ONE LINE PER ERROR*/</span>
//OR <span tabindex="-1" id="errText" aria-live="assertive">/*ONE line summarising all errors*/</span>
<form name="signup" id="signup" method="post" action="#">
<label for="first">Name (required)</label><br>
<input type="text" name="first" id="first" aria-describedby="error_first">
<span id="error_first" role="alert" aria-atomic="true">/*ONE LINE PER ERROR*/</span>
<label for="email">Email (required)</label><br>
<input type="email" name="email" id="email" aria-invalid="true" aria-describedby="error_email">
<span id="error_email" role="alert" aria-atomic="true"> /*ONE LINE PER ERROR*/</span>
<input type="submit" name="button" id="button" value="Submit">
</form>
PDF Documents
MS Word Documents
Open Office Documents
Tip: small help near a concept or form field. It’s preceded by and info icon. Default color is grey. When linked to a form field, it changes to red when an error in the input is detected. Also, it could change for green to denote an accessibility good configuration.
Help: a visual example of the concept or the input expected in the form field. It’s a text button with a label “more details” preceded by a help icon.
Guided help: yes/no question to help user decide between options. It’s a text button with a label “help me decide” preceded by a live help icon.
role="alert"
aria-describedby=[id of tip container]
Part I
Storytelling requires students to upload images and upload voice over images.
Students have choice to share it with classmates or just with the teacher(facilitator)
Here is an example please see https://vimeo.com/91494225
Some of the other examples are here from our students:
http://www.digitalstoryhub.org/filter/int/ERASMUS-IP-Project-Snapshot-Digital-Storytelling-Workshop
We are looking for a solution to make story production easier in the platform for students.
Try this
.a11yEditor-root {
background: #fff;
border: 1px solid #ddd;
padding: 0px;
max-height: 300px;
width: 100%;
}
.a11yEditor-controls {
margin: 0 5px 5px 5px;!important
user-select: none;
}
.a11yEditor-styleButton{
color: #999!important;
cursor: pointer!important;
display: inline-block!important;
padding: 2px!important;
max-width: fit-content!important;
max-height: 24px!important;
border: none!important;
margin-right: 16px!important;
}
.a11yEditor-activeButton {
color: #5890ff!important;
}
.a11yEditor-editor {
border-color: rgba(0, 0, 0, 0.23);
cursor: text;
font-size: 16px;
top: -5px;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
transition: padding-left 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,border-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
border-style: solid;
border-width: 1px;
border-radius: 4px;
}
.a11yEditor-label{
width: fit-content;
user-select: none;
border: none;
/*root*/
transform-origin: top left;
display: block;
/*animated*/
transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
/*outlined*/
z-index: 1;
transform: translate(14px, 20px) scale(1);
pointer-events: none;
}
.a11yEditor-labelShrink {
transform: translate(14px, -10px) scale(0.75);
background-color: var(--white);
}
.a11yEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
display: none;
}
.a11yEditor-editor .public-DraftEditorPlaceholder-root {
margin-top: 0px;
margin-left: 14px;
user-select: none;
opacity: 0.3;
position: absolute;
}
.a11yEditor-editor .public-DraftEditor-content{
min-height: 50px;
max-height: 100px;
height: 100px;
padding: 0px 0px !important;
text-indent: 2vw;
/* margin: 0 -15px -15px; */
overflow-y: auto;
/* border-width: thin; */
/* border-style: ridge; */
/* width: 100%;
*/
}
.a11yEditor-focused{
border-width: 2px;
border-color: #3f51b5;
top: -5px;
left: 0;
right: 0;
bottom: 0;
margin: 0 1px 0 0;
padding: 0;
/* position: absolute; */
transition: padding-left 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,border-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
border-style: solid;
border-radius: 4px;
}
.a11yEditor-labelFocused,
.a11yEditor-labelFocused span
{
color: #3f51b5;
}
.a11yEditor-error{
border-color: #f44336;
}
.a11yEditor-labelError,
.a11yEditor-labelError span
{
color: #f44336;
}
.a11yEditor-editor blockquote {
display: block;
border-width: 2px 0;
border-style: solid;
border-color: #`;
padding: 1.5em 0 0.5em;
margin: 0 6em;
position: relative;
}
.a11yEditor-editor blockquote:before {
/* content: '\201C'; */
position: absolute;
top: 0em;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
width: 3rem;
height: 2rem;
font: 6em/1.08em 'PT Sans', sans-serif;
color: #666;
text-align: center;
}
/* .a11yEditor-editor blockquote:after {
content: "\2013 \2003" attr(cite);
display: block;
text-align: right;
font-size: 0.875em;
color: #e74c3c;
} */
.hide{
display: none!important;
}
.a11yEditor-editor ul,
.a11yEditor-editor ol,
.public-DraftStyleDefault-ol
{
padding-inline-start:40px;
}
.a11yEditor-error-heading{
border-width: 1px;
border-style: dotted;
border-radius: 4px;
border-color: #f44336;
}
As a STUDENT WITH SPECIAL NEEDS I want to extend Quiz time So that I can finish the activity
Scenario: Alert in Quiz with time constraint
GIVEN I'm doing a quiz
WHEN the system alert me that the time is almost out AND I have the option to extend time AND I click the option to extend time
THEN quiz time is extended
Scenario: Extra time option for a Quiz with time constraint
GIVEN I select to start a quiz
WHEN I click the option to extend time
THEN quiz time is extended
Scenario: No time option for a Quiz with time constraint
GIVEN I select to start a quiz
WHEN I click the option to disable time
THEN quiz time constraint is disabled.
STUDENT WITH SPECIAL NEEDS:
[Optional] Developer team add your technical tasks here
[Optional] Tester team, add your test procedures here
When teacher upload a complex image, long description field is enabled, so teacher can inform a image caption.
Then, teacher can select if caption will be positioned above or bellow the image.
If user select to change the audio content file, but closes the form, the system breaks.
Close modal and stays on authoring tool.
Redirects to a blank page.
ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9 TypeError: Cannot read property 'link' of undefined
at f.render (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:131)
at vs (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at fs (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at Nc (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at Yc (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at Xc (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at Pc (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
at t.unstable_runWithPriority (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at uo (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
Bs @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
Us.r.callback @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
Vo @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
Io @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
Zc @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
t.unstable_runWithPriority @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
uo @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
Jc @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
Pc @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
(anonymous) @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
t.unstable_runWithPriority @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
uo @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
vo @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
fo @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
le @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
jr @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:131 Uncaught TypeError: Cannot read property 'link' of undefined
at f.render (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:131)
at vs (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at fs (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at Nc (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at Yc (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at Xc (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at Pc (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
at t.unstable_runWithPriority (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
at uo (ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9)
render @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:131
vs @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
fs @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
Nc @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
Yc @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
Xc @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
Pc @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
(anonymous) @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
t.unstable_runWithPriority @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
uo @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
vo @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
fo @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
le @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
jr @ ca442eaa0b4b125aafcdc2c900fb1383f1cac271.js?meteor_js_resource=true:9
1.2.1
List the tasks required to accomplish the requirement (not exhaustive)
All contents not created by users (e.g. SELI "about" section text, buttons, fields) that STUDENT could consume
When TEACHER uploads a video content
IF TEACHER uploads a video-only content, i.e. checks the video-only checkbox
DEVELOPERS MUST render teacher's content with it respective text alternative, if teacher configured one. #159
Alternatives for time-based media that are text based make information accessible because text can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. In the future, text could also be translated into symbols, sign language or simpler forms of the language (future).
The purpose of the transcript is to provide an equivalent to what is presented visually. For prerecorded video content, authors have the option to provide an audio track.
The purpose of the audio alternative is to be an equivalent to the video. This makes it possible for users with and without vision impairment to review content simultaneously. The approach can also make it easier for those with cognitive, language and learning disabilities to understand the content because it would provide parallel presentation.
Sufficient techniques are reliable ways to meet the success criteria.
- From an author's perspective: If you use the sufficient techniques for a given criterion correctly and it is accessibility-supported for your users, you can be confident that you met the success criterion.
- From an evaluator's perspective: If web content implements the sufficient techniques for a given criterion correctly and it is accessibility-supported for the content's users, it conforms to that success criterion. (The converse is not true; if content does not implement these sufficient techniques, it does not necessarily fail the success criteria, as explained in Testing Techniques below.)
There may be other ways to meet success criteria besides the sufficient techniques in W3C's Techniques for WCAG document, as Other Techniques below. (See also Techniques are Informative above.)
In order to present the same information in accessible form, this technique involves creating a document that tells the same story and presents the same information as the prerecorded video-only content. In this technique, the document serves as a long description for the content and includes all of the important information as well as descriptions of scenery, actions, expressions, etc. that are part of the presentation
Example
An animation shows how to assemble a woodworking project. There is no audio, but the animation includes a series of numbers to represent each step in the process as well as arrows and picture-in-picture highlights illustrating how the assembly is completed. It also includes short outtake animations illustrating what will happen if assembly is done incorrectly. A text alternative that identifies the video-only content reads, "Breadbox assembly video (text description follows)," and the text description of the video includes a full text description of each step in the video.
Expected Results
All of the above checks are true.
Video-only content is inaccessible to people who are blind and to some who have low vision. Therefore, it is important for them to have an audio alternative. One way of doing this is to provide an audio track describing the information in the video. The audio should be a common audio format used on the internet, such as MP3.
Example
A Web page has a link to a video-only presentation of a spaceship landing on Mars. The link to the video is a picture of a spaceship. Near the video is a link to an audio file of a person describing the video. This would look something like the following code example in HTML.
<a href="../video/marslanding.mp4"><img src="../images/spaceship.jpg"
alt="Mars landing, video-only" width="193" height="255"/></a>
<br />
<a href="Mars_landing_audio.mp3">Audio description of "Mars Landing"</a>
For a Web page that contains video-only content:
Expected Results
Check #1 is true
Advisory techniques are suggested ways to improve accessibility. They are often very helpful to some users, and may be the only way that some users can access some types of content.
Advisory techniques are not designated as sufficient techniques for various reasons such as:
- they may not be sufficient to meet the full requirements of the success criteria;
- they may be based on technology that is not yet stable;
- they may not be accessibility supported in many cases (for example, assistive technologies do not work with them yet);
- they may not be testable;
- in some circumstances they may not be applicable or practical, and may even decrease accessibility for some users while increasing it for others;
- they may not address the success criterion itself, and instead provide related accessibility benefits.
Authors are encouraged to apply all of the techniques where appropriate to best address the widest range of users' needs.
The objective of this technique is to use the HTML5 track element to specify a descriptions timed text track for a video element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.
❗ As of February 2019 when this Advisory technique was last reviewed by the Working Group, there is no native support in user agents for this technique. However, support is available via JavaScript polyfills.
Example
A video element for a video in the English language. The audio descriptions are provided in the WebVTT format.
<video poster="myvideo.png" controls>
<source src="myvideo.mp4" srclang="en" type="video/mp4">
<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
</video>
For each video element used to play a video:
Expected Results
Check #1 is true
MUST This word, or the terms "REQUIRED" or "SHALL", mean that the definition is an absolute requirement of the specification.
MUST NOT This phrase, or the phrase "SHALL NOT", mean that the definition is an absolute prohibition of the specification.
SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.
SHOULD NOT This phrase, or the phrase "NOT RECOMMENDED" mean that there may exist valid reasons in particular circumstances when the particular behavior is acceptable or even useful, but the full implications should be understood and the case carefully weighed before implementing any behavior described with this label.
MAY This word, or the adjective "OPTIONAL", mean that an item is truly optional. An implementation which does not include a particular option MUST be prepared to interoperate with another implementation which does include the option, though perhaps with reduced functionality. In the same vein an implementation which does include a particular option MUST be prepared to interoperate with another implementation which does not include the option (except, of course, for the feature the option provides.)
A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert.
Do:
Example of current dialogs in SELI platform
No consistency!
An alertdialog divert users' attention to a brief, important message and can receive a response from user. Ensuring that, while the alertdialog is shown, keyboard and mouse interactions only operate within the dialog.
https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog
role= dialog | alertdialog
aria-labelledby=Title
aria-describedby=Content //content that describes the primary purpose or message of the dialog.Enables screen readers to announce the description along with the dialog title and initially focused element when the dialog opens.
aria-modal=true //Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert). Replaces aria-hidden
aria-expanded="true" // To make the content easier to read when displayed on small screens, the dialog fills 100% of the screen.
An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. Since alerts are not required to receive focus, content authors SHOULD NOT require users to close an alert.
https://www.w3.org/TR/wai-aria-practices-1.1/#alert
<Snackbar
ContentProps={{
'aria-describedby': 'snackbar-fab-message-id',
'role': 'alertdialog|alert',
'aria-live': 'assertive',
'aria-atomi': 'false',
}}
message={<span id="snackbar-fab-message-id">Archived</span>}
/>
1.2.8
For contents that are prerecorded synchronized media, to meet this requirement, SHOULD implement #11 with G69 technique
For contents that are video-only, to meet this requirement, SHOULD implement #9 with G159 technique
An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.
ℹ️ For 1.2.3(#11), 1.2.5(#12) , and 1.2.7(#13), if all of the information in the video track is already provided in the audio track, no audio description is necessary.
This approach involves providing all of the information in the synchronized media (both visual and auditory) in text form. An alternative for time-based media provides a running description of all that is going on in the synchronized media content. The alternative for time-based media reads something like a book. Unlike audio description, the description of the video portion is not constrained to just the pauses in the existing dialogue. Full descriptions are provided of all visual information, including visual context, actions and expressions of actors, and any other visual material. In addition, non-speech sounds (laughter, off-screen voices, etc.) are described, and transcripts of all dialogue are included. The sequence of descriptions and dialogue transcripts is the same as the sequence in the synchronized media itself. As a result, the alternative for time-based media can provide a much more complete representation of the synchronized media content than audio description alone.
A community center purchases a Training video for use by its clients and puts it on the center's intranet. The video involves explaining use of a new technology and has a person talking and showing things at the same time. The community center provides an alternative for time-based media that all clients, including those who can neither see the demonstrations nor hear the explanations in the synchronized media, can use to better understand what is being presented.
- MUST This word, or the terms "REQUIRED" or "SHALL", mean that the definition is an absolute requirement of the specification.
- MUST NOT This phrase, or the phrase "SHALL NOT", mean that the definition is an absolute prohibition of the specification.
- SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.
- SHOULD NOT This phrase, or the phrase "NOT RECOMMENDED" mean that there may exist valid reasons in particular circumstances when the particular behavior is acceptable or even useful, but the full implications should be understood and the case carefully weighed before implementing any behavior described with this label.
- MAY This word, or the adjective "OPTIONAL", mean that an item is truly optional. An implementation which does not include a particular option MUST be prepared to interoperate with another implementation which does include the option, though perhaps with reduced functionality. In the same vein an implementation which does include a particular option MUST be prepared to interoperate with another implementation which does not include the option (except, of course, for the feature the option provides.)
When open the accessibility configuration, should load previous settings
When open the accessibility configuration, the long description field's content are not being loaded.
Note: In both images, the text presented are the placehold
On a11yEditor
On line 666, I let it prepared to get content from localstorage
NOTE: Need to change for the correct database
// a function to only read localstorage **at first render**
const initialRaw = () => { localStorage.getItem(props.editorData) || ''; };
const [inputRaw, setInputRaw] = React.useState(initialRaw);
It is pending that at first render the DrafJs uses the raw to be instantiated. Something like this...
// const contentState = convertFromRaw(inputRaw);
// const [editorState, setEditorState] = React.useState(DraftJS.EditorState.createWithContent(inputRaw));
On line 746, it's saving content to localstorage, on every change of the content
My idea was that when user choosed to save all the "accessibility configuration", the backend function look for this "temporally storage" to persist the content
let raw = DraftJS.convertToRaw(currentContent);
setOutputRaw(raw);
localStorage.setItem('editorData', JSON.stringify(raw));
On line 937 there's the option to save content on user request (CTRL+S for instance)
if (command === 'myeditor-save') {
// TODO: Perform a request to save your contents, set a new `editorState`, etc.
return 'handled';
}
Is missing pass the props.editorData
<CaptionEditor id={'long-description-input'}
name={props.name}
label={props.label}
aria-describedby='long-description-help-container'
placeholder={props.placeholder}
value={props.value}
onChange={props.handleOnChange}
error={props.error}
required={props.required}
handleerror={props.handleerror}
//HERE
editorData={props.editorData}
/>
And every component that used the a11yLongDescription should pass form editorData the correct localstorage keyname (or other database)
For instance ImageAccessibilityForm
<A11YLongDescription
editorData='Caption'
/>
for instance
SELI-Platform: Subscription
SELI-Platform: Meteor Course
If a time limit is set by the content, the user must be able to turn off, adjust, or extend the time limit.
The user with accessibility needs must receive the same updates that a common user receives. For exemple, by making the screen reader informs to the student that the time is running out.
There is no alert about quiz time.
As student
Browser: all
Give teacher the option to
Give student the option to
1.2.2
List the tasks required to accomplish the requirement (not exhaustive)
SYSTEM MUST include SELI's videos contents with captions (embedded or not) for all videos that student may consume. #159
When TEACHER uploads a video content (not video-only)
IF TEACHER uploads a video content, i.e. video-only checkbox not checked
IF TEACHER uploads a video content without embedded captions, i.e. embedded captions checkbox not checked
SYSTEM MUST render teacher's video content with it captions, if teacher uploads one. #159
enable people who are deaf or hard of hearing to watch synchronized media presentations. Captions provide the part of the content available via the audio track. Captions not only include dialogue, but identify who is speaking and include non-speech information conveyed through sound, including meaningful sound effects.
Sufficient techniques are reliable ways to meet the success criteria.
- From an author's perspective: If you use the sufficient techniques for a given criterion correctly and it is accessibility-supported for your users, you can be confident that you met the success criterion.
- From an evaluator's perspective: If web content implements the sufficient techniques for a given criterion correctly and it is accessibility-supported for the content's users, it conforms to that success criterion. (The converse is not true; if content does not implement these sufficient techniques, it does not necessarily fail the success criteria, as explained in Testing Techniques below.)
There may be other ways to meet success criteria besides the sufficient techniques in W3C's Techniques for WCAG document, as Other Techniques below. (See also Techniques are Informative above.)
The objective of this technique is to provide a way for people who are deaf or otherwise have trouble hearing the dialogue in audio visual material to be able to view the material. With this technique all of the dialogue and important sounds are embedded as text in the video track. As a result they are always visible and no special support for captioning is required by the user agent.
Example
Expected Results
Check # 2 is true
The objective of this technique is to provide a way for people who have hearing impairments or otherwise have trouble hearing the dialogue in synchronized media material to be able to view the material and see the dialogue and sounds - without requiring people who are not deaf to watch the captions. With this technique all of the dialogue and important sounds are embedded as text in a fashion that causes the text not to be visible unless the user requests it. As a result they are visible only when needed. This requires special support for captioning in the user agent.
Example
Expected Results
Check # 3 is true
The objective of this technique is to use the HTML5 track element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.
Example
A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
<video poster="myvideo.png" controls>
<source src="myvideo.mp4" srclang="en" type="video/mp4">
<source src="myvideo.webm" srclang="fr" type="video/webm">
<track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
<track src="myvideo_fr.ttml" kind="captions" srclang="fr" label="French">
</video>
Expected Results
Check # 1 is true.
- MUST This word, or the terms "REQUIRED" or "SHALL", mean that the definition is an absolute requirement of the specification.
- MUST NOT This phrase, or the phrase "SHALL NOT", mean that the definition is an absolute prohibition of the specification.
- SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.
- SHOULD NOT This phrase, or the phrase "NOT RECOMMENDED" mean that there may exist valid reasons in particular circumstances when the particular behavior is acceptable or even useful, but the full implications should be understood and the case carefully weighed before implementing any behavior described with this label.
- MAY This word, or the adjective "OPTIONAL", mean that an item is truly optional. An implementation which does not include a particular option MUST be prepared to interoperate with another implementation which does include the option, though perhaps with reduced functionality. In the same vein an implementation which does include a particular option MUST be prepared to interoperate with another implementation which does not include the option (except, of course, for the feature the option provides.)
After audio content is created, user must have the option to configure the accessibility resources immediately.
Only the option to configure the accessibility later is enabled for user.
This is a "not-end" requirement. What I want to mean is that this should be considered for any new page you create that Student can access. Also should correct the old pages.
I will use the label Feature Design Notes to this cases
wcag: 3.3.4
For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true:
In this scenario, all forms with no exception, must apply to above rule
For Web pages that require the user to submit information, at least one of the following is true:
- Reversible
Submissions are reversible.- Checked
Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.- Confirmed
Providing the ability to recover deleted information
One approach is to delay deleting the data by merely marking it for deletion or moving it to a holding area (such as a trash can) and waiting some period of time before actually deleting it. During this time period, the user can request that the data be restored or can retrieve it from the holding area. Another approach is to record all delete transactions in such a way that data can be restored if requested by the user, such as in the edit history stored by wikis and source control applications.The retrievable information that is stored should be that which would be needed to correct the transaction.
Requesting confirmation to continue with selected action
Providing a checkbox in addition to a submit button
Expected Results: 2 is true.
Expected Results: all are true.
In a testing application or one that causes financial or legal transactions to occur and that also collects data from users in multiple steps:
Expected Results: 2 or 3 is true
For user input pages that cause irreversible transactions to occur:
Expected Results: all are true.
Expected Results: 3 is true.
Expected Results: Checks 2 and 3 are true
Expected Results: Checks 2 and 3 are true
Providing safeguards to avoid serious consequences resulting from mistakes helps users with all disabilities who may be more likely to make mistakes.
During course creation, teacher will be guided by system on web content accessibility, giving teacher the opportunity to add contents with accessibility resources.
This tool has the purpose to help teacher visualize accessibility problems by impairments.
item | label |
---|---|
Cognitive | Cognitive disabilities |
DiversityElderly | Elderly |
Auditory | Hearing disabilities |
Visual | Visual disabilities |
The overall accessibility progress of a given component is presented in a Circular Progress component
List of requirements by impairments |
---|
Cognitive disabilities |
Hearing disabilities |
Visual disabilities |
Elderly: all above |
Component | Accessibility Resource | Impacted disability |
---|---|---|
Image | Short Description (if not decorative image) | visual, cognitive |
Image | Long Description (only for complex image) | visual, cognitive |
Video and video-only | Short Description | visual, cognitive |
Video and video-only | Long Description [TRANSCRIPTION] | visual, cognitive |
Video | Caption ( embedded or uploaded) | hearing |
Video | Audio Description [NARRATION] ( embedded or uploaded a .vtt or alternative audio track) | visual |
Video | Sign Language ( embedded or uploaded) | hearing, cognitive |
Video | Seizure | cognitive |
Audio | Short Description | hearing, cognitive |
Audio | Long Description [TRANSCRIPTION] | hearing, cognitive |
Quiz | Descriptive identification | Visual |
Quiz | Extra Time | visual, cognitive, hearing |
Quiz | No Time | visual, cognitive, hearing |
Quiz | Warn Time | visual, cognitive, hearing |
Activity | Descriptive identification | Visual |
check #149 | ||
LINK | Link text | visual, cognitive |
For each content on Content Area, system shows the accessibility progress component (specified above) to present the overall accessibility status
The overall value presented is conditional to the Accessibility Validation Filter.
For example, supposing that a component has been configured 3 resources of a total of 6 resources. If all impairments is selected in Accessibility Validation Filter, the overall accessibility status will be 3/6. But if teacher filer by Visual impairments and in this hypothetical component only 2 of the 6 resources is necessary for Visual accessibility and 1 is configured, thus the overall presented will be 1/2
Before publish the course, teacher could see an accessibility report for the entire course.
When teacher finish to well configure all accessibility resources for the Inclusion Goal, Report should suggest to Teacher to review the accessibility of other groups. Only if the inclusion goal do not include all impairment groups
Report will present the overall accessibility status of the Inclusion Goal (100% in percentage) and a message about the achievement
Report will present the overall accessibility status for each impairment group not included in Inclusion Goal (in percentage)
Report will present the accessibility status for each topic/unit by impairment group not included in Inclusion Goal (in percentage)
Accessibility feedback given for each content on Content Area
Student can select category of abilities which he/she are within :
Student can select some default accessibility preferences for courses. Some examples above:
Student can select default accessibility preferences for SELI Courses page accessibility filter. The filter will be active by default in this case.
[ ] Base on student profile, system should automatically load course contents with the accessibilty resources preferences activated (if the course has the accessibility resource configured by teacher).
For instance
As a user with COGNITIVE DISABILITIES and option remove time when available in quiz/activities enabled in profile
WHEN starting a "quiz with time constraint configured to have no-time by teacher"
THEN system should start the quiz without time constraint
File dialog initiate with a filter for audio files (mp3, wav and ogg?) but user can upload any kind of file: other types of audio extensions and even not audio files.
User can't upload a file outside the restriction type.
User can select any kind of file, even no audio types (e.g.: pdf)
Need to perform validation on client-side and server (MIME-type). The accept attribute only helps filtering the files, it not restrict.
When user mark that video hasn't sign language interpreter embedded, the system enabled the upload button
This was working properly before please have a look at change history of the code.
How it work before
This was simplified version for prototype not covering the option to upload an additional video of the interpreter. To fully attend WCAG requirement, see requirements #15
When user mark that video **has sign language interpreter **, the system enabled the upload button
Please refer to task section of requirement #15
Above list is not an exhaustive, but meant to help you understand the problem. I'd suggest that when working in some existent code, to search for problems like this.
Browser: all
<a href="#content">TEXT DESCRIPTION</a>
or, using react component
<Link href="#content" onClick={preventDefault} className={classes.link}>
TEXT DESCRIPTION
</Link>
NOTE:
Custom widgets are interactive interface components designed to meet unique UX needs. They are created by adding functionality to native widgets or to non-interactive components such as
Custom widgets are most appropriate for complex controls (such as a text field, listbox, and button that together function as a combo box). For simple controls (such as buttons or links), it's better to use native widgets, as they require significantly less coding to make them accessible.
A custom widget usually requires an ARIA widget role to communicate the correct function to assistive technologies and enable them to interact with the widget.
If possible, replace the custom widget with a native HTML control. (As a rule, it's better to use native semantics than to modify them using ARIA roles.) If needed, use CSS styling to achieve the desired appearance.
If you can't use a native HTML control:
Most design patterns have additional requirements related to (1) roles, states, properties, and (2) keyboard interaction. These requirements are covered in the Custom widgets test.
Teacher must select the type of the image, so system could enable the field of short and long description correctly.
It was working properly before
Link added by teacher in activity content (authoring tool) are not rendering correctly.
The links added by one teacher in the authoring tool must render correctly.
The links are not being rendered as links, but as texts (the tag structure appears instead).
Add a link in the authoring tool. Render this link.
As a teacher
** As a student**
SELI - Accessibility test (slide 21)
Browser: all
Initial accessibility status should be 0/6
Initial accessibility status should be 1/6
Apparently, it's calculating accessibility status as valid for long description
After create a content system must add it to "content area"
If user clicks the "x" button of the accessibility configuration step modal, the previous created content is lost.
This kind of modal, where it's expected user select between options, must not have a close button ('x')
Instead of 3-steps to create and configure content, keep in one step.
If have any doubt on how to code this, I can help. I've done this before but it was lost in old Mateo's merges
After image content is created, user must have the option to configure the accessibility resources immediately.
Only the option to configure the accessibility later is enabled for user.
Every field of the accessibility forms has a related tip, presented with a information icon
The information icon is presented without a text
Check the component AccessibilityHelp which manage the feedbacks for the accessibility fields.
AccessibilityHelp from '../tools/AccessibilityHelp'
<AccessibilityHelp
id={'short-description-help-container'} //id of the feedback container
name={'shortDescriptionHelpContainer'} //name of the feedback container
error={props.error} //[bool] accessibility resource configuration status
tip={props.tip} // tip message
/>
It's necessary to adequate the RadioGroup react component to behaviour like a input radio native widget to provide accessibility support.
The radio groups does not provide the adequate description for the accessibility support nor behaviour as a native radio
Browser: all
Fix the react component as suggested
<RadioGroup aria-labelledby="rgtl1" name="question" value={value} onChange={handleChange}>
<h3 id="rgtl1">Question</h3>
<FormControlLabel value="option-one" control={<Radio />} label="Option 1" />
<FormControlLabel value="option-two" control={<Radio />} label="Option 2" />
<FormControlLabel value="option-three" control={<Radio />} label="Option 3" />
</RadioGroup
Quiz with time constraint should close after time end.
Timer is not starting. Visual feedback of time keep the same and quiz never close.
As a student
Debian SO
Chrome
1.2.3
AUTHORING TOOL
STUDENT MODULE
The objective of this technique is to provide an audio (spoken) version of information that is provided visually so that it is possible for people who cannot see to be able to understand audio-visual material.
Example
Expected Results
Checks # 1 and # 3 are true.
The objective of this technique is to provide a second version of video content that provides audio desciptions so that it is possible for people who cannot see to be able to understand audio-visual material.
Example
Expected Results
Checks # 3 and # 4 are true.
The objective of this technique is to provide a second version of video content that provides extended audio descriptions. One of the difficult things about creating traditional audio descriptions is that the narrator sometimes has to provide a lot of information during very short pauses in dialogue. Extended audio description temporarily pauses the audio and video to allow critical information to be delivered when pauses in dialogue are insufficient for adequate description.
Example
Expected Results
Checks # 2, # 3 and # 4 are true.
The purpose of this technique is to provide an alternative to audio description (...) This particularly applies to "talking head" videos where a person is talking in front of an unchanging background, such as a press conference, company president talk, or government announcement, etc. In this case there are no "important visual details" which would warrant audio description.
Example
Expected Results
All checks are true.
Advisory techniques are suggested ways to improve accessibility. They are often very helpful to some users, and may be the only way that some users can access some types of content.
Advisory techniques are not designated as sufficient techniques for various reasons such as:
- they may not be sufficient to meet the full requirements of the success criteria;
- they may be based on technology that is not yet stable;
- they may not be accessibility supported in many cases (for example, assistive technologies do not work with them yet);
- they may not be testable;
- in some circumstances they may not be applicable or practical, and may even decrease accessibility for some users while increasing it for others;
- they may not address the success criterion itself, and instead provide related accessibility benefits.
Authors are encouraged to apply all of the techniques where appropriate to best address the widest range of users' needs.
use the HTML5 track element to specify a descriptions timed text track for a video element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable.
❗ IMPLEMENTATION ALERT As of February 2019 when this Advisory technique was last reviewed by the Working Group, there is no native support in user agents for this technique. However, support is available via JavaScript polyfills.
Example
<video poster="myvideo.png" controls>
<source src="myvideo.mp4" srclang="en" type="video/mp4">
<source src="myvideo.webm" srclang="fr" type="video/webm">
<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
<track src="myvideo_fr.vtt" kind="descriptions" srclang="fr" label="French">
</video>
For each video element used to play a video:
Expected Results
Check # 1 is true.
For G78
- MUST This word, or the terms "REQUIRED" or "SHALL", mean that the definition is an absolute requirement of the specification.
- MUST NOT This phrase, or the phrase "SHALL NOT", mean that the definition is an absolute prohibition of the specification.
- SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.
- SHOULD NOT This phrase, or the phrase "NOT RECOMMENDED" mean that there may exist valid reasons in particular circumstances when the particular behavior is acceptable or even useful, but the full implications should be understood and the case carefully weighed before implementing any behavior described with this label.
- MAY This word, or the adjective "OPTIONAL", mean that an item is truly optional. An implementation which does not include a particular option MUST be prepared to interoperate with another implementation which does include the option, though perhaps with reduced functionality. In the same vein an implementation which does include a particular option MUST be prepared to interoperate with another implementation which does not include the option (except, of course, for the feature the option provides.)
1.2.6
Sign language interpretation is provided for all prerecorded audio content in synchronized media.
List the tasks required to accomplish the requirement (not exhaustive)
SYSTEM MUST include SELI's videos contents with sign language for all videos that student may consume.
IF TEACHER uploads a video content, i.e. video-only checkbox not checked
IF TEACHER uploads a video content without embedded sign-language, i.e. embedded sign-language checkbox not checked
SYSTEM MUST render teacher's video content with it sign-language, if teacher configure one.
For G81
Able Player is a fully accessible cross-browser HTML5 media player.
The intent of this Success Criterion is to enable people who are deaf or hard of hearing and who are fluent in a sign language to understand the content of the audio track of synchronized media presentations.
Sufficient techniques are reliable ways to meet the success criteria.
- From an author's perspective: If you use the sufficient techniques for a given criterion correctly and it is accessibility-supported for your users, you can be confident that you met the success criterion.
- From an evaluator's perspective: If web content implements the sufficient techniques for a given criterion correctly and it is accessibility-supported for the content's users, it conforms to that success criterion. (The converse is not true; if content does not implement these sufficient techniques, it does not necessarily fail the success criteria, as explained in Testing Techniques below.)
There may be other ways to meet success criteria besides the sufficient techniques in W3C's Techniques for WCAG document, as Other Techniques below. (See also Techniques are Informative above.)
One universally compatible way of doing this is to simply embed a video of the sign language interpreter in the video stream. This has the disadvantage of providing a lower resolution image that cannot be easily enlarged without enlarging the entire image.
NOTE
If the video stream is too small, the sign language interpreter will be indiscernible. When creating a video stream that includes a video of a sign language interpreter, make sure there is a mechanism to play the video stream full screen in the accessibility-supported content technology. Otherwise, be sure the interpreter portion of the video is adjustable to the size it would be had the entire video stream been full screen.Since sign language is not usually a signed version of the printed language, the author has to decide which sign language to include. Usually the sign language of the primary audience would be used. If intended for multiple audiences, multiple sign languages may be used. Refer to advisory techniques for multiple sign languages.
Example
Expected Results
Check # 2 and # 3 are true
This technique accomplishes this by providing the sign language interpretation as a separate video stream that is synchronized with the original video stream. Depending on the player, this secondary video stream can be overlaid on top of the original video or displayed in a separate window. It may also be possible to enlarge the sign language interpreter separately from the original video to make it easier to read the hand, body and facial movements of the signer.
Example
A university provides a synchronized sign language interpreter video stream that can be displayed, at the viewer's option, along with any of their education programs.
Expected Results
- MUST This word, or the terms "REQUIRED" or "SHALL", mean that the definition is an absolute requirement of the specification.
- MUST NOT This phrase, or the phrase "SHALL NOT", mean that the definition is an absolute prohibition of the specification.
- SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.
- SHOULD NOT This phrase, or the phrase "NOT RECOMMENDED" mean that there may exist valid reasons in particular circumstances when the particular behavior is acceptable or even useful, but the full implications should be understood and the case carefully weighed before implementing any behavior described with this label.
- MAY This word, or the adjective "OPTIONAL", mean that an item is truly optional. An implementation which does not include a particular option MUST be prepared to interoperate with another implementation which does include the option, though perhaps with reduced functionality. In the same vein an implementation which does include a particular option MUST be prepared to interoperate with another implementation which does not include the option (except, of course, for the feature the option provides.)
When user mark that video hasn't audio-description embedded, the system enabled the upload button
This was working properly before please have a look at change history of the code.
How it work before
See working the code
NOTE: this was a simplified version for the prototype version of SELI.
To fully attend WCAG requirement, see requirements #11 #12 #13
When user mark that video hasn't audio-description embedded, the system enabled the upload button
Please refer to task section of requirement #11
When user mark that video has NOT captions embedded, the system enables the upload button
When user mark that video has captions embedded, the system enables the upload button
If teacher checks that video has embedded video, this accessibility resource is valid.
If teacher checks that video has not embedded video, this accessibility resource isn't valid and system enables the upload button. Them, if teacher uploads an valid caption, this accessibility resource is valid.
Please, Refer Tasks section of requirement #10
1.1.1
For non-text content that is a control or accepts user input , such as images used as submit buttons, image maps or complex animations, a name is provided to describe the purpose of the non-text content so that the person at least knows what the non-text content is and why it is there.
<div role="navigation" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>
<div role="region" aria-label="weather portlet">
...
</div>
<div role="math" aria-label="6 divided by 4 equals 1.5">
<math xmlns="https://www.w3.org/1998/Math/MathML">
<mfrac>
<mn>6</mn>
<mn>4</mn>
</mfrac>
<mo>=</mo>
<mn>1.5</mn>
</math>
</div>
For each element where a aria-label attribute is present.
<form action="http://example.com/prog/text-read" method="post">
<input type="image" name="submit-publish" src="button1.gif" alt="Save and Publish" />
<input type="image" name="submit-save" src="button2.gif" alt="Save" />
</form>
For all input elements that have a type attribute value of "image"
NOTE
Elements that use explicitly associated labels are:
- input type="text"
- input type="checkbox"
- input type="radio"
- input type="file"
- input type="password"
- textarea
- select
The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button).- Submit and Reset buttons ( input type="submit" or input type="reset")
- Image buttons ( input type="image")
- Hidden input fields ( input type="hidden")
- Script buttons (button elements or )
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
<h1>Donut Selection</h1>
<p>Choose the type of donut(s) you would like then select
the "purchase donuts" button.</p>
<form action="http://example.com/donut" method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
<input type="submit" value="Purchase Donuts"/>
</p>
</form>
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select>
<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code"
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number"
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number"
type="text" size="4" value="" >
</fieldset>
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
Note: A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen label) it is difficult for non-visual users to pause and interrogate for corresponding row or column header values using their assistive technology while tabbing through the form.
For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button contains the information necessary to identify the control.
For all input elements of type text, file or password, for all textareas and for all select elements in the Web page:
For all input elements of type checkbox or radio in the Web page::
For all form controls that are not associated with a label element:
PERCEIVABLE: Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses) Provide text alternatives for non-text content. Provide captions and other alternatives for multimedia. Create content that can be presented in different ways, including by assistive technologies, without losing meaning. Make it easier for users to see and hear content.
A (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided
Reference requirements that should be meet together
#9
An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
Alternatives for time-based media that are text based make information accessible because text can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. In the future, text could also be translated into symbols, sign language or simpler forms of the language (future).
This technique involves creating a document that tells the same story and presents the same information as the prerecorded audio-only content. In this technique, the document serves as long description for the content and includes all of the important dialogue and as well as descriptions of background sounds etc. that are part of the story.
All of the above checks are true.
How to implement this requirement on SELI Platform?
<div id="id_video_box">
<h3>Audio title</h3>
<p id="id_short_desc"><!-- SHORT DESCRIPTION --></p>
<h3><button aria-expanded="false" aria-controls="id_req_acc">Available accessibility resources</button></h3>
<ul id="id_req_acc">
<li>Transcriptions</li>
</ul>
<audio id=audio autoplay="false" autoplay="controls" aria-describedby="id_long_desc" aria-labelby="id_short_desc">
<source src="audio.mp3" type='audio/mpeg'/>
</audio>
</div>
<button aria-expanded="false" aria-controls="id_long_desc">Audio Transcription</button>
<div><p id="id_long_desc"><!-- TRANSCRIPTIONS --></p></div>
List the tasks required to accomplish the requirement (not exhaustive)
All contents not created by users (e.g. SELI "about" section text, buttons, fields) that STUDENT could consume
When TEACHER upload an audio-only content SYSTEM MUST provide a field to TEACHER write/paste a text transcription
SYSTEM MUST render teacher's content with it respective text alternative, if teacher configured one
- MUST This word, or the terms "REQUIRED" or "SHALL", mean that the definition is an absolute requirement of the specification.
- MUST NOT This phrase, or the phrase "SHALL NOT", mean that the definition is an absolute prohibition of the specification.
- SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.
- SHOULD NOT This phrase, or the phrase "NOT RECOMMENDED" mean that there may exist valid reasons in particular circumstances when the particular behavior is acceptable or even useful, but the full implications should be understood and the case carefully weighed before implementing any behavior described with this label.
- MAY This word, or the adjective "OPTIONAL", mean that an item is truly optional. An implementation which does not include a particular option MUST be prepared to interoperate with another implementation which does include the option, though perhaps with reduced functionality. In the same vein an implementation which does include a particular option MUST be prepared to interoperate with another implementation which does not include the option (except, of course, for the feature the option provides.)
As a TEACHER I want to SETUP QUIZ WITH ALTERNATIVES TIMES CONSTRAINT
Scenario: Quiz without time constraint
GIVEN that I'm configuring a quiz
WHEN I set time to 0
THEN, quiz is created without time constraint
Scenario: Quiz with time constraint and extended time
GIVEN I'm configuring a quiz
WHEN I set time to greater than 0
AND select a extended time greater then 0
THEN , quiz is created with time constraint and extended time for student with special needs
Scenario: No-time option for a Quiz with time constraint
GIVEN I'm configuring a quiz
WHEN I set time to greater than 0
AND select no-time option
THEN , quiz is created with time constraint and no-time option for student with special needs
Scenario: Quiz with time constraint and extended time and no-time options
GIVEN I'm configuring a quiz
WHEN I set time to greater than 0
AND select a extended time greater then 0
AND select no-time option
THEN , quiz is created with time constraint and extended time and no-time options for student with special needs
[Optional] Developer team add your technical tasks here
[Optional] Tester team, add your test procedures here
For audio-only (no video) sign language is not required.
Please refer to Tasks in requirement #8
1.2.5
1.2.3(#11), 1.2.5, and 1.2.8(#13) overlap somewhat with each other. This is to give the author some choice at the minimum conformance level, and to provide additional requirements at higher levels. At Level A in Success Criterion 1.2.3, authors do have the choice of providing either an audio description or a full text alternative. If they wish to conform at Level AA, under Success Criterion 1.2.5 authors must provide an audio description - a requirement already met if they chose that alternative for 1.2.3, otherwise an additional requirement. At Level AAA under Success Criterion 1.2.8 they must provide an extended text description. This is an additional requirement if both 1.2.3 and 1.2.5 were met by providing an audio description only. If 1.2.3 was met, however, by providing a text description, and the 1.2.5 requirement for an audio description was met, then 1.2.8 does not add new requirements.
Audio description is provided for all prerecorded video content in synchronized media.
information_source For 1.2.3(#11), 1.2.5(#12) , and 1.2.7(#13), if all of the information in the video track is already provided in the audio track, no audio description is necessary.
The intent of this Success Criterion is to provide people who are blind or visually impaired access to the visual information in a synchronized media presentation. The audio description augments the audio portion of the presentation with the information needed when the video portion is not available. During existing pauses in dialogue, audio description provides information about actions, characters, scene changes, and on-screen text that are important and are not described or spoken in the main sound track.
A movie with audio description.
Describer: A title, "Teaching Evolution Case Studies. Bonnie Chen." A teacher shows photographs of birds with long, thin beaks.
Bonnie Chen: "These photos were all taken at the Everglades."
Describer: The teacher hands each student two flat, thin wooden sticks.
Bonnie Chen: "Today you will pretend to be a species of wading bird that has a beak like this."
Describer: The teacher holds two of the sticks to her mouth making the shape of a beak.
Transcript of audio based on the first few minutes of " Teaching Evolution Case Studies, Bonnie Chen" (copyright WGBH and Clear Blue Sky Productions, Inc.)
Long description field should show for complex images when editing accessibility configuration
Long description field is hide
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.