Accessibility

  • Updated

The following actors, components, views, and other items in a Portal can be used with assistive technology:

Disclosure

  • Disclosures fully functional with keyboard

    • Disclosure description is tabbable and read by screen readers

    • Disclosure checkbox comes with aria-label="Disclosure acknowledgment"

  • No configuration change

Dialog

  • Dialogs fully functional with keyboard

    • Dialog title is tabbable and read by screen readers

    • Dialog content is tabbable and read by screen readers

    • Dialog confirm and cancel buttons are tabbable and have aria-labels "Confirm button" and "Cancel button" respectively

  • No configuration change

Images

  • Images fields can now be fully configured in builder

    • Images tabbable and alt-text read by screen reader

    • Alt-text for images configurable in builder

    • Image src configurable in builder

Accessibility 1.png

Example JSON

{
  "id": "a09a252f-7e24-4dd7-9ea6-cc2fec53564b",
  "fieldName": "AccountNumber",
  "fieldUi": {
    "fieldType": "image",
    "label": "Account Number",
    "defaultValue": "https://picsum.photos/id/989/200/200",
    "imageAltText": "Lorem picsum picture"  }
}

Links

  • Link fields can be fully configured in builder

    • Links tabbable

    • Link aria-labels added to builder

      • Supports $ variables (E.g. $global.attr(websiteName);)

      • Read by screen-reader over actual link text

    • Works with relation fields (I.e. "clcommon__Navigation_Structure__r.Name")

Example JSON

{
  "id": "49062480-f0ea-4e03-acfe-1ec31eb354d1",
  "fieldName": "Name",
  "fieldUi": {
    "fieldType": "link",
    "label": "Account Name",
    "defaultValue": "Link to Google",
    "linkTemplate": "$global.attr(google);",
    "ariaLabel": "Google link"  }
}

Range Slider

  • Range Slider accessibility limitations due to material-ui v3

    • Range Slider TextField not tabbable

Accessibility 2.png

Page-include

  • Page-include fully configurable in builder

    • ariaLabel attribute to content property

    • aria-label tag added to iframe

Static Content

  • Static Content fully configurable in builder

    • ariaLabel attribute to content property (same attribute used in page-include)

    • aria-label tag added to div containing static content

Example 4. Example JSON

Property: {
  "ariaLabel": "Page-include or static content aria label"}

Actions

  • New attribute ariaLabel added to action configuration

    • "ariaLabel": "Insert aria label here"

  • Screen reader will read aria-label over label text

  • Menu buttons are identified as popup buttons by screen readers

  • Action tooltip will be read by screen reader in addition to aria-label

Example JSON

{
  "name": "next1",
  "actionType": "upload",
  "property": {},
  "appearance": {
    "style": "primary",
    "label": "Next",
    "position": "bottom-right"  },
  "successHandler": {},
  "failureHandler": {},
  "pendingHandler": {},
  "handler": {},
  "ariaLabel": "Upload"}

Components

Note

headerField used only by List-view

Example JSON

Appearance: {
  "accessibility": {
    "ariaLabel": "aria label for component actors"    "headerField": "AnnualRevenue"    
  }
}

List view

  • List-view table is tabbable

  • List-view aria-label configurable in builder

  • Table row header configurable in appearance JSON, if none specified, first field becomes row header

  • When entries are selectable, checkbox will reference headerField on that row

  • Select all checkbox comes with dynamic aria-labels denoting if all checkboxes are checked

  • Pagination buttons comes with hard-coded aria-labels

  • Sortable fields have dynamic aria-labels defining direction of sort

Queue view

  • Queue-view list is tabbable

  • Queue-view aria-label configurable in builder

  • Selectable checkboxes labelled by Primary & Secondary text

  • Pagination buttons comes with hard-coded aria-labels

  • Grouping introduces aria-label linking using ids to give meaning groups for screen readers. Groups are referenced by their group titles

  • Collapsible groups come with dynamic aria-label to denote whether group is collapsed or expanded

Note

Sorting not accessible

Card view

  • Card-view grid is tabbable

  • Card-view aria-label configurable in builder

  • Selectable checkboxes has aria-labels referencing cardTitle & cardSubtitle

  • Pagination buttons comes with hard-coded aria-labels

  • Grouping introduces accessible grouping. This allows screen readers to know what cards are a part of which group

  • Collapsible groups come with dynamic aria-label to denote whether group is collapsed or expanded. Group level and record level

Note

Sorting not accessible

Detail view

  • Detail-views are tabbable

  • Detail-view aria-label configurable in builder

Form fields

  • Form fields have unique ids formed by their recordId and fieldId

    • This allows for quicker accessibility configuration relating to List-view, queue-view, etc

  • Form fields have aria-labels configured in builder

    • Aria-labels are excluded for TextFields since TextFields are accessibile by default through material UI

      Note

      Picklist, multipicklist, and range slider are excluded from above due to limitations of material ui v3

  • Reference JSON configuration from Link accessibility