Accessibility

  • Updated

Accessibility

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

Example JSON
Copy
{
  "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
Copy
{
  "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

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 JSON
Copy
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
Copy
{
  "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
Copy
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

In This Article