Web accessibility

Nottingham Trent University is committed to providing an online environment that is accessible to everyone.

Accessibility policy

Our website is designed to comply with Web Content Accessibility Guidelines (WCAG) 2.0 AA standards and the University brand guidelines.

We believe the web should be accessible to all. It shouldn’t just be limited to HTML and CSS, but should also apply to other aspects of running a successful website. This includes:

  • Code

    HTML

    Our website is built using HTML5 according to W3C standards.

    CSS

    Our website is built using CSS3 according to W3C standards.

    JavaScript

    We use JavaScript and JQuery to improve the functionality of our site. We will always ensure that its use complies with WCAG 2.0 AA standards. However some site functionality may not work if JavaScript is disabled or unavailable.

  • Mobile accessibility guidelines

    Using W3C guidelines for mobile accessibility, and to help users of mobile devices use our site, we have a responsive and adaptive design that will display the content in a readable manner suited to the device it is viewed on.

    For mobile accessibility we ensure that the browser pinch zoom is not blocked by the page's viewport meta element so that it can be used to zoom the page to 200%.

  • Colour contrast

    As part of our brand guidelines we have chosen a suite of colours to work across all media. Where we use our brand colours they should pass WCAG AA colour contrast standards. Although any coloured text should also meet this standard.

  • Links

    All links on our website should open in same window. If this is not the case an icon will indicate that the link will open a new window.

  • Text on images

    If it is possible to use text to achieve the same visual effect as an image this is how the information should be presented rather than using an image.

  • Documents

    Documents will only be used where necessary. Where they are used it should only be in PDF format and will be clearly identified as a PDF.

  • Video/Audio

    Where we provide video or audio it should be accompanied with a transcript. Where suitable we will also provide the option for subtitles.

    Note: We have taken the decision not to include separate audio descriptions (as well as transcripts) on our site. This does mean that provision of video will fall short of the WCAG 2.0 AA standards. However we will aim to provide descriptive audio within our videos where suitable. For example; Accommodation videos should describe the environment as well as providing a message.

  • Flashing content

    No element should flash more than three times in any one second period, and the flash is below the general flash and red flash thresholds.

Browsers and devices

As a well-built and compliant site we should display on all current browsers and devices. However, we only test on the following devices as they represent the majority of our users.

  • The most recent versions of Microsoft Edge, Chrome, Firefox and Safari
  • iPhone and iPad – the two most recent versions
  • Android - Samsung Tab (tablet) and Galaxy phone – the two most recent versions with default browser
  • Chrome browser on most recent Samsung Galaxy phone

Exceptions

  • Non-migrated ntu.ac.uk content

    This policy was written with our new design and CMS in mind. As such we are not able to make all of our old content fully compliant. This includes:

    • Links to open an external site have icon displayed.
    • Touch target size and spacing.
    • Provision of transcripts - audio only and video only
    • Set the virtual keyboard to the type of data entry required

  • Third party tools

    Where possible the university will try to ensure that any third party tools comply with this policy, however market restrictions may not make this possible. Current examples are:

    • Video / audio player
      • JWPlayer
    • AddThis
    • CoverItLive
    • Google Maps

    We will ensure that third party systems and the manner of their integration do not lead to keyboard users to become stuck with a system integrated into our site.

  • Third party sites

    University sites built outside of our main CMS should strive to abide by this policy where possible. Sites will be checked periodically.

    • Trent Lets
    • Accommodation
    • Vacancies
    • Alumni

  • Feeds from third party systems

    Where possible the university will try to ensure that any third party feeds comply with this policy, however we cannot be responsible for the markup on the site. Current examples are:

    • The Conversation

Testing and validation

If you have a question, have spotted something we have missed or want to raise and issue please email us.

Accessibility standards

Good accessibility helps all users to get the most out of a website it will also benefit search engine optimisation. A video transcript not only makes the contents of a video accessible to blind and deaf users but also has the following benefits:

  • It is great for search.
  • It allows people to scan content which is hard in audio.
  • It makes referencing content easier.
  • It provides access to those unable to listen to audio because of disturbing others (e.g. in an office).

It is not just transcripts that benefit many different kinds of people, all accessibility features can.

These standards list all the WCAG guidelines required to reach AA standard as well as some other guidelines we feel add to the accessibility of our site.

The guidelines are roughly grouped into the disciplines to allow for a friendly reading format. However we have to cover each guideline as it occurs across all disciplines.

The Digital Marketing and Creative Services department reserves the right to remove any content from the site that is deemed to have failed to meet out accessibility guidelines and policy.

Design

  • Responsive templates

    Guidance:  https://www.w3.org/TR/mobile-accessibility-mapping


    To help users of mobile devices use our site we have a responsive design that will display the content in a readable manner suited to the device it is viewed on.

    • Example: Page resizes to display correctly on a mobile device.
    • Implementation: HTML and CSS coding.
    • Test: New template and components will be checked across our device range before release.

    More:

    • HTML boxes
    • Template and component updates
    • Forms
    • Form updates
    • Plugins
    • Plugin updates

  • Changing screen orientation

    Guidance: https://www.w3.org/TR/mobile-accessibility-mapping/#changing-screen-orientation-portrait-landscape

    Our design should support both orientations of a device and not restrict to only one.

    • Example: Site works in portrait and landscape
    • Implementation: HTML and CSS coding
    • Test: Change mobile device orientation both ways.

  • Sensory characteristics

    Required A: https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html

    Use more than one sense (shape, sound, position and size) for an instruction.

    • Example: Arrows on a carousel use shape and position to indicate next or previous actions.
    • Implementation: Next arrow positioned on the right and previous positioned on the left.
    • Test: Manual check of layout.

    Tests

    Pre-launch testing, regression testing and spot checks.

    Tools

    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual

    Manual check of layout.

  • Use of colour

    Required A:  https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html

    Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

    Tests

    Pre-launch testing, regression testing and spot checks.

    Tools

    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual

    Manually review designs, layouts and new developments and confirm that colour is not being used as the sole method to convey information or convey an action.

  • Contrast (minimum)

    Required AA: https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

    As part of our brand guidelines we have chosen a suite of colours chosen to work across all media. Where we use our brand colours they should pass WCAG AA colour contrast standards.

    This is a ratio of 4.5:1 for text 18pt or less in size, and 3:1 for text larger than 18pt or text that is bold and larger than 14pt.

    Tests

    Pre-launch testing, regression testing and spot checks.

    Tools

    HTML_CodeSniffer can provide errors for text over plain backgrounds and will provide warnings when text is used over images (even if contrast sufficient).
    Use Snook Colour Contrast Checker to confirm the contrast ratios of anything that looks unsuitable.

    Manual

    Manually review designs, layouts and new developments and use Snook Colour Contrast Checker to confirm the contrast ratios of anything that looks unsuitable. Pay particular attention to text used over images.

  • Font

    As part of our brand guidelines we have chosen a font (Museo Sans) to work across online media that is clear, concise and easy to ready. However, should the font not work it defaults to Arial without effecting the site layout.

    • Test: Manual check of font specified in CSS and that site layout is not affected if Museo Sans is not available.

    Font size

    https://developers.google.com/speed/docs/insights/UseLegibleFontSizes

    Use a baseline font size of 16 CSS pixels. Adjust the size as needed based on properties of the font being used. Small fonts should not be less than 75% of the baseline of 12 CSS pixels.

  • Resize text

    Required AA: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html

    Except for subtitles and images of texttext can be resized without assistive technology up to 200% without loss of content or functionality.

    Note: For mobile accessibility we ensure that the browser pinch zoom is not blocked by the page's viewport Meta element so that it can be used to zoom the page to 200%. https://www.w3.org/TR/mobile-accessibility-mapping/#zoom-magnification

    • Example: User magnifies site to improve text visibility.
    • Implementation: All text sizes should be consistently specified as em and percentages not as px. Using px does not allow a user to define the font size in their browser.

    Tests

    Pre-launch testing, regression testing and spot checks.

    Tools

    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual

    Manually resize page content to 200%.

  • Consistent navigation

    Required AA: https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-consistent-locations.html

    Keep all navigation in the same place on all pages. This does not mean that sub-navigation cannot appear on pages as required as long as that appearance is consistent across the site.

    • Example: Navigation should be in the same location on a page whether a user is in course finder or a hub page.
    • Implementation: Template build

    Tests

    Pre-launch testing, regression testing and spot checks.

    Tools

    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual

    Check that navigational elements remain consistent (position and order) across the site.

  • Consistent identification

    Required AA: https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-consistent-functionality.html

    The same icons and buttons should be consistently  used across the website to ensure a user knows what one means the next time they come across one.

    • Example: Links to open an external site have icon displayed.
    • Implementation: Automatic by CMS.

    Tests

    Pre-launch testing, regression testing and spot checks.

    Tools

    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual

    Check that same icons and buttons are used across the site.

  • Touch target size and spacing

    Guidance: https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately?hl=en

    The design should allow for suitable spacing between tough targets when viewed on a touch screen. The spacing should be 7mm (48 CSS pixels) or 5mm (32 CSS pixels) for less used links.

    • Example : Radio buttons (and other form inputs) should have a 7mm space between them so that they can be easily selected on a touch screen without the need to zoom.
    • Implementation: Coding in system.
    • Test: Pre-launch and regression testing.

Content

  • Information and relationships, and meaningful sequence

    Required A:

    https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html

    https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html


    Ensure the page, its contents and html is structured so that makes sense visually and for all other technologies. Key priorities for content are:

    Users

    • Break up content with subheadings for new sections.
    • Use headings in the correct order.
    • Use the correct type of list; ordered or unordered.
    • Tables

    System

    • Use the correct HTML for all structural elements.
    • Use valid HTML everywhere else.
    • Use clear labels on forms.
    • CSS is not used to reorder elements leaving them in an order that does not make sense in the HTML.
    • Example
      In a multi-column document, the linear presentation of the content flows from the top of a column to the bottom of the column, then to the top of the next column.
    • Implementation
      Designed templates and thought out structure when inputting content.
    • Tests
      Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide errors for certain techniques in 1.3.1 but this does include the main ones. It does not error for 1.3.2 and only provides a notice.


    Manual

    • A manual sense check of warnings and notices in HTML_CodeSniffer.
    • Manual check of page content and layout.
    • Meaningful sequence 1.3.2 must be checked manually.

  • Using table markup to present tabular information

    Guidance: https://www.w3.org/TR/WCAG20-TECHS/H51.html

    Present tabular information in a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed.

    Example:

     MondayTuesdayWednesdayThursdayFriday
    8 am - 9 amCourse induction    
    9 am - 10 am  Meet lecturerLab practical 

    Implementation: Ensure that the correct table headers are used in the correct place when adding/editing tables.

    Test: HTML_CodeSniffer. As well as QA and spot checks.

  • Page titles

    Required A: https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html

    Webpages should have titles that describe the topic of the page. It is good practice that the title of the page and the content of links to the page are similar.

    • Example: A page about culture in Nottingham should be titled “Nottingham culture” not just “Culture”.
    • Implementation: Complete Page name (or relevant field) in CMS.

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer provide errors on missing or empty title tags in the head section of documents.

    Manual
    Not required.

  • Link purpose

    Required A: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html

    The purpose of a link must understandable from the link text alone.

    • Example: A page contains the sentence "There was much bloodshed during the Medieval period of history." Where "Medieval period of history" is a link.
    • Implementation: Write meaningful links and avoid links like “Click here”.

    Tests
    QA and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Confirm that the text of the link is meaningful to the destination and/or has a title link if relevant.

  • Consistent behaviour

    Guidance: https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior.html

    Make Web pages appear and operate in predictable ways.

    • Example
      All links on our website should open in same window. If this is not the case an icon will indicate that the link will open a new window .
    • Implementation
      Automatically added by the University’s CMS but should also be included by other systems.
    • Test
      Pre-launch testing, regression testing and spot checks.

  • Navigation

    Required AA: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-mult-loc.html

    There should be more than one way to find a page except where the page is a step in a process. This should include internal links as well as search.

    • Example: A page should be available from the navigation of the site as well as there being links to it from its parents, siblings and cousins within the site structure.
    • Implementation: Ensure all content pages are in the structured navigation unless the page is a step in a process.

    Tests
    Pre-launch testing, regression testing, QA and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Check page is part of the site structure and navigation or confirm that it is a step in a process and does not need to be accessed in by any other route.

  • Headings and labels

    Required AA: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html

    Each page should have one h1   with the following headings (h2, h3, h4) following in a sequential and logical order. Headings should be used to clearly define content areas on page and clearly describe the topic or purpose.

    • Example: Headings in body content should be H2s and H3s used in the right order and priority.
    • Implementation: Thought out structure when inputting content.

    Tests
    Pre-launch testing, regression testing, QA and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Pages should be checked to ensure that headers semantically make sense and are descriptive of the content below them.

Images

  • Non-text content

    Required A: https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/text-equiv-all.html

    Provide text alternatives for non-text content.

    • Example: Use well written Alt tags for images.
    • Implementation: Write well written Alt tags for images.

    Tests
    QA and site spot checks.

    Tools
    HTML_CodeSniffer checks for the existence of an alt tag but not the quality.

    Manual
    To confirm that the alt tag is descriptive of the image content or that alt=”” is used if no alt tag required.

  • Images of text

    Required AA: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html

    If an author or the available technologies can use text to achieve the same visual effect this is how the information should be presented rather than using an image.

    Note: A company logo does not need to be represented as text providing a suitable alt tag is used.

    • Example: Clearing phone number should be represented by text over an image not in an image.
    • Implementation: HTML and CSS coding.

    Tests
    QA, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Manually confirm if an image has text in it. If suitable to be used this way then confirm the alt tag conveys the same message as the text in the image.

Documents

Video, moving content and audio

  • Audio-only and video-only content

    Required A: https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html

    Provide an alternative to video-only and audio-only content. The university has decided to provide transcripts as the standard alternative.

    • Example: Transcripts should be available for video and audio content.
    • Implementation: Transcripts to be created and uploaded with video and audio.

    Tests
    Pre-launch testing, regression testing and spot checks

    Tools
    HTML_CodeSniffer  can only provide notices on this so manual checks are required.

    Manual
    Confirm that a transcript is available for all videos on a page.

  • Captions (subtitles) - pre-recorded and live

    Required AA
    http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/media-equiv-captions.html
    https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/media-equiv-real-time-captions.html

    Subtitles will be provided for all prerecorded video and audio then where viable for live streamed video and audio.

    • Disclaimer: The University accept that if we cannot provide subtitles for a live stream then we fail this criteria.
    • Example: Graduation ceremonies that are streamed live should include live subtitles.
    • Implementation: Live subtitles will be embedded into the web page containing the video.

    Tests
    Pre-launch testing, regression testing and spot checks

    Tools
    HTML_CodeSniffer  can only provide notices on this so manual checks are required.

    Manual
    Manual check of subtitles at the start of the broadcast.

  • Audio description or media alternative (live or pre-recorded)

    Required AA

    https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html
    https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/media-equiv-audio-desc-only.html
    https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-text-doc.html

    An alternative version of a video with audio description should be available, removing the need for a transcript.

    Disclaimer: The University has taken the decision that it cannot provide an audio description for video content and accept that we then fail this criteria.

  • Pause, stop, hide

    Required A: https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/time-limits-pause.html

    The intent of this Success Criterion is to avoid distracting users during their interaction with a web page. This means that our video player and any content that moves for more than 5 seconds (this includes scrolling) can be stopped or paused.

    • Example: The website’s video player should have controls to enable the user to pause, stop or hide the content.
    • Implementation: Configuration of the player.

    Tests

    Pre-launch testing, regression testing and spot checks.

    Tools

    HTML_CodeSniffer can provide errors on blinking elements but only notices for most moving elements so manual checks are required.

    Manual

    Upon page load confirm that moving or auto-updating content can be paused, stopped or muted.

  • Three flashes or below

    Required A: https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html

    No element should flash more than three times in any one second period, and the flash is below the general flash and red flash thresholds.

    • Example: A film with content that has a light to dark contrast that rapidly changes at speeds of three flashes per second or more.
    • Implementation: Consideration during the creation of moving content.

    Tests
    Pre-launch testing, QA and spot checks.

    Tools
    HTML_CodeSniffer cannot test against this criterion on this so manual checks are required.

    Manual
    Slow video down and check there aren’t more than seven dark to light transitions in one second.

Code and development

  • Keyboard

    Required A: https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html

    All functional elements in the website must be operable and navigable with a keyboard.

    • Example: A signature field on a form cannot accept handwriting (mouse or stylus controlled) only it should also allow typing.
    • Implementation: Coding in system.

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide warnings on this so manual checks are required.

    Manual
    Confirm that interactive elements on the page can all be controlled by the keyboard.

  • No keyboard trap

    Required A: https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html

    Content should not trap keyboard users within a subsection of a web page.

    • Example: A user tabs into a plug-in and is unable to return to content outside the plug-in content with the keyboard.
    • Implementation: Coding in system.

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide warnings on this so manual checks are required.

    Manual
    Confirm that there are elements on the page can the cursor to get trapped whilst using keyboard controls.

  • Timing adjustable

    Required A: https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html

    Any content that sets a time limit on a user reading it should be able to be stopped, paused or the timing changed.

    • Example: A carousel that automatically moves on at pre-defined time.
    • Implementation: Coding in system

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can provide errors on meta refreshes that affect the whole page. But not time limits that may be set on other content so manual checks are required.

    Manual
    Manual that there are controls available for any content that may be affected by a time limit.

  • Bybass blocks

    Required A

    https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html

    Allow users of assistive technologies to bypass standard blocks of content and skip straight to the main content of the page.

    • Example: Screen readers can skip the header and navigation on a page and go straight to the main content.
    • Implementation: The main content of a page should have the WAI-ARIA main landmark role.
    <div role=”main” id=”mainContent”>Content</div>

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can provide errors on iframes with empty of missing title attribute but not other cases so manual checks required.

    Manual
    Check that an option to skip repeat content (navigation etc) is provided and that it works.

  • Focus order

    Required A https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html

    All functional elements in the website must receive focus in an order that preserves the meaning of the page.

    • Example: A signature field on a form cannot accept handwriting (mouse or stylus controlled) only it should also allow typing.
    • Implementation: Coding in system.
    • Test: Navigate the entire page content with only the keyboard. Checking content is accessed in the correct order.

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Navigate the entire page content with only the keyboard. Checking content is accessed in the correct order.

  • Focus visible

    Required AA https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

    All selectable fields in the site should have a visual cue that they have been selected.

    • Example: If a form field is selected the border may change and a cursor appears in the field.
    • Implementation: Coding in system

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Ensure that all elements on a page visually identify themselves when selected via keyboard controls.

  • Language of page

    Required A https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/meaning-doc-lang-id.html

    All webpages should have the correct language assigned to it.

    • Implementation: <html lang="en">

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer provides errors if the lang attribute is missing, empty or in the wrong format/ However it cannot check if the correct language is set so manual checks are required.

    Manual
    HTML_CodeSniffer cannot check if the correct language is set so manual checks should be made to every page that is not standard. This should also be checked as part of spot checks and regression testing.

  • Language of parts

    Required AA: https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-other-lang-id.html

    If a page contains a section of content in a different language this should be identified with the lang attribute. This does not apply to names, technical terms and phrases that makes sense to the surrounding content.

    • Implementation: <div lang="en">

    Tests
    Pre-launch testing, regression testing, QA and spot checks.

    Tools
    HTML_CodeSniffer provides errors if the lang attribute is missing, empty or in the wrong format/ However it cannot check if the correct language is set so manual checks are required.

    Manual
    HTML_CodeSniffer cannot check if the correct language is set so manual checks should be made to every page that contains non-standard language elements.

  • On focus

    Required A  https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/consistent-behavior-receive-focus.html

    Elements of a site do not change when the y receive focus. Focus includes landing on a component by tabbing on the keyboard or clicking with the mouse.

    • Example: As a keyboard user tabs through a form and lands on an information button this does not automatically open a new window.
    • Implementation: Coding in system

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Check all interactive elements on page to confirm that they don’t change context when in focus.

  • On input

    Required A: https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html

    Elements of a site do not change context when they receive input.

    • Example: Forms must not auto-submit when they are filled in.
    • Implementation: Coding in system

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer provides an error if a form does not display an accompanying submit but there are other ways to fail this criteria that are not reported..

    Manual
    Check all interactive elements on page to confirm that they don’t change context when they receive input.

  • Error identification

    Required A  https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html

    If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

    • Example: If a user enters text into a telephone number field an error displays identifying the field and explaining the issue.
    • Implementation: Coding in system

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Confirm that friendly errors are displayed for all required or validated fields.

  • Labels and instructions

    Required A  https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html

    Labels or instructions are provided when content requires user input.

    • Example: A field for entering a date contains initial text which indicates the correct format for the date.
    • Implementation: Coding in system

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Check that all labels on form fields are clear and descriptive.

  • Error suggestion

    Required AA  https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-suggestions.html

    If a user inputs an error and it can be automatically detected and suggestions for correction are known, then the suggestions should be provided to the user, unless it would jeopardize the security or purpose of the content.

    • Example: For email fields form suggests that email has not been entered correctly if @ is not present.
    • Implementation: Coding in system.

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Check that where possible error messages suggest the correct method to complete the field.

  • Error prevention (legal, financial and data)

    Required AA  https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/minimize-error-reversible.html

    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 should allow Users to review, confirm and correct information before finalizing the submission.

    • Example: Confirmation page provided before submitting key details.
    • Implementation: Coding in system.

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer can only provide notices on this so manual checks are required.

    Manual
    Check that a confirmation page or similar is provided before submitting key details.

  • Parsing

    Required A  https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html

    In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

    • Example: Ensure that an unordered nested list has the correct opening and closing ul and li tags.
    • Implementation: Coding in system. Matrix automatically closes open tags on saving.

    Tests
    Pre-launch testing, regression testing, QA and spot checks.

    Tools
    HTML_CodeSniffer provides errors on duplicate IDs but not missing end tags this so manual checks are required.

  • Name, role, value

    Required A  https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html

    For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

    A particularly important state of a user interface control is whether or not it has focus. The focus state of a control can be programmatically determined, and notifications about change of focus are sent to user agents and assistive technology.

    • Example: When embedding third party content in an iframe, a user should be able to get an idea of the iframes content without entering it.
    • Implementation: Coding in system. The iframe should be given a meaningful and descriptive title attribute.

    Tests
    Pre-launch testing, regression testing and spot checks.

    Tools
    HTML_CodeSniffer provides errors on link and anchor tag issues but not on other areas so manual checks are required.

    Manual
    Confirm that all user interface components have their name, role and value correctly set.

  • Set the virtual keyboard to the type of data entry required

    Guidance  https://www.w3.org/TR/mobile-accessibility-mapping/#set-the-virtual-keyboard-to-the-type-of-data-entry-required

    Mobile device users should be served the specific keyboards to suit a form fields control set in HTML5.

    • Example: When a user is asked to enter a phone number the numpad displays not the full keyboard.
    • Implementation: Coding in system.
    • Test: Pre-launch testing, regression testing and spot checks.

If you have a question, have spotted something we have missed or want to raise and issue please email us.

Still need help?

+44 (0)115 941 8418