Science and Engineering Design Suite

Accessibility


Requirements for Level A

This website meets the WCAG A Requirements for Accessibility

Principle: Perceivable

Can people read the website?

Time-based Media

1.1.1 Non-text Content • All Images Should have alt text ✓ All Images have Alt Text

Time-based Media

1.2.1 Audio-only and Video-only (Prerecorded) • Any audio-only content should also be conveyed in text. Any video content with no audio track should also be described in text, but could also be described with audio. ✓ The site doesn't contain audio or video, for audio i would add transcrips and for video i would add narration 1.2.2 Captions (Prerecorded) • The audio in videos should be captioned. ✓ The site doesnt contain video, i would add captions for videos 1.2.4 Captions (Live) • Live videos that include audio should be captioned. ✓ There is no Live video but if there was i would add narration while broadcasting 1.2.5 Audio Description (Prerecorded) • Actions, descriptions, and other important non-audio content in videos should be described in captions or a separate audio track. ✓ The site doesnt contain audio, i would add narration as a audio file

Adaptable

1.3.1 Info and Relationships • Information or relationships between content that is visual is also conveyed through the code, via HTML or ARIA (for example the for attribute on a form label, or aria-describedby on an input that has hint text). ✓ The site has Aria land marks to identify regions of a page. 1.3.2 Meaningful Sequence • The visual presentation of the content matches what's read out by a screen reader. ✓ The order of the content on screen matches the screen reader 1.3.3 Sensory Characteristics • Nothing is referred to just by its colour, size, position, shape, and so on. ✓ I didnt have anything to utilises sensory information to be understood, i would add textual identification for the tems/element.

Distinguishable

1.4.1 Use of Color • Colour shouldn't be the only thing used to convey meaning. ✓ The color changes in the texts do not convey information, they were aesthetic choices to fit with the logo. 1.4.2 Audio Control • Auto playing audio that lasts more than 3 seconds can be turned down or stopped. ✓ There is no background music, i would add a mute button and audio slider at the top right 1.4.5 Images of Text • Text is actual text; not images of text. ✓ All the text apart from the logo is actual text

Principle: Operable

Can people use the content?

Keyboard Accessible

2.1.1 Keyboard ✓ Can you get around using the keyboard alone with the TAB key. 2.1.2 No Keyboard Trap ✓ There shouldn't be a situation where you enter a modal with the keyboard and can't get back to where you were. 2.1.4 Character Key Shortcuts ✓ Although there arn't any shortcuts i would use ctrl to prevent any mistaken button pressing.

Enough Time

2.2.1 Timing Adjustable ✓ This page doesn't have Timers but i would make them extendable. 2.2.2 Pause, Stop, Hide ✓ Automatically moving/animating content that lasts more than 5 seconds should be able to be stopped or hidden.

Seizures and Physical Reactions

2.3.1 Three Flashes or Below Threshold ✓ Nothing flashes, blinks, or flickers more than three times in one second.

Navigable

2.4.1 Bypass Blocks ✓ 'Skip links' are available for keyboard users to jump past navigation. 2.4.2 Page Tiled ✓ Each page has a unique title that describes what's on that page. 2.4.3 Focus Order ✓ When a keyboard user tabs through a page, the order goes from top to bottom and left to right, as you would read the page. 2.4.4 Link Purpose (In Context) • I ensured that each web page had a descriptive title. ✓ The link text itself ✓ The information in the sentence leading up to the link

Input Modalities

2.5.1 Pointer Gestures ✓ All actions that are carried out using a gesture (swiping, pinching, and so on) or drawing, can also be done with a button or buttons. 2.5.2 Pointer Cancellation ✓ Actions (like pressing a button) aren't triggered on mouse-down; rather on mouse-up. 2.5.3 Label in Name ✓ The visible text of a form field, button, or link matches the text in the underlying code. 2.5.4 Motion Actuation ✓ There is no reliance on device motion, like shaking or tilting, to carry out an action.

Principle: Understandable

Can people understand the content?

Readable

3.1.1 Language of Page ✓ There's a lang attribute on the html element that matches the language of the page.

Predictable

3.2.1 On Focus and 3.2.2 On Input • Nothing unexpected changes when: ✓something on the page receives keyboard focus, like a button ✓the value of a form field, like an option in a select, is chosen 3.2.3 Consistent Navigation ✓ Navigation is consistent from page to page. 3.2.4 Consistent Identification ✓ Things that carry out a particular function should always look and work the same.

Input Assistance

3.3.1 Error Identification and 3.3.3 Error Suggestion ✓ Error/validation messages should be communicated in text, and should provide suggestions to help the user successfully proceed. 3.3.2 Labels or Instructions ✓ As much help as is needed is offered to prevent triggering a form error; the form label may be enough, but hint text may also be required. 3.3.4 Error Prevention (Legal, Financial, Data) ✓ Things that carry out a particular function should always look and work the same.

Principle: Robust

Can machines (browsers, screen readers, etc.) read the code?

Compatible

4.1.1 Parsing ✓ The markup has been validated and there are no errors, such as duplicate ids, missing tags, and invalid child elements. 4.1.2 Name, Role, Value ✓ The semantic meaning of every interactive element (form controls, links, headings, landmarks, tables, and so on) is correct, and each has an accessible name.